.first {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    height: 8rem;
    margin: 0 auto;
    background: #1a1a1a url('../assets/images/services/first-img.webp') no-repeat center / cover;
    box-sizing: border-box;
    padding: 0 1.6rem;
    color: #FFF;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.first__content {
    flex: 1;
    min-width: 0;
}

.first__title {
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.44rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin: 0 0 0.24rem;
}

.first__desc {
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
}

/* ---------- 第一屏面包屑 ---------- */
.first__breadcrumb {
    position: absolute;
    left: 1.6rem;
    bottom: 0.30rem;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 0.10rem;
    margin: 0;
    padding: 0;
}

.first__breadcrumb a {
    color: #FFF;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.first__breadcrumb a:hover {
    opacity: 0.75;
}

.first__breadcrumb-sep {
    color: #FFF;
    opacity: 0.85;
}

.first__breadcrumb-current {
    color: #FFF;
}

.second {
    height: 6.43rem;
    padding: 0 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.second h1 {
    color: #333;
    font-family: Inter;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 0.1rem;
}


.second p {
    color: #999;
    font-family: Inter;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
    text-transform: capitalize;
}

.second img {
    width: 8.18rem;
    height: 4.83rem;
}

.third {
    height: 8.21rem;
    display: flex;
    align-items: center;
    position: relative;
}

.third__left {
    width: 8.21rem;
    height: 8.21rem;
    margin-right: 0.22rem;
}

.third__bottom {
    width: 6.09rem;
    height: 4.57em;
    position: absolute;
    right: 0;
    bottom: 0rem;
}

.third h1 {
    color: #333;
    font-family: Inter;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 0.14rem;
}

.third p {
    color: #666;
    font-family: Inter;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 0.2rem;
    width: 8.86rem;
}

.third__inner {
    padding-top: 0.5rem;
}

.third__inner-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.14rem;
    color: #333;
    font-family: Inter;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

.third__inner-item img {
    width: 0.19rem;
    height: 0.19rem;
    margin-right: 0.1rem;
}

/* ---------- 第二屏：入场动画（进入视口后错峰淡入上浮） ---------- */
html.js .second:not(.is-in-view)>div>h1,
html.js .second:not(.is-in-view)>div>p,
html.js .second:not(.is-in-view)>img {
    opacity: 0;
    transform: translateY(0.2rem);
}

.second.is-in-view>div>h1 {
    animation: servicesSecondFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.second.is-in-view>div>p {
    animation: servicesSecondFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

.second.is-in-view>img {
    animation: servicesSecondFadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.36s backwards;
}

@keyframes servicesSecondFadeUp {
    from {
        opacity: 0;
        transform: translateY(0.2rem);
    }

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

/* ---------- 第二屏：图片悬浮动效 ---------- */
.second>img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.second>img:hover {
    transform: translateY(-0.05rem);
    box-shadow: 0 0.12rem 0.28rem rgba(2, 52, 125, 0.14);
}

/* ---------- 第三屏：入场动画（进入视口后错峰淡入上浮） ---------- */
html.js .third:not(.is-in-view)>img.third__left,
html.js .third:not(.is-in-view)>img.third__bottom,
html.js .third:not(.is-in-view)>div>h1,
html.js .third:not(.is-in-view)>div>p,
html.js .third:not(.is-in-view) .third__inner-item {
    opacity: 0;
    transform: translateY(0.25rem);
}

.third.is-in-view>img.third__left {
    animation: servicesThirdFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.third.is-in-view>img.third__bottom {
    animation: servicesThirdFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

.third.is-in-view>div>h1 {
    animation: servicesThirdFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards;
}

.third.is-in-view>div>p:nth-of-type(1) {
    animation: servicesThirdFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

.third.is-in-view>div>p:nth-of-type(2) {
    animation: servicesThirdFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.42s backwards;
}

.third.is-in-view .third__inner-item:nth-child(1) {
    animation: servicesThirdFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.54s backwards;
}

.third.is-in-view .third__inner-item:nth-child(2) {
    animation: servicesThirdFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.62s backwards;
}

.third.is-in-view .third__inner-item:nth-child(3) {
    animation: servicesThirdFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards;
}

.third.is-in-view .third__inner-item:nth-child(4) {
    animation: servicesThirdFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.78s backwards;
}

.third.is-in-view .third__inner-item:nth-child(5) {
    animation: servicesThirdFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.86s backwards;
}

@keyframes servicesThirdFadeUp {
    from {
        opacity: 0;
        transform: translateY(0.25rem);
    }

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

/* ---------- 第四屏：Custom Supply Solutions ---------- */
.fourth {
    padding: 1rem 1.60rem;
}

.fourth__intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    gap: 0.4rem;
}

.fourth__intro h2 {
    margin: 0;
    color: #333;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 0.4rem;
    font-weight: 700;
    text-transform: capitalize;
    flex: 0 0 auto;
}

.fourth__intro p {
    margin: 0;
    color: #999;
    text-align: right;
    font-family: Inter, sans-serif;
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 150%;
    text-transform: capitalize;
    width: 8.3rem;
}

.fourth__list {
    display: flex;
    gap: 0.32rem;
}

.fourth__item {
    width: 3.76rem;
    height: 4.70rem;
    box-sizing: border-box;
    padding: 0.61rem 0.45rem;
    background: url('../assets/images/services/fourth-img1.webp') no-repeat center / cover;
    color: #333;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.fourth__item h3 {
    margin: 0;
    color: #02347D;
    font-family: "Source Han Sans SC", sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 150%;
    transition: color 0.35s ease;
    margin-bottom: 0.46rem;
}

.fourth__item p {
    margin: 0;
    color: #666;
    font-family: Inter, sans-serif;
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 150%;
    transition: color 0.35s ease;
}

.fourth__item:hover,
.fourth__item.is-active {
    background-image: url('../assets/images/services/fourth-img2.webp');
}

.fourth__item:hover h3,
.fourth__item:hover p,
.fourth__item.is-active h3,
.fourth__item.is-active p {
    color: #FFF;
}

/* ---------- 第四屏：入场动画（标题描述先入，卡片错峰淡入上浮） ---------- */
html.js .fourth:not(.is-in-view) .fourth__intro,
html.js .fourth:not(.is-in-view) .fourth__item {
    opacity: 0;
    transform: translateY(0.25rem);
}

.fourth.is-in-view .fourth__intro {
    animation: servicesFourthFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.fourth.is-in-view .fourth__item:nth-child(1) {
    animation: servicesFourthFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

.fourth.is-in-view .fourth__item:nth-child(2) {
    animation: servicesFourthFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.24s backwards;
}

.fourth.is-in-view .fourth__item:nth-child(3) {
    animation: servicesFourthFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.36s backwards;
}

.fourth.is-in-view .fourth__item:nth-child(4) {
    animation: servicesFourthFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.48s backwards;
}

@keyframes servicesFourthFadeUp {
    from {
        opacity: 0;
        transform: translateY(0.25rem);
    }

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

/* ============================================================
   H5 适配（data-mode="h5"，750 设计稿基准）
   ============================================================ */
/* ---------- 第一屏：Our Services 横幅 ---------- */
html[data-mode="h5"] .first {
    height: 4.4rem;
    padding: 0 0.3rem;
}

html[data-mode="h5"] .first__title {
    font-size: 0.4rem;
    margin-bottom: 0.16rem;
}

html[data-mode="h5"] .first__desc {
    font-size: 0.24rem;
}

html[data-mode="h5"] .first__breadcrumb {
    left: 0.3rem;
    bottom: 0.2rem;
    font-size: 0.22rem;
    gap: 0.08rem;
}

/* ---------- 第二屏：Full-Cycle Service ---------- */
html[data-mode="h5"] .second {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .second h1 {
    font-size: 0.36rem;
}

html[data-mode="h5"] .second p {
    font-size: 0.26rem;
}

/* PC 稿的强制换行在窄屏会退化成逐词断行，H5 下取消 */
html[data-mode="h5"] .second p br {
    display: none;
}

html[data-mode="h5"] .second > img {
    width: 100%;
    height: auto;
}

/* 触屏无 hover，取消悬浮动效避免点击后残留位移 */
html[data-mode="h5"] .second > img:hover {
    transform: none;
    box-shadow: none;
}

/* ---------- 第三屏：Dedicated Account Handling ---------- */
html[data-mode="h5"] .third {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .third__left {
    width: 100%;
    height: auto;
    max-height: 6rem;
    object-fit: cover;
    margin-right: 0;
}

/* 装饰性叠图在窄屏会遮挡正文，H5 下隐藏 */
html[data-mode="h5"] .third__bottom {
    display: none;
}

html[data-mode="h5"] .third h1 {
    font-size: 0.36rem;
}

html[data-mode="h5"] .third p {
    font-size: 0.26rem;
    width: auto;
}

html[data-mode="h5"] .third p br {
    display: none;
}

html[data-mode="h5"] .third__inner {
    padding-top: 0.1rem;
}

html[data-mode="h5"] .third__inner-item {
    align-items: flex-start;
    font-size: 0.24rem;
    margin-bottom: 0.16rem;
}

html[data-mode="h5"] .third__inner-item img {
    width: 0.28rem;
    height: 0.28rem;
    margin-right: 0.12rem;
    margin-top: 0.04rem;
    flex-shrink: 0;
}

/* ---------- 第四屏：Custom Supply Solutions ---------- */
html[data-mode="h5"] .fourth {
    padding: 0.6rem 0.3rem;
}

html[data-mode="h5"] .fourth__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .fourth__intro h2 {
    font-size: 0.36rem;
    text-align: left;
}

html[data-mode="h5"] .fourth__intro p {
    font-size: 0.26rem;
    text-align: left;
    width: auto;
}

html[data-mode="h5"] .fourth__intro p br {
    display: none;
}

html[data-mode="h5"] .fourth__list {
    flex-wrap: wrap;
    gap: 0.2rem;
}

html[data-mode="h5"] .fourth__item {
    width: calc(50% - 0.1rem);
    height: auto;
    min-height: 4.4rem;
    padding: 0.4rem 0.3rem;
}

html[data-mode="h5"] .fourth__item h3 {
    font-size: 0.4rem;
    margin-bottom: 0.2rem;
}

html[data-mode="h5"] .fourth__item p {
    font-size: 0.22rem;
}