/* 2026-07 interaction system: solid color surfaces, sticky headers and consistent linked-card behavior */
.brand img, .footer-logo {
    object-fit: contain;
    object-position: left center
}

.lang {
    display: flex;
    align-items: center;
    gap: 7px
}

.lang a, .lang span {
    color: #fff
}

.lang i {
    color: rgba(255, 255, 255, .45);
    font-style: normal
}

.lang a {
    transition: opacity .2s
}

.lang a:hover {
    opacity: .72
}

.qr-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.copyright a {
    color: inherit
}

.copyright a:hover {
    color: #fff
}

/* Header: only the home-at-top state blends into the hero. */
body[data-page="home"] .site-header:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(0, 31, 69, .9) 0%, rgba(0, 47, 99, .52) 72%, rgba(0, 54, 114, .08) 100%) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

.site-header.inner {
    position: sticky !important;
    top: 0 !important;
    inset: 0 0 auto !important;
    z-index: 50 !important;
    background: #003b7a !important;
    background-image: none !important;
    border-bottom: 1px solid transparent !important;
}

.site-header.is-scrolled {
    border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 10px 28px rgba(0, 27, 59, .22) !important;
}

.site-header.inner.is-scrolled {
    border-bottom-color: rgba(255, 255, 255, .18) !important
}

body[data-page="home"] .site-header.is-scrolled {
    background: #003b7a !important;
    background-image: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
}

/* Keep the qualification panel visible without allowing the zoomed hero image to leak. */
body[data-page="home"] .hero-bg {
    inset: 0 !important;
    transform: none !important;
    animation: none !important;
    clip-path: none !important;
}

.hero-slide-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #003b7a
}

.hero-bg-slide {
    opacity: 0 !important;
    transition: opacity .75s ease, transform 7s ease !important;
    will-change: opacity, transform
}

.hero-bg-slide.active {
    opacity: 1 !important;
    transform: scale(1.045) !important
}

.hero-copy-enter {
    animation: heroCopyEnter .48s ease both
}

@keyframes heroCopyEnter {
    from {
        opacity: 0;
        transform: translateY(12px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.hero-carousel-arrow {
    position: absolute;
    z-index: 7;
    top: 48%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 50%;
    background: rgba(0, 43, 92, .32);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 24, 52, .2);
    backdrop-filter: blur(5px);
    transition: background .2s, transform .2s, border-color .2s
}

.hero-carousel-arrow:hover {
    transform: translateY(-50%) scale(1.06);
    border-color: #fff;
    background: rgba(0, 66, 142, .82)
}

.hero-carousel-arrow:before {
    content: "";
    width: 11px;
    height: 11px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(2px, 1px) rotate(45deg)
}

.hero-carousel-next:before {
    transform: translate(-2px, 1px) rotate(225deg)
}

.hero-carousel-prev {
    left: 26px
}

.hero-carousel-next {
    right: 26px
}

.hero-carousel-dots {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 58px;
    display: flex;
    gap: 9px;
    transform: translateX(-50%)
}

.hero-carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .25s, background .25s
}

.hero-carousel-dots button.active {
    width: 28px;
    background: #fff
}

/* Large blue surfaces use clean solid colors; gradients remain only for image legibility. */
.stats, .gradient-band, .section-dark, .page-stat-band, .jobs-aside, .site-footer {
    background: #003b7a !important;
    background-image: none !important;
}

.side-nav a.active {
    background: #00428e !important;
    background-image: none !important
}

.promo-section {
    background: #f5f8fc !important;
    background-image: none !important
}

.trust-icon {
    background: #eef5fc !important;
    background-image: none !important
}

.board-label:before {
    background: #00428e !important;
    background-image: none !important
}

.promo-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.promo-actions .btn {
    min-width: 142px
}

/* A lift/scale affordance belongs only to a block that actually navigates. */
.link-card {
    position: relative;
    cursor: pointer;
    transform: translateZ(0);
    transform-origin: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

.link-card img {
    transition: transform .35s ease !important
}

.link-card:focus-visible {
    outline: 3px solid rgba(0, 66, 142, .28);
    outline-offset: 3px
}

@media (hover: hover) and (pointer: fine) {
    .link-card:hover {
        transform: translateY(-5px) scale(1.012) !important;
        border-color: #b8cde4 !important;
        box-shadow: 0 18px 38px rgba(14, 52, 91, .16) !important;
    }

    .link-card:hover img {
        transform: scale(1.035)
    }
}

.service-card:hover, .matrix-card:hover, .advantage-card:hover, .honor-card:hover, .career-value:hover {
    transform: none !important;
    box-shadow: 0 5px 18px rgba(22, 60, 99, .06) !important;
}

.case-list-card:hover {
    transform: none;
    box-shadow: 0 5px 18px rgba(22, 60, 99, .06)
}

/* One restrained color system: one surface blue, one brand blue and one neutral heading color. */
.btn-primary {
    background: #00428e !important
}

.btn-primary:hover {
    background: #00356f !important
}

.btn-outline {
    border-color: #00428e !important;
    color: #00428e !important
}

.text-link, .eyebrow, .tag {
    color: #00428e !important
}

.btn-outline.light {
    border-color: rgba(255, 255, 255, .76) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .05) !important
}

.hero .eyebrow, .page-hero .eyebrow, .gradient-band .eyebrow, .section-dark .eyebrow {
    color: #fff !important
}

.section-heading h2, .split-copy h2, .detail-two h2, .system-content h2, .product-detail-copy h2, .vr-context-card h2, .news-feature h2, .sitemap-card h2, .job-card summary h3, .career-value h3, .card h2, .card h3, .promo-copy h2, .office-heading h2, .system-comparison h2, .product-download h2, .faq-grid h3 {
    color: #153a62 !important
}

.gradient-band .section-heading h2, .gradient-band .section-heading h2 small, .gradient-band .section-heading p, .gradient-band .text-link, .section-dark .section-heading h2, .section-dark .section-heading p {
    color: #fff !important
}

.section-heading p, .split-copy p {
    color: #66788a
}

.card {
    border-color: #dbe5ef
}

.icon-box, .trust-icon {
    color: #00428e;
    background: #eef5fc !important;
    background-image: none !important
}

.support-card, .product-download {
    background: #f5f8fc !important;
    background-image: none !important
}

.side-nav a {
    color: #00428e !important
}

.feature b {
    color: #153a62 !important
}

.side-nav a.active {
    color: #fff !important
}

.industry-card.link-card, .case-card.link-card {
    isolation: isolate
}

.industry-card.link-card:focus-visible, .case-card.link-card:focus-visible {
    outline-color: rgba(0, 66, 142, .38)
}

/* Homepage rhythm: keep the two product rows visually separate and make cases browseable. */
.product-board .product-grid + .board-label {
    margin-top: 32px !important
}

.product-board .product-grid {
    margin-bottom: 0 !important
}

.case-carousel {
    position: relative
}

.case-carousel-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 5px 3px 24px;
    scrollbar-width: none
}

.case-carousel-track::-webkit-scrollbar {
    display: none
}

.case-carousel-track .case-card {
    flex: 0 0 calc((100% - 54px) / 4);
    min-width: 0;
    scroll-snap-align: start
}

.case-carousel-track .case-card[hidden] {
    display: none
}

.case-arrow {
    position: absolute;
    z-index: 6;
    top: 42%;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #dbe5ef;
    border-radius: 50%;
    background: #fff;
    color: #00428e;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(18, 58, 98, .14);
    transition: transform .2s, box-shadow .2s
}

.case-arrow:before {
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(2px, 1px) rotate(45deg)
}

.case-arrow-next:before {
    transform: translate(-2px, 1px) rotate(225deg)
}

.case-arrow:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 12px 30px rgba(18, 58, 98, .2)
}

.case-arrow-prev {
    left: -22px
}

.case-arrow-next {
    right: -22px
}

.case-carousel-more {
    text-align: right;
    margin-top: 2px
}

/* Compact inner-page introductions and clarify special content states. */
.page-hero p {
    max-width: 980px
}

.compact-listing-section {
    padding-top: 24px !important
}

.featured-news-badge {
    display: inline-flex;
    margin: 0 10px 12px 0;
    padding: 4px 10px;
    border-radius: 99px;
    background: #00428e;
    color: #fff;
    font-size: 11px;
    font-weight: 700
}

.news-feature .featured-news-badge + time {
    display: inline-block
}

/* Recruitment callout follows the clear image-overlay treatment used by Visit Open. */
.jobs-aside {
    background: linear-gradient(145deg, rgba(0, 59, 122, .96), rgba(0, 66, 142, .84)), url('https://qiniu.open-joist.com/web/open/img/4b7e9ff753ea46a79746a5b9d62a7f1a.jpg') center/cover no-repeat !important
}

.jobs-aside .eyebrow {
    color: rgba(255, 255, 255, .76) !important
}

.jobs-aside h2, .jobs-aside p, .jobs-aside b, .jobs-aside a {
    color: #fff !important
}

.jobs-aside .btn-white {
    background: #fff !important;
    color: #00428e !important;
    border-color: #fff !important
}

.office-heading {
    margin-top: 32px !important;
    margin-bottom: 18px !important
}

.office-card p {
    line-height: 1.8
}

.office-card p b {
    color: #153a62
}

.map-pin.wuxi {
    --x: 76%;
    --y: 60%
}

.overseas-partners {
    display: flex;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 16px 20px;
    border: 1px solid #dbe5ef;
    border-radius: 9px;
    background: #fff;
    color: #435a70
}

.overseas-partners > span {
    color: #153a62;
    font-weight: 800
}

.overseas-partners b {
    color: #294b6e;
    font-size: 12px
}

.overseas-partners small {
    margin-left: auto;
    color: #7b8ca0;
    font-size: 11px
}

/* One continuous careers statement replaces four unrelated floating cards. */

/* Service-process fidelity: numbered nodes, continuous direction and balanced cards. */
.service-process {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap: 18px;
    padding-top: 16px;
    counter-reset: service-step
}

.process-step {
    position: relative;
    z-index: 1;
    min-height: 190px;
    padding: 38px 16px 22px;
    text-align: center;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(18, 58, 98, .06)
}

.process-step:after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 92px;
    right: -14px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #8aaed3;
    border-right: 2px solid #8aaed3;
    transform: rotate(45deg)
}

.process-step:last-child:after {
    display: none
}

.process-number {
    position: absolute;
    left: 50%;
    top: -16px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    transform: translateX(-50%);
    border: 4px solid #f5f8fc;
    border-radius: 50%;
    background: #00428e;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    box-sizing: border-box
}

.process-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: #eef5fc;
    color: #00428e
}

.process-icon .icon {
    width: 31px;
    height: 31px
}

.process-step h3 {
    margin: 0 0 8px;
    color: #153a62;
    font-size: 16px
}

.process-step p {
    margin: 0;
    color: #66788a;
    font-size: 12px;
    line-height: 1.7
}

.process-step b {
    display: block;
    margin-top: 9px;
    color: #91a0b1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em
}

/* News detail keeps long-form reading calm and separates supporting content. */
.news-detail-hero {
    height: 360px !important
}

.news-detail-layout {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    gap: 34px;
    align-items: start
}

.news-article {
    min-width: 0;
    padding: 36px 42px;
    border: 1px solid #dbe5ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(18, 58, 98, .06)
}

.news-article-header {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #dbe5ef
}

.news-article-header h2 {
    margin: 12px 0 16px;
    color: #153a62;
    font-size: 32px;
    line-height: 1.45
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    color: #7b8ca0;
    font-size: 12px
}

.news-article > p {
    margin: 0 0 20px;
    color: #435a70;
    font-size: 15px;
    line-height: 2
}

.news-article .news-lead {
    padding: 20px 22px;
    border-left: 4px solid #00428e;
    background: #f5f8fc;
    color: #294b6e;
    font-weight: 600
}

.news-article h3 {
    margin: 30px 0 12px;
    color: #153a62;
    font-size: 22px
}

.news-cover, .news-inline-image {
    width: 100%;
    border-radius: 9px;
    object-fit: cover
}

.news-cover {
    height: 430px;
    margin: 2px 0 27px
}

.news-inline-image {
    height: 350px;
    margin: 7px 0 8px
}

.news-article blockquote {
    margin: 26px 0;
    padding: 22px 26px;
    border-radius: 8px;
    background: #003b7a;
    color: #fff;
    font-size: 16px;
    line-height: 1.9
}

.news-article-footer {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #dbe5ef;
    color: #7b8ca0;
    font-size: 12px
}

.news-article-footer a {
    color: #00428e;
    font-weight: 700
}

.news-detail-aside {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 18px
}

.news-aside-card, .news-contact-card {
    padding: 24px
}

.news-aside-card h3, .news-contact-card h3 {
    margin: 5px 0 16px;
    color: #153a62;
    font-size: 20px
}

.news-aside-card > a {
    display: grid;
    gap: 5px;
    padding: 15px 0;
    border-top: 1px solid #dbe5ef
}

.news-aside-card time {
    color: #7b8ca0;
    font-size: 11px
}

.news-aside-card b {
    color: #294b6e;
    font-size: 13px;
    line-height: 1.65
}

.news-contact-card {
    background: #f5f8fc
}

.news-contact-card p {
    color: #66788a;
    font-size: 13px;
    line-height: 1.75
}

.news-contact-card .btn {
    width: 100%
}

/* Official six-stage history: the title and stage remain distinct at desktop size. */
.timeline-six {
    grid-template-columns:repeat(6, 1fr) !important
}

.timeline-six .timeline-item {
    padding-inline: 12px
}

.timeline-six .timeline-item b {
    display: block;
    font-size: 17px;
    white-space: nowrap
}

.timeline-six .timeline-item strong {
    display: block;
    margin: 0 0 5px;
    color: #153a62;
    font-size: 15px
}

.timeline-six .timeline-item p {
    margin: 0
}

/* Product overview sidebar and scroll-spy. */
.side-nav {
    top: 112px !important;
    box-shadow: 0 10px 28px rgba(20, 55, 91, .08)
}

.side-nav a {
    position: relative;
    border-left: 4px solid transparent;
    transition: background .2s, color .2s, border-color .2s
}

.side-nav a.active {
    border-left-color: #8cc0f4;
    color: #fff !important
}

.side-nav a:focus-visible {
    outline: 3px solid rgba(0, 66, 142, .22);
    outline-offset: -3px
}

.system-row {
    scroll-margin-top: 112px
}

.system-row .btn[href] {
    cursor: pointer
}

/* Product information architecture: system -> child product -> product detail. */
.product-catalog-layout {
    grid-template-columns:280px minmax(0, 1fr) !important;
    gap: 32px !important;
    align-items: start
}

.product-sidebar {
    position: sticky;
    top: 108px;
    align-self: start;
    max-height: calc(100vh - 126px);
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin
}

.product-tree {
    position: static !important;
    top: auto !important;
    display: block !important;
    overflow: visible !important;
    box-shadow: 0 8px 24px rgba(18, 58, 98, .08) !important
}

.product-tree-group + .product-tree-group {
    border-top: 1px solid var(--line)
}

.product-tree-group summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    color: #153a62;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    background: #fff
}

.product-tree-group summary::-webkit-details-marker {
    display: none
}

.product-tree-group summary:after {
    content: "+";
    margin-left: auto;
    color: #00428e;
    font-size: 20px;
    font-weight: 400
}

.product-tree-group[open] summary {
    background: #f5f8fc;
    color: #00428e
}

.product-tree-group[open] summary:after {
    content: "−"
}

.product-tree-group summary .icon {
    width: 21px;
    height: 21px;
    color: #00428e;
    flex: none
}

.product-tree-group > div {
    padding: 5px 0 10px;
    background: #fff
}

.product-tree a {
    display: block !important;
    padding: 8px 16px 8px 47px !important;
    border: 0 !important;
    border-left: 3px solid transparent !important;
    color: #66788a !important;
    font-size: 12px;
    font-weight: 500
}

.product-tree a:hover {
    color: #00428e !important;
    background: #f5f8fc !important
}

.product-tree a.active {
    color: #00428e !important;
    background: #eef5fc !important;
    border-left-color: #00428e !important
}

.product-support-card {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #f5f8fc
}

.product-support-card h3 {
    margin: 0 0 8px;
    color: #153a62;
    font-size: 19px
}

.product-support-card > p {
    margin: 0 0 18px;
    color: #66788a;
    font-size: 12px
}

.support-contact-line {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-top: 1px solid #dbe5ef;
    color: #243b53
}

.support-contact-line .icon {
    width: 23px;
    height: 23px;
    color: #00428e;
    flex: none
}

.support-contact-line small {
    display: block;
    color: #66788a;
    font-size: 11px
}

.product-support-card .btn {
    width: 100%;
    margin-top: 15px
}

.product-catalog {
    display: grid;
    gap: 30px;
    min-width: 0
}

.product-system-group {
    scroll-margin-top: 112px;
    padding: 28px;
    border: 1px solid #dbe5ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(18, 58, 98, .05)
}

.product-system-heading {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #dbe5ef
}

.product-system-heading h2 {
    margin: 0;
    color: #153a62;
    font-size: 28px
}

.product-system-heading p {
    max-width: 720px;
    margin: 7px 0 0;
    color: #66788a
}

.product-system-heading > b {
    flex: none;
    color: #00428e;
    font-size: 13px
}

.product-item-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 16px
}

.product-item-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scroll-margin-top: 120px
}

.product-item-card img {
    width: 100%;
    height: 142px;
    object-fit: cover
}

.product-item-card .body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 17px
}

.product-item-card h3 {
    margin: 0 0 7px;
    font-size: 16px
}

.product-item-card p {
    margin: 0 0 14px;
    color: #66788a;
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden
}

.product-item-card .body > span {
    margin-top: auto;
    color: #00428e;
    font-size: 12px;
    font-weight: 700
}

/* A single product detail page is driven by the selected child-product URL. */
.product-back-link {
    display: inline-flex;
    margin-bottom: 18px;
    color: #00428e;
    font-weight: 700
}

.product-single-card {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 46px;
    align-items: start
}

.product-single-media {
    position: sticky;
    top: 112px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(18, 58, 98, .12)
}

.product-single-media img {
    width: 100%;
    height: 520px;
    object-fit: cover
}

.product-single-copy {
    padding: 18px 0
}

.product-single-copy h2 {
    margin: 0 0 14px;
    color: #153a62;
    font-size: 36px;
    line-height: 1.3
}

.product-lead {
    margin: 0 0 26px;
    color: #50677e;
    font-size: 16px
}

.product-benefit-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 25px
}

.product-benefit-grid > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    background: #f5f8fc;
    border-radius: 7px;
    color: #243b53
}

.product-benefit-grid .icon {
    width: 24px;
    height: 24px;
    color: #00428e;
    flex: none
}

.product-facts {
    margin: 0;
    border-top: 1px solid #dbe5ef
}

.product-facts > div {
    display: grid;
    grid-template-columns:100px 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #dbe5ef
}

.product-facts dt {
    color: #153a62;
    font-weight: 700
}

.product-facts dd {
    margin: 0;
    color: #66788a
}

.product-detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 26px
}

.related-product-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 18px
}

.related-product-card {
    overflow: hidden
}

.related-product-card img {
    width: 100%;
    height: 160px;
    object-fit: cover
}

.related-product-card > div {
    padding: 16px
}

.related-product-card h3 {
    margin: 0 0 8px;
    font-size: 16px
}

.related-product-card span {
    color: #00428e;
    font-size: 12px;
    font-weight: 700
}

/* Product detail page. */
.product-detail-nav {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    position: sticky;
    top: 98px;
    z-index: 12;
    box-shadow: 0 10px 28px rgba(20, 55, 91, .08)
}

.product-detail-nav a {
    flex: 1;
    min-width: 132px;
    padding: 10px 14px;
    text-align: center;
    border-radius: 7px;
    color: #00428e;
    font-weight: 700;
    white-space: nowrap
}

.product-detail-nav a:hover, .product-detail-nav a.active {
    background: #00428e;
    color: #fff
}

.product-detail-section {
    display: grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 38px;
    align-items: stretch;
    scroll-margin-top: 170px
}

.product-detail-section + .product-detail-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--line)
}

.product-detail-media {
    min-height: 320px;
    border-radius: 10px;
    overflow: hidden
}

.product-detail-media img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover
}

.product-detail-copy {
    padding: 24px 0
}

.product-detail-copy h2 {
    margin: 0 0 8px;
    color: #153a62;
    font-size: 29px
}

.product-detail-copy > p {
    color: var(--muted);
    margin: 0 0 20px
}

.product-detail-points {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 12px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none
}

.product-detail-points li {
    padding: 12px 14px;
    background: #f5f8fc;
    border-left: 3px solid #00428e;
    color: #243b53
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 18px
}

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

.spec-table th {
    width: 31%;
    background: #f5f8fc;
    color: #153a62
}

/* Central 720 Cloud VR gallery and reusable modal. */
.vr-intro {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 36px;
    align-items: end;
    margin-bottom: 28px
}

.vr-intro p {
    max-width: 780px;
    margin: 8px 0 0;
    color: var(--muted)
}

.vr-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 20px
}

.vr-card {
    overflow: hidden
}

.vr-card-poster {
    position: relative;
    height: 250px;
    overflow: hidden;
    background: #dce7f2
}

.vr-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease
}

.vr-card-poster:after {
    content: "360°";
    position: absolute;
    right: 16px;
    top: 16px;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #00428e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0, 28, 62, .26)
}

#project, #factory, #showroom {
    scroll-margin-top: 112px
}

.vr-card .body {
    padding: 20px
}

.vr-card h2, .vr-card h3 {
    margin: 0 0 7px;
    color: #153a62
}

.vr-card p {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 13px
}

.vr-card .btn {
    width: 100%
}

.vr-context-card {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(280px, .72fr);
    min-height: 310px;
    overflow: hidden
}

.vr-context-card img {
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover
}

.vr-context-card .body {
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.vr-context-card h2 {
    font-size: 30px;
    margin: 0 0 10px;
    color: #153a62
}

.vr-context-card p {
    color: var(--muted)
}

.vr-modal[hidden] {
    display: none
}

.vr-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2, 22, 46, .82)
}

.vr-dialog {
    position: relative;
    width: min(1180px, 100%);
    height: min(760px, 88vh);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .34)
}

.vr-dialog iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #071b32
}

.vr-close {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #123b68;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2)
}

.vr-fallback {
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 32px;
    background: #f5f8fc
}

.vr-fallback .icon {
    width: 54px;
    height: 54px;
    color: #00428e
}

.vr-fallback h2 {
    margin: 14px 0 8px;
    color: #153a62
}

.vr-fallback p {
    max-width: 600px;
    margin: 0;
    color: var(--muted)
}

body.vr-open {
    overflow: hidden
}

@media (max-width: 900px) {
    .site-header.inner {
        top: 0 !important
    }

    .hero-carousel-arrow {
        top: auto;
        bottom: 108px;
        width: 42px;
        height: 42px;
        transform: none
    }

    .hero-carousel-arrow:hover {
        transform: scale(1.05)
    }

    .hero-carousel-prev {
        left: auto;
        right: 62px
    }

    .hero-carousel-next {
        right: 10px
    }

    .hero-carousel-dots {
        left: 18px;
        bottom: 124px;
        transform: none
    }

    .side-nav {
        top: auto !important
    }

    .system-row {
        scroll-margin-top: 92px
    }

    .product-detail-nav {
        top: 82px
    }

    .product-detail-section, .vr-context-card {
        grid-template-columns:1fr
    }

    .product-detail-media img {
        min-height: 260px
    }

    .vr-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .vr-context-card img {
        min-height: 260px;
        height: 260px
    }

    .timeline-six {
        grid-template-columns:1fr !important
    }

    .timeline-six .timeline-item {
        padding-left: 40px;
        text-align: left
    }

    .timeline-six .timeline-item b {
        font-size: 17px
    }

    .case-carousel-track .case-card {
        flex-basis: calc((100% - 18px) / 2)
    }

    .case-arrow-prev {
        left: -8px
    }

    .case-arrow-next {
        right: -8px
    }

    .product-catalog-layout {
        grid-template-columns:1fr !important
    }

    .product-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0
    }

    .product-item-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .product-single-card {
        grid-template-columns:1fr
    }

    .product-single-media {
        position: static
    }

    .product-single-media img {
        height: 380px
    }

    .related-product-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 600px) {
    .hero-carousel-arrow {
        width: 38px;
        height: 38px;
        background: rgba(0, 43, 92, .46)
    }

    .hero-carousel-arrow:before {
        width: 9px;
        height: 9px
    }

    .hero-carousel-dots {
        bottom: 124px
    }

    .promo-actions {
        display: grid
    }

    .product-detail-nav {
        top: 72px;
        margin-inline: -12px;
        border-radius: 0
    }

    .product-detail-section {
        gap: 18px
    }

    .product-detail-copy {
        padding: 0
    }

    .product-detail-copy h2 {
        font-size: 24px
    }

    .product-detail-points {
        grid-template-columns:1fr
    }

    .vr-intro {
        grid-template-columns:1fr
    }

    .vr-grid {
        grid-template-columns:1fr
    }

    .vr-card-poster {
        height: 220px
    }

    .vr-context-card .body {
        padding: 24px
    }

    .vr-context-card h2 {
        font-size: 25px
    }

    .vr-dialog {
        height: 82vh
    }

    .vr-modal {
        padding: 12px
    }

    .product-board .product-grid + .board-label {
        margin-top: 26px !important
    }

    .case-carousel-track .case-card {
        flex-basis: 88%
    }

    .case-arrow {
        width: 38px;
        height: 38px;
        font-size: 0
    }

    .case-arrow-prev {
        left: -4px
    }

    .case-arrow-next {
        right: -4px
    }

    .product-system-group {
        padding: 20px
    }

    .product-system-heading {
        display: block
    }

    .product-system-heading > b {
        display: block;
        margin-top: 8px
    }

    .product-item-grid, .related-product-grid {
        grid-template-columns:1fr
    }

    .product-item-card img {
        height: 190px
    }

    .product-single-media img {
        height: 280px
    }

    .product-single-copy h2 {
        font-size: 28px
    }

    .product-benefit-grid {
        grid-template-columns:1fr
    }

    .product-facts > div {
        grid-template-columns:1fr;
        gap: 4px
    }

    .product-detail-actions {
        display: grid
    }
}

/* Company network, official profile metrics and recruitment application. */
.about-metrics {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    margin-top: 30px;
    border: 1px solid #dbe5ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(18, 58, 98, .06)
}

.about-metrics > div {
    padding: 22px;
    text-align: center;
    border-right: 1px solid #dbe5ef
}

.about-metrics > div:last-child {
    border-right: 0
}

.about-metrics b {
    display: block;
    color: #00428e;
    font-size: 28px;
    line-height: 1.2
}

.about-metrics span {
    display: block;
    margin-top: 6px;
    color: #66788a;
    font-size: 12px
}

.office-grid {
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important
}

.office-card {
    padding: 20px !important
}

.office-title {
    align-items: center !important
}

.office-title .flag {
    flex: 0 0 auto;
    width: 40px;
    height: 27px;
    object-fit: cover;
    border: 1px solid rgba(21, 58, 98, .14);
    border-radius: 3px;
    box-shadow: 0 3px 10px rgba(18, 58, 98, .12)
}

.office-title h3 {
    font-size: 15px !important
}

.office-title b {
    min-height: 0 !important;
    font-size: 11px !important;
    overflow-wrap: anywhere
}

.office-details {
    margin: 0
}

.office-details > div {
    display: grid;
    grid-template-columns:42px 1fr;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid #edf2f7;
    font-size: 12px
}

.office-details dt {
    color: #7b8ca0
}

.office-details dd {
    margin: 0;
    color: #435a70;
    overflow-wrap: anywhere
}

.office-details a {
    color: #00428e
}

.partner-card {
    display: flex;
    flex-direction: column
}

.partner-note {
    margin: auto 0 0 !important;
    color: #66788a !important;
    font-size: 12px !important;
    line-height: 1.75
}

.partner-note span {
    display: inline-flex;
    margin: 0 8px 6px 0;
    padding: 3px 8px;
    border-radius: 99px;
    background: #eef5fc;
    color: #00428e;
    font-size: 11px;
    font-weight: 700
}

.domestic-partners {
    margin-top: 42px
}

.domestic-heading {
    margin-bottom: 20px !important
}

.domestic-partner-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 16px
}

.domestic-partner-card {
    position: relative;
    padding: 24px 26px
}

.domestic-partner-card > span {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 99px;
    background: #eef5fc;
    color: #00428e;
    font-size: 11px;
    font-weight: 700
}

.domestic-partner-card h3 {
    margin: 12px 0 8px;
    font-size: 18px !important
}

.domestic-partner-card p {
    margin: 0;
    color: #66788a;
    font-size: 13px;
    line-height: 1.8
}

.vr-actions {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px
}

.vr-actions .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 12px
}

.vr-fallback .btn {
    margin-top: 22px
}

.vr-fallback [hidden] {
    display: none
}

.jobs-content {
    min-width: 0
}

.job-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px
}

.job-filter .tab {
    padding: 9px 18px;
    border: 1px solid #dbe5ef;
    border-radius: 99px;
    background: #fff;
    color: #435a70;
    font-size: 13px;
    cursor: pointer
}

.job-filter .tab.active {
    border-color: #00428e;
    background: #00428e;
    color: #fff
}

.job-card[hidden] {
    display: none
}

.recruit-contact {
    margin: 20px 0
}

.recruit-contact > div {
    display: grid;
    grid-template-columns:58px 1fr;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.recruit-contact dt {
    color: rgba(255, 255, 255, .64);
    font-size: 12px
}

.recruit-contact dd {
    margin: 0;
    color: #fff;
    font-size: 13px
}

.job-body .text-link {
    display: inline-flex;
    margin-top: 6px
}

.application-layout {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 330px;
    gap: 34px;
    align-items: start
}

.application-form {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 30px
}

.application-form .full {
    grid-column: 1/-1
}

.field select {
    width: 100%;
    border: 1px solid #dbe5ef;
    border-radius: 7px;
    padding: 12px;
    background: #fff;
    color: #243b53;
    outline: 0
}

.field select:focus {
    border-color: #00428e;
    box-shadow: 0 0 0 3px rgba(0, 66, 142, .08)
}

.field > span {
    color: #294b6e;
    font-size: 13px;
    font-weight: 700
}

.field small {
    color: #7b8ca0;
    font-size: 11px
}

.resume-field input {
    padding: 10px;
    background: #f5f8fc
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #66788a;
    font-size: 12px
}

.consent input {
    margin-top: 5px
}

.application-actions {
    display: flex;
    gap: 12px
}

.form-message {
    display: none;
    margin: 0;
    padding: 14px 16px;
    border-radius: 7px;
    background: #eef5fc;
    color: #294b6e;
    font-size: 13px
}

.form-message.success {
    display: block
}

.form-message a {
    color: #00428e;
    font-weight: 700
}

.application-aside {
    position: sticky;
    top: 108px;
    display: grid;
    gap: 18px
}

.application-aside .card, .application-tip {
    padding: 26px
}

.application-aside h2 {
    margin: 0 0 18px
}

.application-aside dl {
    margin: 0
}

.application-aside dl > div {
    padding: 11px 0;
    border-top: 1px solid #dbe5ef
}

.application-aside dt {
    color: #7b8ca0;
    font-size: 11px
}

.application-aside dd {
    margin: 3px 0 0;
    color: #294b6e;
    font-size: 13px;
    overflow-wrap: anywhere
}

.application-aside a {
    color: #00428e
}

.application-tip {
    border-radius: 10px;
    background: #f5f8fc
}

.application-tip h3 {
    margin: 0 0 8px;
    color: #153a62
}

.application-tip p {
    color: #66788a;
    font-size: 13px
}

@media (max-width: 1100px) {
    .office-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important
    }

    .about-metrics {
        grid-template-columns:repeat(3, 1fr)
    }

    .about-metrics > div:nth-child(3) {
        border-right: 0
    }

    .application-layout {
        grid-template-columns:1fr
    }

    .application-aside {
        position: static;
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 700px) {
    .about-metrics, .domestic-partner-grid, .application-form, .application-aside {
        grid-template-columns:1fr
    }

    .about-metrics > div {
        border-right: 0;
        border-bottom: 1px solid #dbe5ef
    }

    .about-metrics > div:last-child {
        border-bottom: 0
    }

    .office-grid {
        grid-template-columns:1fr !important
    }

    .application-form {
        padding: 22px 18px
    }

    .application-form .full {
        grid-column: auto
    }

    .application-actions, .vr-actions {
        display: grid
    }

    .application-actions .btn {
        width: 100%
    }
}

@media (max-width: 1100px) {
    .service-process {
        grid-template-columns:repeat(3, minmax(0, 1fr));
        row-gap: 34px
    }

    .process-step:nth-child(3):after {
        display: none
    }

    .news-detail-layout {
        grid-template-columns:1fr
    }

    .news-detail-aside {
        position: static;
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 600px) {
    .service-process {
        grid-template-columns:1fr;
        gap: 28px;
        padding-inline: 8px
    }

    .process-step {
        min-height: 0;
        padding: 33px 22px 22px
    }

    .process-step:after, .process-step:nth-child(3):after {
        display: block;
        top: auto;
        right: 50%;
        bottom: -18px;
        transform: translateX(50%) rotate(135deg)
    }

    .process-step:last-child:after {
        display: none
    }

    .news-detail-hero {
        height: 310px !important
    }

    .news-article {
        padding: 25px 20px
    }

    .news-article-header h2 {
        font-size: 25px
    }

    .news-article > p {
        font-size: 14px;
        line-height: 1.9
    }

    .news-cover {
        height: 240px
    }

    .news-inline-image {
        height: 220px
    }

    .news-detail-aside {
        grid-template-columns:1fr
    }

    .news-article-footer {
        display: grid
    }

    .news-article blockquote {
        padding: 18px 20px;
        font-size: 14px
    }
}

/* 2026-07-21 visual refinement: clearer banners, exact controls and richer brand content. */
body[data-page="home"] .hero:before {
    background: linear-gradient(96deg, rgba(0, 29, 66, .78) 0%, rgba(0, 50, 106, .57) 38%, rgba(0, 66, 142, .24) 64%, rgba(0, 45, 95, .02) 86%), linear-gradient(180deg, rgba(0, 21, 48, .04), rgba(0, 37, 81, .22)) !important;
}

body[data-page="home"] .hero:after {
    opacity: .5
}

.page-hero:before {
    background: linear-gradient(90deg, rgba(0, 35, 77, .70) 0%, rgba(0, 66, 142, .38) 48%, rgba(0, 35, 77, .02) 84%), linear-gradient(180deg, rgba(0, 23, 52, .02), rgba(0, 38, 82, .22)) !important;
}

.stats .stat > .icon {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 9px
}

.stats .stat > span {
    display: block;
    min-height: 21px;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.45
}

.stats .stat > b {
    margin-top: 3px;
    font-size: 31px;
    white-space: nowrap
}

.stats .stat:nth-child(5) > b {
    font-size: 27px
}

.case-arrow:before {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%) rotate(45deg)
}

.case-arrow-next:before {
    transform: translate(-50%, -50%) rotate(225deg)
}

.home-global-section {
    position: relative;
    overflow: hidden;
    background: #f5f8fc !important
}

.home-global-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://qiniu.open-joist.com/web/open/img/world-map.svg') right center/72% auto no-repeat;
    opacity: .13;
    pointer-events: none
}

.home-global-section > .container {
    position: relative;
    z-index: 1
}

.home-global-section .map-card {
    height: 300px !important;
    background-color: rgba(255, 255, 255, .82);
    background-image: url('https://qiniu.open-joist.com/web/open/img/world-map.svg');
    background-size: 96% auto;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 14px 34px rgba(18, 58, 98, .08)
}

.home-about-section {
    position: relative;
    background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(247, 250, 253, .88) 48%, rgba(242, 247, 252, .74) 100%), url('https://qiniu.open-joist.com/web/open/img/5ad09630f05e470eac55c4e5782f4121.jpg') center/cover no-repeat
}

.home-about-section:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 54%, rgba(0, 66, 142, .035));
    pointer-events: none
}

.home-about-section > .container {
    position: relative;
    z-index: 1
}

.product-system-overview {
    padding: 30px 0 0;
    background: #fff
}

.product-system-cover-grid {
    display: grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap: 12px
}

.product-system-cover {
    position: relative;
    height: 142px;
    overflow: hidden;
    border: 1px solid #dbe5ef;
    border-radius: 8px;
    background: #eef4fa;
    box-shadow: 0 6px 18px rgba(18, 58, 98, .06)
}

.product-system-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease
}

.product-system-cover:after {
    content: "";
    position: absolute;
    inset: 38% 0 0;
    background: linear-gradient(180deg, transparent, rgba(0, 35, 77, .86))
}

.product-system-cover span {
    position: absolute;
    z-index: 1;
    left: 15px;
    right: 15px;
    bottom: 12px;
    color: #fff
}

.product-system-cover b, .product-system-cover small {
    display: block
}

.product-system-cover b {
    font-size: 16px
}

.product-system-cover small {
    margin-top: 1px;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    letter-spacing: .08em
}

.product-system-cover:hover img {
    transform: scale(1.045)
}

.culture-layout {
    display: grid;
    grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 28px;
    align-items: stretch
}

.culture-visual {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    padding: 24px;
    background: linear-gradient(145deg, #fff, #f7f2e7)
}

.culture-visual img {
    width: 100%;
    height: 390px;
    object-fit: contain
}

.culture-visual figcaption {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(159, 112, 31, .18)
}

.culture-visual figcaption b {
    color: #6f461f;
    font-size: 18px
}

.culture-visual figcaption span {
    color: #876b4f;
    font-size: 13px
}

.culture-values {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px
}

.culture-value {
    display: grid;
    grid-template-columns:44px 1fr;
    gap: 14px;
    align-items: start;
    padding: 25px
}

.culture-value > span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eef5fc;
    color: #00428e;
    font-size: 12px;
    font-weight: 800
}

.culture-value small {
    color: #7b8ca0;
    font-size: 10px;
    letter-spacing: .12em
}

.culture-value h3 {
    margin: 4px 0 8px;
    color: #153a62 !important;
    font-size: 18px
}

.culture-value p {
    margin: 0;
    color: #435a70;
    font-size: 14px
}

.culture-value-wide {
    grid-column: 1/-1
}

.linkedin-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: 100%;
    margin-top: 13px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    transition: background .2s, border-color .2s
}

.linkedin-link:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .08)
}

.linkedin-link > span, .linkedin-mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #0a66c2;
    color: #fff;
    font: 800 14px/1 Arial, sans-serif
}

.linkedin-link em {
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 700
}

.linkedin-link > b {
    margin-left: auto;
    color: rgba(255, 255, 255, .7)
}

.qr-grid.has-linkedin {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

.linkedin-card {
    display: flex;
    min-height: 164px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px
}

.linkedin-card .linkedin-mark {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    font-size: 38px
}

.linkedin-card b {
    color: #153a62
}

.linkedin-card small {
    color: #66788a;
    font-size: 11px
}

@media (max-width: 1000px) {
    .product-system-cover-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .culture-layout {
        grid-template-columns:1fr
    }

    .culture-visual img {
        height: 340px
    }

    .qr-grid.has-linkedin {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 600px) {
    .stats .stat > b, .stats .stat:nth-child(5) > b {
        font-size: 24px
    }

    .stats .stat > span {
        font-size: 12px
    }

    .home-global-section:before {
        background-size: cover
    }

    .home-global-section .map-card {
        height: 285px !important;
        background-size: cover
    }

    .product-system-overview {
        padding-top: 20px
    }

    .product-system-cover-grid {
        grid-template-columns:1fr 1fr
    }

    .product-system-cover {
        height: 125px
    }

    .product-system-cover:last-child {
        grid-column: 1/-1
    }

    .culture-visual {
        padding: 16px
    }

    .culture-visual img {
        height: 260px
    }

    .culture-visual figcaption {
        display: grid;
        gap: 3px;
        text-align: center
    }

    .culture-values, .qr-grid.has-linkedin {
        grid-template-columns:1fr
    }

    .culture-value-wide {
        grid-column: auto
    }
}

/* 2026-07-21 finishing pass: smoother header, clearer banners and content-specific media. */
.site-header {
    transition: background-color .48s ease, border-color .32s ease, box-shadow .32s ease !important
}

body[data-page="home"] .site-header {
    background-image: linear-gradient(180deg, rgba(0, 31, 69, .72) 0%, rgba(0, 47, 99, .28) 74%, rgba(0, 54, 114, 0) 100%) !important
}

body[data-page="home"] .site-header:not(.is-scrolled) {
    background-color: rgba(0, 59, 122, 0) !important;
    background-image: linear-gradient(180deg, rgba(0, 31, 69, .72) 0%, rgba(0, 47, 99, .28) 74%, rgba(0, 54, 114, 0) 100%) !important
}

body[data-page="home"] .site-header.is-scrolled {
    background-color: #003b7a !important;
    background-image: linear-gradient(180deg, rgba(0, 31, 69, .72) 0%, rgba(0, 47, 99, .28) 74%, rgba(0, 54, 114, 0) 100%) !important
}

.hero-bg-slide {
    transition: opacity 1s ease, transform 8s ease !important
}

body[data-page="home"] .hero:before {
    background: linear-gradient(96deg, rgba(0, 29, 66, .58) 0%, rgba(0, 50, 106, .34) 40%, rgba(0, 66, 142, .12) 66%, rgba(0, 45, 95, 0) 87%), linear-gradient(180deg, rgba(0, 21, 48, .01), rgba(0, 37, 81, .13)) !important
}

body[data-page="home"] .hero:after {
    opacity: .28
}

.page-hero:before {
    background: linear-gradient(90deg, rgba(0, 35, 77, .52) 0%, rgba(0, 66, 142, .24) 50%, rgba(0, 35, 77, .01) 85%), linear-gradient(180deg, rgba(0, 23, 52, 0), rgba(0, 38, 82, .12)) !important
}

.hero-copy, .page-hero > .container {
    text-shadow: 0 2px 18px rgba(0, 25, 55, .32)
}

body[data-page="home"] .product-board {
    padding: 27px !important
}

body[data-page="home"] .product-board .product-grid {
    gap: 18px
}

body[data-page="home"] .product-board .image-card img {
    height: 168px !important
}

body[data-page="home"] .product-board .product-grid + .board-label {
    margin-top: 43px !important;
    padding-top: 25px;
    border-top: 1px solid #dbe5ef
}

.home-global-section:before {
    background-image: url('https://qiniu.open-joist.com/web/open/img/world-map-wikimedia.svg') !important;
    background-position: right center !important;
    background-size: 74% auto !important;
    opacity: .18 !important
}

.map-card:not(.china-map), .home-global-section .map-card {
    background-image: url('https://qiniu.open-joist.com/web/open/img/world-map-wikimedia.svg') !important;
    background-size: 92% auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important
}

.culture-layout {
    grid-template-columns:minmax(0, 1.08fr) minmax(430px, .92fr);
    gap: 34px;
    align-items: center
}

.culture-visual {
    padding: 0;
    background: #fff;
    border-color: #dbe5ef;
    box-shadow: 0 12px 34px rgba(18, 58, 98, .08)
}

.culture-visual img {
    height: 450px;
    padding: 30px;
    background: #f7f9fc;
    object-fit: contain
}

.culture-visual figcaption {
    justify-content: flex-start;
    margin: 0;
    padding: 20px 25px;
    border-top: 1px solid #dbe5ef
}

.culture-visual figcaption b {
    color: #153a62;
    font-size: 20px
}

.culture-visual figcaption span {
    color: #66788a;
    font-size: 13px
}

.culture-values {
    display: grid;
    grid-template-columns:1fr;
    gap: 0;
    overflow: hidden;
    padding: 8px 24px;
    border: 1px solid #dbe5ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(18, 58, 98, .08)
}

.culture-value, .culture-value-wide {
    grid-column: auto;
    grid-template-columns:58px 1fr;
    gap: 18px;
    align-items: center;
    padding: 21px 0;
    border: 0 !important;
    border-bottom: 1px solid #dbe5ef !important;
    border-radius: 0 !important;
    box-shadow: none !important
}

.culture-value:last-child {
    border-bottom: 0 !important
}

.culture-value > span {
    width: 48px;
    height: 34px;
    border-radius: 6px;
    background: #eef5fc;
    font-size: 12px;
    letter-spacing: .06em
}

.culture-value small {
    font-size: 10px
}

.culture-value h3 {
    margin: 2px 0 4px !important;
    font-size: 18px
}

.culture-value p {
    font-size: 14px
}

.domestic-partner-card {
    overflow: hidden;
    padding: 0 !important
}

.domestic-partner-image {
    display: block;
    width: 100%;
    height: 178px;
    object-fit: cover
}

.domestic-partner-body {
    padding: 21px 24px 24px
}

.domestic-partner-card h3 {
    margin: 12px 0 8px !important
}

@media (max-width: 1000px) {
    .culture-layout {
        grid-template-columns:1fr
    }

    .culture-visual img {
        height: 380px
    }
}

@media (max-width: 700px) {
    body[data-page="home"] .product-board {
        padding: 20px !important
    }

    body[data-page="home"] .product-board .image-card img {
        height: 150px !important
    }

    body[data-page="home"] .product-board .product-grid + .board-label {
        margin-top: 32px !important;
        padding-top: 22px
    }

    .home-global-section:before {
        background-size: cover !important;
        opacity: .12 !important
    }

    .map-card:not(.china-map), .home-global-section .map-card {
        background-size: cover !important
    }

    .culture-visual img {
        height: 290px;
        padding: 18px
    }

    .culture-visual figcaption {
        display: grid;
        gap: 3px;
        padding: 17px;
        text-align: left
    }

    .culture-values {
        padding: 5px 18px
    }

    .culture-value {
        grid-template-columns:48px 1fr;
        gap: 12px;
        padding: 18px 0
    }

    .domestic-partner-image {
        height: 165px
    }
}

/* 2026-07-22 interaction and responsive refinement. */
.product-item-card.is-anchor-target {
    border-color: #0d66bd !important;
    box-shadow: 0 0 0 3px rgba(0, 66, 142, .13), 0 18px 38px rgba(18, 58, 98, .15) !important;
    transform: translateY(-3px);
}

.promo-media:after {
    pointer-events: none
}

.promo-video {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: contain;
    background: #001e41
}

.promo-media:has(.promo-video) {
    min-height: 360px
}

.promo-media:has(.promo-video):after {
    display: none
}

.promo-media:has(.promo-video) .promo-duration {
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .55)
}

.china-map {
    background-color: #f7fafd !important;
    background-image: url('https://qiniu.open-joist.com/web/open/img/china-map.svg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 88% auto !important;
    box-shadow: inset 0 0 60px rgba(0, 66, 142, .025), 0 14px 34px rgba(18, 58, 98, .08);
}

.map-pin-china:before {
    border-color: #d9363e;
    background: #fff
}

.map-pin-china span {
    color: #b51f29
}

body.visit-open {
    overflow: hidden
}

.visit-modal[hidden] {
    display: none
}

.visit-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 24, 54, .68);
    backdrop-filter: blur(6px)
}

.visit-dialog {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0, 24, 54, .34)
}

.visit-dialog > header {
    position: relative;
    padding: 28px 30px 23px;
    border-bottom: 1px solid #dbe5ef;
    background: linear-gradient(135deg, #f8fbff, #eef5fc)
}

.visit-dialog > header h2 {
    margin: 0 0 5px;
    color: #153a62;
    font-size: 28px
}

.visit-dialog > header p {
    max-width: 590px;
    margin: 0;
    color: #66788a
}

.visit-close {
    position: absolute;
    right: 18px;
    top: 17px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #153a62;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(18, 58, 98, .12)
}

.visit-form {
    padding: 26px 30px 30px
}

.visit-form-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 17px 20px
}

.visit-form .field.full {
    grid-column: 1/-1
}

.visit-form select {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #d7e1ec;
    border-radius: 6px;
    background: #fff;
    color: #243b53;
    font: inherit
}

.visit-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px
}

.visit-message {
    flex: 1;
    margin: 0;
    color: #087443;
    font-size: 13px;
    font-weight: 700
}

.visit-form-actions .btn {
    min-width: 120px
}

@media (max-width: 600px) {
    body[data-page="home"] .hero {
        height: 735px !important
    }

    body[data-page="home"] .hero-content {
        align-items: flex-start !important;
        padding-top: 130px !important
    }

    body[data-page="home"] .hero-copy {
        padding-bottom: 0 !important
    }

    body[data-page="home"] .hero-actions {
        gap: 10px
    }

    body[data-page="home"] .hero-trust {
        bottom: 0 !important;
        padding: 12px 18px !important;
        transform: translate(-50%, 52%) !important
    }

    body[data-page="home"] .hero-after {
        padding-top: 225px !important
    }

    body[data-page="home"] .hero-carousel-dots {
        bottom: 142px !important
    }

    .promo-video, .promo-media:has(.promo-video) {
        height: 230px;
        min-height: 230px
    }

    .visit-modal {
        padding: 10px
    }

    .visit-dialog {
        max-height: calc(100vh - 20px);
        border-radius: 10px
    }

    .visit-dialog > header {
        padding: 23px 21px 18px
    }

    .visit-dialog > header h2 {
        padding-right: 34px;
        font-size: 24px
    }

    .visit-dialog > header p {
        font-size: 13px
    }

    .visit-form {
        padding: 20px
    }

    .visit-form-grid {
        grid-template-columns:1fr;
        gap: 14px
    }

    .visit-form .field.full {
        grid-column: auto
    }

    .visit-form-actions {
        display: grid;
        grid-template-columns:1fr 1fr
    }

    .visit-message {
        grid-column: 1/-1
    }

    .visit-form-actions .btn {
        width: 100%
    }

    .china-map {
        background-size: 110% auto !important
    }
}

/* 2026-07-22 follow-up: unified floating headers, map alignment and modal forms. */
.site-header.inner:not(.is-scrolled) {
    position: fixed !important;
    inset: 0 0 auto !important;
    background-color: transparent !important;
    background-image: linear-gradient(180deg, rgba(0, 31, 69, .9) 0%, rgba(0, 47, 99, .48) 72%, rgba(0, 54, 114, .06) 100%) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.site-header.inner.is-scrolled {
    position: fixed !important;
    inset: 0 0 auto !important;
    background-color: #003b7a !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 10px 28px rgba(0, 27, 59, .22) !important;
}

.map-card:not(.china-map) .map-pin {
    left: calc(var(--x) + 3%) !important;
    top: calc(var(--y) - 5%) !important;
}

body[data-page="contact"] #global > .container > .map-card {
    height: 430px !important
}

.china-map {
    background-color: #fff !important;
    background-image: url('https://qiniu.open-joist.com/web/open/img/9b876ab961654f108a9f10d22ef4befa.png') !important;
    background-size: 115% auto !important;
    background-position: center !important;
}

.culture-visual img {
    padding: 0 !important
}

body[data-page="news"] main > .section,
body[data-page="careers"] main > .section {
    background: #fff !important
}

body.career-open {
    overflow: hidden
}

.career-dialog {
    width: min(820px, 100%)
}

.career-form .resume-field input {
    height: auto;
    padding: 11px;
    background: #f5f8fc
}

.career-form .field small {
    display: block;
    margin-top: 5px;
    color: #7b8ca0;
    font-size: 11px
}

.career-form .consent {
    grid-column: 1/-1
}

.career-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px
}

.career-form-actions .career-message {
    flex: 1;
    margin: 0;
    color: #087443;
    font-size: 13px;
    font-weight: 700
}

.career-form-actions .career-message a {
    color: #00428e;
    text-decoration: underline
}

.career-form-actions .btn {
    min-width: 130px
}

.faq-page-list {
    display: grid;
    gap: 14px
}

.faq-page-group {
    padding: 25px 28px
}

.faq-page-group > h2 {
    margin: 0 0 16px;
    color: #153a62;
    font-size: 21px
}

.faq-page-group details {
    border-top: 1px solid #dbe5ef
}

.faq-page-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 0;
    cursor: pointer;
    color: #294b6e;
    font-weight: 700;
    list-style: none
}

.faq-page-group summary::-webkit-details-marker {
    display: none
}

.faq-page-group summary:after {
    content: "+";
    color: #00428e;
    font-size: 23px;
    font-weight: 400
}

.faq-page-group details[open] summary:after {
    content: "−"
}

.faq-page-group details p {
    margin: -4px 0 18px;
    color: #66788a
}

@media (max-width: 600px) {
    body[data-page="home"] .hero {
        height: 680px !important
    }

    body[data-page="home"] .hero-content {
        padding-top: 138px !important
    }

    body[data-page="home"] .hero-trust {
        transform: translate(-50%, 50%) !important
    }

    body[data-page="home"] .hero-after {
        padding-top: 190px !important
    }

    body[data-page="home"] .hero-carousel-dots {
        bottom: 136px !important
    }

    body[data-page="contact"] #global > .container > .map-card, .china-map {
        height: 330px !important
    }

    .career-form .consent {
        grid-column: auto
    }

    .career-form-actions {
        display: grid;
        grid-template-columns:1fr 1fr
    }

    .career-form-actions .career-message {
        grid-column: 1/-1
    }

    .career-form-actions .btn {
        width: 100%
    }

    .faq-page-group {
        padding: 20px
    }
}