/* ==================================================
   ONEHARBOR 证书轮播
   电脑端显示3张，中间第2张放大
   去除图片外部白框、边框和多余背景
   ================================================== */


/* 整个证书轮播区域 */
.certificate-coverflow {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0 35px;
    overflow: hidden;
    box-sizing: border-box;
}


/* 轮播主体
   上下留出空间，防止中间图片放大后被裁切 */
.certificate-coverflow .swiper {
    width: 100%;
    padding: 50px 65px 70px !important;
    overflow: hidden !important;
    box-sizing: border-box;
}


/* 所有证书保持垂直居中 */
.certificate-coverflow .swiper-wrapper {
    align-items: center !important;
}


/* 所有证书默认状态 */
.certificate-coverflow .swiper-slide {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin-top: 0;
    margin-bottom: 0;

    transform: scale(0.86) !important;
    transform-origin: center center;

    opacity: 0.62 !important;
    filter: brightness(0.93);

    z-index: 1;

    transition:
        transform 0.55s ease,
        opacity 0.55s ease,
        filter 0.55s ease !important;
}


/* 左侧第1张 */
.certificate-coverflow .swiper-slide-active {
    transform: scale(0.86) !important;
    opacity: 0.62 !important;
    filter: brightness(0.93) !important;
    z-index: 1;
}


/* 中间第2张：放大 */
.certificate-coverflow
.swiper-slide-active + .swiper-slide {
    transform: scale(1.12) !important;
    opacity: 1 !important;
    filter: brightness(1) !important;
    z-index: 10;
}


/* 右侧第3张 */
.certificate-coverflow
.swiper-slide-active + .swiper-slide + .swiper-slide {
    transform: scale(0.86) !important;
    opacity: 0.62 !important;
    filter: brightness(0.93) !important;
    z-index: 1;
}


/* 清除Slide内部所有常见容器的白色背景和边框 */
.certificate-coverflow .swiper-slide > div,
.certificate-coverflow .swiper-slide > div > div,
.certificate-coverflow .swiper-slide .wp-block-group,
.certificate-coverflow .swiper-slide .wp-block-cover,
.certificate-coverflow .swiper-slide .wp-block-image {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    padding: 0 !important;
}


/* 图片区块 */
.certificate-coverflow figure.wp-block-image {
    width: 100%;
    height: auto;

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

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* 所有证书图片 */
.certificate-coverflow figure.wp-block-image img {
    display: block;

    width: auto !important;
    max-width: 100% !important;
    height: 470px !important;

    object-fit: contain;

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

    background: transparent !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;

    /* 只保留轻微悬浮阴影，不再显示外框 */
    box-shadow: 0 14px 35px rgba(15, 28, 45, 0.13) !important;

    transition:
        box-shadow 0.55s ease,
        transform 0.55s ease !important;
}


/* 中间主证书阴影稍微明显 */
.certificate-coverflow
.swiper-slide-active + .swiper-slide
figure.wp-block-image img {
    border: none !important;
    outline: none !important;
    box-shadow: 0 24px 55px rgba(15, 28, 45, 0.24) !important;
}


/* 左右箭头 */
.certificate-coverflow .swiper-button-prev,
.certificate-coverflow .swiper-button-next {
    width: 54px !important;
    height: 54px !important;

    margin-top: -27px !important;

    border: none !important;
    border-radius: 50% !important;

    background: rgba(7, 26, 43, 0.84) !important;
    color: #ffffff !important;

    box-shadow: 0 8px 24px rgba(7, 26, 43, 0.18) !important;

    z-index: 30 !important;
}


/* 左箭头位置 */
.certificate-coverflow .swiper-button-prev {
    left: 12px !important;
}


/* 右箭头位置 */
.certificate-coverflow .swiper-button-next {
    right: 12px !important;
}


/* 箭头图标 */
.certificate-coverflow .swiper-button-prev::after,
.certificate-coverflow .swiper-button-next::after {
    font-size: 20px !important;
    font-weight: 700 !important;
}


/* 鼠标经过箭头 */
.certificate-coverflow .swiper-button-prev:hover,
.certificate-coverflow .swiper-button-next:hover {
    background: rgba(7, 91, 167, 0.96) !important;
}


/* 圆点导航位置 */
.certificate-coverflow .swiper-pagination {
    bottom: 12px !important;
}


/* 普通圆点 */
.certificate-coverflow .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;

    background: #7f8b95 !important;
    opacity: 0.4 !important;
}


/* 当前圆点 */
.certificate-coverflow .swiper-pagination-bullet-active {
    width: 22px !important;
    border-radius: 10px !important;

    background: #075ba7 !important;
    opacity: 1 !important;
}


/* ==================================================
   平板端
   显示3张，中间第2张放大
   ================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .certificate-coverflow {
        padding: 15px 0 30px;
    }

    .certificate-coverflow .swiper {
        padding: 60px 48px 70px !important;
    }

    .certificate-coverflow .swiper-slide,
    .certificate-coverflow .swiper-slide-active {
        transform: scale(0.84) !important;
        opacity: 0.62 !important;
        filter: brightness(0.93) !important;
        z-index: 1;
    }

    .certificate-coverflow
    .swiper-slide-active + .swiper-slide {
        transform: scale(1.08) !important;
        opacity: 1 !important;
        filter: none !important;
        z-index: 10;
    }

    .certificate-coverflow
    .swiper-slide-active + .swiper-slide + .swiper-slide {
        transform: scale(0.84) !important;
        opacity: 0.62 !important;
        filter: brightness(0.93) !important;
        z-index: 1;
    }

    .certificate-coverflow figure.wp-block-image img {
        height: 400px !important;
    }

    .certificate-coverflow .swiper-button-prev,
    .certificate-coverflow .swiper-button-next {
        width: 46px !important;
        height: 46px !important;
        margin-top: -23px !important;
    }

    .certificate-coverflow .swiper-button-prev::after,
    .certificate-coverflow .swiper-button-next::after {
        font-size: 17px !important;
    }
}


/* ==================================================
   手机端
   每次显示1张，不使用缩放差异
   ================================================== */

@media screen and (max-width: 767px) {

    .certificate-coverflow {
        padding: 5px 0 25px;
    }

    .certificate-coverflow .swiper {
        padding: 35px 45px 55px !important;
        overflow: hidden !important;
    }

    .certificate-coverflow .swiper-slide,
    .certificate-coverflow .swiper-slide-active,
    .certificate-coverflow
    .swiper-slide-active + .swiper-slide,
    .certificate-coverflow
    .swiper-slide-active + .swiper-slide + .swiper-slide {
        transform: scale(1) !important;
        opacity: 1 !important;
        filter: none !important;
        z-index: 1;
    }

    .certificate-coverflow figure.wp-block-image img {
        width: auto !important;
        max-width: 100% !important;
        height: 410px !important;

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

        border: none !important;
        background: transparent !important;

        box-shadow: 0 14px 35px rgba(15, 28, 45, 0.14) !important;
    }

    .certificate-coverflow .swiper-button-prev,
    .certificate-coverflow .swiper-button-next {
        width: 42px !important;
        height: 42px !important;
        margin-top: -21px !important;
    }

    .certificate-coverflow .swiper-button-prev {
        left: 0 !important;
    }

    .certificate-coverflow .swiper-button-next {
        right: 0 !important;
    }

    .certificate-coverflow .swiper-button-prev::after,
    .certificate-coverflow .swiper-button-next::after {
        font-size: 16px !important;
    }
}


/* =========================================
   ONEHARBOR 四个细节卡片区域
   限制整体宽度并水平居中
   ========================================= */

.oneharbor-feature-grid {
    /* 整体宽度 */
    width: calc(100% - 48px) !important;
    max-width: 1280px !important;

    /* 水平居中 */
    margin-left: auto !important;
    margin-right: auto !important;

    /* 清除全宽区块可能产生的负外边距 */
    left: auto !important;
    right: auto !important;

    /* 内部布局 */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;

    padding: 0 !important;
    box-sizing: border-box !important;
}


/* Spectra Container 内部可能还有一层宽度限制 */
.oneharbor-feature-grid > .uagb-container-inner-blocks-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}


/* 每一个直接子卡片 */
.oneharbor-feature-grid > *,
.oneharbor-feature-grid > .uagb-container-inner-blocks-wrap > * {
    min-width: 0;
    box-sizing: border-box;
}


/* 平板端 */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .oneharbor-feature-grid {
        width: calc(100% - 40px) !important;
        max-width: 920px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }
}


/* 手机端 */
@media screen and (max-width: 767px) {

    .oneharbor-feature-grid {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}


/* =========================================
   ONEHARBOR 卡片背景悬停放大
   ========================================= */

.oneharbor-zoom-card {
    position: relative;
    overflow: hidden !important;

    /* 背景图片基础设置 */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% auto !important;

    /* 保持圆角范围内裁切 */
    border-radius: 20px;

    transition:
        background-size 0.6s cubic-bezier(0.2, 0.65, 0.3, 1),
        box-shadow 0.4s ease !important;

    will-change: background-size;
}

/* 鼠标悬停：背景轻微放大 */
.oneharbor-zoom-card:hover {
    background-size: 106% auto !important;

    box-shadow:
        0 18px 45px rgba(15, 28, 45, 0.16);
}

/* 手机和平板不启用悬停效果 */
@media (hover: none) {
    .oneharbor-zoom-card,
    .oneharbor-zoom-card:hover {
        background-size: 100% auto !important;
        box-shadow: none;
    }
}


/* 去掉鼠标点击页眉菜单后出现的虚线框 */
.main-header-menu .menu-link:focus:not(:focus-visible),
.ast-builder-menu-1 .menu-item > .menu-link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}


/* =========================================
   直接添加在视频区块上的圆角与居中样式
   CSS类名：rounded-video
   ========================================= */

figure.wp-block-video.rounded-video,
.wp-block-video.rounded-video {
    display: block !important;

    /* 控制视频整体宽度 */
    width: calc(100% - 48px) !important;
    max-width: 1280px !important;

    /* 水平居中 */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;

    /* 清除可能导致偏移的属性 */
    float: none !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
}

/* 视频本体铺满区块 */
figure.wp-block-video.rounded-video video,
.wp-block-video.rounded-video video {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

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

    border: none !important;
    border-radius: inherit !important;
    object-fit: cover;
}

/* 平板 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    figure.wp-block-video.rounded-video,
    .wp-block-video.rounded-video {
        width: calc(100% - 40px) !important;
        max-width: 1000px !important;
        border-radius: 16px !important;
    }
}

/* 手机 */
@media screen and (max-width: 767px) {
    figure.wp-block-video.rounded-video,
    .wp-block-video.rounded-video {
        width: calc(100% - 28px) !important;
        max-width: none !important;
        border-radius: 12px !important;
    }
}


/* =========================================
   ONEHARBOR 3D模型 + 产品参数布局
   ========================================= */

/* 最外层父Container */
.product-spec-layout {
    width: calc(100% - 48px) !important;
    max-width: 1280px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    /* 两个子Container之间的距离 */
    gap: 56px !important;

    padding: 60px 0 !important;
    box-sizing: border-box !important;
}

/* Spectra可能生成的内部包装层 */
.product-spec-layout > .uagb-container-inner-blocks-wrap {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 56px !important;

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

/* 左侧3D模型区域 */
.product-model-panel {
    width: auto !important;
    max-width: none !important;

    flex: 0 1 48% !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
}

/* 右侧参数表区域 */
.product-spec-panel {
    width: auto !important;
    max-width: none !important;

    flex: 0 1 52% !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
}

/* 让左右内部内容填满各自Container */
.product-model-panel > *,
.product-spec-panel > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 参数表或简码输出区域 */
.product-spec-panel table,
.product-spec-panel .wp-block-shortcode,
.product-spec-panel .wp-table-builder-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* 平板 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .product-spec-layout,
    .product-spec-layout > .uagb-container-inner-blocks-wrap {
        gap: 28px !important;
    }

    .product-model-panel {
        flex-basis: 45% !important;
    }

    .product-spec-panel {
        flex-basis: 55% !important;
    }
}

/* 手机端改成上下排列 */
@media screen and (max-width: 767px) {
    .product-spec-layout {
        width: calc(100% - 28px) !important;
        padding: 40px 0 !important;
    }

    .product-spec-layout,
    .product-spec-layout > .uagb-container-inner-blocks-wrap {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .product-model-panel,
    .product-spec-panel {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}


.background-image-90 {
    background-size: 90% 90% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ==================================================
   ONEHARBOR 横向五图拼接布局

   电脑端父容器最大尺寸：1440 × 720px
   比例：2:1
   图片间距：24px
   左侧大图：约696 × 720px
   右侧四图：每张约348 × 348px
   已取消鼠标悬停放大效果
   ================================================== */


/* =========================
   1. 最外层父 Container
   CSS类：feature-mosaic
   ========================= */

.feature-mosaic {
    width: calc(100% - 48px) !important;
    max-width: 1280px !important;

    /* 保持1440:720，即2:1横向比例 */
    aspect-ratio: 2 / 1 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    background: transparent !important;
    overflow: visible !important;

    box-sizing: border-box !important;
}


/* =========================
   2. Spectra父Container内部包装层
   ========================= */

.feature-mosaic > .uagb-container-inner-blocks-wrap {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    display: grid !important;

    /*
     * 总宽度1440px，减去两个24px间距后为1392px
     * 2fr + 1fr + 1fr
     * 左侧约696px
     * 右侧每列约348px
     */
    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    /*
     * 总高度720px，减去一个24px间距后为696px
     * 每行约348px
     */
    grid-template-rows:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 24px !important;

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

    align-items: stretch !important;
    justify-items: stretch !important;

    box-sizing: border-box !important;
}


/* =========================
   3. 五个子Container公共样式
   ========================= */

.feature-mosaic .mosaic-main,
.feature-mosaic .mosaic-top-left,
.feature-mosaic .mosaic-top-right,
.feature-mosaic .mosaic-bottom-left,
.feature-mosaic .mosaic-bottom-right {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

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

    margin: 0 !important;
    padding: 24px !important;

    overflow: hidden !important;

    border: none !important;
    border-radius: 18px !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;

    box-shadow: none !important;

    /* 完全取消悬停放大和过渡动画 */
    transform: none !important;
    transition: none !important;

    box-sizing: border-box !important;
}


/* =========================
   4. 左侧大图
   跨两行
   ========================= */

.feature-mosaic .mosaic-main {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
}


/* =========================
   5. 右上左图
   ========================= */

.feature-mosaic .mosaic-top-left {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
}


/* =========================
   6. 右上右图
   ========================= */

.feature-mosaic .mosaic-top-right {
    grid-column: 3 / 4 !important;
    grid-row: 1 / 2 !important;
}


/* =========================
   7. 右下左图
   ========================= */

.feature-mosaic .mosaic-bottom-left {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
}


/* =========================
   8. 右下右图
   ========================= */

.feature-mosaic .mosaic-bottom-right {
    grid-column: 3 / 4 !important;
    grid-row: 2 / 3 !important;
}


/* =========================
   9. 清除子Container内部包装限制
   ========================= */

.feature-mosaic .mosaic-main > .uagb-container-inner-blocks-wrap,
.feature-mosaic .mosaic-top-left > .uagb-container-inner-blocks-wrap,
.feature-mosaic .mosaic-top-right > .uagb-container-inner-blocks-wrap,
.feature-mosaic .mosaic-bottom-left > .uagb-container-inner-blocks-wrap,
.feature-mosaic .mosaic-bottom-right > .uagb-container-inner-blocks-wrap {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

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

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* =========================
   10. 鼠标悬停时保持不变
   ========================= */

.feature-mosaic .mosaic-main:hover,
.feature-mosaic .mosaic-top-left:hover,
.feature-mosaic .mosaic-top-right:hover,
.feature-mosaic .mosaic-bottom-left:hover,
.feature-mosaic .mosaic-bottom-right:hover {
    background-size: cover !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ==================================================
   平板端
   主图占满上方，四张小图两列排列
   ================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .feature-mosaic {
        width: calc(100% - 40px) !important;
        max-width: 920px !important;

        /* 平板不再强制2:1 */
        aspect-ratio: auto !important;
    }

    .feature-mosaic > .uagb-container-inner-blocks-wrap {
        height: auto !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows: auto !important;

        gap: 20px !important;
    }

    .feature-mosaic .mosaic-main {
        grid-column: 1 / 3 !important;
        grid-row: auto !important;

        min-height: 480px !important;
    }

    .feature-mosaic .mosaic-top-left,
    .feature-mosaic .mosaic-top-right,
    .feature-mosaic .mosaic-bottom-left,
    .feature-mosaic .mosaic-bottom-right {
        grid-column: auto !important;
        grid-row: auto !important;

        min-height: 300px !important;
    }

    .feature-mosaic .mosaic-main,
    .feature-mosaic .mosaic-top-left,
    .feature-mosaic .mosaic-top-right,
    .feature-mosaic .mosaic-bottom-left,
    .feature-mosaic .mosaic-bottom-right {
        padding: 20px !important;
        border-radius: 16px !important;
    }
}


/* ==================================================
   手机端
   五张图片改为单列
   ================================================== */

@media screen and (max-width: 767px) {

    .feature-mosaic {
        width: calc(100% - 28px) !important;
        max-width: none !important;

        aspect-ratio: auto !important;
    }

    .feature-mosaic > .uagb-container-inner-blocks-wrap {
        height: auto !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;

        gap: 16px !important;
    }

    .feature-mosaic .mosaic-main,
    .feature-mosaic .mosaic-top-left,
    .feature-mosaic .mosaic-top-right,
    .feature-mosaic .mosaic-bottom-left,
    .feature-mosaic .mosaic-bottom-right {
        grid-column: 1 !important;
        grid-row: auto !important;

        height: auto !important;
        min-height: 260px !important;

        padding: 18px !important;
        border-radius: 14px !important;
    }

    .feature-mosaic .mosaic-main {
        min-height: 380px !important;
    }
}


/* ==================================================
   ONEHARBOR 产品对比表

   原始表格宽度：1440px
   显示目标宽度：1280px
   缩放比例：1280 ÷ 1440 = 0.8889

   整张表格、文字、行高和间距一起等比例缩小
   ================================================== */


/* 表格板块最外层 Container */
.oneharbor-table-fit {
    display: block !important;

    width: calc(100% - 40px) !important;
    max-width: 1280px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;

    padding: 0 !important;

    float: none !important;
    clear: both !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    overflow: visible !important;
    box-sizing: border-box !important;
}


/* Spectra 自动生成的内部包装层 */
.oneharbor-table-fit > .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

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

    overflow: visible !important;
    box-sizing: border-box !important;
}


/* 简码区块：
   先恢复到原始1440px，再整体缩小为1280px */
.oneharbor-table-fit .wp-block-shortcode {
    display: block !important;

    width: 1440px !important;
    min-width: 1440px !important;
    max-width: none !important;

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

    float: none !important;
    flex: 0 0 1440px !important;

    /*
     * 1440 × 0.8889 ≈ 1280
     * zoom 会同时缩小宽度、高度、文字和间距
     */
    zoom: 0.8889;

    transform-origin: top center !important;
    box-sizing: border-box !important;
}


/* 表格插件产生的包装层 */
.oneharbor-table-fit .wp-block-shortcode > div,
.oneharbor-table-fit .wptb-table-container,
.oneharbor-table-fit .wp-table-builder-wrapper,
.oneharbor-table-fit .wptb-table-container-matrix {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

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

    float: none !important;
    box-sizing: border-box !important;
}


/* 表格本体 */
.oneharbor-table-fit table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

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

    float: none !important;

    border-collapse: collapse;
    table-layout: auto !important;
    box-sizing: border-box !important;
}


/* 清除可能导致靠右的对齐设置 */
.oneharbor-table-fit .alignleft,
.oneharbor-table-fit .alignright,
.oneharbor-table-fit .alignwide,
.oneharbor-table-fit .alignfull {
    float: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    left: auto !important;
    right: auto !important;

    transform: none !important;
}


/* ==================================================
   平板端

   表格仍按比例缩小，保持所有列同时显示
   1440 × 0.64 ≈ 922px
   ================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .oneharbor-table-fit {
        width: calc(100% - 32px) !important;
        max-width: 922px !important;
    }

    .oneharbor-table-fit .wp-block-shortcode {
        width: 1440px !important;
        min-width: 1440px !important;
        flex-basis: 1440px !important;

        zoom: 0.64;
    }
}


/* ==================================================
   手机端

   五列表格缩得太小会看不清，因此改为横向滑动
   ================================================== */

@media screen and (max-width: 767px) {

    .oneharbor-table-fit {
        display: block !important;

        width: calc(100% - 24px) !important;
        max-width: none !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
    }

    .oneharbor-table-fit > .uagb-container-inner-blocks-wrap {
        display: block !important;

        width: max-content !important;
        max-width: none !important;
    }

    .oneharbor-table-fit .wp-block-shortcode {
        width: 1100px !important;
        min-width: 1100px !important;
        flex: none !important;

        /*
         * 手机端不再过度缩小文字
         * 使用横向滑动查看全部列
         */
        zoom: 1;
    }
}


/* =========================================
   表格与 View more 按钮改为上下排列
   ========================================= */

/* 父容器内部：表格在上，按钮在下 */
.oneharbor-table-fit > .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

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

/* 表格排在第一位 */
.oneharbor-table-fit .wp-block-shortcode {
    order: 1 !important;
}

/* HTML按钮区块排在第二位，并水平居中 */
.oneharbor-table-fit .wp-block-html {
    order: 2 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 26px 0 0 !important;
    padding: 0 !important;
}

/* View more按钮 */
.oneharbor-table-fit .oh-table-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: auto !important;
    min-width: 130px !important;
    max-width: none !important;
    height: 42px !important;

    margin: 0 auto !important;
    padding: 0 22px !important;

    border: none !important;
    border-radius: 999px !important;

    background-color: #ee0979 !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;

    cursor: pointer !important;
    box-shadow: none !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease !important;
}

/* 按钮中的文字保持白色加粗 */
.oneharbor-table-fit .oh-table-toggle span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 鼠标悬停效果 */
.oneharbor-table-fit .oh-table-toggle:hover {
    background-color: #ee0979 !important;
    color: #ffffff !important;

    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(238, 9, 121, 0.25) !important;
}

/* 箭头 */
.oneharbor-table-fit .oh-toggle-icon {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    transition: transform 0.25s ease !important;
}

/* 展开后箭头旋转 */
.oneharbor-table-fit.is-table-expanded .oh-toggle-icon {
    transform: rotate(180deg) !important;
}

/* 手机端按钮稍小 */
@media screen and (max-width: 767px) {
    .oneharbor-table-fit .wp-block-html {
        margin-top: 20px !important;
    }

    .oneharbor-table-fit .oh-table-toggle {
        min-width: 118px !important;
        height: 38px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }
}



/* =========================================
   background-image-90 手机端优化
   完整显示横向背景图，不裁切、不变形
   ========================================= */

@media screen and (max-width: 767px) {

    .background-image-90 {
        /* 手机端左右留出12px */
        width: calc(100% - 24px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        /* 按横向图片比例自动计算高度 */
        aspect-ratio: 16 / 9 !important;

        /* 清除电脑端可能设置的固定高度 */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 0 !important;

        /* 显示整张图片，不进行裁切 */
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* 清除 Spectra 内部包装层可能设置的高度 */
    .background-image-90 >
    .uagb-container-inner-blocks-wrap {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

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


/* ==================================================
   ONEHARBOR 手机端产品对比表

   只让表格内部左右滑动
   不拉宽整个页面

   第一列：100px
   后面4列：每列190px
   表格总宽度：860px
   ================================================== */

@media screen and (max-width: 767px) {

    /* =========================================
       1. 最外层父 Container
       ========================================= */

    .oneharbor-table-fit {
        display: block !important;

        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        /* 防止表格把整个页面撑宽 */
        overflow: hidden !important;

        float: none !important;
        box-sizing: border-box !important;
    }


    /* =========================================
       2. Spectra 内部包装层
       ========================================= */

    .oneharbor-table-fit >
    .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

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

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* =========================================
       3. 简码区块
       保持手机屏幕宽度
       ========================================= */

    .oneharbor-table-fit .wp-block-shortcode {
        display: block !important;
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

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

        overflow: hidden !important;

        zoom: 1 !important;
        transform: none !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       4. 只有这一层允许左右滑动
       ========================================= */

    .oneharbor-table-fit .oh-mobile-table-scroll {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 0 10px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;

        scrollbar-width: thin;
        scrollbar-color: #ee0979 #eeeeee;

        box-sizing: border-box !important;
    }


    /* Chrome、Edge、Safari 滚动条 */
    .oneharbor-table-fit
    .oh-mobile-table-scroll::-webkit-scrollbar {
        height: 7px;
    }

    .oneharbor-table-fit
    .oh-mobile-table-scroll::-webkit-scrollbar-track {
        background: #eeeeee;
        border-radius: 20px;
    }

    .oneharbor-table-fit
    .oh-mobile-table-scroll::-webkit-scrollbar-thumb {
        background: #ee0979;
        border-radius: 20px;
    }


    /* =========================================
       5. 表格本体
       100 + 190 × 4 = 860px
       ========================================= */

    .oneharbor-table-fit
    .oh-mobile-table-scroll table {
        width: 860px !important;
        min-width: 860px !important;
        max-width: 860px !important;

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

        table-layout: fixed !important;
        border-collapse: collapse !important;

        font-size: 12px !important;
        line-height: 1.35 !important;

        zoom: 1 !important;
        transform: none !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       6. 强制修改 colgroup 的列宽
       防止 WP Table Builder 内联宽度覆盖
       ========================================= */

    .oneharbor-table-fit
    .oh-mobile-table-scroll table colgroup col:first-child {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }

    .oneharbor-table-fit
    .oh-mobile-table-scroll table colgroup col:nth-child(2),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table colgroup col:nth-child(3),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table colgroup col:nth-child(4),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table colgroup col:nth-child(5) {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;
    }


    /* =========================================
       7. 第一列参数名称
       强制缩小到100px
       ========================================= */

    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > th:first-child,
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > td:first-child {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;

        padding: 9px 7px !important;

        position: sticky !important;
        left: 0 !important;
        z-index: 5 !important;

        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;

        /* 长标题允许换行 */
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        vertical-align: middle !important;
        box-sizing: border-box !important;
    }


    /* =========================================
       8. 后面四个产品列
       ========================================= */

    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > th:nth-child(2),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > td:nth-child(2),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > th:nth-child(3),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > td:nth-child(3),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > th:nth-child(4),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > td:nth-child(4),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > th:nth-child(5),
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr > td:nth-child(5) {
        width: 190px !important;
        min-width: 190px !important;
        max-width: 190px !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       9. 普通数据单元格
       ========================================= */

    .oneharbor-table-fit
    .oh-mobile-table-scroll table td {
        padding: 10px 11px !important;

        font-size: 12px !important;
        line-height: 1.3 !important;

        vertical-align: middle !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       10. 表头产品名称
       允许自然换成两行
       ========================================= */

    .oneharbor-table-fit
    .oh-mobile-table-scroll table th {
        padding: 10px 11px !important;

        font-size: 12px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;

        vertical-align: middle !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;

        box-sizing: border-box !important;
    }


    /* 第一列表头继续使用100px */
    .oneharbor-table-fit
    .oh-mobile-table-scroll table th:first-child {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }


    /* =========================================
       11. 降低每一行高度
       ========================================= */

    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr {
        height: auto !important;
        min-height: 0 !important;
    }


    /* =========================================
       12. 固定第一列的条纹背景
       ========================================= */

    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr:nth-child(odd)
    > th:first-child,
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr:nth-child(odd)
    > td:first-child {
        background-color: #eeeeee !important;
    }

    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr:nth-child(even)
    > th:first-child,
    .oneharbor-table-fit
    .oh-mobile-table-scroll table tr:nth-child(even)
    > td:first-child {
        background-color: #ffffff !important;
    }


    /* =========================================
       13. View More 按钮区域
       保持在表格下方
       ========================================= */

    .oneharbor-table-fit .wp-block-html {
        display: flex !important;
        order: 2 !important;

        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 16px 0 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }


    /* =========================================
       14. View More 按钮
       ========================================= */

    .oneharbor-table-fit .oh-table-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        width: auto !important;
        min-width: 112px !important;
        max-width: none !important;
        height: 36px !important;

        margin: 0 auto !important;
        padding: 0 16px !important;

        border: none !important;
        border-radius: 999px !important;

        background-color: #ee0979 !important;
        color: #ffffff !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        box-shadow: none !important;
    }

    .oneharbor-table-fit .oh-table-toggle span,
    .oneharbor-table-fit .oh-toggle-icon {
        color: #ffffff !important;
        font-weight: 700 !important;
    }
}


/* 整体双栏布局 */
.contact-form-layout {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 50px 24px !important;
    box-sizing: border-box !important;
}

/* 右侧信息栏 */
.contact-side-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* 右侧卡片 */
.contact-info-card {
    background: #f5f5f5 !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-sizing: border-box !important;
}

/* 右侧卡片标题 */
.contact-info-card h3,
.contact-info-card h4 {
    margin: 0 0 14px !important;
    font-size: 28px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #111 !important;
}

/* 右侧卡片正文 */
.contact-info-card p {
    margin: 0 0 14px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #333 !important;
}

/* 右侧链接 */
.contact-info-card a {
    color: #ee0979 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.contact-info-card a:hover {
    opacity: 0.8;
}

/* 手机端改成上下排列 */
@media screen and (max-width: 767px) {
    .contact-form-layout {
        padding: 30px 16px !important;
    }

    .contact-info-card {
        padding: 20px !important;
        border-radius: 12px !important;
    }

    .contact-info-card h3,
    .contact-info-card h4 {
        font-size: 22px !important;
    }

    .contact-info-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}


/* =========================================
   ONEHARBOR Astra 粘性页眉
   ========================================= */

/* 固定整个 Astra 页眉 */
#masthead,
.site-header {
    position: sticky !important;
    top: 0;
    z-index: 99999 !important;

    background-color: #ffffff !important;


}

/* 登录 WordPress 时避开顶部黑色管理工具栏 */
body.admin-bar #masthead,
body.admin-bar .site-header {
    top: 32px;
}

/* 手机端 WordPress 管理工具栏高度不同 */
@media screen and (max-width: 782px) {
    body.admin-bar #masthead,
    body.admin-bar .site-header {
        top: 46px;
    }
}


/* ==================================================
   ONEHARBOR 首页三产品展示区域

   电脑端：
   第一行：一张主图
   第二行：两张等宽并排图

   手机端：
   三张卡片纵向排列
   高度控制在一屏以内
   ================================================== */


/* ==================================================
   1. 最外层布局
   同时兼容 Spectra 有无内部包装层
   ================================================== */

.home-product-showcase,
.home-product-showcase >
.uagb-container-inner-blocks-wrap {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    column-gap: 10px !important;
    row-gap: 10px !important;

    align-items: stretch !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}


/* ==================================================
   2. 主图占满第一行两列
   ================================================== */

.home-product-main {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: clamp(500px, 34vw, 670px) !important;
    min-height: 500px !important;
    max-height: 670px !important;

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

    overflow: hidden !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;

    box-sizing: border-box !important;
}


/* ==================================================
   3. 展开第二行父 Container 的包装层

   这样两个小卡片会直接进入最外层网格，
   不会再变成第三行
   ================================================== */

.home-product-bottom,
.home-product-bottom >
.uagb-container-inner-blocks-wrap {
    display: contents !important;
}


/* ==================================================
   4. 第二行两个小卡片
   ================================================== */

.home-product-small {
    position: relative !important;

    display: block !important;

    grid-row: 2 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: clamp(380px, 27vw, 530px) !important;
    min-height: 380px !important;
    max-height: 530px !important;

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

    flex: none !important;
    flex-basis: auto !important;

    overflow: hidden !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;

    box-sizing: border-box !important;
}


/* 第二行第一个卡片 */
.home-product-small:nth-of-type(1) {
    grid-column: 1 !important;
}


/* 第二行第二个卡片 */
.home-product-small:nth-of-type(2) {
    grid-column: 2 !important;
}


/* 当 Spectra 的结构导致 nth-of-type 不稳定时，
   自动按照网格顺序摆放 */
.home-product-showcase
.home-product-small {
    grid-column: auto !important;
}


/* ==================================================
   5. 所有产品卡片公共样式
   ================================================== */

.home-product-card {
    position: relative !important;
    isolation: isolate !important;

    border: none !important;
    border-radius: 0 !important;

    transform: none !important;
    transition: none !important;

    box-sizing: border-box !important;
}


/* 顶部渐变，提高文字可读性 */
.home-product-card::before {
    content: "";

    position: absolute !important;
    inset: 0 !important;

    z-index: 0 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            180deg,
            rgba(2, 12, 28, 0.45) 0%,
            rgba(2, 12, 28, 0.17) 32%,
            rgba(2, 12, 28, 0) 64%
        ) !important;
}


/* ==================================================
   6. 卡片内部文字区域
   ================================================== */

.home-product-card >
.uagb-container-inner-blocks-wrap {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    justify-content: flex-start !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 28px 30px !important;

    text-align: center !important;

    box-sizing: border-box !important;
}


/* 电脑端：主图文字距离顶部 */
.home-product-main >
.uagb-container-inner-blocks-wrap {
    padding-top: 58px !important;
}


/* 电脑端：两张小图文字距离顶部 */
.home-product-small >
.uagb-container-inner-blocks-wrap {
    padding-top: 44px !important;
}


/* ==================================================
   7. 标题：强制纯白色
   ================================================== */

.home-product-card h1,
.home-product-card h2,
.home-product-card h3,
.home-product-card h4,
.home-product-card h5,
.home-product-card h6,
.home-product-card .wp-block-heading,
.home-product-card .uagb-heading-text,
.home-product-card .uagb-heading-text a {
    width: 100% !important;
    max-width: 94% !important;

    margin: 0 auto 8px !important;
    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: none !important;
    background-image: none !important;

    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;

    font-family: inherit !important;
    font-size: clamp(27px, 2vw, 40px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    text-align: center !important;

    text-shadow: none !important;

    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;

    transform: none !important;

    box-sizing: border-box !important;
}


/* 强制标题里面的 span、strong、a 等全部纯白 */
.home-product-card h1 *,
.home-product-card h2 *,
.home-product-card h3 *,
.home-product-card h4 *,
.home-product-card h5 *,
.home-product-card h6 *,
.home-product-card .wp-block-heading *,
.home-product-card .uagb-heading-text * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: none !important;
    background-image: none !important;

    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;

    text-shadow: none !important;
}


/* 主图标题稍大 */
.home-product-main h1,
.home-product-main h2,
.home-product-main h3,
.home-product-main h4,
.home-product-main .wp-block-heading,
.home-product-main .uagb-heading-text {
    font-size: clamp(33px, 2.6vw, 50px) !important;
}


/* ==================================================
   8. 副标题：纯白
   ================================================== */

.home-product-card p,
.home-product-card p a,
.home-product-card .uagb-desc-text,
.home-product-card .uagb-desc-text a {
    width: 100% !important;
    max-width: 680px !important;

    margin: 0 auto 20px !important;
    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: none !important;

    opacity: 1 !important;
    filter: none !important;

    font-size: clamp(14px, 1vw, 17px) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-align: center !important;
    text-shadow: none !important;

    box-sizing: border-box !important;
}


.home-product-card p *,
.home-product-card .uagb-desc-text * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


/* ==================================================
   9. 按钮外层
   ================================================== */

.home-product-card .wp-block-buttons,
.home-product-card .wp-block-button,
.home-product-card .uagb-buttons__wrap,
.home-product-card .uagb-buttons-repeater {
    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

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

    margin-left: auto !important;
    margin-right: auto !important;

    flex: none !important;
}


/* ==================================================
   10. Learn More 按钮
   ================================================== */

.home-product-card .wp-block-button__link,
.home-product-card a.wp-block-button__link,
.home-product-card .uagb-buttons-repeater,
.home-product-card .uagb-button__link {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 126px !important;
    max-width: none !important;

    height: 42px !important;

    margin: 0 auto !important;
    padding: 0 22px !important;

    border: 1px solid #ffffff !important;
    border-radius: 2px !important;

    background-color: transparent !important;
    background-image: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: 1 !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    text-align: center !important;
    text-decoration: none !important;

    white-space: nowrap !important;
    word-break: keep-all !important;

    box-sizing: border-box !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease !important;
}


.home-product-card .wp-block-button__link *,
.home-product-card .uagb-buttons-repeater *,
.home-product-card .uagb-button__link * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


.home-product-card .wp-block-button__link:hover,
.home-product-card a.wp-block-button__link:hover,
.home-product-card .uagb-buttons-repeater:hover,
.home-product-card .uagb-button__link:hover {
    background-color: #ee0979 !important;
    border-color: #ee0979 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    transform: translateY(-2px) !important;
}


/* ==================================================
   11. 平板端
   第一行一个，第二行两个
   ================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .home-product-showcase,
    .home-product-showcase >
    .uagb-container-inner-blocks-wrap {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 8px !important;
    }

    .home-product-main {
        grid-column: 1 / -1 !important;

        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
    }

    .home-product-small {
        grid-row: 2 !important;

        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
    }

    .home-product-main >
    .uagb-container-inner-blocks-wrap {
        padding-top: 54px !important;
    }

    .home-product-small >
    .uagb-container-inner-blocks-wrap {
        padding-top: 40px !important;
    }

    .home-product-card h1,
    .home-product-card h2,
    .home-product-card h3,
    .home-product-card h4,
    .home-product-card .wp-block-heading,
    .home-product-card .uagb-heading-text {
        font-size: 27px !important;
    }

    .home-product-main h1,
    .home-product-main h2,
    .home-product-main h3,
    .home-product-main h4,
    .home-product-main .wp-block-heading,
    .home-product-main .uagb-heading-text {
        font-size: 34px !important;
    }
}


/* ==================================================
   12. 手机端
   三张卡片纵向排列
   ================================================== */

@media screen and (max-width: 767px) {

    .home-product-showcase,
    .home-product-showcase >
    .uagb-container-inner-blocks-wrap {
        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

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

        gap: 10px !important;

        overflow: hidden !important;
    }


    /* 主图回到第一行 */
    .home-product-main {
        grid-column: 1 !important;
        grid-row: auto !important;
    }


    /* 两张小图各自独占一行 */
    .home-product-small {
        grid-column: 1 !important;
        grid-row: auto !important;
    }


    /* 卡片长度保持之前已经调整好的效果 */
    .home-product-main,
    .home-product-small {
        width: 100% !important;
        max-width: 100% !important;

        height: clamp(500px, 72svh, 620px) !important;
        min-height: 500px !important;
        max-height: 620px !important;

        aspect-ratio: auto !important;

        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
    }


    /* 手机端文字距离顶部 */
    .home-product-card >
    .uagb-container-inner-blocks-wrap,
    .home-product-main >
    .uagb-container-inner-blocks-wrap,
    .home-product-small >
    .uagb-container-inner-blocks-wrap {
        justify-content: flex-start !important;
        align-items: center !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;

        margin: 0 !important;
        padding: 54px 18px 24px !important;

        text-align: center !important;
    }


    /* 手机端标题 */
    .home-product-card h1,
    .home-product-card h2,
    .home-product-card h3,
    .home-product-card h4,
    .home-product-card .wp-block-heading,
    .home-product-card .uagb-heading-text {
        width: 100% !important;
        max-width: 350px !important;

        margin: 0 auto 10px !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;

        opacity: 1 !important;
    }


    .home-product-main h1,
    .home-product-main h2,
    .home-product-main h3,
    .home-product-main h4,
    .home-product-main .wp-block-heading,
    .home-product-main .uagb-heading-text {
        max-width: 370px !important;
        font-size: 33px !important;
    }


    /* 手机端副标题 */
    .home-product-card p,
    .home-product-card .uagb-desc-text {
        max-width: 330px !important;

        margin: 0 auto 22px !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 15px !important;
        line-height: 1.5 !important;

        opacity: 1 !important;
    }


    /* 手机端按钮 */
    .home-product-card .wp-block-button__link,
    .home-product-card a.wp-block-button__link,
    .home-product-card .uagb-buttons-repeater,
    .home-product-card .uagb-button__link {
        min-width: 132px !important;
        height: 44px !important;

        padding: 0 22px !important;

        border-color: #ffffff !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 14px !important;
    }
}


/* ==================================================
   13. 较窄或较矮的手机
   ================================================== */

@media screen and (max-width: 390px),
       screen and (max-height: 700px) and (max-width: 767px) {

    .home-product-main,
    .home-product-small {
        height: clamp(470px, 70svh, 560px) !important;
        min-height: 470px !important;
        max-height: 560px !important;
    }

    .home-product-card >
    .uagb-container-inner-blocks-wrap,
    .home-product-main >
    .uagb-container-inner-blocks-wrap,
    .home-product-small >
    .uagb-container-inner-blocks-wrap {
        padding-top: 44px !important;
    }

    .home-product-card h1,
    .home-product-card h2,
    .home-product-card h3,
    .home-product-card h4,
    .home-product-card .wp-block-heading,
    .home-product-card .uagb-heading-text {
        max-width: 310px !important;
        font-size: 27px !important;
    }

    .home-product-main h1,
    .home-product-main h2,
    .home-product-main h3,
    .home-product-main h4,
    .home-product-main .wp-block-heading,
    .home-product-main .uagb-heading-text {
        max-width: 330px !important;
        font-size: 30px !important;
    }

    .home-product-card p,
    .home-product-card .uagb-desc-text {
        max-width: 300px !important;

        margin-bottom: 18px !important;

        font-size: 14px !important;
    }

    .home-product-card .wp-block-button__link,
    .home-product-card a.wp-block-button__link,
    .home-product-card .uagb-buttons-repeater,
    .home-product-card .uagb-button__link {
        min-width: 124px !important;
        height: 42px !important;

        padding: 0 20px !important;

        font-size: 13px !important;
    }
}


/* ==================================================
   ONEHARBOR 产品卡片文字整体向下移动
   不改变图片高度和整体排版
   ================================================== */

/* 电脑端默认偏移距离 */
.home-product-main {
    --product-text-offset: 48px;
}

.home-product-small {
    --product-text-offset: 36px;
}

/*
 * 兼容 Spectra 不同版本生成的包装结构。
 * 如果卡片内有包装层，就移动包装层；
 * 如果没有包装层，就移动直接放置的文字区块。
 */
.home-product-card > *:not(style):not(script) {
    position: relative !important;
    top: var(--product-text-offset, 40px) !important;
    z-index: 3 !important;
}


/* 平板端 */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .home-product-main {
        --product-text-offset: 40px;
    }

    .home-product-small {
        --product-text-offset: 30px;
    }
}


/* 手机端 */
@media screen and (max-width: 767px) {

    .home-product-main,
    .home-product-small {
        --product-text-offset: 30px;
    }
}


/* 较矮或较窄手机 */
@media screen and (max-width: 390px),
       screen and (max-height: 700px) and (max-width: 767px) {

    .home-product-main,
    .home-product-small {
        --product-text-offset: 22px;
    }
}


/* =====================================
   ONEHARBOR 工厂图片模块
   电脑端4列，手机端2列
   图片圆角 + 手机端缩小
===================================== */

/* 父容器 */
.factory-gallery {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* 如果是 Spectra / Gutenberg 容器，统一变成网格 */
.factory-gallery > .uagb-container-inner-blocks-wrap,
.factory-gallery > .block-editor-block-list__layout,
.factory-gallery {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
}

/* 每个子项 */
.factory-gallery-item {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

/* 子项里面的图片容器 */
.factory-gallery-item figure,
.factory-gallery-item .wp-block-image,
.factory-gallery-item .uagb-image__figure,
.factory-gallery-item .uagb-image {
    margin: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

/* 图片本身 */
.factory-gallery-item img {
    display: block !important;
    width: 100% !important;
    height: 240px !important;   /* 电脑端高度 */
    object-fit: cover !important;
    border-radius: 18px !important;
}

/* =====================================
   平板端
===================================== */
@media screen and (max-width: 1024px) {
    .factory-gallery > .uagb-container-inner-blocks-wrap,
    .factory-gallery > .block-editor-block-list__layout,
    .factory-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .factory-gallery-item img {
        height: 180px !important;
        border-radius: 16px !important;
    }

    .factory-gallery-item,
    .factory-gallery-item figure,
    .factory-gallery-item .wp-block-image,
    .factory-gallery-item .uagb-image__figure,
    .factory-gallery-item .uagb-image {
        border-radius: 16px !important;
    }
}

/* =====================================
   手机端
   2列 × 2行，让4张图尽量一屏放下
===================================== */
@media screen and (max-width: 767px) {
    .factory-gallery {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .factory-gallery > .uagb-container-inner-blocks-wrap,
    .factory-gallery > .block-editor-block-list__layout,
    .factory-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .factory-gallery-item {
        border-radius: 14px !important;
    }

    .factory-gallery-item figure,
    .factory-gallery-item .wp-block-image,
    .factory-gallery-item .uagb-image__figure,
    .factory-gallery-item .uagb-image {
        border-radius: 14px !important;
    }

    .factory-gallery-item img {
        width: 100% !important;
        height: 135px !important;   /* 手机端缩小 */
        object-fit: cover !important;
        border-radius: 14px !important;
    }
}

/* 更小屏手机再缩一点 */
@media screen and (max-width: 480px) {
    .factory-gallery-item img {
        height: 120px !important;
    }
}


/* ==================================================
   ONEHARBOR 公司介绍模块

   电脑端：
   左侧文字，右侧图片

   手机端：
   文字在上，图片在下
   ================================================== */


/* ==================================================
   电脑端布局
   ================================================== */

.company-intro-layout {
    width: 100% !important;
    max-width: 1640px !important;
    min-width: 0 !important;

    margin: 0 auto !important;
    padding: 40px 60px 70px !important;

    box-sizing: border-box !important;
}


/* Spectra 父 Container 内部包装 */
.company-intro-layout >
.uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    justify-content: space-between !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 70px !important;

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

    box-sizing: border-box !important;
}


/* 电脑端左侧文字 */
.company-intro-text {
    width: 52% !important;
    max-width: 52% !important;
    min-width: 0 !important;

    flex: 0 1 52% !important;

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

    box-sizing: border-box !important;
}


/* 电脑端右侧图片 */
.company-intro-image {
    width: 44% !important;
    max-width: 44% !important;
    min-width: 0 !important;

    flex: 0 1 44% !important;

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

    overflow: hidden !important;
    border-radius: 14px !important;

    box-sizing: border-box !important;
}


/* 图片包装层 */
.company-intro-image figure,
.company-intro-image .wp-block-image,
.company-intro-image .uagb-image,
.company-intro-image .uagb-image__figure {
    width: 100% !important;
    max-width: 100% !important;

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

    overflow: hidden !important;
    border-radius: 14px !important;
}


/* 图片本体 */
.company-intro-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    object-fit: cover !important;

    border-radius: 14px !important;
}


/* 电脑端标题 */
.company-intro-text h1,
.company-intro-text h2,
.company-intro-text h3,
.company-intro-text .wp-block-heading,
.company-intro-text .uagb-heading-text {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 24px !important;

    color: #151515 !important;

    font-size: clamp(32px, 2.5vw, 48px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    box-sizing: border-box !important;
}


/* 电脑端正文 */
.company-intro-text p {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 28px !important;

    color: #222222 !important;

    font-size: 16px !important;
    line-height: 1.65 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    box-sizing: border-box !important;
}


/* ==================================================
   手机端：文字在上，图片在下
   ================================================== */

@media screen and (max-width: 767px) {

    /* 整个公司介绍区域 */
    .company-intro-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 24px 16px 30px !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* 父 Container 从左右布局改为上下布局 */
    .company-intro-layout >
    .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 18px !important;

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

        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* 文字区域排在上面 */
    .company-intro-text {
        order: 1 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 0 0 100% !important;

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

        overflow: visible !important;
        box-sizing: border-box !important;
    }


    /* 清除文字区域内部可能存在的固定宽度 */
    .company-intro-text >
    .uagb-container-inner-blocks-wrap,
    .company-intro-text > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* 图片区域排在文字下面 */
    .company-intro-image {
        order: 2 !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 0 0 100% !important;

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

        overflow: hidden !important;
        border-radius: 12px !important;

        box-sizing: border-box !important;
    }


    /* 手机端标题 */
    .company-intro-text h1,
    .company-intro-text h2,
    .company-intro-text h3,
    .company-intro-text .wp-block-heading,
    .company-intro-text .uagb-heading-text {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 14px !important;
        padding: 0 !important;

        color: #151515 !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        text-align: left !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        box-sizing: border-box !important;
    }


    /* 标题内部元素也恢复正常宽度 */
    .company-intro-text h1 *,
    .company-intro-text h2 *,
    .company-intro-text h3 *,
    .company-intro-text .wp-block-heading *,
    .company-intro-text .uagb-heading-text * {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* 手机端正文 */
    .company-intro-text p {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 13px !important;
        padding: 0 !important;

        color: #222222 !important;

        font-size: 13px !important;
        line-height: 1.48 !important;

        text-align: left !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        box-sizing: border-box !important;
    }


    /* 清除段落中的 span 或链接异常换行 */
    .company-intro-text p *,
    .company-intro-text p a,
    .company-intro-text p span,
    .company-intro-text p strong {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* 手机端图片包装 */
    .company-intro-image figure,
    .company-intro-image .wp-block-image,
    .company-intro-image .uagb-image,
    .company-intro-image .uagb-image__figure {
        width: 100% !important;
        max-width: 100% !important;

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

        overflow: hidden !important;
        border-radius: 12px !important;
    }


    /* 手机端图片 */
    .company-intro-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        max-height: 230px !important;

        margin: 0 !important;

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

        border-radius: 12px !important;
    }
}


/* 更窄的手机 */
@media screen and (max-width: 390px) {

    .company-intro-layout {
        padding: 20px 14px 26px !important;
    }

    .company-intro-layout >
    .uagb-container-inner-blocks-wrap {
        gap: 15px !important;
    }

    .company-intro-text h1,
    .company-intro-text h2,
    .company-intro-text h3,
    .company-intro-text .wp-block-heading,
    .company-intro-text .uagb-heading-text {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .company-intro-text p {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 11px !important;
    }

    .company-intro-image img {
        max-height: 205px !important;
    }
}


/* ==================================================
   公司介绍模块——手机端文字铺满宽度
   保留左右各16px安全间距
   ================================================== */

@media screen and (max-width: 767px) {

    /* 整个公司介绍模块 */
    .company-intro-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 24px 16px 30px !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* 父 Container 的 Spectra 内部包装层 */
    .company-intro-layout >
    .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

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

        gap: 18px !important;

        box-sizing: border-box !important;
    }

    /* 文字子 Container 强制铺满 */
    .company-intro-text {
        display: block !important;
        order: 1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 0 0 100% !important;
        flex-basis: 100% !important;

        align-self: stretch !important;

        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 0 !important;

        left: auto !important;
        right: auto !important;
        transform: none !important;

        box-sizing: border-box !important;
    }

    /* 清除文字 Container 内部包装层的固定宽度 */
    .company-intro-text >
    .uagb-container-inner-blocks-wrap,
    .company-intro-text >
    .wp-block-group__inner-container,
    .company-intro-text > div {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

        left: auto !important;
        right: auto !important;
        transform: none !important;

        box-sizing: border-box !important;
    }

    /* 文字区里面的所有直接区块都铺满 */
    .company-intro-text > *,
    .company-intro-text
    .uagb-container-inner-blocks-wrap > * {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box !important;
    }

    /* 手机标题 */
    .company-intro-text h1,
    .company-intro-text h2,
    .company-intro-text h3,
    .company-intro-text .wp-block-heading,
    .company-intro-text .uagb-heading-text {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 0 14px !important;
        padding: 0 !important;

        font-size: 27px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;

        text-align: left !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        box-sizing: border-box !important;
    }

    /* 手机正文真正铺满可用宽度 */
    .company-intro-text p {
        display: block !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 0 14px !important;
        padding: 0 !important;

        font-size: 14px !important;
        line-height: 1.55 !important;

        text-align: left !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        box-sizing: border-box !important;
    }

    /* 清除段落内部 span、strong、链接的异常宽度 */
    .company-intro-text p *,
    .company-intro-text p span,
    .company-intro-text p strong,
    .company-intro-text p a {
        max-width: none !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* 图片继续放在文字下方并铺满 */
    .company-intro-image {
        display: block !important;
        order: 2 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        flex: 0 0 100% !important;

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

        align-self: stretch !important;

        box-sizing: border-box !important;
    }
}


/* =========================================
   手机端 Door Banner 文字优化
   标题与文本居中 + 字体放大
   父Container类名：mobile-door-banner
   ========================================= */

/* 通用 */
.mobile-door-banner {
    position: relative !important;
    overflow: hidden !important;
}

/* 让banner里的内容层更好控制 */
.mobile-door-banner .uagb-container-inner-blocks-wrap,
.mobile-door-banner .spectra-container-inner,
.mobile-door-banner > .block-editor-block-list__layout {
    width: 100% !important;
}

/* 手机端 */
@media screen and (max-width: 767px) {

    /* 父容器：让内部内容更适合居中展示 */
    .mobile-door-banner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;

        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;

        box-sizing: border-box !important;
    }

    /* 内层内容整体居中 */
    .mobile-door-banner .uagb-container-inner-blocks-wrap,
    .mobile-door-banner .spectra-container-inner,
    .mobile-door-banner .wp-block-group__inner-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        text-align: center !important;
    }

    /* 标题 */
    .mobile-door-banner h1,
    .mobile-door-banner h2,
    .mobile-door-banner .uagb-heading-text {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 18px !important;
        padding: 0 !important;

        text-align: center !important;
        color: #ffffff !important;

        font-size: 64px !important;
        line-height: 1.08 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* 副文本 */
    .mobile-door-banner p,
    .mobile-door-banner .wp-block-paragraph,
    .mobile-door-banner .uagb-desc-text {
        width: 100% !important;
        max-width: 100% !important;

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

        text-align: center !important;
        color: #ffffff !important;

        font-size: 30px !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* 更小的手机再微调一下 */
@media screen and (max-width: 480px) {
    .mobile-door-banner h1,
    .mobile-door-banner h2,
    .mobile-door-banner .uagb-heading-text {
        font-size: 56px !important;
        line-height: 1.1 !important;
    }

    .mobile-door-banner p,
    .mobile-door-banner .wp-block-paragraph,
    .mobile-door-banner .uagb-desc-text {
        font-size: 26px !important;
        line-height: 1.15 !important;
    }
}


/* ==================================================
   ONEHARBOR 视频板块标题
   CSS类：video-section-title

   电脑端：大号 H2
   手机端：保持一行
   上下留白保持一致
   ================================================== */


/* ------------------------------
   电脑端
   ------------------------------ */

.video-section-title,
h2.video-section-title,
.video-section-title h2 {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    /* 上下距离保持一致 */
    margin: 0 !important;
    padding: 60px 20px !important;

    color: #111111 !important;

    font-size: 52px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -1px !important;

    text-align: center !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    box-sizing: border-box !important;
}


/* 如果标题内部有 span */
.video-section-title span,
.video-section-title strong {
    white-space: nowrap !important;
}


/* 如果编辑器里手动加了换行，取消换行 */
.video-section-title br {
    display: none !important;
}


/* ------------------------------
   平板
   ------------------------------ */

@media screen and (max-width: 1024px) {

    .video-section-title,
    h2.video-section-title,
    .video-section-title h2 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;

        font-size: 42px !important;
        letter-spacing: -0.8px !important;
    }
}


/* ------------------------------
   手机端
   ------------------------------ */

@media screen and (max-width: 767px) {

    .video-section-title,
    h2.video-section-title,
    .video-section-title h2 {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        /*
         * 标题距离上一个区域和下面视频
         * 都保持同样的距离
         */
        margin: 0 !important;
        padding-top: 42px !important;
        padding-bottom: 42px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;

        /*
         * 自动根据手机宽度变化
         * 保证 Luxury Starts at the Door.
         * 尽量保持一行
         */
        font-size: clamp(23px, 6.4vw, 30px) !important;

        font-weight: 700 !important;
        line-height: 1.1 !important;
        letter-spacing: -0.7px !important;

        text-align: center !important;

        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        box-sizing: border-box !important;
    }

    .video-section-title span,
    .video-section-title strong,
    .video-section-title a {
        white-space: nowrap !important;
    }

    /* 防止手动 <br> 导致两行 */
    .video-section-title br {
        display: none !important;
    }
}


/* ------------------------------
   特别窄的手机
   ------------------------------ */

@media screen and (max-width: 390px) {

    .video-section-title,
    h2.video-section-title,
    .video-section-title h2 {
        padding-top: 36px !important;
        padding-bottom: 36px !important;

        font-size: 23px !important;
        letter-spacing: -0.8px !important;
    }
}


/* =========================================================
   ONEHARBOR DOOR FEATURE HERO
   ---------------------------------------------------------
   父 Container：
   door-feature-hero

   标题+正文 子 Container：
   door-feature-content

   PC：
   - 图片真正全屏
   - 文字位于图片下方约 1/3 区域
   - 类似参考图 Huawei 的视觉位置

   Mobile：
   - 卡片约占一屏 2/3
   - 文字同样位于靠下区域
   ========================================================= */


/* =========================================================
   1. PC端背景 Hero
   ========================================================= */

.door-feature-hero {
    position: relative !important;
    isolation: isolate !important;

    /* 强制突破 Astra / Spectra 页面宽度限制 */
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /* 和上下板块留白 */
    margin-top: 42px !important;
    margin-bottom: 42px !important;

    padding: 0 !important;

    /* PC大图高度 */
    height: clamp(680px, 47vw, 860px) !important;
    min-height: 680px !important;
    max-height: 860px !important;

    overflow: hidden !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;
}


/* =========================================================
   2. 底部渐变
   参考图底部比较暗，方便白色文字阅读
   ========================================================= */

.door-feature-hero::after {
    content: "";

    position: absolute !important;
    inset: 0 !important;

    z-index: 1 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 34%,
            rgba(0, 0, 0, 0.04) 46%,
            rgba(3, 8, 25, 0.20) 58%,
            rgba(3, 8, 25, 0.55) 77%,
            rgba(2, 6, 25, 0.88) 100%
        ) !important;
}


/* =========================================================
   3. 文字内容 Container
   这里才是真正控制位置的地方
   ========================================================= */

.door-feature-content {
    position: absolute !important;

    /*
     * 水平居中
     */
    left: 50% !important;

    /*
     * 重点：
     * 72% = 整组文字中心位于图片高度72%的地方
     *
     * 数值越大 -> 越靠下
     * 数值越小 -> 越靠上
     */
    top: 74% !important;

    transform: translate(-50%, -50%) !important;

    z-index: 5 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: calc(100% - 100px) !important;
    max-width: 1400px !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

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

    text-align: center !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


/* Spectra内部包装层不再控制定位 */
.door-feature-content >
.uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

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

    text-align: center !important;

    background: transparent !important;

    box-sizing: border-box !important;
}


/* =========================================================
   4. PC端标题
   ========================================================= */

.door-feature-content h1,
.door-feature-content h2,
.door-feature-content h3,
.door-feature-content .wp-block-heading,
.door-feature-content .uagb-heading-text {
    display: block !important;

    width: 100% !important;
    max-width: 1250px !important;

    margin-top: 0 !important;
    margin-right: auto !important;
    margin-bottom: 26px !important;
    margin-left: auto !important;

    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: 1 !important;

    font-size: clamp(46px, 3vw, 58px) !important;
    font-weight: 700 !important;
    line-height: 1.10 !important;
    letter-spacing: -0.8px !important;

    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    text-shadow: none !important;

    box-sizing: border-box !important;
}


/* 标题内部 span 等元素 */
.door-feature-content h1 *,
.door-feature-content h2 *,
.door-feature-content h3 *,
.door-feature-content .wp-block-heading *,
.door-feature-content .uagb-heading-text * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}


/* =========================================================
   5. PC端正文
   ========================================================= */

.door-feature-content p,
.door-feature-content .uagb-desc-text {
    display: block !important;

    width: 100% !important;
    max-width: 1200px !important;

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

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: 1 !important;

    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    box-sizing: border-box !important;
}


.door-feature-content p *,
.door-feature-content .uagb-desc-text * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================================================
   6. 平板
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .door-feature-hero {
        height: 620px !important;
        min-height: 620px !important;
        max-height: 620px !important;

        margin-top: 34px !important;
        margin-bottom: 34px !important;
    }


    .door-feature-content {
        /*
         * 平板继续保持靠下
         */
        top: 73% !important;

        width: calc(100% - 70px) !important;
        max-width: 900px !important;
    }


    .door-feature-content h1,
    .door-feature-content h2,
    .door-feature-content h3,
    .door-feature-content .wp-block-heading,
    .door-feature-content .uagb-heading-text {
        max-width: 850px !important;

        margin-bottom: 18px !important;

        font-size: 40px !important;
        line-height: 1.12 !important;
    }


    .door-feature-content p,
    .door-feature-content .uagb-desc-text {
        max-width: 820px !important;

        font-size: 17px !important;
        line-height: 1.5 !important;
    }
}


/* =========================================================
   7. 手机端
   ========================================================= */

@media screen and (max-width: 767px) {

    .door-feature-hero {
        /*
         * 手机不要负margin全屏，否则有些机型会横向溢出
         */
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        margin-top: 28px !important;
        margin-bottom: 28px !important;

        padding: 0 !important;

        /*
         * 约占手机可视高度2/3
         */
        height: 67svh !important;
        min-height: 500px !important;
        max-height: 640px !important;

        overflow: hidden !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        box-sizing: border-box !important;
    }


    /* 手机渐变 */
    .door-feature-hero::after {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 25%,
                rgba(0, 0, 0, 0.05) 42%,
                rgba(3, 8, 25, 0.25) 58%,
                rgba(3, 8, 25, 0.65) 78%,
                rgba(2, 6, 25, 0.92) 100%
            ) !important;
    }


    /* =====================================================
       手机文字位置

       78% 会比 PC 更靠下
       ===================================================== */

    .door-feature-content {
        left: 50% !important;
        top: 65% !important;

        transform: translate(-50%, -50%) !important;

        width: calc(100% - 36px) !important;
        max-width: 420px !important;

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


    /* 手机标题 */
    .door-feature-content h1,
    .door-feature-content h2,
    .door-feature-content h3,
    .door-feature-content .wp-block-heading,
    .door-feature-content .uagb-heading-text {
        width: 100% !important;
        max-width: 390px !important;

        margin-top: 0 !important;
        margin-right: auto !important;
        margin-bottom: 14px !important;
        margin-left: auto !important;

        padding: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.3px !important;

        text-align: center !important;
    }


    /* 手机正文 */
    .door-feature-content p,
    .door-feature-content .uagb-desc-text {
        width: 100% !important;
        max-width: 390px !important;

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

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;

        text-align: center !important;
    }
}


/* =========================================================
   8. 较矮 / 较窄手机
   ========================================================= */

@media screen and (max-width: 390px),
       screen and (max-height: 700px) and (max-width: 767px) {

    .door-feature-hero {
        height: 65svh !important;
        min-height: 460px !important;
        max-height: 560px !important;

        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }


    .door-feature-content {
        top: 65% !important;

        width: calc(100% - 28px) !important;
    }


    .door-feature-content h1,
    .door-feature-content h2,
    .door-feature-content h3,
    .door-feature-content .wp-block-heading,
    .door-feature-content .uagb-heading-text {
        max-width: 340px !important;

        margin-bottom: 11px !important;

        font-size: 26px !important;
        line-height: 1.12 !important;
    }


    .door-feature-content p,
    .door-feature-content .uagb-desc-text {
        max-width: 345px !important;

        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }
}


/* ==========================================================
   ONEHARBOR Door Zigzag Feature Section

   父 Container：
   door-zigzag-section

   文字：
   door-zigzag-copy
   door-zigzag-copy-1
   door-zigzag-copy-2

   图片：
   door-zigzag-media
   door-zigzag-media-1
   door-zigzag-media-2

   PC：
   第一行 文字左 / 图片右
   第二行 图片左 / 文字右

   Mobile：
   文字1
   图片1
   文字2
   图片2
   ========================================================== */


/* ==========================================================
   1. 最外层父 Container
   PC 最大宽度 1280px
   ========================================================== */

.door-zigzag-section {
    width: calc(100% - 40px) !important;
    max-width: 1280px !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    /* 与其他板块的上下距离 */
    margin-top: 90px !important;
    margin-bottom: 90px !important;

    padding-top: 30px !important;
    padding-right: 20px !important;
    padding-bottom: 30px !important;
    padding-left: 20px !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   2. 父 Container 内部改为 2 × 2 Grid
   ========================================================== */

.door-zigzag-section >
.uagb-container-inner-blocks-wrap {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    grid-template-areas:
        "copy1 media1"
        "media2 copy2" !important;

    align-items: center !important;

    width: 100% !important;
    max-width: 1180px !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    /* 左右之间距离 */
    column-gap: 80px !important;

    /* 上下两组之间距离 */
    row-gap: 120px !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   3. 指定四个区域
   ========================================================== */

.door-zigzag-copy-1 {
    grid-area: copy1 !important;
}

.door-zigzag-media-1 {
    grid-area: media1 !important;
}

.door-zigzag-media-2 {
    grid-area: media2 !important;
}

.door-zigzag-copy-2 {
    grid-area: copy2 !important;
}


/* ==========================================================
   4. 所有文字 Container
   ========================================================== */

.door-zigzag-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
}


.door-zigzag-copy >
.uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   5. PC 标题
   ========================================================== */

.door-zigzag-copy h1,
.door-zigzag-copy h2,
.door-zigzag-copy h3,
.door-zigzag-copy .wp-block-heading,
.door-zigzag-copy .uagb-heading-text {
    display: block !important;

    width: 100% !important;
    max-width: 540px !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 34px !important;
    margin-left: 0 !important;

    padding: 0 !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;

    text-align: left !important;

    /* 可以1-2行 */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    box-sizing: border-box !important;
}


.door-zigzag-copy h1 *,
.door-zigzag-copy h2 *,
.door-zigzag-copy h3 *,
.door-zigzag-copy .wp-block-heading *,
.door-zigzag-copy .uagb-heading-text * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    white-space: normal !important;
}


/* ==========================================================
   6. PC 正文
   ========================================================== */

.door-zigzag-copy p,
.door-zigzag-copy .wp-block-paragraph,
.door-zigzag-copy .uagb-desc-text {
    display: block !important;

    width: 100% !important;
    max-width: 520px !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
    margin-left: 0 !important;

    padding: 0 !important;

    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;

    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    box-sizing: border-box !important;
}


/* 最后一段不留多余空隙 */
.door-zigzag-copy p:last-child,
.door-zigzag-copy .wp-block-paragraph:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   7. 所有图片区
   ========================================================== */

.door-zigzag-media {
    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
}


.door-zigzag-media >
.uagb-container-inner-blocks-wrap {
    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 420px !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   8. 产品图片区域
   保持正方形
   ========================================================== */

.door-zigzag-media figure,
.door-zigzag-media .wp-block-image,
.door-zigzag-media .uagb-image,
.door-zigzag-media .uagb-image__figure {
    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 400px !important;

    aspect-ratio: 1 / 1 !important;

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

    overflow: hidden !important;

    background-color: #ffffff !important;

    box-sizing: border-box !important;
}


/* 图片本身 */
.door-zigzag-media img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 400px !important;
    max-height: 400px !important;

    margin: 0 auto !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   9. 第一行：让图片稍微靠近文字
   ========================================================== */

.door-zigzag-media-1 {
    justify-content: flex-start !important;
}

.door-zigzag-media-1 >
.uagb-container-inner-blocks-wrap {
    margin-left: 0 !important;
    margin-right: auto !important;
}


/* ==========================================================
   10. 第二行：图片靠近右边的文字
   ========================================================== */

.door-zigzag-media-2 {
    justify-content: flex-end !important;
}

.door-zigzag-media-2 >
.uagb-container-inner-blocks-wrap {
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* ==========================================================
   11. 1025 - 1280px
   ========================================================== */

@media screen and (min-width: 1025px) and (max-width: 1280px) {

    .door-zigzag-section {
        width: calc(100% - 40px) !important;

        margin-top: 75px !important;
        margin-bottom: 75px !important;
    }


    .door-zigzag-section >
    .uagb-container-inner-blocks-wrap {
        max-width: 1120px !important;

        column-gap: 60px !important;
        row-gap: 100px !important;
    }


    .door-zigzag-copy h1,
    .door-zigzag-copy h2,
    .door-zigzag-copy h3,
    .door-zigzag-copy .wp-block-heading,
    .door-zigzag-copy .uagb-heading-text {
        font-size: 42px !important;
        max-width: 500px !important;
    }


    .door-zigzag-copy p,
    .door-zigzag-copy .wp-block-paragraph,
    .door-zigzag-copy .uagb-desc-text {
        max-width: 480px !important;

        font-size: 17px !important;
    }


    .door-zigzag-media >
    .uagb-container-inner-blocks-wrap,
    .door-zigzag-media figure,
    .door-zigzag-media .wp-block-image,
    .door-zigzag-media .uagb-image,
    .door-zigzag-media .uagb-image__figure,
    .door-zigzag-media img {
        max-width: 360px !important;
        max-height: 360px !important;
    }
}


/* ==========================================================
   12. 平板
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .door-zigzag-section {
        width: calc(100% - 32px) !important;

        margin-top: 60px !important;
        margin-bottom: 60px !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .door-zigzag-section >
    .uagb-container-inner-blocks-wrap {
        max-width: 900px !important;

        column-gap: 40px !important;
        row-gap: 80px !important;
    }


    .door-zigzag-copy h1,
    .door-zigzag-copy h2,
    .door-zigzag-copy h3,
    .door-zigzag-copy .wp-block-heading,
    .door-zigzag-copy .uagb-heading-text {
        font-size: 36px !important;
        line-height: 1.1 !important;

        margin-bottom: 24px !important;
    }


    .door-zigzag-copy p,
    .door-zigzag-copy .wp-block-paragraph,
    .door-zigzag-copy .uagb-desc-text {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }


    .door-zigzag-media >
    .uagb-container-inner-blocks-wrap,
    .door-zigzag-media figure,
    .door-zigzag-media .wp-block-image,
    .door-zigzag-media .uagb-image,
    .door-zigzag-media .uagb-image__figure,
    .door-zigzag-media img {
        max-width: 300px !important;
        max-height: 300px !important;
    }
}


/* ==========================================================
   13. 手机端
   文字在上，图片在下
   ========================================================== */

@media screen and (max-width: 767px) {

    .door-zigzag-section {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        margin-top: 50px !important;
        margin-bottom: 50px !important;

        padding-top: 30px !important;
        padding-right: 0 !important;
        padding-bottom: 30px !important;
        padding-left: 0 !important;
    }


    /* 手机改成单列 */
    .door-zigzag-section >
    .uagb-container-inner-blocks-wrap {
        display: flex !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;

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

        gap: 0 !important;
    }


    /* ======================================================
       手机顺序
       文字1 → 图片1 → 文字2 → 图片2
       ====================================================== */

    .door-zigzag-copy-1 {
        order: 1 !important;
    }

    .door-zigzag-media-1 {
        order: 2 !important;
    }

    .door-zigzag-copy-2 {
        order: 3 !important;
    }

    .door-zigzag-media-2 {
        order: 4 !important;
    }


    /* ======================================================
       手机文字区
       ====================================================== */

    .door-zigzag-copy {
        width: 100% !important;
        max-width: 100% !important;

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


    .door-zigzag-copy h1,
    .door-zigzag-copy h2,
    .door-zigzag-copy h3,
    .door-zigzag-copy .wp-block-heading,
    .door-zigzag-copy .uagb-heading-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        margin-left: 0 !important;

        font-size: 34px !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.5px !important;

        text-align: left !important;
    }


    .door-zigzag-copy p,
    .door-zigzag-copy .wp-block-paragraph,
    .door-zigzag-copy .uagb-desc-text {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.55 !important;

        text-align: left !important;
    }


    /* ======================================================
       手机图片区
       ====================================================== */

    .door-zigzag-media {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;

        justify-content: center !important;
        align-items: center !important;

        margin-top: 30px !important;
        margin-right: auto !important;
        margin-bottom: 70px !important;
        margin-left: auto !important;
    }


    .door-zigzag-media >
    .uagb-container-inner-blocks-wrap {
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .door-zigzag-media figure,
    .door-zigzag-media .wp-block-image,
    .door-zigzag-media .uagb-image,
    .door-zigzag-media .uagb-image__figure {
        width: min(76vw, 320px) !important;
        max-width: 320px !important;

        aspect-ratio: 1 / 1 !important;

        margin: 0 auto !important;
    }


    .door-zigzag-media img {
        width: 100% !important;
        height: 100% !important;

        max-width: 320px !important;
        max-height: 320px !important;

        margin: 0 auto !important;

        object-fit: contain !important;
    }


    /*
       最后一张图片下面不用留70px
    */
    .door-zigzag-media-2 {
        margin-bottom: 0 !important;
    }
}


/* ==========================================================
   14. 小屏手机
   ========================================================== */

@media screen and (max-width: 390px) {

    .door-zigzag-section {
        width: calc(100% - 28px) !important;

        margin-top: 42px !important;
        margin-bottom: 42px !important;
    }


    .door-zigzag-copy h1,
    .door-zigzag-copy h2,
    .door-zigzag-copy h3,
    .door-zigzag-copy .wp-block-heading,
    .door-zigzag-copy .uagb-heading-text {
        font-size: 30px !important;
        margin-bottom: 18px !important;
    }


    .door-zigzag-copy p,
    .door-zigzag-copy .wp-block-paragraph,
    .door-zigzag-copy .uagb-desc-text {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }


    .door-zigzag-media figure,
    .door-zigzag-media .wp-block-image,
    .door-zigzag-media .uagb-image,
    .door-zigzag-media .uagb-image__figure,
    .door-zigzag-media img {
        max-width: 280px !important;
        max-height: 280px !important;
    }
}


/* ==================================================
   手机端背景图完整显示
   适用于 1080 × 1600 图片
   PC端完全不受影响

   Container CSS类：
   mobile-full-image
   ================================================== */

@media screen and (max-width: 767px) {

    .mobile-full-image {
        /* 手机宽度铺满 */
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        /*
         * 关键：
         * 保持原图 1080 × 1600 比例
         */
        aspect-ratio: 1080 / 1600 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        /*
         * 关键：
         * contain = 整张图片全部显示
         * 不再裁掉左右
         */
        background-size: contain !important;

        /* 从顶部开始显示 */
        background-position: center top !important;

        /* 不重复 */
        background-repeat: no-repeat !important;

        box-sizing: border-box !important;
    }


    /* Spectra内部层不要把父Container撑高 */
    .mobile-full-image >
    .uagb-container-inner-blocks-wrap {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

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

        box-sizing: border-box !important;
    }
}


/* ==========================================================
   ONEHARBOR Materials Feature Section
   根据你现在真实 Spectra Container 结构制作

   PC：4张卡片一排
   Tablet：2×2
   Mobile：2×2

   PC最大宽度：1280px
   ========================================================== */


/* ==========================================================
   1. 整个板块
   ========================================================== */

.materials-section {
    width: calc(100% - 40px) !important;
    max-width: 1280px !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    margin-top: 80px !important;
    margin-bottom: 80px !important;

    padding: 20px 0 !important;

    box-sizing: border-box !important;
}


/* 最外层 Spectra 内部 */
.materials-section > .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    gap: 48px !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   2. 标题 + 正文区域
   ========================================================== */

.materials-intro {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
}


.materials-intro > .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

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


/* 主标题 */
.materials-intro h1,
.materials-intro h2,
.materials-intro h3,
.materials-intro .wp-block-heading,
.materials-intro .uagb-heading-text {
    width: 100% !important;
    max-width: 1000px !important;

    margin: 0 0 28px 0 !important;
    padding: 0 !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;

    text-align: left !important;

    white-space: normal !important;
}


/* 主正文 */
.materials-intro p,
.materials-intro .wp-block-paragraph,
.materials-intro .uagb-desc-text {
    width: 100% !important;
    max-width: 1120px !important;

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

    color: #222222 !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;

    text-align: left !important;
}


/* ==========================================================
   3. 四张卡片父 Container

   这是最关键的位置
   ========================================================== */

.materials-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    column-gap: 22px !important;
    row-gap: 22px !important;

    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

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

    box-sizing: border-box !important;
}


/*
   Spectra 会自动增加一层：
   .uagb-container-inner-blocks-wrap

   这里直接把这层“取消布局影响”，
   让4个子Container直接参加父级Grid。
*/

.materials-grid > .uagb-container-inner-blocks-wrap {
    display: contents !important;
}


/* ==========================================================
   4. 强制4个子卡片成为 Grid Item
   ========================================================== */

.materials-grid .materials-card {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    flex: none !important;
    flex-basis: auto !important;

    margin: 0 !important;

    padding-top: 28px !important;
    padding-right: 18px !important;
    padding-bottom: 14px !important;
    padding-left: 18px !important;

    background-color: #f1f2f4 !important;

    border-radius: 20px !important;

    aspect-ratio: 1 / 1.05 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   5. 卡片内部结构
   ========================================================== */

.materials-card > .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-start !important;
    align-items: center !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   6. 卡片标题
   ========================================================== */

.materials-card h1,
.materials-card h2,
.materials-card h3,
.materials-card h4,
.materials-card .wp-block-heading,
.materials-card .uagb-heading-text {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;

    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;

    flex: 0 0 auto !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   7. 图片区域
   ========================================================== */

.materials-card figure,
.materials-card .wp-block-image,
.materials-card .uagb-image,
.materials-card .uagb-image__figure {
    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;

    flex: 1 1 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

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

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* 图片 */
.materials-card img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   8. PC 1025px - 1280px
   仍然保持4列
   ========================================================== */

@media screen and (min-width: 1025px) and (max-width: 1280px) {

    .materials-section {
        width: calc(100% - 40px) !important;

        margin-top: 70px !important;
        margin-bottom: 70px !important;
    }


    .materials-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 16px !important;
    }


    .materials-card {
        padding-top: 24px !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
    }


    .materials-card h1,
    .materials-card h2,
    .materials-card h3,
    .materials-card h4,
    .materials-card .wp-block-heading,
    .materials-card .uagb-heading-text {
        font-size: 18px !important;
    }
}


/* ==========================================================
   9. 平板
   2 × 2
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .materials-section {
        width: calc(100% - 40px) !important;

        margin-top: 55px !important;
        margin-bottom: 55px !important;
    }


    .materials-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }


    .materials-intro h1,
    .materials-intro h2,
    .materials-intro h3,
    .materials-intro .wp-block-heading,
    .materials-intro .uagb-heading-text {
        font-size: 42px !important;
    }
}


/* ==========================================================
   10. 手机端
   2 × 2
   ========================================================== */

@media screen and (max-width: 767px) {

    /* 整体宽度 */
    .materials-section {
        width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        margin-top: 42px !important;
        margin-bottom: 42px !important;

        padding: 8px 0 !important;
    }


    .materials-section >
    .uagb-container-inner-blocks-wrap {
        gap: 36px !important;
    }


    /* 手机主标题 */
    .materials-intro h1,
    .materials-intro h2,
    .materials-intro h3,
    .materials-intro .wp-block-heading,
    .materials-intro .uagb-heading-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 22px !important;

        font-size: 34px !important;
        line-height: 1.13 !important;

        text-align: left !important;
    }


    /* 手机介绍文字 */
    .materials-intro p,
    .materials-intro .wp-block-paragraph,
    .materials-intro .uagb-desc-text {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.5 !important;

        text-align: left !important;
    }


    /* ======================================================
       手机强制2列
       ====================================================== */

    .materials-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        column-gap: 10px !important;
        row-gap: 12px !important;
    }


    .materials-grid >
    .uagb-container-inner-blocks-wrap {
        display: contents !important;
    }


    /* 手机卡片 */
    .materials-grid .materials-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        aspect-ratio: 1 / 1.06 !important;

        margin: 0 !important;

        padding-top: 18px !important;
        padding-right: 8px !important;
        padding-bottom: 7px !important;
        padding-left: 8px !important;

        border-radius: 17px !important;
    }


    /* 手机卡片标题 */
    .materials-card h1,
    .materials-card h2,
    .materials-card h3,
    .materials-card h4,
    .materials-card .wp-block-heading,
    .materials-card .uagb-heading-text {
        margin-bottom: 7px !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;

        text-align: center !important;
    }


    /* 手机图片 */
    .materials-card figure,
    .materials-card .wp-block-image,
    .materials-card .uagb-image,
    .materials-card .uagb-image__figure {
        flex: 1 1 0 !important;

        width: 100% !important;

        min-height: 0 !important;
    }


    .materials-card img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center bottom !important;
    }
}


/* ==========================================================
   11. 小屏手机
   ========================================================== */

@media screen and (max-width: 390px) {

    .materials-section {
        width: calc(100% - 24px) !important;
    }


    .materials-grid {
        column-gap: 8px !important;
        row-gap: 10px !important;
    }


    .materials-intro h1,
    .materials-intro h2,
    .materials-intro h3,
    .materials-intro .wp-block-heading,
    .materials-intro .uagb-heading-text {
        font-size: 31px !important;
    }


    .materials-card {
        padding-top: 15px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;

        border-radius: 15px !important;
    }


    .materials-card h1,
    .materials-card h2,
    .materials-card h3,
    .materials-card h4,
    .materials-card .wp-block-heading,
    .materials-card .uagb-heading-text {
        font-size: 13px !important;
        line-height: 1.18 !important;
    }
}

/* ==================================================
   Materials 标题与正文左侧对齐
   PC端修正
   ================================================== */

@media screen and (min-width: 1025px) {

    /* 标题+正文父区域 */
    .materials-intro > .uagb-container-inner-blocks-wrap {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        align-items: stretch !important;
    }


    /* 强制标题和正文的直接区块全部从同一条线开始 */
    .materials-intro >
    .uagb-container-inner-blocks-wrap > * {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* 标题 */
    .materials-intro h1,
    .materials-intro h2,
    .materials-intro h3,
    .materials-intro .wp-block-heading,
    .materials-intro .uagb-heading-text {
        width: 100% !important;
        max-width: 1180px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: left !important;
    }


    /* 正文 */
    .materials-intro p,
    .materials-intro .wp-block-paragraph,
    .materials-intro .uagb-desc-text {
        width: 100% !important;
        max-width: 1180px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: left !important;
    }
}


/* ==========================================================
   ONEHARBOR CARPORT BANNER
   CSS Class:
   mobile-carport-banner

   PC：
   高度 900px
   文字右对齐
   文字整体距离右边保留安全边距

   Mobile：
   保持之前效果
   ========================================================== */


/* ==========================================================
   基础
   ========================================================== */

.mobile-carport-banner {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

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

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   PC端
   ========================================================== */

@media screen and (min-width: 1025px) {

    .mobile-carport-banner {

        /* PC图片高度 */
        height: 900px !important;
        min-height: 900px !important;

        /*
         * 以后只需要修改这里
         *
         * 140px = 文字距离右边的距离
         *
         * 想更靠右：80px
         * 想离右边更远：180px
         */
        --banner-right-gap: 180px;
    }


    /* ======================================================
       整个内部区域
       ====================================================== */

    .mobile-carport-banner >
    .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;

        justify-content: center !important;
        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;

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

        box-sizing: border-box !important;
    }


    /* ======================================================
       关键：
       直接控制标题、正文外层区块

       不再依靠父Container的padding
       ====================================================== */

    .mobile-carport-banner >
    .uagb-container-inner-blocks-wrap >
    * {
        width: calc(52% - var(--banner-right-gap)) !important;
        max-width: 820px !important;

        margin-left: auto !important;
        margin-right: var(--banner-right-gap) !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       PC标题
       ====================================================== */

    .mobile-carport-banner h1,
    .mobile-carport-banner h2,
    .mobile-carport-banner h3,
    .mobile-carport-banner .wp-block-heading,
    .mobile-carport-banner .uagb-heading-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 0 !important;
        margin-right: 0 !important;

        /*
         * 标题和副标题距离
         */
        margin-bottom: 46px !important;

        margin-left: 0 !important;

        padding: 0 !important;

        text-align: right !important;

        line-height: 1.05 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       PC副标题 / 正文
       ====================================================== */

    .mobile-carport-banner p,
    .mobile-carport-banner .wp-block-paragraph,
    .mobile-carport-banner .uagb-desc-text {
        width: 100% !important;
        max-width: 100% !important;

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

        text-align: right !important;

        line-height: 1.4 !important;

        white-space: normal !important;
        word-break: normal !important;

        box-sizing: border-box !important;
    }
}


/* ==========================================================
   平板
   不做强制PC布局
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .mobile-carport-banner {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ==========================================================
   手机端
   保持之前效果
   ========================================================== */

@media screen and (max-width: 767px) {

    /* 手机Banner */
    .mobile-carport-banner {
        width: 100% !important;
        max-width: 100% !important;

        height: calc(100svh - 118px) !important;
        min-height: calc(100svh - 118px) !important;
        max-height: calc(100svh - 118px) !important;

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

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* 手机文字区域 */
    .mobile-carport-banner >
    .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;

        justify-content: center !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;

        margin: 0 !important;

        padding:
            clamp(230px, 34vh, 320px)
            24px
            90px
            24px !important;

        box-sizing: border-box !important;
    }


    /* 手机上取消PC强制的右边距 */
    .mobile-carport-banner >
    .uagb-container-inner-blocks-wrap >
    * {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }


    /* 手机标题 */
    .mobile-carport-banner h1,
    .mobile-carport-banner h2,
    .mobile-carport-banner h3,
    .mobile-carport-banner .wp-block-heading,
    .mobile-carport-banner .uagb-heading-text {
        width: 100% !important;
        max-width: 100% !important;

        margin:
            0
            auto
            18px
            auto !important;

        padding: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: clamp(34px, 7.8vw, 46px) !important;
        font-weight: 700 !important;

        line-height: 1.08 !important;
        letter-spacing: -0.5px !important;

        text-align: center !important;

        white-space: normal !important;
        word-break: normal !important;

        text-shadow:
            0 3px 10px rgba(0, 0, 0, 0.45) !important;
    }


    /* 手机正文 */
    .mobile-carport-banner p,
    .mobile-carport-banner .wp-block-paragraph,
    .mobile-carport-banner .uagb-desc-text {
        width: 100% !important;
        max-width: 100% !important;

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

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: clamp(17px, 4.6vw, 21px) !important;
        font-weight: 400 !important;

        line-height: 1.4 !important;

        text-align: center !important;

        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.45) !important;
    }
}


/* ==========================================================
   小屏手机
   ========================================================== */

@media screen and (max-width: 390px) {

    .mobile-carport-banner {
        height: calc(100svh - 105px) !important;
        min-height: calc(100svh - 105px) !important;
        max-height: calc(100svh - 105px) !important;
    }


    .mobile-carport-banner >
    .uagb-container-inner-blocks-wrap {
        padding:
            clamp(210px, 32vh, 290px)
            18px
            80px
            18px !important;
    }


    .mobile-carport-banner h1,
    .mobile-carport-banner h2,
    .mobile-carport-banner h3,
    .mobile-carport-banner .wp-block-heading,
    .mobile-carport-banner .uagb-heading-text {
        font-size: 32px !important;
    }


    .mobile-carport-banner p,
    .mobile-carport-banner .wp-block-paragraph,
    .mobile-carport-banner .uagb-desc-text {
        font-size: 16px !important;
    }
}
/* ==========================================================
   CARPORT BANNER PC端文字位置最终修正
   放在所有CSS最底部
   ========================================================== */

@media screen and (min-width: 1025px) {

    /* Banner高度 */
    .mobile-carport-banner {
        height: 900px !important;
        min-height: 900px !important;
    }


    /* 整个文字区域仍然靠右 */
    .mobile-carport-banner >
    .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;

        justify-content: center !important;
        align-items: flex-end !important;

        width: 100% !important;
        height: 100% !important;

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

        box-sizing: border-box !important;
    }


    /* ======================================================
       标题
       ====================================================== */

    .mobile-carport-banner h1,
    .mobile-carport-banner h2,
    .mobile-carport-banner h3,
    .mobile-carport-banner .wp-block-heading,
    .mobile-carport-banner .uagb-heading-text {

        width: auto !important;
        max-width: 900px !important;

        margin:
            0
            0
            46px
            auto !important;

        padding: 0 !important;

        text-align: right !important;

        /*
         * ★ 关键参数 ★
         *
         * -150px = 从右边向左移动150px
         *
         * 想更靠右：-80px
         * 想更靠左：-200px
         */
        transform: translateX(-150px) !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       副标题 / 正文
       ====================================================== */

    .mobile-carport-banner p,
    .mobile-carport-banner .wp-block-paragraph,
    .mobile-carport-banner .uagb-desc-text {

        width: auto !important;
        max-width: 760px !important;

        margin:
            0
            0
            0
            auto !important;

        padding: 0 !important;

        text-align: right !important;

        /*
         * 和标题移动相同距离
         */
        transform: translateX(-150px) !important;

        box-sizing: border-box !important;
    }
}
/* ==================================================
   PC端标题强制单行显示
   手机端不受影响
   ================================================== */

@media screen and (min-width: 1025px) {

    .mobile-carport-banner h1,
    .mobile-carport-banner h2,
    .mobile-carport-banner h3,
    .mobile-carport-banner .wp-block-heading,
    .mobile-carport-banner .uagb-heading-text {

        /* 强制一行 */
        white-space: nowrap !important;

        /* 不再限制标题宽度 */
        width: max-content !important;
        max-width: none !important;

        /* 保持右对齐 */
        text-align: right !important;

        /* 保持之前向左移动的位置 */
        transform: translateX(-150px) !important;

        /* 标题与下面文本的间距 */
        margin: 0 0 46px auto !important;
    }
}


/* ==========================================================
   ONEHARBOR FEATURE MOSAIC
   CSS Class:
   oneharbor-feature-mosaic

   子Container：
   mosaic-card mosaic-1
   mosaic-card mosaic-2
   mosaic-card mosaic-3
   mosaic-card mosaic-4
   mosaic-card mosaic-5

   PC：
   最大宽度1280px
   5个区域高度增加30%
   鼠标悬停轻微放大

   Mobile：
   2×2 + 最后一张通栏
   5个区域尽量一屏展示
   所有标题居中
   ========================================================== */


/* ==========================================================
   1. 整个板块
   ========================================================== */

.oneharbor-feature-mosaic {
    width: calc(100% - 40px) !important;
    max-width: 1280px !important;

    margin: 60px auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   2. PC Grid
   高度比上一版增加约30%
   原190px → 247px
   ========================================================== */

.oneharbor-feature-mosaic >
.uagb-container-inner-blocks-wrap {
    display: grid !important;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(0, 2fr) !important;

    grid-template-rows:
        247px
        247px
        247px
        247px
        247px !important;

    gap: 18px !important;

    width: 100% !important;
    max-width: 100% !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   3. PC拼图位置
   ========================================================== */

/* 左上大图 */
.oneharbor-feature-mosaic .mosaic-1 {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}


/* 右上 */
.oneharbor-feature-mosaic .mosaic-2 {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


/* 左中 */
.oneharbor-feature-mosaic .mosaic-3 {
    grid-column: 1 !important;
    grid-row: 3 !important;
}


/* 右侧纵向大图 */
.oneharbor-feature-mosaic .mosaic-4 {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
}


/* 最下面通栏大图 */
.oneharbor-feature-mosaic .mosaic-5 {
    grid-column: 1 / -1 !important;
    grid-row: 4 / span 2 !important;
}


/* ==========================================================
   4. 所有图片卡片
   ========================================================== */

.oneharbor-feature-mosaic .mosaic-card {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 100% !important;

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

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border-radius: 22px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    box-shadow:
        inset 0 -140px 110px -85px rgba(0, 0, 0, 0.72) !important;

    /*
     * 悬停动画
     */
    transform: scale(1);
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease !important;

    transform-origin: center center !important;
}


/* ==========================================================
   5. PC鼠标悬停轻微放大
   只对真正有鼠标的设备启用
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    .oneharbor-feature-mosaic .mosaic-card:hover {
        /*
         * 微微放大
         * 想更明显可以改成1.04
         */
        transform: scale(1.025) !important;

        z-index: 5 !important;

        box-shadow:
            inset 0 -140px 110px -85px rgba(0, 0, 0, 0.72),
            0 14px 32px rgba(0, 0, 0, 0.16) !important;
    }
}


/* ==========================================================
   6. 卡片内部
   ========================================================== */

.oneharbor-feature-mosaic
.mosaic-card >
.uagb-container-inner-blocks-wrap {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-end !important;
    align-items: flex-start !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    padding: 30px 34px !important;

    box-sizing: border-box !important;

    z-index: 2 !important;
}


/* ==========================================================
   7. PC图片内标题
   ========================================================== */

.oneharbor-feature-mosaic .mosaic-card h1,
.oneharbor-feature-mosaic .mosaic-card h2,
.oneharbor-feature-mosaic .mosaic-card h3,
.oneharbor-feature-mosaic .mosaic-card .wp-block-heading,
.oneharbor-feature-mosaic .mosaic-card .uagb-heading-text {
    width: auto !important;
    max-width: 90% !important;

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

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.45) !important;
}


/* ==========================================================
   8. 中小PC
   1025–1350px

   原170px → 增加30% → 221px
   ========================================================== */

@media screen and (min-width: 1025px) and (max-width: 1350px) {

    .oneharbor-feature-mosaic {
        width: calc(100% - 40px) !important;
    }


    .oneharbor-feature-mosaic >
    .uagb-container-inner-blocks-wrap {
        grid-template-rows:
            221px
            221px
            221px
            221px
            221px !important;

        gap: 15px !important;
    }


    .oneharbor-feature-mosaic .mosaic-card h1,
    .oneharbor-feature-mosaic .mosaic-card h2,
    .oneharbor-feature-mosaic .mosaic-card h3,
    .oneharbor-feature-mosaic .mosaic-card .wp-block-heading,
    .oneharbor-feature-mosaic .mosaic-card .uagb-heading-text {
        font-size: 24px !important;
    }
}


/* ==========================================================
   9. 手机端
   ========================================================== */

@media screen and (max-width: 767px) {

    /* ------------------------------------------------------
       手机整个板块全宽
       ------------------------------------------------------ */

    .oneharbor-feature-mosaic {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        margin-top: 18px !important;
        margin-bottom: 18px !important;

        padding: 0 10px !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       手机 Grid
       2×2 + 最后一张通栏
       ------------------------------------------------------ */

    .oneharbor-feature-mosaic >
    .uagb-container-inner-blocks-wrap {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows:
            1fr
            1fr
            1.8fr !important;

        height: calc(100svh - 135px) !important;
        max-height: calc(100svh - 135px) !important;

        gap: 8px !important;

        width: 100% !important;

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


    /* ------------------------------------------------------
       手机重新排布
       ------------------------------------------------------ */

    .oneharbor-feature-mosaic .mosaic-1 {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    .oneharbor-feature-mosaic .mosaic-2 {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }


    .oneharbor-feature-mosaic .mosaic-3 {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }


    .oneharbor-feature-mosaic .mosaic-4 {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }


    .oneharbor-feature-mosaic .mosaic-5 {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }


    /* ------------------------------------------------------
       手机卡片
       ------------------------------------------------------ */

    .oneharbor-feature-mosaic .mosaic-card {
        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        border-radius: 14px !important;

        background-size: cover !important;
        background-position: center center !important;

        /*
         * 手机上不需要Hover缩放
         */
        transform: none !important;

        box-shadow:
            inset 0 -80px 60px -50px rgba(0, 0, 0, 0.72) !important;
    }


    /* ------------------------------------------------------
       手机卡片内部
       标题全部居中
       ------------------------------------------------------ */

    .oneharbor-feature-mosaic
    .mosaic-card >
    .uagb-container-inner-blocks-wrap {
        display: flex !important;
        flex-direction: column !important;

        justify-content: flex-end !important;

        /*
         * ★ 修改：手机标题水平居中
         */
        align-items: center !important;

        width: 100% !important;
        height: 100% !important;

        padding: 12px 13px !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       手机所有标题居中
       ------------------------------------------------------ */

    .oneharbor-feature-mosaic .mosaic-card h1,
    .oneharbor-feature-mosaic .mosaic-card h2,
    .oneharbor-feature-mosaic .mosaic-card h3,
    .oneharbor-feature-mosaic .mosaic-card .wp-block-heading,
    .oneharbor-feature-mosaic .mosaic-card .uagb-heading-text {
        width: 100% !important;
        max-width: 100% !important;

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

        font-size: clamp(14px, 3.8vw, 18px) !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;

        /*
         * ★ 修改：全部居中
         */
        text-align: center !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        text-shadow:
            0 2px 7px rgba(0, 0, 0, 0.5) !important;
    }


    /* ------------------------------------------------------
       第5张大图标题
       ------------------------------------------------------ */

    .oneharbor-feature-mosaic .mosaic-5 h1,
    .oneharbor-feature-mosaic .mosaic-5 h2,
    .oneharbor-feature-mosaic .mosaic-5 h3,
    .oneharbor-feature-mosaic .mosaic-5 .wp-block-heading,
    .oneharbor-feature-mosaic .mosaic-5 .uagb-heading-text {
        font-size: clamp(18px, 5vw, 24px) !important;

        text-align: center !important;
    }
}


/* ==========================================================
   10. 小屏手机
   ========================================================== */

@media screen and (max-width: 390px) {

    .oneharbor-feature-mosaic {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    .oneharbor-feature-mosaic >
    .uagb-container-inner-blocks-wrap {
        height: calc(100svh - 120px) !important;
        max-height: calc(100svh - 120px) !important;

        gap: 6px !important;
    }


    .oneharbor-feature-mosaic .mosaic-card {
        border-radius: 11px !important;
    }


    .oneharbor-feature-mosaic
    .mosaic-card >
    .uagb-container-inner-blocks-wrap {
        padding: 9px 10px !important;
    }
}


/* ==========================================================
   ONEHARBOR Energy Feature Section

   父Container：
   energy-power-section

   标题文字Container：
   energy-power-intro

   Banner Container：
   energy-power-banner
   ========================================================== */


/* ==========================================================
   1. 最外层父 Container
   必须全宽
   ========================================================== */

.energy-power-section {
    width: 100% !important;
    max-width: none !important;

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

    box-sizing: border-box !important;
}


/* Spectra内部包装 */
.energy-power-section >
.uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: none !important;

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

    gap: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   2. 上方标题 + 文本区域
   PC最大宽度1280px
   ========================================================== */

.energy-power-intro {
    width: calc(100% - 40px) !important;
    max-width: 1280px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding:
        90px
        0
        70px
        0 !important;

    box-sizing: border-box !important;
}


.energy-power-intro >
.uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   3. PC标题
   ========================================================== */

.energy-power-intro h1,
.energy-power-intro h2,
.energy-power-intro h3,
.energy-power-intro .wp-block-heading,
.energy-power-intro .uagb-heading-text {
    width: 100% !important;
    max-width: 900px !important;

    margin:
        0
        0
        34px
        0 !important;

    padding: 0 !important;

    color: #111111 !important;

    font-size: clamp(44px, 4vw, 64px) !important;
    font-weight: 700 !important;

    line-height: 1.08 !important;
    letter-spacing: -1px !important;

    text-align: left !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   4. PC正文
   ========================================================== */

.energy-power-intro p,
.energy-power-intro .wp-block-paragraph,
.energy-power-intro .uagb-desc-text {
    width: 100% !important;
    max-width: 1050px !important;

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

    color: #222222 !important;

    font-size: 20px !important;
    font-weight: 400 !important;

    line-height: 1.55 !important;

    text-align: left !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   5. 下方 Banner
   PC真正全屏宽
   ========================================================== */

.energy-power-banner {
    position: relative !important;

    /*
     * 突破WordPress / Spectra父级宽度
     * 强制铺满浏览器
     */
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /*
     * PC Banner高度
     */
    height: 720px !important;
    min-height: 720px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* Banner如果没有其他内容 */
.energy-power-banner >
.uagb-container-inner-blocks-wrap {
    width: 100% !important;
    height: 100% !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   6. 中等PC
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 1350px) {

    .energy-power-intro {
        width: calc(100% - 50px) !important;

        padding-top: 70px !important;
        padding-bottom: 55px !important;
    }


    .energy-power-intro h1,
    .energy-power-intro h2,
    .energy-power-intro h3,
    .energy-power-intro .wp-block-heading,
    .energy-power-intro .uagb-heading-text {
        font-size: clamp(40px, 4.5vw, 54px) !important;
    }


    .energy-power-banner {
        height: 620px !important;
        min-height: 620px !important;
    }
}


/* ==========================================================
   7. 手机端
   文字在上
   图片在下
   ========================================================== */

@media screen and (max-width: 767px) {

    /* 整体 */
    .energy-power-section {
        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;
    }


    /* ======================================================
       手机文字区域
       ====================================================== */

    .energy-power-intro {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            42px
            22px
            36px
            22px !important;

        box-sizing: border-box !important;
    }


    .energy-power-intro >
    .uagb-container-inner-blocks-wrap {
        width: 100% !important;
        max-width: 100% !important;

        align-items: flex-start !important;
    }


    /* 手机标题 */
    .energy-power-intro h1,
    .energy-power-intro h2,
    .energy-power-intro h3,
    .energy-power-intro .wp-block-heading,
    .energy-power-intro .uagb-heading-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 22px !important;

        font-size: clamp(34px, 9vw, 44px) !important;
        line-height: 1.12 !important;

        text-align: left !important;

        letter-spacing: -0.5px !important;
    }


    /* 手机正文 */
    .energy-power-intro p,
    .energy-power-intro .wp-block-paragraph,
    .energy-power-intro .uagb-desc-text {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.5 !important;

        text-align: left !important;
    }


    /* ======================================================
       手机Banner
       ====================================================== */

    .energy-power-banner {
        width: 100vw !important;
        max-width: 100vw !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        /*
         * 手机图片区域最高不超过一屏
         */
        height: min(
            115vw,
            calc(100svh - 120px)
        ) !important;

        min-height: 0 !important;
        max-height: calc(100svh - 120px) !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding: 0 !important;

        /*
         * 如果你的手机Banner图片需要完整显示，
         * 用 contain
         */
        background-size: contain !important;

        background-position: center center !important;
        background-repeat: no-repeat !important;

        box-sizing: border-box !important;
    }
}


/* ==========================================================
   8. 小屏手机
   ========================================================== */

@media screen and (max-width: 390px) {

    .energy-power-intro {
        padding:
            36px
            18px
            30px
            18px !important;
    }


    .energy-power-intro h1,
    .energy-power-intro h2,
    .energy-power-intro h3,
    .energy-power-intro .wp-block-heading,
    .energy-power-intro .uagb-heading-text {
        font-size: 32px !important;
    }


    .energy-power-intro p,
    .energy-power-intro .wp-block-paragraph,
    .energy-power-intro .uagb-desc-text {
        font-size: 15px !important;
    }


    .energy-power-banner {
        height: min(
            120vw,
            calc(100svh - 105px)
        ) !important;
    }
}
/* ==========================================================
   Energy Power 标题和正文左侧对齐
   ========================================================== */

@media screen and (min-width: 768px) {

    /* 标题文字区域 */
    .energy-power-intro >
    .uagb-container-inner-blocks-wrap {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        align-items: stretch !important;

        box-sizing: border-box !important;
    }


    /* ======================================================
       关键：
       标题区块和正文区块统一宽度、统一起点
       ====================================================== */

    .energy-power-intro >
    .uagb-container-inner-blocks-wrap >
    * {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* 标题 */
    .energy-power-intro h1,
    .energy-power-intro h2,
    .energy-power-intro h3,
    .energy-power-intro .wp-block-heading,
    .energy-power-intro .uagb-heading-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: left !important;
    }


    /* 正文 */
    .energy-power-intro p,
    .energy-power-intro .wp-block-paragraph,
    .energy-power-intro .uagb-desc-text {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: left !important;
    }
}


/* =========================================================
   ONEHARBOR 全宽 Banner
   父 Container：oneharbor-full-banner
   文字 Container：oneharbor-full-banner-copy
   ========================================================= */


/* ========= 基础参数 ========= */
.oneharbor-full-banner{
    --banner-pc-height: 720px;         /* PC高度 */
    --copy-width-pc: 560px;            /* PC文字区域宽度 */
    --copy-right-gap: 90px;            /* PC右侧留白 */
    --section-gap: 10px;               /* 跟上下板块的间距 */

    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;

    height: var(--banner-pc-height) !important;
    min-height: var(--banner-pc-height) !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    margin-top: var(--section-gap) !important;
    margin-bottom: var(--section-gap) !important;

    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* Spectra / Gutenberg 内层撑满 */
.oneharbor-full-banner > .uagb-container-inner-blocks-wrap{
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ========= 右侧黑色渐变遮罩（做出你图里的效果） ========= */
.oneharbor-full-banner::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0.12) 45%,
            rgba(0,0,0,0.45) 62%,
            rgba(0,0,0,0.82) 78%,
            rgba(0,0,0,0.95) 100%
        );
}


/* ========= 文字容器：PC右侧、上下居中 ========= */
.oneharbor-full-banner .oneharbor-full-banner-copy{
    position: absolute !important;
    z-index: 3 !important;

    top: 50% !important;
    right: clamp(40px, 6vw, var(--copy-right-gap)) !important;
    transform: translateY(-50%) !important;

    width: min(var(--copy-width-pc), calc(100% - 80px)) !important;
    max-width: min(var(--copy-width-pc), calc(100% - 80px)) !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


.oneharbor-full-banner .oneharbor-full-banner-copy > .uagb-container-inner-blocks-wrap{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* ========= 标题 ========= */
.oneharbor-full-banner-copy h1,
.oneharbor-full-banner-copy h2,
.oneharbor-full-banner-copy h3,
.oneharbor-full-banner-copy .wp-block-heading,
.oneharbor-full-banner-copy .uagb-heading-text{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 24px 0 !important;
    padding: 0 !important;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    font-size: clamp(42px, 3.4vw, 66px) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.4px !important;

    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: normal !important;
}


/* ========= 正文 ========= */
.oneharbor-full-banner-copy p,
.oneharbor-full-banner-copy .wp-block-paragraph,
.oneharbor-full-banner-copy .uagb-desc-text,
.oneharbor-full-banner-copy .uagb-text-editor-wrap{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

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

    color: rgba(255,255,255,0.95) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.95) !important;

    font-size: clamp(19px, 1.45vw, 28px) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;

    text-align: left !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: normal !important;
}


/* 清理内部默认margin */
.oneharbor-full-banner-copy > .uagb-container-inner-blocks-wrap > *{
    box-sizing: border-box !important;
}


/* =========================================================
   平板 / 小屏PC
   ========================================================= */
@media screen and (min-width: 768px) and (max-width: 1280px){

    .oneharbor-full-banner{
        --copy-width-pc: 460px;
        --copy-right-gap: 50px;
    }

    .oneharbor-full-banner-copy h1,
    .oneharbor-full-banner-copy h2,
    .oneharbor-full-banner-copy h3,
    .oneharbor-full-banner-copy .wp-block-heading,
    .oneharbor-full-banner-copy .uagb-heading-text{
        font-size: clamp(34px, 4.2vw, 52px) !important;
    }

    .oneharbor-full-banner-copy p,
    .oneharbor-full-banner-copy .wp-block-paragraph,
    .oneharbor-full-banner-copy .uagb-desc-text,
    .oneharbor-full-banner-copy .uagb-text-editor-wrap{
        font-size: clamp(16px, 2vw, 22px) !important;
    }
}


/* =========================================================
   手机端
   - 背景图 1080*1600
   - 一屏能看完
   - 文本放在背景上方
   ========================================================= */
@media screen and (max-width: 767px){

    .oneharbor-full-banner{
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        margin-top: 8px !important;
        margin-bottom: 8px !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 1080 / 1600 !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        overflow: hidden !important;
    }

    /* 手机端遮罩：上方稍深，方便看文字 */
    .oneharbor-full-banner::before{
        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,0.65) 0%,
                rgba(0,0,0,0.45) 18%,
                rgba(0,0,0,0.18) 42%,
                rgba(0,0,0,0) 65%
            );
    }

    .oneharbor-full-banner .oneharbor-full-banner-copy{
        position: absolute !important;
        z-index: 3 !important;

        top: 9% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;

        width: calc(100% - 34px) !important;
        max-width: calc(100% - 34px) !important;

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

    .oneharbor-full-banner .oneharbor-full-banner-copy > .uagb-container-inner-blocks-wrap{
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .oneharbor-full-banner-copy h1,
    .oneharbor-full-banner-copy h2,
    .oneharbor-full-banner-copy h3,
    .oneharbor-full-banner-copy .wp-block-heading,
    .oneharbor-full-banner-copy .uagb-heading-text{
        width: 100% !important;
        max-width: 94% !important;

        margin: 0 auto 14px !important;
        padding: 0 !important;

        font-size: clamp(28px, 8vw, 42px) !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;

        text-align: center !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-wrap: break-word !important;
        word-break: normal !important;
    }

    .oneharbor-full-banner-copy p,
    .oneharbor-full-banner-copy .wp-block-paragraph,
    .oneharbor-full-banner-copy .uagb-desc-text,
    .oneharbor-full-banner-copy .uagb-text-editor-wrap{
        width: 100% !important;
        max-width: 90% !important;

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

        font-size: clamp(15px, 4.1vw, 19px) !important;
        line-height: 1.55 !important;

        text-align: center !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-wrap: break-word !important;
        word-break: normal !important;
    }
}


/* ==========================================================
   ONEHARBOR LEFT BANNER
   PC：720px全宽背景 + 左侧垂直居中文字
   Mobile：1080×1600背景 + 顶部居中文字
   ========================================================== */


/* ==========================================================
   1. PC 父 Banner
   ========================================================== */

.oh-left-banner {

    /* ===== 可调参数 ===== */

    --banner-height: 720px;

    /* PC文字区域宽度 */
    --copy-width: 560px;

    /* PC文字距离左侧 */
    --copy-left: clamp(70px, 10vw, 220px);

    /* 跟上下其他板块距离 */
    --section-gap: 10px;


    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: var(--banner-height) !important;
    min-height: var(--banner-height) !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    margin-top: var(--section-gap) !important;
    margin-bottom: var(--section-gap) !important;

    padding: 0 !important;

    overflow: hidden !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   2. Spectra 外层 Wrapper
   不参与PC定位
   ========================================================== */

.oh-left-banner >
.uagb-container-inner-blocks-wrap {

    position: static !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 100% !important;

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


/* ==========================================================
   3. PC 左侧文字 Container
   ★ 核心：直接绝对定位
   ========================================================== */

.oh-left-banner
.oh-left-banner__content {

    position: absolute !important;

    top: 50% !important;
    left: var(--copy-left) !important;

    right: auto !important;

    transform: translateY(-50%) !important;

    width: var(--copy-width) !important;
    max-width: var(--copy-width) !important;
    min-width: 0 !important;

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

    z-index: 5 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   4. 文字 Container 内部
   ========================================================== */

.oh-left-banner
.oh-left-banner__content >
.uagb-container-inner-blocks-wrap {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   5. PC 标题
   ========================================================== */

.oh-left-banner__content h1,
.oh-left-banner__content h2,
.oh-left-banner__content h3,
.oh-left-banner__content .wp-block-heading,
.oh-left-banner__content .uagb-heading-text {

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 24px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: clamp(46px, 4vw, 68px) !important;

    font-weight: 800 !important;

    line-height: 1.1 !important;

    text-align: left !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   6. PC 正文
   ========================================================== */

.oh-left-banner__content p,
.oh-left-banner__content .wp-block-paragraph,
.oh-left-banner__content .uagb-desc-text,
.oh-left-banner__content .uagb-text-editor-wrap {

    display: block !important;

    width: 100% !important;
    max-width: 520px !important;

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

    color: rgba(255,255,255,0.96) !important;

    -webkit-text-fill-color:
        rgba(255,255,255,0.96) !important;

    font-size: clamp(20px, 1.45vw, 27px) !important;

    font-weight: 400 !important;

    line-height: 1.65 !important;

    text-align: left !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: normal !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   7. PC 可选左侧轻微遮罩
   如果你的图片本身已经很暗，可以删除这一段
   ========================================================== */

.oh-left-banner::before {

    content: "";

    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,0.42) 0%,
            rgba(0,0,0,0.24) 32%,
            rgba(0,0,0,0.06) 58%,
            rgba(0,0,0,0) 75%
        ) !important;
}


/* ==========================================================
   8. 中等尺寸 PC / Laptop
   ========================================================== */

@media screen
and (min-width: 768px)
and (max-width: 1280px) {

    .oh-left-banner {

        --copy-width: 470px;

        --copy-left: 60px;
    }


    .oh-left-banner__content h1,
    .oh-left-banner__content h2,
    .oh-left-banner__content h3,
    .oh-left-banner__content .wp-block-heading,
    .oh-left-banner__content .uagb-heading-text {

        font-size: clamp(
            38px,
            4vw,
            54px
        ) !important;
    }


    .oh-left-banner__content p,
    .oh-left-banner__content .wp-block-paragraph,
    .oh-left-banner__content .uagb-desc-text,
    .oh-left-banner__content .uagb-text-editor-wrap {

        font-size: clamp(
            18px,
            1.8vw,
            23px
        ) !important;
    }
}


/* ==========================================================
   9. MOBILE
   与你之前满意的 oneharbor-full-banner 手机端同款
   背景：1080 × 1600
   ========================================================== */

@media screen and (max-width: 767px) {

    .oh-left-banner {

        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        margin-top: 8px !important;
        margin-bottom: 8px !important;

        /*
         * 取消PC的720px高度
         */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;


        /*
         * 保持1080×1600手机背景比例
         */
        aspect-ratio: 1080 / 1600 !important;


        padding: 0 !important;

        background-size: cover !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

        overflow: hidden !important;
    }


    /* ======================================================
       手机遮罩
       主要压暗图片顶部
       ====================================================== */

    .oh-left-banner::before {

        display: block !important;

        position: absolute !important;

        inset: 0 !important;

        background:
            linear-gradient(
                to bottom,

                rgba(0,0,0,0.66) 0%,

                rgba(0,0,0,0.44) 20%,

                rgba(0,0,0,0.18) 42%,

                rgba(0,0,0,0) 68%
            ) !important;

        z-index: 1 !important;
    }


    /* ======================================================
       手机文字 Container
       顶部 + 居中
       ====================================================== */

    .oh-left-banner
    .oh-left-banner__content {

        position: absolute !important;

        z-index: 5 !important;


        /*
         * 文字距离背景顶部
         */
        top: 9% !important;


        left: 50% !important;

        right: auto !important;


        transform:
            translateX(-50%) !important;


        width:
            calc(
                100% - 34px
            ) !important;

        max-width:
            calc(
                100% - 34px
            ) !important;

        min-width: 0 !important;


        margin: 0 !important;

        padding: 0 !important;
    }


    /* ======================================================
       手机文字内部
       ====================================================== */

    .oh-left-banner
    .oh-left-banner__content >
    .uagb-container-inner-blocks-wrap {

        display: flex !important;

        flex-direction: column !important;

        justify-content: flex-start !important;

        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* ======================================================
       手机标题
       ====================================================== */

    .oh-left-banner__content h1,
    .oh-left-banner__content h2,
    .oh-left-banner__content h3,
    .oh-left-banner__content .wp-block-heading,
    .oh-left-banner__content .uagb-heading-text {

        width: 100% !important;

        max-width: 94% !important;

        margin:
            0
            auto
            14px !important;

        padding: 0 !important;

        color: #ffffff !important;

        -webkit-text-fill-color:
            #ffffff !important;

        font-size:
            clamp(
                28px,
                8vw,
                42px
            ) !important;

        font-weight: 700 !important;

        line-height: 1.18 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;

        word-wrap: break-word !important;

        word-break: normal !important;
    }


    /* ======================================================
       手机正文
       ====================================================== */

    .oh-left-banner__content p,
    .oh-left-banner__content .wp-block-paragraph,
    .oh-left-banner__content .uagb-desc-text,
    .oh-left-banner__content .uagb-text-editor-wrap {

        width: 100% !important;

        max-width: 90% !important;

        margin:
            0
            auto !important;

        padding: 0 !important;

        color:
            rgba(
                255,
                255,
                255,
                0.96
            ) !important;

        -webkit-text-fill-color:
            rgba(
                255,
                255,
                255,
                0.96
            ) !important;

        font-size:
            clamp(
                15px,
                4.1vw,
                19px
            ) !important;

        font-weight: 400 !important;

        line-height: 1.55 !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;

        word-wrap: break-word !important;

        word-break: normal !important;
    }
}


/* ==========================================================
   10. 小屏手机
   ========================================================== */

@media screen and (max-width: 390px) {

    .oh-left-banner
    .oh-left-banner__content {

        width: calc(100% - 28px) !important;

        max-width: calc(100% - 28px) !important;
    }


    .oh-left-banner__content h1,
    .oh-left-banner__content h2,
    .oh-left-banner__content h3,
    .oh-left-banner__content .wp-block-heading,
    .oh-left-banner__content .uagb-heading-text {

        font-size: 28px !important;
    }


    .oh-left-banner__content p,
    .oh-left-banner__content .wp-block-paragraph,
    .oh-left-banner__content .uagb-desc-text,
    .oh-left-banner__content .uagb-text-editor-wrap {

        font-size: 15px !important;
    }
}


/* ========================================================= 
   ONEHARBOR FEATURES SECTION 
   PC：1280px / 3列2行 / 标题居中 / 卡片统一对齐 
   Mobile：2列3行 / 卡片高度缩短
   ========================================================= */ 


/* =========================================================
   整个板块
   ========================================================= */
.oh-features-section { 
    width: 100%; 
    max-width: 1280px !important; 
    margin: 28px auto !important; 
    padding: 0 12px !important; 
    box-sizing: border-box !important; 
} 


/* =========================================================
   板块标题
   ========================================================= */
.oh-features-title, 
.oh-features-section > h1, 
.oh-features-section > h2, 
.oh-features-section .wp-block-heading:first-child { 

    width: 100% !important; 
    display: block !important; 

    text-align: center !important; 

    margin: 0 0 34px 0 !important; 
    padding: 0 !important; 

    font-size: 56px !important; 
    font-weight: 800 !important; 
    line-height: 1.1 !important; 

    color: #000 !important; 
} 


/* =========================================================
   PC Grid
   ========================================================= */
.oh-features-grid { 

    width: 100% !important; 
    max-width: 1280px !important; 

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

    box-sizing: border-box !important; 

    display: grid !important; 

    grid-template-columns: 
        repeat(
            3,
            minmax(0, 1fr)
        ) !important; 

    gap: 18px !important; 

    align-items: stretch !important; 
} 


/* Spectra / Gutenberg兼容 */
.oh-features-grid > .uagb-container-inner-blocks-wrap { 
    display: contents !important; 
} 


/* =========================================================
   PC 单个卡片
   保持原来的正方形
   ========================================================= */
.oh-feature-card { 

    width: 100% !important; 

    aspect-ratio: 1 / 1 !important; 

    background: #f3f3f5 !important; 

    border-radius: 18px !important; 

    box-sizing: border-box !important; 

    padding: 28px 24px !important; 

    overflow: hidden !important; 

    display: flex !important; 

    align-items: stretch !important; 
    justify-content: stretch !important; 

    text-align: center !important; 
} 


/* =========================================================
   卡片内部统一结构
   ========================================================= */
.oh-feature-card > .uagb-container-inner-blocks-wrap, 
.oh-feature-card > .wp-block-group__inner-container, 
.oh-feature-card > .block-editor-block-list__layout { 

    width: 100% !important; 
    height: 100% !important; 

    display: flex !important; 
    flex-direction: column !important; 

    align-items: center !important; 
    justify-content: flex-start !important; 

    text-align: center !important; 

    box-sizing: border-box !important; 
} 


.oh-feature-card { 
    text-align: center !important; 
} 


/* =========================================================
   PC 图标固定区域
   ========================================================= */
.oh-feature-card .wp-block-image, 
.oh-feature-card .uagb-image__outer-wrap, 
.oh-feature-card .uagb-icon-wrapper, 
.oh-feature-card .wp-block-uagb-image { 

    width: 100% !important; 

    min-height: 82px !important; 

    display: flex !important; 

    align-items: center !important; 
    justify-content: center !important; 

    margin: 0 0 8px 0 !important; 
    padding: 0 !important; 
} 


/* PC图标图片 */
.oh-feature-card img, 
.oh-feature-card .wp-block-image img { 

    width: 54px !important; 
    height: 54px !important; 

    object-fit: contain !important; 

    display: block !important; 

    margin: 0 auto !important; 
} 


/* SVG / icon */
.oh-feature-card svg, 
.oh-feature-card i { 

    width: 54px !important; 
    height: 54px !important; 

    font-size: 54px !important; 

    display: block !important; 

    margin: 0 auto !important; 
} 


/* =========================================================
   PC 卡片标题固定区域
   ========================================================= */
.oh-feature-card h3, 
.oh-feature-card h4, 
.oh-feature-card .wp-block-heading, 
.oh-feature-card .uagb-heading-text { 

    width: 100% !important; 

    min-height: 76px !important; 

    margin: 0 0 16px 0 !important; 
    padding: 0 !important; 

    display: flex !important; 

    align-items: center !important; 
    justify-content: center !important; 

    text-align: center !important; 

    font-size: 20px !important; 
    font-weight: 700 !important; 
    line-height: 1.35 !important; 

    color: #111 !important; 

    white-space: normal !important; 
    word-break: break-word !important; 
    overflow-wrap: break-word !important; 
} 


/* =========================================================
   PC 描述文字
   ========================================================= */
.oh-feature-card p, 
.oh-feature-card .wp-block-paragraph, 
.oh-feature-card .uagb-desc-text, 
.oh-feature-card .uagb-text-editor-wrap { 

    width: 100% !important; 

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

    text-align: center !important; 

    font-size: 15px !important; 
    font-weight: 400 !important; 
    line-height: 1.65 !important; 

    color: #666 !important; 

    white-space: normal !important; 
    word-break: break-word !important; 
    overflow-wrap: break-word !important; 
} 


.oh-feature-card .uagb-text-editor-wrap p, 
.oh-feature-card p:last-child { 
    margin: 0 !important; 
} 


/* ========================================================= 
   平板端
   ========================================================= */ 
@media screen and (max-width: 1024px) { 

    .oh-features-section { 

        width: calc(100% - 28px) !important; 
        max-width: 1280px !important; 

        margin: 24px auto !important; 
        padding: 0 !important; 
    } 


    .oh-features-title, 
    .oh-features-section > h1, 
    .oh-features-section > h2, 
    .oh-features-section .wp-block-heading:first-child { 

        font-size: 44px !important; 

        margin-bottom: 26px !important; 
    } 


    .oh-features-grid { 
        gap: 16px !important; 
    } 


    .oh-feature-card { 
        padding: 24px 18px !important; 
    } 


    .oh-feature-card .wp-block-image, 
    .oh-feature-card .uagb-image__outer-wrap, 
    .oh-feature-card .uagb-icon-wrapper, 
    .oh-feature-card .wp-block-uagb-image { 

        min-height: 74px !important; 
    } 


    .oh-feature-card h3, 
    .oh-feature-card h4, 
    .oh-feature-card .wp-block-heading, 
    .oh-feature-card .uagb-heading-text { 

        min-height: 68px !important; 

        font-size: 18px !important; 
    } 


    .oh-feature-card p, 
    .oh-feature-card .wp-block-paragraph, 
    .oh-feature-card .uagb-desc-text, 
    .oh-feature-card .uagb-text-editor-wrap { 

        font-size: 14px !important; 
    } 
} 


/* ========================================================= 
   手机端
   2列 × 3行

   重点：
   不再使用 aspect-ratio
   不再使用 min-height
   卡片高度直接固定为 300px
   ========================================================= */ 
@media screen and (max-width: 767px) { 

    .oh-features-section { 

        width: calc(100% - 24px) !important; 
        max-width: 100% !important; 

        margin: 20px auto !important; 

        padding: 0 !important; 
    } 


    /* 手机板块标题 */
    .oh-features-title, 
    .oh-features-section > h1, 
    .oh-features-section > h2, 
    .oh-features-section .wp-block-heading:first-child { 

        width: 100% !important; 

        font-size: 34px !important; 
        line-height: 1.15 !important; 

        margin: 0 0 22px 0 !important; 

        text-align: center !important; 
    } 


    /* 手机两列 */
    .oh-features-grid { 

        grid-template-columns: 
            repeat(
                2,
                minmax(0, 1fr)
            ) !important; 

        gap: 14px !important; 
    } 


    /* =====================================================
       手机卡片高度
       ★ 以后只需要改这里 ★
       ===================================================== */
    .oh-feature-card { 

        width: 100% !important; 

        /* 取消PC正方形比例 */
        aspect-ratio: auto !important; 

        /* 固定手机卡片高度 */
        height: 300px !important; 

        min-height: 0 !important; 
        max-height: none !important; 

        border-radius: 16px !important; 

        padding: 16px 14px !important; 

        box-sizing: border-box !important; 

        overflow: hidden !important; 
    } 


    /* =====================================================
       手机图标固定区域
       ===================================================== */
    .oh-feature-card .wp-block-image, 
    .oh-feature-card .uagb-image__outer-wrap, 
    .oh-feature-card .uagb-icon-wrapper, 
    .oh-feature-card .wp-block-uagb-image { 

        width: 100% !important; 

        height: 60px !important; 
        min-height: 60px !important; 

        margin: 0 0 4px 0 !important; 

        padding: 0 !important; 

        display: flex !important; 

        align-items: center !important; 
        justify-content: center !important; 
    } 


    /* 手机图标 */
    .oh-feature-card img, 
    .oh-feature-card .wp-block-image img { 

        width: 44px !important; 
        height: 44px !important; 

        object-fit: contain !important; 

        margin: 0 auto !important; 
    } 


    .oh-feature-card svg, 
    .oh-feature-card i { 

        width: 44px !important; 
        height: 44px !important; 

        font-size: 44px !important; 
    } 


    /* =====================================================
       手机标题
       统一占位高度
       ===================================================== */
    .oh-feature-card h3, 
    .oh-feature-card h4, 
    .oh-feature-card .wp-block-heading, 
    .oh-feature-card .uagb-heading-text { 

        width: 100% !important; 

        min-height: 68px !important; 

        margin: 0 0 8px 0 !important; 

        padding: 0 !important; 

        display: flex !important; 

        align-items: center !important; 
        justify-content: center !important; 

        font-size: 16px !important; 
        font-weight: 700 !important; 
        line-height: 1.3 !important; 

        text-align: center !important; 

        white-space: normal !important; 
        word-break: break-word !important; 
        overflow-wrap: break-word !important; 
    } 


    /* =====================================================
       手机正文
       ===================================================== */
    .oh-feature-card p, 
    .oh-feature-card .wp-block-paragraph, 
    .oh-feature-card .uagb-desc-text, 
    .oh-feature-card .uagb-text-editor-wrap { 

        width: 100% !important; 

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

        font-size: 12px !important; 
        line-height: 1.5 !important; 

        text-align: center !important; 

        color: #666 !important; 

        white-space: normal !important; 
        word-break: break-word !important; 
        overflow-wrap: break-word !important; 
    } 
} 


/* ========================================================= 
   超小屏手机
   ========================================================= */ 
@media screen and (max-width: 390px) { 

    .oh-features-section { 

        width: calc(100% - 20px) !important; 

        margin: 18px auto !important; 
    } 


    .oh-features-title, 
    .oh-features-section > h1, 
    .oh-features-section > h2, 
    .oh-features-section .wp-block-heading:first-child { 

        font-size: 30px !important; 

        margin-bottom: 18px !important; 
    } 


    .oh-features-grid { 
        gap: 12px !important; 
    } 


    /* 小屏手机再矮一点 */
    .oh-feature-card { 

        height: 285px !important; 

        min-height: 0 !important; 

        aspect-ratio: auto !important; 

        padding: 14px 12px !important; 
    } 


    .oh-feature-card .wp-block-image, 
    .oh-feature-card .uagb-image__outer-wrap, 
    .oh-feature-card .uagb-icon-wrapper, 
    .oh-feature-card .wp-block-uagb-image { 

        height: 56px !important; 
        min-height: 56px !important; 
    } 


    .oh-feature-card h3, 
    .oh-feature-card h4, 
    .oh-feature-card .wp-block-heading, 
    .oh-feature-card .uagb-heading-text { 

        min-height: 62px !important; 

        font-size: 15px !important; 
    } 


    .oh-feature-card p, 
    .oh-feature-card .wp-block-paragraph, 
    .oh-feature-card .uagb-desc-text, 
    .oh-feature-card .uagb-text-editor-wrap { 

        font-size: 11.5px !important; 
    } 
}


/* =========================================================
   ONEHARBOR FOOTER
   Above Footer CTA + Primary Footer
   ========================================================= */


/* =========================================================
   01. ABOVE FOOTER - B2B CTA
   ========================================================= */

.oh-footer-cta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    box-sizing: border-box;
}


/* 左侧文字区域 */
.oh-footer-cta-content {
    flex: 1;
    min-width: 0;
    text-align: left !important;
}


/* CTA 标题 */
.oh-footer-cta h2 {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    color: #ffffff !important;

    text-align: left !important;
}


/* CTA 描述 */
.oh-footer-cta p {
    margin: 0 !important;
    padding: 0 !important;

    max-width: 820px;

    font-size: 15px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;

    color: rgba(255, 255, 255, 0.72) !important;

    text-align: left !important;
}


/* 右侧按钮区域 */
.oh-footer-cta-action {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* REQUEST A QUOTE 按钮 */
.oh-footer-cta-button {
    width: 198px;
    height: 54px;

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

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box;

    border: 1px solid #c6a15b !important;
    border-radius: 2px;

    background: transparent !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;

    text-align: center !important;
    text-decoration: none !important;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


/* CTA 按钮 Hover */
.oh-footer-cta-button:hover,
.oh-footer-cta-button:focus {
    background: #c6a15b !important;
    border-color: #c6a15b !important;

    color: #111111 !important;

    text-decoration: none !important;
}



/* =========================================================
   02. PRIMARY FOOTER - GLOBAL
   ========================================================= */


/* 防止 Astra 默认 Widget Margin 影响四栏对齐 */
.site-primary-footer-wrap .widget {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Footer 内容统一左对齐 */
.oh-footer-brand,
.oh-footer-column {
    width: 100%;
    margin: 0;
    padding: 0;

    text-align: left !important;
}


/* =========================================================
   03. PRIMARY FOOTER - BRAND COLUMN
   ========================================================= */


/* ONEHARBOR 品牌名称 */
.oh-footer-brand-name {
    display: block;

    margin: 0 0 22px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 1.8px !important;

    text-align: left !important;
}


/* 品牌介绍 */
.oh-footer-brand-desc {
    max-width: 330px;

    margin: 0 0 26px 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;

    text-align: left !important;
}


/* 联系方式 */
.oh-footer-contact {
    margin: 0;
    padding: 0;

    text-align: left !important;
}


.oh-footer-contact p {
    margin: 0 0 9px 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.66) !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;

    text-align: left !important;
}


/* 联系方式链接 */
.oh-footer-contact a {
    color: rgba(255, 255, 255, 0.66) !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    text-decoration: none !important;

    transition: color 0.25s ease;
}


.oh-footer-contact a:hover,
.oh-footer-contact a:focus {
    color: #c6a15b !important;
    text-decoration: none !important;
}



/* =========================================================
   04. PRIMARY FOOTER - COLUMN TITLES
   PRODUCTS / COMPANY / RESOURCES
   ========================================================= */


/*
HTML 必须使用：

<div class="oh-footer-title">PRODUCTS</div>

不要再使用：
<h3>PRODUCTS</h3>
*/

.oh-footer-title {
    display: block;
    width: 100%;

    margin: 0 0 27px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 1.5px !important;
    text-transform: uppercase;

    text-align: left !important;

    white-space: nowrap !important;
}



/* =========================================================
   05. PRIMARY FOOTER - NAVIGATION LISTS
   ========================================================= */

.oh-footer-column ul {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


.oh-footer-column ul li {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-align: left !important;

    list-style: none !important;
}


/* 删除 Astra 可能添加的列表符号 */
.oh-footer-column ul li::before,
.oh-footer-column ul li::marker {
    display: none !important;
    content: none !important;
}


/* 导航链接 */
.oh-footer-column ul li a {
    color: rgba(255, 255, 255, 0.62) !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-decoration: none !important;

    transition: color 0.25s ease;
}


/* Hover 金色 */
.oh-footer-column ul li a:hover,
.oh-footer-column ul li a:focus {
    color: #c6a15b !important;

    text-decoration: none !important;
}



/* =========================================================
   06. 防止 Footer 内 Astra 默认标题样式干扰
   ========================================================= */

.site-primary-footer-wrap .oh-footer-column h1,
.site-primary-footer-wrap .oh-footer-column h2,
.site-primary-footer-wrap .oh-footer-column h3,
.site-primary-footer-wrap .oh-footer-column h4,
.site-primary-footer-wrap .oh-footer-column h5,
.site-primary-footer-wrap .oh-footer-column h6 {
    margin: 0 !important;
    padding: 0 !important;
}


/* Widget 内部不要增加额外上边距 */
.site-primary-footer-wrap .widget,
.site-primary-footer-wrap .widget-area,
.site-primary-footer-wrap .ast-footer-html {
    vertical-align: top !important;
}



/* =========================================================
   07. TABLET
   ========================================================= */

@media (max-width: 921px) {

    /* Above Footer */
    .oh-footer-cta {
        gap: 35px;
    }

    .oh-footer-cta h2 {
        font-size: 25px !important;
    }

    .oh-footer-cta p {
        font-size: 14px !important;
    }

    .oh-footer-cta-button {
        width: 180px;
        height: 50px;
    }


    /* Primary Footer */
    .oh-footer-brand-name {
        font-size: 20px !important;
    }

    .oh-footer-brand-desc {
        max-width: 100%;
    }

    .oh-footer-title {
        margin-bottom: 22px !important;
    }

}



/* =========================================================
   08. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* -------------------------
       Above Footer
       ------------------------- */

    .oh-footer-cta {
        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 22px;
    }

    .oh-footer-cta-content {
        width: 100%;
    }

    .oh-footer-cta h2 {
        font-size: 23px !important;
        line-height: 1.3 !important;

        text-align: left !important;
    }

    .oh-footer-cta p {
        max-width: 100%;

        font-size: 14px !important;
        line-height: 1.7 !important;

        text-align: left !important;
    }

    .oh-footer-cta-action {
        width: 100%;

        justify-content: flex-start;
    }

    .oh-footer-cta-button {
        width: auto;
        min-width: 180px;
        height: 48px;

        padding: 0 24px !important;
    }


    /* -------------------------
       Primary Footer
       ------------------------- */

    .oh-footer-brand,
    .oh-footer-column {
        width: 100%;

        text-align: left !important;
    }


    .oh-footer-brand-name {
        margin-bottom: 16px !important;

        font-size: 20px !important;
    }


    .oh-footer-brand-desc {
        max-width: 100%;

        margin-bottom: 20px !important;
    }


    .oh-footer-title {
        margin: 0 0 18px 0 !important;

        font-size: 13px !important;
    }


    .oh-footer-column ul li {
        margin-bottom: 12px !important;
    }

}


/* =========================================================
   ONEHARBOR FACTORY
   5组 左图右文 / 右图左文 交替排版
   PC最大宽度1280px
   Mobile图片在上文字在下
   ========================================================= */


/* 整个 Factory 内容区域 */
.oh-factory-section {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;
    padding: 40px 24px 80px;

    box-sizing: border-box;
}


/* =========================================================
   单个 Factory 模块
   ========================================================= */

.oh-factory-item {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: 70px;

    margin: 0 0 100px 0;

    box-sizing: border-box;
}


/* 最后一组不需要底部大间距 */
.oh-factory-item:last-child {
    margin-bottom: 0;
}


/* =========================================================
   默认：奇数
   左图 + 右文
   ========================================================= */

.oh-factory-image {
    grid-column: 1;
    grid-row: 1;
}


.oh-factory-content {
    grid-column: 2;
    grid-row: 1;
}


/* =========================================================
   偶数：
   左文 + 右图
   ========================================================= */

.oh-factory-item:nth-child(even) .oh-factory-image {
    grid-column: 2;
}


.oh-factory-item:nth-child(even) .oh-factory-content {
    grid-column: 1;
}



/* =========================================================
   图片
   ========================================================= */

.oh-factory-image {
    width: 100%;

    overflow: hidden;

    border-radius: 2px;
}


.oh-factory-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transition: transform 0.6s ease;
}


/* PC鼠标经过轻微放大 */
.oh-factory-image:hover img {
    transform: scale(1.025);
}



/* =========================================================
   文字区域
   ========================================================= */

.oh-factory-content {
    width: 100%;
    max-width: 500px;

    text-align: left;
}


/* 偶数模块的文字仍然保持左对齐 */
.oh-factory-item:nth-child(even) .oh-factory-content {
    justify-self: start;
}


/* 奇数模块文字稍微靠右侧 */
.oh-factory-item:nth-child(odd) .oh-factory-content {
    justify-self: end;
}



/* =========================================================
   编号 01 / 02 / 03
   ========================================================= */

.oh-factory-number {
    margin: 0 0 14px 0;

    font-size: 13px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: 2px;

    color: #9a7a45;
}



/* =========================================================
   H2 标题
   ========================================================= */

.oh-factory-content h2 {
    margin: 0 0 22px 0 !important;
    padding: 0 !important;

    font-size: 34px !important;
    line-height: 1.2 !important;

    font-weight: 700 !important;

    color: #111111 !important;

    text-align: left !important;
}



/* =========================================================
   正文
   ========================================================= */

.oh-factory-content p {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 16px !important;
    line-height: 1.85 !important;

    font-weight: 400 !important;

    color: #606060 !important;

    text-align: left !important;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .oh-factory-section {
        padding-left: 30px;
        padding-right: 30px;
    }


    .oh-factory-item {
        gap: 45px;
        margin-bottom: 80px;
    }


    .oh-factory-content h2 {
        font-size: 29px !important;
    }


    .oh-factory-content p {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

}



/* =========================================================
   MOBILE
   图片全部在上
   文字全部在下
   ========================================================= */

@media (max-width: 767px) {

    .oh-factory-section {
        padding: 30px 18px 60px;
    }


    .oh-factory-item {
        display: grid;

        grid-template-columns: 1fr;
        grid-template-rows: auto auto;

        gap: 28px;

        margin-bottom: 65px;
    }


    /* 无论奇数还是偶数
       图片全部第一行 */
    .oh-factory-item .oh-factory-image,
    .oh-factory-item:nth-child(even) .oh-factory-image {
        grid-column: 1;
        grid-row: 1;

        width: 100%;
    }


    /* 无论奇数还是偶数
       文字全部第二行 */
    .oh-factory-item .oh-factory-content,
    .oh-factory-item:nth-child(even) .oh-factory-content {
        grid-column: 1;
        grid-row: 2;

        width: 100%;
        max-width: 100%;

        justify-self: start;

        text-align: left;
    }


    .oh-factory-image img {
        aspect-ratio: 4 / 3;
    }


    .oh-factory-number {
        margin-bottom: 12px;

        font-size: 12px;
    }


    .oh-factory-content h2 {
        margin-bottom: 16px !important;

        font-size: 25px !important;
        line-height: 1.25 !important;
    }


    .oh-factory-content p {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }


    /* 手机端取消 Hover 放大 */
    .oh-factory-image:hover img {
        transform: none;
    }

}


/* =========================================================
   ONEHARBOR PROJECTS PAGE
   Desktop Max Width: 1280px
   Tablet + Mobile Responsive
   No Duplicate Bottom CTA
   ========================================================= */


/* =========================================================
   01 GLOBAL RESET
   ========================================================= */

.oh-projects-page {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}

.oh-projects-page *,
.oh-projects-page *::before,
.oh-projects-page *::after {
    box-sizing: border-box;
}


/* 防止页面最后出现额外 Margin */
.oh-projects-page > section:last-child {
    margin-bottom: 0 !important;
}


/* 金色小标签 */
.oh-projects-label,
.oh-section-label {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: #9a7a45 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 2.2px !important;
    text-transform: uppercase;
}



/* =========================================================
   02 PROJECTS INTRO
   ========================================================= */

.oh-projects-intro {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto !important;

    padding: 75px 24px 70px;

    text-align: center;
}


.oh-projects-intro h1 {
    width: 100%;
    max-width: 900px;

    margin: 0 auto 24px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    letter-spacing: -1px;

    text-align: center !important;
}


.oh-projects-intro p {
    width: 100%;
    max-width: 780px;

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

    color: #686868 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;

    text-align: center !important;
}



/* =========================================================
   03 COMMON SECTION HEADING
   ========================================================= */

.oh-section-heading {
    width: 100%;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    margin: 0 0 38px !important;
}


.oh-section-heading > div {
    flex: 1;
    min-width: 0;
}


.oh-section-heading h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: left !important;
}


.oh-section-heading > p {
    width: 100%;
    max-width: 500px;

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

    color: #666666 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;

    text-align: left !important;
}



/* =========================================================
   04 PROJECT GALLERY
   ========================================================= */

.oh-project-gallery {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto !important;

    padding: 25px 24px 95px;
}


/* 3列 */
.oh-project-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/* 项目卡片 */
.oh-project-card {
    position: relative;

    width: 100%;
    min-height: 390px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #111111;
}


/* 大卡占两列 */
.oh-project-card.oh-project-large {
    grid-column: span 2;
}


/* 图片容器 */
.oh-project-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* 图片 */
.oh-project-image img {
    display: block;

    width: 100%;
    height: 100%;

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

    object-fit: cover;

    transition: transform 0.7s ease;
}


/* 图片渐变遮罩 */
.oh-project-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.28) 45%,
            rgba(0, 0, 0, 0.05) 75%
        );

    pointer-events: none;

    transition: background 0.35s ease;
}


/* Hover */
.oh-project-card:hover .oh-project-image img {
    transform: scale(1.035);
}


.oh-project-card:hover::after {
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.35) 50%,
            rgba(0, 0, 0, 0.08) 80%
        );
}


/* 图片上文字 */
.oh-project-overlay {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 26px;

    z-index: 2;

    text-align: left;
}


.oh-project-overlay span {
    display: block;

    margin: 0 0 8px 0 !important;

    color: #c6a15b !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 1.8px !important;
}


.oh-project-overlay h3 {
    margin: 0 0 7px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-align: left !important;
}


.oh-project-overlay p {
    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.70) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    text-align: left !important;
}



/* =========================================================
   05 SELECTED PROJECT CASES
   ========================================================= */

.oh-project-cases {
    width: 100%;

    margin: 0 !important;

    padding: 90px 24px 95px;

    background: #f5f5f3;
}


.oh-project-cases-inner {
    width: 100%;
    max-width: 1232px;

    margin: 0 auto;
}


/* 居中标题 */
.oh-section-heading-center {
    display: block;

    width: 100%;
    max-width: 780px;

    margin: 0 auto 48px !important;

    text-align: center;
}


.oh-section-heading-center h2 {
    text-align: center !important;
}


.oh-section-heading-center > p {
    width: 100%;
    max-width: 720px;

    margin: 20px auto 0 !important;

    text-align: center !important;
}


/* 案例网格 */
.oh-case-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
}


/* 案例卡片 */
.oh-case-card {
    width: 100%;

    margin: 0;
    padding: 34px 30px 30px;

    background: #ffffff;

    border: 1px solid #e7e7e4;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.oh-case-card:hover {
    transform: translateY(-4px);

    border-color: #d5d0c8;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}


/* 国家 */
.oh-case-country {
    margin: 0 0 14px 0 !important;

    color: #9a7a45 !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 2px !important;
}


/* 标题 */
.oh-case-card h3 {
    min-height: 56px;

    margin: 0 0 25px 0 !important;
    padding: 0 !important;

    color: #171717 !important;

    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    text-align: left !important;
}


/* DL */
.oh-case-card dl,
.oh-case-card dt,
.oh-case-card dd {
    margin: 0 !important;
    padding: 0 !important;
}


/* 参数行 */
.oh-case-card dl > div {
    display: grid;

    grid-template-columns: 105px minmax(0, 1fr);

    gap: 15px;

    padding: 12px 0;

    border-top: 1px solid #ededeb;
}


.oh-case-card dt {
    color: #888888 !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}


.oh-case-card dd {
    color: #444444 !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}



/* =========================================================
   06 PROJECT CAPABILITIES
   最后一部分
   ========================================================= */

.oh-project-capabilities {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto !important;

    /*
    重点：
    顶部95px
    底部65px
    不再为页面内CTA预留空间
    */
    padding: 95px 24px 65px;
}


/* 标题区域 */
.oh-capability-intro {
    width: 100%;
    max-width: 760px;

    margin: 0 0 52px 0 !important;
    padding: 0;
}


.oh-capability-intro h2 {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: left !important;
}


.oh-capability-intro p {
    margin: 0 !important;
    padding: 0 !important;

    color: #676767 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;

    text-align: left !important;
}


/* 4列 */
.oh-capability-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 25px;

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


/* 单项 */
.oh-capability-item {
    margin: 0 !important;

    padding: 30px 0 0;

    border-top: 1px solid #d8d8d8;
}


.oh-capability-item span {
    display: block;

    margin: 0 0 28px 0 !important;

    color: #9a7a45 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 1.5px !important;
}


.oh-capability-item h3 {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: #171717 !important;

    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-align: left !important;
}


.oh-capability-item p {
    margin: 0 !important;
    padding: 0 !important;

    color: #717171 !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;

    text-align: left !important;
}



/* =========================================================
   07 ASTRA / WORDPRESS BOTTOM SPACING FIX
   防止页面内容结束后自动产生大面积留白
   ========================================================= */

/*
只针对 Projects 页面自己的 Wrapper，
不会影响你的 Footer。
*/

.oh-projects-page + * {
    margin-top: 0 !important;
}


.oh-projects-page .wp-block-spacer:last-child {
    display: none !important;
}


.oh-projects-page > *:last-child {
    margin-bottom: 0 !important;
}



/* =========================================================
   08 TABLET
   ========================================================= */

@media (max-width: 1024px) {

    /* Intro */
    .oh-projects-intro {
        padding: 65px 30px 60px;
    }


    .oh-projects-intro h1 {
        font-size: 40px !important;
    }


    /* Gallery */
    .oh-project-gallery {
        padding: 25px 30px 80px;
    }


    .oh-section-heading {
        gap: 35px;
    }


    .oh-section-heading h2,
    .oh-capability-intro h2 {
        font-size: 33px !important;
    }


    .oh-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .oh-project-card.oh-project-large {
        grid-column: span 1;
    }


    /* Cases */
    .oh-project-cases {
        padding: 80px 30px 85px;
    }


    .oh-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* Capabilities */
    .oh-project-capabilities {
        padding: 85px 30px 60px;
    }


    .oh-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        row-gap: 45px;
    }

}



/* =========================================================
   09 MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       INTRO
       ===================================================== */

    .oh-projects-intro {
        padding: 48px 18px 42px;

        text-align: left;
    }


    .oh-projects-label {
        text-align: left !important;
    }


    .oh-projects-intro h1 {
        max-width: 100%;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: 32px !important;
        line-height: 1.2 !important;

        letter-spacing: -0.5px;

        text-align: left !important;
    }


    .oh-projects-intro p {
        max-width: 100%;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: 15px !important;

        text-align: left !important;
    }


    /* =====================================================
       COMMON HEADING
       ===================================================== */

    .oh-section-heading {
        display: block;

        margin-bottom: 28px !important;
    }


    .oh-section-heading h2,
    .oh-capability-intro h2 {
        font-size: 28px !important;
    }


    .oh-section-heading > p {
        margin-top: 18px !important;

        font-size: 14px !important;
    }


    /* =====================================================
       GALLERY
       ===================================================== */

    .oh-project-gallery {
        padding: 20px 18px 65px;
    }


    .oh-project-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .oh-project-card,
    .oh-project-card.oh-project-large {
        grid-column: span 1;

        min-height: 310px;
    }


    .oh-project-overlay {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }


    .oh-project-overlay h3 {
        font-size: 19px !important;
    }


    /* 手机取消 Hover 放大 */
    .oh-project-card:hover .oh-project-image img {
        transform: none;
    }


    /* =====================================================
       PROJECT CASES
       ===================================================== */

    .oh-project-cases {
        padding: 65px 18px 70px;
    }


    .oh-section-heading-center {
        margin-bottom: 35px !important;

        text-align: left;
    }


    .oh-section-heading-center h2 {
        text-align: left !important;
    }


    .oh-section-heading-center > p {
        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }


    .oh-case-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .oh-case-card {
        padding: 28px 24px;
    }


    .oh-case-card h3 {
        min-height: auto;
    }


    .oh-case-card dl > div {
        grid-template-columns: 90px minmax(0, 1fr);
    }


    /* =====================================================
       PROJECT CAPABILITIES
       ===================================================== */

    .oh-project-capabilities {
        /*
        手机端最后区域底部只留45px，
        然后直接进入全站 Footer CTA
        */
        padding: 65px 18px 45px;
    }


    .oh-capability-intro {
        margin-bottom: 38px !important;
    }


    .oh-capability-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .oh-capability-item {
        padding-top: 22px;
    }


    .oh-capability-item span {
        margin-bottom: 18px !important;
    }

}


/* =========================================================
   ONEHARBOR CERTIFICATIONS PAGE
   5 Certificates
   Desktop Max Width: 1280px
   ========================================================= */


/* =========================================================
   01 GLOBAL
   ========================================================= */

.oh-cert-page {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}


.oh-cert-page *,
.oh-cert-page *::before,
.oh-cert-page *::after {
    box-sizing: border-box;
}


/* 防止页面底部多余间距 */
.oh-cert-page > section:last-child {
    margin-bottom: 0 !important;
}


.oh-cert-page .wp-block-spacer:last-child {
    display: none !important;
}


/* 金色小标签 */
.oh-cert-label {
    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: #9a7a45 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 2.2px !important;

    text-transform: uppercase;
}



/* =========================================================
   02 PAGE INTRO
   ========================================================= */

.oh-cert-intro {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto !important;

    padding: 75px 24px 70px;

    text-align: center;
}


.oh-cert-intro h1 {
    width: 100%;
    max-width: 900px;

    margin: 0 auto 24px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    letter-spacing: -1px;

    text-align: center !important;
}


.oh-cert-intro p {
    width: 100%;
    max-width: 780px;

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

    color: #686868 !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;

    text-align: center !important;
}



/* =========================================================
   03 CERTIFICATE GALLERY
   ========================================================= */

.oh-cert-gallery {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto !important;

    padding: 25px 24px 100px;
}



/* =========================================================
   04 GALLERY HEADING
   ========================================================= */

.oh-cert-heading {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 500px);

    align-items: end;

    gap: 80px;

    margin: 0 0 45px 0 !important;
}


.oh-cert-heading-left,
.oh-cert-heading-right {
    min-width: 0;
}


.oh-cert-heading h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: left !important;
}


.oh-cert-heading-right p {
    margin: 0 !important;
    padding: 0 !important;

    color: #666666 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;

    text-align: left !important;
}



/* =========================================================
   05 FIVE CERTIFICATE GRID
   PC端5张一排
   ========================================================= */

.oh-cert-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
}



/* =========================================================
   06 CERTIFICATE CARD
   ========================================================= */

.oh-cert-card {
    position: relative;

    display: block;

    width: 100%;

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

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e5e2;

    color: inherit !important;

    text-decoration: none !important;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.oh-cert-card:hover {
    transform: translateY(-5px);

    border-color: #d4c5ac;

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.08);

    text-decoration: none !important;
}



/* =========================================================
   07 CERTIFICATE IMAGE
   ========================================================= */

.oh-cert-image {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 4;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 16px;

    overflow: hidden;

    background: #f6f6f4;
}


.oh-cert-image img {
    display: block;

    width: 100%;
    height: 100%;

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

    object-fit: contain;

    transition: transform 0.45s ease;
}


/* 图片轻微放大 */
.oh-cert-card:hover .oh-cert-image img {
    transform: scale(1.025);
}



/* =========================================================
   08 QUALITY COMMITMENT
   ========================================================= */

.oh-cert-quality {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto !important;

    padding: 85px 24px 65px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);

    align-items: start;

    gap: 100px;

    border-top: 1px solid #dedede;
}



/* LEFT */
.oh-cert-quality-left {
    min-width: 0;
}


.oh-cert-quality-left h2 {
    width: 100%;
    max-width: 650px;

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

    color: #111111 !important;

    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    text-align: left !important;
}



/* RIGHT */
.oh-cert-quality-right {
    min-width: 0;

    padding-top: 25px;
}


.oh-cert-quality-right p {
    margin: 0 0 28px 0 !important;
    padding: 0 !important;

    color: #666666 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;

    text-align: left !important;
}



/* =========================================================
   09 EXPLORE FACTORY LINK
   ========================================================= */

.oh-cert-factory-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 0 0 7px 0;

    border-bottom:
        1px solid #9a7a45;

    color: #222222 !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    letter-spacing: 1.2px !important;

    text-decoration: none !important;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}


.oh-cert-factory-link span {
    color: #9a7a45;

    font-size: 16px;
    line-height: 1;
}


.oh-cert-factory-link:hover {
    gap: 17px;

    color: #9a7a45 !important;

    text-decoration: none !important;
}



/* =========================================================
   10 TABLET
   ========================================================= */

@media (max-width: 1024px) {

    /* Intro */
    .oh-cert-intro {
        padding:
            65px
            30px
            60px;
    }


    .oh-cert-intro h1 {
        font-size: 40px !important;
    }


    /* Gallery */
    .oh-cert-gallery {
        padding:
            25px
            30px
            85px;
    }


    .oh-cert-heading {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 400px);

        gap: 45px;
    }


    .oh-cert-heading h2 {
        font-size: 33px !important;
    }


    /*
       Tablet:
       3 + 2
    */
    .oh-cert-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 20px;
    }


    /* Quality */
    .oh-cert-quality {
        padding:
            75px
            30px
            60px;

        gap: 60px;
    }


    .oh-cert-quality-left h2 {
        font-size: 31px !important;
    }

}



/* =========================================================
   11 MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       INTRO
       ===================================================== */

    .oh-cert-intro {
        padding:
            48px
            18px
            42px;

        text-align: left;
    }


    .oh-cert-label {
        text-align: left !important;
    }


    .oh-cert-intro h1 {
        max-width: 100%;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: 32px !important;
        line-height: 1.2 !important;

        letter-spacing: -0.5px;

        text-align: left !important;
    }


    .oh-cert-intro p {
        max-width: 100%;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: 15px !important;

        text-align: left !important;
    }



    /* =====================================================
       GALLERY
       ===================================================== */

    .oh-cert-gallery {
        padding:
            20px
            18px
            65px;
    }


    .oh-cert-heading {
        display: block;

        margin-bottom: 30px !important;
    }


    .oh-cert-heading h2 {
        font-size: 28px !important;
    }


    .oh-cert-heading-right p {
        margin-top: 18px !important;

        font-size: 14px !important;
    }



    /*
       手机：
       2 + 2 + 1
    */
    .oh-cert-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .oh-cert-image {
        padding: 10px;
    }


    /*
       第5张证书居中
    */
    .oh-cert-card:nth-child(5) {
        grid-column: 1 / -1;

        width:
            calc(50% - 6px);

        justify-self: center;
    }



    /* =====================================================
       QUALITY COMMITMENT
       ===================================================== */

    .oh-cert-quality {
        padding:
            60px
            18px
            45px;

        grid-template-columns: 1fr;

        gap: 25px;
    }


    .oh-cert-quality-left h2 {
        font-size: 27px !important;
        line-height: 1.3 !important;
    }


    .oh-cert-quality-right {
        padding-top: 0;
    }


    .oh-cert-quality-right p {
        font-size: 14px !important;
    }



    /* 手机取消 Hover 位移 */
    .oh-cert-card:hover {
        transform: none;

        box-shadow: none;
    }


    .oh-cert-card:hover
    .oh-cert-image img {
        transform: none;
    }

}


/* =========================================================
   ONEHARBOR FAQ PAGE
   Accordion Style
   Desktop 1280px
   ========================================================= */


/* GLOBAL */

.oh-faq-page {

    width:100%;
    margin:0!important;
    padding:0!important;

    box-sizing:border-box;

}


.oh-faq-page *,
.oh-faq-page *::before,
.oh-faq-page *::after {

    box-sizing:border-box;

}



/* =========================================================
   INTRO
   ========================================================= */


.oh-faq-intro {

    width:100%;
    max-width:1280px;

    margin:0 auto!important;

    padding:75px 24px 70px;

    text-align:center;

}



.oh-faq-label {

    margin-bottom:14px!important;

    color:#9a7a45!important;

    font-size:12px!important;

    font-weight:700!important;

    letter-spacing:2.2px!important;

    line-height:1.2!important;

    text-transform:uppercase;

}



.oh-faq-intro h1 {

    max-width:950px;

    margin:0 auto 24px!important;

    padding:0!important;


    color:#111111!important;

    font-size:48px!important;

    font-weight:700!important;

    line-height:1.15!important;


}



.oh-faq-intro p {

    max-width:780px;

    margin:0 auto!important;


    color:#686868!important;

    font-size:16px!important;

    line-height:1.8!important;

}




/* =========================================================
   FAQ CONTENT
   ========================================================= */


.oh-faq-content {

    width:100%;

    max-width:900px;

    margin:0 auto!important;

    padding:20px 24px 90px;

}



.oh-faq-category {

    margin-bottom:65px;

}



.oh-faq-category-title {


    margin-bottom:25px!important;


    color:#9a7a45!important;


    font-size:12px!important;

    font-weight:700!important;


    letter-spacing:2px!important;

}





/* =========================================================
   FAQ ITEM
   ========================================================= */


.oh-faq-item {


    margin:0 0 14px!important;


    padding:0!important;


    background:#ffffff;


    border:1px solid #e5e5e2;


}



.oh-faq-item summary {


    position:relative;


    display:flex;

    align-items:center;


    min-height:72px;


    padding:0 60px 0 28px!important;


    cursor:pointer;


    list-style:none;


    color:#171717!important;


    font-size:17px!important;


    font-weight:600!important;


    line-height:1.5!important;


}



.oh-faq-item summary::-webkit-details-marker {

    display:none;

}




/* +号 */

.oh-faq-item summary::after {


    content:"+";


    position:absolute;


    right:28px;


    top:50%;


    transform:translateY(-50%);


    color:#9a7a45;


    font-size:24px;


    font-weight:300;


}



.oh-faq-item[open] summary::after {

    content:"−";

}




/* Answer */

.oh-faq-answer {


    padding:0 28px 28px;


}



.oh-faq-answer p {


    margin:0!important;


    padding-top:5px;


    color:#666666!important;


    font-size:15px!important;


    line-height:1.8!important;


}



/* =========================================================
   Bottom Factory Section
   ========================================================= */


.oh-faq-bottom {


    width:calc(100% - 48px);

    max-width:1232px;


    margin:0 auto 80px!important;


    padding:55px 60px;


    display:flex;


    align-items:center;

    justify-content:space-between;


    gap:50px;


    background:#101010;


}




.oh-faq-bottom h2 {


    margin:0 0 15px!important;


    color:#ffffff!important;


    font-size:34px!important;


    line-height:1.25!important;


}



.oh-faq-bottom p {


    margin:0!important;


    color:rgba(255,255,255,.65)!important;


    font-size:14px!important;


    line-height:1.8!important;


}



.oh-faq-bottom a {


    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    width:220px;

    height:52px;


    border:1px solid #c6a15b;


    color:#ffffff!important;


    font-size:12px!important;


    font-weight:700!important;


    letter-spacing:1px;


    text-decoration:none!important;


}



.oh-faq-bottom a:hover {


    background:#c6a15b;


    color:#111111!important;


}




/* =========================================================
   TABLET
   ========================================================= */


@media(max-width:1024px){


    .oh-faq-intro h1 {

        font-size:40px!important;

    }



    .oh-faq-bottom {

        padding:45px 40px;

    }


}





/* =========================================================
   MOBILE
   ========================================================= */


@media(max-width:767px){


    .oh-faq-intro {


        padding:48px 18px 42px;


        text-align:left;

    }



    .oh-faq-intro h1 {


        font-size:32px!important;


        text-align:left!important;


    }



    .oh-faq-intro p {


        text-align:left!important;


        font-size:15px!important;


    }



    .oh-faq-content {


        padding:20px 18px 60px;


    }



    .oh-faq-category {


        margin-bottom:45px;


    }



    .oh-faq-item summary {


        min-height:65px;


        padding:18px 50px 18px 20px!important;


        font-size:15px!important;


    }



    .oh-faq-item summary::after {


        right:20px;


    }



    .oh-faq-answer {


        padding:0 20px 22px;


    }



    .oh-faq-answer p {


        font-size:14px!important;


    }



    .oh-faq-bottom {


        width:calc(100% - 36px);


        margin-bottom:60px!important;


        padding:38px 26px;


        flex-direction:column;


        align-items:flex-start;


        gap:25px;


    }



    .oh-faq-bottom h2 {


        font-size:27px!important;


    }



    .oh-faq-bottom a {


        width:190px;

        height:50px;


    }



}


/* =========================================================
   ONEHARBOR SECTION 2
   Premium Aluminum Pergola Manufacturer

   Layout:
   Desktop:
   Image Left + Content Right

   Mobile:
   Image Top + Content Bottom

   No fixed 1280px limitation
   ========================================================= */



/* =========================================================
   SECTION WRAPPER
   ========================================================= */


.oh-pergola-manufacturer-section {


    width:100%;


    padding:100px 6vw;



    box-sizing:border-box;


    background:#ffffff;



}





/* =========================================================
   MAIN LAYOUT
   ========================================================= */


.oh-pergola-manufacturer-wrapper {


    width:100%;


    display:grid;


    grid-template-columns:1fr 1fr;



    align-items:center;



    gap:6vw;



}






/* =========================================================
   LEFT IMAGE
   ========================================================= */


.oh-pergola-manufacturer-image {


    width:100%;


    overflow:hidden;



}




.oh-pergola-manufacturer-image img {


    display:block;


    width:100%;


    height:auto;



    aspect-ratio:4 / 3;



    object-fit:cover;



    transition:transform .6s ease;



}





.oh-pergola-manufacturer-image:hover img {


    transform:scale(1.03);


}







/* =========================================================
   RIGHT CONTENT
   ========================================================= */


.oh-pergola-manufacturer-content {


    width:100%;



    text-align:left;



}







/* =========================================================
   LABEL
   ========================================================= */


.oh-section-label {


    margin-bottom:18px;



    color:#9a7a45;



    font-size:12px;



    font-weight:700;



    letter-spacing:2.2px;



    line-height:1.3;



    text-transform:uppercase;



}







/* =========================================================
   MAIN TITLE
   ========================================================= */


.oh-pergola-manufacturer-content h2 {


    margin:0 0 20px;



    color:#111111;



    font-size:clamp(32px,3vw,48px);



    font-weight:700;



    line-height:1.2;



    letter-spacing:-.5px;



}







/* =========================================================
   SUBTITLE
   ========================================================= */


.oh-pergola-manufacturer-content h3 {


    margin:0 0 30px;



    color:#555555;



    font-size:20px;



    font-weight:500;



    line-height:1.5;



}








/* =========================================================
   DESCRIPTION
   ========================================================= */


.oh-pergola-manufacturer-content > p {


    margin:0 0 18px;



    color:#666666;



    font-size:16px;



    line-height:1.8;



}








/* =========================================================
   FEATURE LIST
   ========================================================= */


.oh-manufacturer-features {


    margin-top:40px;



    display:flex;


    flex-direction:column;



    gap:26px;



}







/* SINGLE FEATURE */


.oh-manufacturer-feature {


    display:flex;



    align-items:flex-start;



    gap:20px;



}







/* Number */


.feature-number {


    flex-shrink:0;



    color:#c6a15b;



    font-size:13px;



    font-weight:700;



    letter-spacing:1.5px;



    line-height:1.5;



}







/* Feature title */


.oh-manufacturer-feature h4 {


    margin:0 0 8px;



    color:#111111;



    font-size:18px;



    font-weight:600;



    line-height:1.4;



}







/* Feature description */


.oh-manufacturer-feature p {


    margin:0;



    color:#777777;



    font-size:14px;



    line-height:1.7;



}







/* =========================================================
   BUTTON
   ========================================================= */


.oh-manufacturer-button {


    display:inline-flex;



    align-items:center;



    justify-content:center;



    margin-top:45px;



    height:54px;



    padding:0 35px;



    border:1px solid #111111;



    color:#111111;



    background:transparent;



    font-size:12px;



    font-weight:700;



    letter-spacing:1.5px;



    text-decoration:none;



    transition:all .3s ease;



}




.oh-manufacturer-button:hover {


    background:#111111;



    color:#ffffff;



}








/* =========================================================
   TABLET
   ========================================================= */


@media(max-width:1024px){



    .oh-pergola-manufacturer-section {


        padding:80px 5vw;


    }



    .oh-pergola-manufacturer-wrapper {


        gap:40px;


    }




    .oh-pergola-manufacturer-content h2 {


        font-size:36px;


    }



}








/* =========================================================
   MOBILE
   ========================================================= */


@media(max-width:767px){



    .oh-pergola-manufacturer-section {


        padding:60px 24px;


    }




    .oh-pergola-manufacturer-wrapper {


        grid-template-columns:1fr;



        gap:45px;



    }




    .oh-pergola-manufacturer-image img {


        aspect-ratio:4 / 3;



    }




    .oh-pergola-manufacturer-content h2 {


        font-size:32px;



    }




    .oh-pergola-manufacturer-content h3 {


        font-size:18px;



    }




    .oh-pergola-manufacturer-content > p {


        font-size:15px;



    }





    .oh-manufacturer-features {


        margin-top:35px;



        gap:22px;



    }




    .oh-manufacturer-feature h4 {


        font-size:16px;



    }




    .oh-manufacturer-feature p {


        font-size:14px;



    }




    .oh-manufacturer-button {


        width:100%;



        margin-top:35px;



    }



}


/* =========================================================
   ONEHARBOR SECTION 3
   Why Choose Aluminum Pergola

   Layout:
   Heading Center
   5 Benefit Cards

   ========================================================= */



.oh-pergola-benefits-section {


    width:100%;


    padding:100px 6vw;



    background:#f7f7f5;



    box-sizing:border-box;


}





.oh-pergola-benefits-wrapper {


    width:100%;



}





/* =====================================================
   HEADER
   ===================================================== */


.oh-pergola-benefits-header {


    text-align:center;



    margin-bottom:60px;



}



.oh-pergola-benefits-header .oh-section-label {


    text-align:center;



}




.oh-pergola-benefits-header h2 {


    margin:0 0 20px;



    color:#111;



    font-size:clamp(32px,3vw,46px);



    font-weight:700;



    line-height:1.2;



}



.oh-pergola-benefits-header p {


    margin:0 auto;



    max-width:none;



    color:#666;



    font-size:17px;



    line-height:1.8;



}







/* =====================================================
   BENEFIT GRID
   ===================================================== */


.oh-pergola-benefit-grid {


    display:grid;


    grid-template-columns:repeat(5,1fr);



    gap:25px;



}







/* =====================================================
   CARD
   ===================================================== */


.oh-pergola-benefit-card {


    padding:35px 28px;



    background:#ffffff;



    border:1px solid #e8e8e5;



    transition:.3s ease;



}





.oh-pergola-benefit-card:hover {


    transform:translateY(-5px);



    box-shadow:

    0 15px 35px rgba(0,0,0,.08);



}







/* NUMBER */


.oh-pergola-benefit-card span {


    display:block;



    margin-bottom:25px;



    color:#c6a15b;



    font-size:13px;



    font-weight:700;



    letter-spacing:1.5px;



}







/* TITLE */


.oh-pergola-benefit-card h3 {


    margin:0 0 15px;



    color:#111;



    font-size:19px;



    font-weight:600;



    line-height:1.4;



}







/* TEXT */


.oh-pergola-benefit-card p {


    margin:0;



    color:#666;



    font-size:14px;



    line-height:1.75;



}







/* =====================================================
   TABLET
   ===================================================== */


@media(max-width:1024px){



    .oh-pergola-benefit-grid {


        grid-template-columns:repeat(3,1fr);



    }



}







/* =====================================================
   MOBILE
   ===================================================== */


@media(max-width:767px){



    .oh-pergola-benefits-section {


        padding:70px 24px;



    }



    .oh-pergola-benefits-header {


        text-align:left;



        margin-bottom:40px;



    }




    .oh-pergola-benefits-header .oh-section-label {


        text-align:left;



    }





    .oh-pergola-benefit-grid {


        grid-template-columns:1fr;



        gap:18px;



    }





    .oh-pergola-benefit-card {


        padding:28px 24px;



    }


}


/* =========================================================
   ONEHARBOR SECTION 4
   Motorized Louvered Pergola System

   Premium spacing version
   Designed for video section below

   ========================================================= */



.oh-motorized-pergola-section {


    width:100%;


    padding:110px 6vw 220px;


    background:#111111;


    color:#ffffff;


    box-sizing:border-box;



}







/* =====================================================
   MAIN WRAPPER
   ===================================================== */


.oh-motorized-pergola-wrapper {


    width:100%;


    display:grid;



    grid-template-columns:1fr 1fr;



    gap:6vw;



    align-items:center;



}







/* =====================================================
   LEFT CONTENT
   ===================================================== */


.oh-motorized-pergola-content {


    text-align:left;



}



.oh-motorized-pergola-content .oh-section-label {


    color:#c6a15b;



}






.oh-motorized-pergola-content h2 {


    margin:0 0 20px;



    color:#ffffff;



    font-size:clamp(32px,3vw,48px);



    line-height:1.2;



    font-weight:700;



}






.oh-motorized-pergola-content h3 {


    margin:0 0 30px;



    color:rgba(255,255,255,.75);



    font-size:20px;



    font-weight:500;



    line-height:1.5;



}






.oh-motorized-pergola-content > p {


    margin:0 0 40px;



    color:rgba(255,255,255,.7);



    font-size:16px;



    line-height:1.8;



}







/* =====================================================
   FEATURE LIST
   ===================================================== */


.oh-motorized-features {


    display:flex;


    flex-direction:column;



    gap:25px;



}







.oh-motorized-feature {


    display:flex;



    gap:20px;



}







.oh-motorized-feature > span {


    flex-shrink:0;



    color:#c6a15b;



    font-size:13px;



    font-weight:700;



}






.oh-motorized-feature h4 {


    margin:0 0 8px;



    color:#ffffff;



    font-size:18px;



    font-weight:600;



}






.oh-motorized-feature p {


    margin:0;



    color:rgba(255,255,255,.65);



    font-size:14px;



    line-height:1.7;



}







/* =====================================================
   IMAGE
   ===================================================== */


.oh-motorized-pergola-image {


    width:100%;


    overflow:hidden;



}





.oh-motorized-pergola-image img {


    width:100%;


    height:auto;



    display:block;



    object-fit:cover;



    transition:.6s ease;



}




.oh-motorized-pergola-image:hover img {


    transform:scale(1.03);



}







/* =====================================================
   BUTTON
   ===================================================== */


.oh-motorized-button {


    display:inline-flex;



    align-items:center;



    justify-content:center;



    margin-top:45px;



    height:54px;



    padding:0 35px;



    border:1px solid #c6a15b;



    color:#ffffff;



    font-size:12px;



    font-weight:700;



    letter-spacing:1.5px;



    text-decoration:none;



    transition:.3s ease;



}







.oh-motorized-button:hover {


    background:#c6a15b;



    color:#111111;



}







/* =====================================================
   TABLET
   ===================================================== */


@media(max-width:1024px){



    .oh-motorized-pergola-section {


        padding:90px 5vw 160px;



    }



    .oh-motorized-pergola-wrapper {


        gap:40px;



    }



}








/* =====================================================
   MOBILE
   ===================================================== */


@media(max-width:767px){



    .oh-motorized-pergola-section {


        padding:70px 24px 120px;



    }





    .oh-motorized-pergola-wrapper {


        grid-template-columns:1fr;



        gap:45px;



    }




    /* 图片在上 */

    .oh-motorized-pergola-image {


        order:-1;



    }





    .oh-motorized-pergola-content h2 {


        font-size:32px;



    }





    .oh-motorized-button {


        width:100%;



    }



}


.oh-pergola-video{
    margin-block-start:30px !important;
}


/* =========================================================
   ONEHARBOR SECTION 5
   Customization Options

   Layout:
   Left Intro
   Right Cards

   ========================================================= */



.oh-customization-section {


    width:100%;


    padding:100px 6vw;



    background:#ffffff;



    box-sizing:border-box;



}







.oh-customization-wrapper {


    width:100%;



    display:grid;



    grid-template-columns:0.9fr 1.1fr;



    gap:6vw;



    align-items:start;



}







/* =====================================================
   LEFT INTRO
   ===================================================== */


.oh-customization-intro {


    text-align:left;



}



.oh-customization-intro h2 {


    margin:0 0 25px;



    color:#111111;



    font-size:clamp(32px,3vw,46px);



    line-height:1.2;



}



.oh-customization-intro p {


    margin:0;



    color:#666666;



    font-size:16px;



    line-height:1.8;



}







/* =====================================================
   CARD GRID
   ===================================================== */


.oh-customization-grid {


    display:grid;



    grid-template-columns:repeat(2,1fr);



    gap:25px;



}







/* CARD */


.oh-customization-card {


    padding:35px 30px;



    border:1px solid #e6e6e3;



    background:#fafaf8;



    transition:.3s ease;



}




.oh-customization-card:hover {


    transform:translateY(-5px);



    background:#ffffff;



    box-shadow:

    0 15px 35px rgba(0,0,0,.08);



}







.oh-customization-card span {


    display:block;



    margin-bottom:22px;



    color:#c6a15b;



    font-size:13px;



    font-weight:700;



}







.oh-customization-card h3 {


    margin:0 0 15px;



    color:#111111;



    font-size:20px;



    font-weight:600;



}







.oh-customization-card p {


    margin:0;



    color:#666666;



    font-size:14px;



    line-height:1.7;



}







/* =====================================================
   TABLET
   ===================================================== */


@media(max-width:1024px){



    .oh-customization-wrapper {


        grid-template-columns:1fr;



        gap:50px;



    }



}







/* =====================================================
   MOBILE
   ===================================================== */


@media(max-width:767px){



    .oh-customization-section {


        padding:70px 24px;



    }



    .oh-customization-grid {


        grid-template-columns:1fr;



        gap:18px;



    }




    .oh-customization-card {


        padding:28px 24px;



    }



}


/* =========================================================
   ONEHARBOR SECTION 9
   ALUMINUM PERGOLA FAQ
   ========================================================= */


.oh-pergola-faq-section {
    width: 100%;
    padding: 110px 6vw 120px;
    background: #f7f7f5;
    box-sizing: border-box;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.oh-pergola-faq-wrapper {
    width: 100%;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;

    gap: 7vw;

    align-items: start;
}


/* =========================================================
   LEFT INTRO
   ========================================================= */

.oh-pergola-faq-intro {
    position: sticky;
    top: 120px;

    text-align: left;
}


.oh-pergola-faq-intro h2 {
    margin: 0 0 25px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: clamp(32px, 3vw, 46px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: left !important;
}


.oh-pergola-faq-intro p {
    margin: 0 0 32px !important;
    padding: 0 !important;

    color: #666666 !important;

    font-size: 16px !important;
    line-height: 1.8 !important;

    text-align: left !important;
}


/* VIEW ALL FAQ */

.oh-pergola-faq-link {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding-bottom: 7px;

    border-bottom: 1px solid #9a7a45;

    color: #222222 !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    letter-spacing: 1.3px;

    text-decoration: none !important;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}


.oh-pergola-faq-link span {
    color: #9a7a45;
    font-size: 16px;
}


.oh-pergola-faq-link:hover {
    gap: 17px;
    color: #9a7a45 !important;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.oh-pergola-faq-list {
    width: 100%;
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.oh-pergola-faq-item {
    width: 100%;

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

    border-top: 1px solid #d8d8d4;

    background: transparent;
}


.oh-pergola-faq-item:last-child {
    border-bottom: 1px solid #d8d8d4;
}


/* QUESTION */

.oh-pergola-faq-item summary {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 84px;

    padding: 20px 60px 20px 0 !important;

    cursor: pointer;

    list-style: none;

    color: #171717 !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    text-align: left !important;
}


.oh-pergola-faq-item summary::-webkit-details-marker {
    display: none;
}


/* PLUS */

.oh-pergola-faq-item summary::after {
    content: "+";

    position: absolute;

    right: 4px;
    top: 50%;

    transform: translateY(-50%);

    color: #9a7a45;

    font-size: 25px;
    font-weight: 300;
    line-height: 1;
}


.oh-pergola-faq-item[open] summary::after {
    content: "−";
}


/* OPEN QUESTION */

.oh-pergola-faq-item[open] summary {
    color: #9a7a45 !important;
}


/* =========================================================
   ANSWER
   ========================================================= */

.oh-pergola-faq-answer {
    padding: 0 60px 30px 0;
}


.oh-pergola-faq-answer p {
    margin: 0 !important;
    padding: 0 !important;

    color: #666666 !important;

    font-size: 15px !important;
    line-height: 1.85 !important;

    text-align: left !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .oh-pergola-faq-section {
        padding: 90px 5vw 100px;
    }


    .oh-pergola-faq-wrapper {
        grid-template-columns: 0.9fr 1.1fr;
        gap: 5vw;
    }


    .oh-pergola-faq-intro {
        top: 90px;
    }


    .oh-pergola-faq-item summary {
        font-size: 17px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oh-pergola-faq-section {
        padding: 70px 24px 80px;
    }


    .oh-pergola-faq-wrapper {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    /* 手机取消 Sticky */
    .oh-pergola-faq-intro {
        position: static;
    }


    .oh-pergola-faq-intro h2 {
        font-size: 30px !important;
    }


    .oh-pergola-faq-intro p {
        font-size: 15px !important;
    }


    .oh-pergola-faq-item summary {
        min-height: 72px;

        padding:
            18px
            45px
            18px
            0 !important;

        font-size: 16px !important;
    }


    .oh-pergola-faq-item summary::after {
        right: 0;
        font-size: 22px;
    }


    .oh-pergola-faq-answer {
        padding:
            0
            38px
            25px
            0;
    }


    .oh-pergola-faq-answer p {
        font-size: 14px !important;
        line-height: 1.75 !important;
    }

}


/* =========================================================
   ONEHARBOR ALUMINUM DOOR
   SECTION 2
   Custom Aluminum Door Manufacturer

   Desktop:
   Image Left + Content Right

   Mobile:
   Image Top + Content Bottom
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.oh-door-manufacturer-section {
    width: 100%;

    padding: 110px 6vw;

    box-sizing: border-box;

    background: #ffffff;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.oh-door-manufacturer-wrapper {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 6vw;
}


/* =========================================================
   IMAGE
   ========================================================= */

.oh-door-manufacturer-image {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #f3f3f1;
}


.oh-door-manufacturer-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    transition: transform .6s ease;
}


.oh-door-manufacturer-image:hover img {
    transform: scale(1.03);
}


/* subtle architectural detail */

.oh-door-manufacturer-image::after {
    content: "";

    position: absolute;

    left: 24px;
    bottom: 24px;

    width: 55px;
    height: 2px;

    background: #c6a15b;

    pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.oh-door-manufacturer-content {
    width: 100%;

    text-align: left;
}


/* LABEL */

.oh-door-manufacturer-label {
    margin-bottom: 18px;

    color: #9a7a45;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
    line-height: 1.4;

    text-transform: uppercase;
}


/* H2 */

.oh-door-manufacturer-content h2 {
    margin: 0 0 20px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: clamp(34px, 3vw, 48px) !important;
    font-weight: 700 !important;

    line-height: 1.18 !important;
    letter-spacing: -.5px !important;

    text-align: left !important;
}


/* H3 */

.oh-door-manufacturer-content h3 {
    margin: 0 0 30px !important;
    padding: 0 !important;

    color: #555555 !important;

    font-size: 20px !important;
    font-weight: 500 !important;

    line-height: 1.5 !important;

    text-align: left !important;
}


/* MAIN PARAGRAPHS */

.oh-door-manufacturer-content > p {
    margin: 0 0 18px !important;
    padding: 0 !important;

    color: #666666 !important;

    font-size: 16px !important;

    line-height: 1.8 !important;

    text-align: left !important;
}


/* =========================================================
   FEATURE LIST
   ========================================================= */

.oh-door-manufacturer-features {
    display: flex;

    flex-direction: column;

    gap: 27px;

    margin-top: 40px;
}


/* SINGLE FEATURE */

.oh-door-manufacturer-feature {
    display: flex;

    align-items: flex-start;

    gap: 20px;
}


/* NUMBER */

.oh-door-manufacturer-number {
    flex-shrink: 0;

    min-width: 28px;

    padding-top: 2px;

    color: #c6a15b;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.4px;

    line-height: 1.5;
}


/* FEATURE TITLE */

.oh-door-manufacturer-feature h4 {
    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    text-align: left !important;
}


/* FEATURE TEXT */

.oh-door-manufacturer-feature p {
    margin: 0 !important;
    padding: 0 !important;

    color: #777777 !important;

    font-size: 14px !important;

    line-height: 1.75 !important;

    text-align: left !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.oh-door-manufacturer-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    margin-top: 46px;

    padding: 0 35px;

    box-sizing: border-box;

    border: 1px solid #111111;

    background: transparent;

    color: #111111 !important;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-decoration: none !important;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.oh-door-manufacturer-button:hover {
    background: #111111;

    border-color: #111111;

    color: #ffffff !important;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .oh-door-manufacturer-section {
        padding: 90px 5vw;
    }


    .oh-door-manufacturer-wrapper {
        gap: 45px;
    }


    .oh-door-manufacturer-content h2 {
        font-size: 36px !important;
    }


    .oh-door-manufacturer-content h3 {
        font-size: 18px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oh-door-manufacturer-section {
        padding: 70px 24px;
    }


    .oh-door-manufacturer-wrapper {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* Image First */
    .oh-door-manufacturer-image {
        order: 1;
    }


    .oh-door-manufacturer-content {
        order: 2;
    }


    .oh-door-manufacturer-image img {
        aspect-ratio: 4 / 3;
    }


    .oh-door-manufacturer-image::after {
        left: 18px;
        bottom: 18px;

        width: 42px;
    }


    .oh-door-manufacturer-label {
        margin-bottom: 16px;

        font-size: 11px;

        letter-spacing: 1.8px;
    }


    .oh-door-manufacturer-content h2 {
        font-size: 32px !important;
    }


    .oh-door-manufacturer-content h3 {
        margin-bottom: 25px !important;

        font-size: 18px !important;
    }


    .oh-door-manufacturer-content > p {
        font-size: 15px !important;

        line-height: 1.75 !important;
    }


    .oh-door-manufacturer-features {
        margin-top: 35px;

        gap: 23px;
    }


    .oh-door-manufacturer-feature {
        gap: 16px;
    }


    .oh-door-manufacturer-feature h4 {
        font-size: 16px !important;
    }


    .oh-door-manufacturer-feature p {
        font-size: 14px !important;
    }


    .oh-door-manufacturer-button {
        width: 100%;

        margin-top: 38px;
    }

}


/* =========================================================
   ONEHARBOR ALUMINUM DOOR
   SECTION 3
   Why Choose Aluminum Entrance Doors?
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.oh-door-benefits-section {
    width: 100%;

    padding: 105px 6vw 115px;

    box-sizing: border-box;

    background: #f7f7f5;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.oh-door-benefits-wrapper {
    width: 100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.oh-door-benefits-header {
    width: 100%;

    margin-bottom: 60px;

    text-align: center;
}


/* LABEL */

.oh-door-benefits-label {
    margin-bottom: 18px;

    color: #9a7a45;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
    line-height: 1.4;

    text-transform: uppercase;
}


/* H2 */

.oh-door-benefits-header h2 {
    margin: 0 0 22px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: clamp(34px, 3vw, 46px) !important;
    font-weight: 700 !important;

    line-height: 1.18 !important;
    letter-spacing: -.5px !important;

    text-align: center !important;
}


/* INTRO */

.oh-door-benefits-header p {
    max-width: 780px;

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

    color: #666666 !important;

    font-size: 16px !important;
    line-height: 1.8 !important;

    text-align: center !important;
}


/* =========================================================
   BENEFIT GRID
   ========================================================= */

.oh-door-benefits-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.oh-door-benefit-card {
    position: relative;

    min-height: 310px;

    padding: 36px 28px 34px;

    box-sizing: border-box;

    border: 1px solid #e4e4e0;

    background: #ffffff;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.oh-door-benefit-card:hover {
    transform: translateY(-6px);

    border-color: #d8cfbe;

    box-shadow:
        0 18px 40px rgba(0,0,0,.07);
}


/* subtle top line */

.oh-door-benefit-card::before {
    content: "";

    position: absolute;

    left: 28px;
    top: 0;

    width: 0;
    height: 2px;

    background: #c6a15b;

    transition: width .35s ease;
}


.oh-door-benefit-card:hover::before {
    width: 52px;
}


/* =========================================================
   NUMBER
   ========================================================= */

.oh-door-benefit-number {
    display: block;

    margin-bottom: 26px;

    color: #c6a15b;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;

    line-height: 1;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.oh-door-benefit-card h3 {
    margin: 0 0 16px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 19px !important;
    font-weight: 600 !important;

    line-height: 1.42 !important;

    text-align: left !important;
}


/* =========================================================
   CARD TEXT
   ========================================================= */

.oh-door-benefit-card p {
    margin: 0 !important;
    padding: 0 !important;

    color: #6b6b6b !important;

    font-size: 14px !important;

    line-height: 1.78 !important;

    text-align: left !important;
}


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1200px) {

    .oh-door-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .oh-door-benefit-card {
        min-height: 270px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .oh-door-benefits-section {
        padding: 90px 5vw 100px;
    }


    .oh-door-benefits-header {
        margin-bottom: 50px;
    }


    .oh-door-benefits-header h2 {
        font-size: 36px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oh-door-benefits-section {
        padding: 70px 24px 80px;
    }


    /* Mobile header left aligned */

    .oh-door-benefits-header {
        margin-bottom: 40px;

        text-align: left;
    }


    .oh-door-benefits-header h2 {
        font-size: 31px !important;

        text-align: left !important;
    }


    .oh-door-benefits-header p {
        max-width: none;

        margin: 0 !important;

        font-size: 15px !important;

        text-align: left !important;
    }


    .oh-door-benefits-label {
        font-size: 11px;

        letter-spacing: 1.8px;
    }


    /* One card per row */

    .oh-door-benefits-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .oh-door-benefit-card {
        min-height: auto;

        padding: 29px 24px 28px;
    }


    .oh-door-benefit-card::before {
        left: 24px;
    }


    .oh-door-benefit-number {
        margin-bottom: 20px;
    }


    .oh-door-benefit-card h3 {
        font-size: 17px !important;
    }


    .oh-door-benefit-card p {
        font-size: 14px !important;
    }

}


/* =========================================================
   ONEHARBOR ALUMINUM DOOR
   SECTION 4
   Aluminum Entrance Door Design Options
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.oh-door-design-section {
    width: 100%;

    padding: 110px 6vw 120px;

    box-sizing: border-box;

    background: #111111;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.oh-door-design-wrapper {
    width: 100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.oh-door-design-header {
    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}


/* LABEL */

.oh-door-design-label {
    margin-bottom: 18px;

    color: #c6a15b;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
    line-height: 1.4;

    text-transform: uppercase;
}


/* H2 */

.oh-door-design-header h2 {
    margin: 0 0 22px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: clamp(35px, 3vw, 48px) !important;
    font-weight: 600 !important;

    line-height: 1.18 !important;
    letter-spacing: -.6px !important;

    text-align: center !important;
}


/* DESCRIPTION */

.oh-door-design-header p {
    max-width: 760px;

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

    color: rgba(255,255,255,.66) !important;

    font-size: 16px !important;
    line-height: 1.8 !important;

    text-align: center !important;
}


/* =========================================================
   DESIGN GRID
   ========================================================= */

.oh-door-design-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-auto-rows: 440px;

    gap: 22px;
}


/* =========================================================
   LARGE / WIDE CARDS
   ========================================================= */

/* First image takes more visual importance */

.oh-door-design-large {
    grid-column: span 2;
}


/* Last card also wider */

.oh-door-design-wide {
    grid-column: span 2;
}


/* =========================================================
   CARD
   ========================================================= */

.oh-door-design-card {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #222222;
}


/* =========================================================
   IMAGE
   ========================================================= */

.oh-door-design-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.oh-door-design-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform .7s ease,
        filter .5s ease;
}


/* =========================================================
   IMAGE DARK GRADIENT
   ========================================================= */

.oh-door-design-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.86) 0%,
            rgba(0,0,0,.54) 30%,
            rgba(0,0,0,.10) 65%,
            rgba(0,0,0,.02) 100%
        );

    transition: background .4s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.oh-door-design-card:hover .oh-door-design-image img {
    transform: scale(1.055);
}


.oh-door-design-card:hover::after {
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.90) 0%,
            rgba(0,0,0,.60) 36%,
            rgba(0,0,0,.12) 70%,
            rgba(0,0,0,.02) 100%
        );
}


/* =========================================================
   OVERLAY CONTENT
   ========================================================= */

.oh-door-design-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 32px 30px;

    box-sizing: border-box;
}


/* NUMBER */

.oh-door-design-overlay > span {
    display: block;

    margin-bottom: 11px;

    color: #c6a15b;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


/* TITLE */

.oh-door-design-overlay h3 {
    margin: 0 0 10px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 23px !important;
    font-weight: 600 !important;

    line-height: 1.3 !important;

    text-align: left !important;
}


/* DESCRIPTION */

.oh-door-design-overlay p {
    max-width: 560px;

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

    color: rgba(255,255,255,.68) !important;

    font-size: 13px !important;

    line-height: 1.7 !important;

    text-align: left !important;
}


/* =========================================================
   SUBTLE GOLD LINE
   ========================================================= */

.oh-door-design-overlay::before {
    content: "";

    display: block;

    width: 0;
    height: 2px;

    margin-bottom: 17px;

    background: #c6a15b;

    transition: width .4s ease;
}


.oh-door-design-card:hover .oh-door-design-overlay::before {
    width: 45px;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.oh-door-design-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin-top: 55px;

    padding-top: 40px;

    border-top: 1px solid rgba(255,255,255,.12);
}


.oh-door-design-bottom p {
    max-width: 650px;

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

    color: rgba(255,255,255,.62) !important;

    font-size: 15px !important;

    line-height: 1.7 !important;

    text-align: left !important;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.oh-door-design-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 32px;

    box-sizing: border-box;

    border: 1px solid #c6a15b;

    color: #ffffff !important;

    background: transparent;

    white-space: nowrap;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.3px;

    text-decoration: none !important;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.oh-door-design-button:hover {
    background: #c6a15b;

    color: #111111 !important;

    transform: translateY(-2px);
}


/* =========================================================
   SMALL DESKTOP
   ========================================================= */

@media (max-width: 1200px) {

    .oh-door-design-grid {
        grid-auto-rows: 390px;
    }


    .oh-door-design-overlay h3 {
        font-size: 20px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .oh-door-design-section {
        padding: 90px 5vw 100px;
    }


    .oh-door-design-header {
        margin-bottom: 50px;
    }


    .oh-door-design-grid {
        grid-template-columns: repeat(2, 1fr);

        grid-auto-rows: 400px;
    }


    .oh-door-design-large,
    .oh-door-design-wide {
        grid-column: span 1;
    }


    /* Last item full width */

    .oh-door-design-card:last-child {
        grid-column: 1 / -1;
    }


    .oh-door-design-bottom {
        margin-top: 45px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oh-door-design-section {
        padding: 70px 24px 80px;
    }


    /* Header left aligned on mobile */

    .oh-door-design-header {
        max-width: none;

        margin: 0 0 40px;

        text-align: left;
    }


    .oh-door-design-label {
        font-size: 11px;

        letter-spacing: 1.8px;
    }


    .oh-door-design-header h2 {
        font-size: 31px !important;

        text-align: left !important;
    }


    .oh-door-design-header p {
        max-width: none;

        margin: 0 !important;

        font-size: 15px !important;

        text-align: left !important;
    }


    /* Cards single column */

    .oh-door-design-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 420px;

        gap: 16px;
    }


    .oh-door-design-large,
    .oh-door-design-wide,
    .oh-door-design-card:last-child {
        grid-column: auto;
    }


    .oh-door-design-overlay {
        padding: 27px 23px;
    }


    .oh-door-design-overlay h3 {
        font-size: 20px !important;
    }


    .oh-door-design-overlay p {
        font-size: 13px !important;
    }


    /* CTA */

    .oh-door-design-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 28px;

        margin-top: 40px;

        padding-top: 32px;
    }


    .oh-door-design-button {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .oh-door-design-grid {
        grid-auto-rows: 380px;
    }

}


/* =========================================================
   ONEHARBOR ALUMINUM DOOR
   SECTION 5
   Customization Options

   Desktop:
   Large Image Left
   Customization Content Right
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.oh-door-custom-section {
    width: 100%;

    padding: 115px 6vw 125px;

    box-sizing: border-box;

    background: #f7f7f5;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.oh-door-custom-wrapper {
    width: 100%;

    display: grid;

    grid-template-columns: .88fr 1.12fr;

    gap: 6vw;

    align-items: start;
}


/* =========================================================
   LEFT VISUAL
   ========================================================= */

.oh-door-custom-visual {
    position: relative;

    width: 100%;
}


/* IMAGE */

.oh-door-custom-image {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #e9e9e6;
}


.oh-door-custom-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 5;

    object-fit: cover;

    transition: transform .7s ease;
}


.oh-door-custom-image:hover img {
    transform: scale(1.035);
}


/* subtle gradient */

.oh-door-custom-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.18),
            transparent 35%
        );
}


/* =========================================================
   IMAGE INFO
   ========================================================= */

.oh-door-custom-image-info {
    position: relative;

    width: calc(100% - 48px);

    margin:
        -55px
        24px
        0;

    padding: 27px 28px;

    box-sizing: border-box;

    z-index: 2;

    background: #111111;
}


.oh-door-custom-image-info span {
    display: block;

    margin-bottom: 10px;

    color: #c6a15b;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;

    line-height: 1.4;
}


.oh-door-custom-image-info p {
    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255,255,255,.72) !important;

    font-size: 13px !important;

    line-height: 1.7 !important;

    text-align: left !important;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.oh-door-custom-content {
    width: 100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.oh-door-custom-header {
    margin-bottom: 45px;
}


/* LABEL */

.oh-door-custom-label {
    margin-bottom: 18px;

    color: #9a7a45;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
    line-height: 1.4;

    text-transform: uppercase;
}


/* H2 */

.oh-door-custom-header h2 {
    max-width: 720px;

    margin: 0 0 23px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: clamp(34px, 3vw, 47px) !important;
    font-weight: 700 !important;

    line-height: 1.18 !important;
    letter-spacing: -.6px !important;

    text-align: left !important;
}


/* DESCRIPTION */

.oh-door-custom-header > p {
    max-width: 720px;

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

    color: #666666 !important;

    font-size: 16px !important;

    line-height: 1.8 !important;

    text-align: left !important;
}


/* =========================================================
   CUSTOMIZATION GRID
   ========================================================= */

.oh-door-custom-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    column-gap: 42px;
}


/* =========================================================
   CUSTOMIZATION ITEM
   ========================================================= */

.oh-door-custom-item {
    display: flex;

    align-items: flex-start;

    gap: 17px;

    min-height: 155px;

    padding:
        28px
        0;

    box-sizing: border-box;

    border-top: 1px solid #d9d9d5;
}


/* Bottom two borders */

.oh-door-custom-item:nth-last-child(-n+2) {
    border-bottom: 1px solid #d9d9d5;
}


/* =========================================================
   NUMBER
   ========================================================= */

.oh-door-custom-number {
    flex-shrink: 0;

    min-width: 28px;

    padding-top: 3px;

    color: #c6a15b;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.4px;

    line-height: 1.4;
}


/* =========================================================
   ITEM TITLE
   ========================================================= */

.oh-door-custom-item h3 {
    margin: 0 0 9px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 17px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    text-align: left !important;

    transition: color .25s ease;
}


/* =========================================================
   ITEM DESCRIPTION
   ========================================================= */

.oh-door-custom-item p {
    margin: 0 !important;
    padding: 0 !important;

    color: #707070 !important;

    font-size: 13px !important;

    line-height: 1.72 !important;

    text-align: left !important;
}


/* subtle hover */

.oh-door-custom-item:hover h3 {
    color: #9a7a45 !important;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.oh-door-custom-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 44px;
}


.oh-door-custom-bottom > p {
    max-width: 440px;

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

    color: #666666 !important;

    font-size: 14px !important;

    line-height: 1.7 !important;

    text-align: left !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.oh-door-custom-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 31px;

    box-sizing: border-box;

    border: 1px solid #111111;

    background: #111111;

    color: #ffffff !important;

    white-space: nowrap;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.25px;

    text-decoration: none !important;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}


.oh-door-custom-button:hover {
    background: #c6a15b;

    border-color: #c6a15b;

    color: #111111 !important;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .oh-door-custom-section {
        padding: 90px 5vw 100px;
    }


    .oh-door-custom-wrapper {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    /* Limit image height on tablet */

    .oh-door-custom-visual {
        max-width: 720px;

        margin: 0 auto;
    }


    .oh-door-custom-image img {
        aspect-ratio: 16 / 10;
    }


    .oh-door-custom-image-info {
        max-width: 600px;
    }


    .oh-door-custom-header h2 {
        max-width: 750px;
    }


    .oh-door-custom-header > p {
        max-width: 750px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oh-door-custom-section {
        padding: 70px 24px 80px;
    }


    .oh-door-custom-wrapper {
        gap: 55px;
    }


    /* =====================================================
       IMAGE
       ===================================================== */

    .oh-door-custom-image img {
        aspect-ratio: 4 / 5;
    }


    .oh-door-custom-image-info {
        width: calc(100% - 30px);

        margin:
            -38px
            15px
            0;

        padding:
            22px
            20px;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    .oh-door-custom-header {
        margin-bottom: 36px;
    }


    .oh-door-custom-label {
        font-size: 11px;

        letter-spacing: 1.8px;
    }


    .oh-door-custom-header h2 {
        font-size: 31px !important;
    }


    .oh-door-custom-header > p {
        font-size: 15px !important;

        line-height: 1.75 !important;
    }


    /* =====================================================
       CUSTOMIZATION GRID
       ===================================================== */

    .oh-door-custom-grid {
        grid-template-columns: 1fr;

        column-gap: 0;
    }


    .oh-door-custom-item {
        min-height: auto;

        padding:
            24px
            0;

        gap: 15px;
    }


    /* Reset desktop bottom borders */

    .oh-door-custom-item:nth-last-child(-n+2) {
        border-bottom: none;
    }


    /* Only final item bottom border */

    .oh-door-custom-item:last-child {
        border-bottom: 1px solid #d9d9d5;
    }


    .oh-door-custom-item h3 {
        font-size: 16px !important;
    }


    .oh-door-custom-item p {
        font-size: 13px !important;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .oh-door-custom-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

        margin-top: 36px;
    }


    .oh-door-custom-bottom > p {
        max-width: none;
    }


    .oh-door-custom-button {
        width: 100%;
    }

}


/* =========================================================
   ONEHARBOR ALUMINUM DOOR
   SECTION 7
   Manufacturing & Quality
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.oh-door-quality-section {
    width: 100%;

    padding: 115px 6vw 125px;

    box-sizing: border-box;

    background: #ffffff;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.oh-door-quality-wrapper {
    width: 100%;
}


/* =========================================================
   TOP AREA
   ========================================================= */

.oh-door-quality-top {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 6vw;

    align-items: center;

    margin-bottom: 85px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.oh-door-quality-content {
    width: 100%;

    text-align: left;
}


/* LABEL */

.oh-door-quality-label {
    margin-bottom: 18px;

    color: #9a7a45;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
    line-height: 1.4;

    text-transform: uppercase;
}


/* H2 */

.oh-door-quality-content h2 {
    margin: 0 0 26px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: clamp(35px, 3vw, 48px) !important;
    font-weight: 700 !important;

    line-height: 1.18 !important;
    letter-spacing: -.6px !important;

    text-align: left !important;
}


/* DESCRIPTION */

.oh-door-quality-content > p {
    max-width: 650px;

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

    color: #666666 !important;

    font-size: 16px !important;

    line-height: 1.82 !important;

    text-align: left !important;
}


/* =========================================================
   BUTTON AREA
   ========================================================= */

.oh-door-quality-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}


/* BUTTON BASE */

.oh-door-quality-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 31px;

    box-sizing: border-box;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.3px;

    text-decoration: none !important;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


/* DARK BUTTON */

.oh-door-quality-btn-dark {
    border: 1px solid #111111;

    background: #111111;

    color: #ffffff !important;
}


.oh-door-quality-btn-dark:hover {
    background: #c6a15b;

    border-color: #c6a15b;

    color: #111111 !important;

    transform: translateY(-2px);
}


/* OUTLINE BUTTON */

.oh-door-quality-btn-line {
    border: 1px solid #bfbfba;

    background: transparent;

    color: #111111 !important;
}


.oh-door-quality-btn-line:hover {
    border-color: #111111;

    background: #111111;

    color: #ffffff !important;

    transform: translateY(-2px);
}


/* =========================================================
   RIGHT IMAGE
   ========================================================= */

.oh-door-quality-image {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #eeeeeb;
}


.oh-door-quality-image > img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    transition: transform .7s ease;
}


.oh-door-quality-image:hover > img {
    transform: scale(1.035);
}


/* subtle image overlay */

.oh-door-quality-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.35) 0%,
            rgba(0,0,0,.06) 40%,
            transparent 70%
        );
}


/* =========================================================
   IMAGE CAPTION
   ========================================================= */

.oh-door-quality-image-caption {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    z-index: 2;

    max-width: 500px;
}


.oh-door-quality-image-caption span {
    display: block;

    margin-bottom: 8px;

    color: #d5b46f;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


.oh-door-quality-image-caption p {
    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255,255,255,.9) !important;

    font-size: 14px !important;

    line-height: 1.6 !important;

    text-align: left !important;
}


/* =========================================================
   MANUFACTURING PROCESS
   ========================================================= */

.oh-door-quality-process {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 0;

    border-top: 1px solid #deded9;

    border-bottom: 1px solid #deded9;
}


/* =========================================================
   PROCESS ITEM
   ========================================================= */

.oh-door-quality-item {
    position: relative;

    min-height: 255px;

    padding:
        34px
        26px
        32px;

    box-sizing: border-box;

    border-right: 1px solid #deded9;

    background: #ffffff;

    transition:
        background .3s ease,
        transform .3s ease;
}


.oh-door-quality-item:last-child {
    border-right: none;
}


.oh-door-quality-item:hover {
    background: #f7f7f5;
}


/* gold top line */

.oh-door-quality-item::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 26px;

    width: 0;
    height: 2px;

    background: #c6a15b;

    transition: width .35s ease;
}


.oh-door-quality-item:hover::before {
    width: 48px;
}


/* =========================================================
   NUMBER
   ========================================================= */

.oh-door-quality-number {
    display: block;

    margin-bottom: 25px;

    color: #c6a15b;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================================
   TITLE
   ========================================================= */

.oh-door-quality-item h3 {
    margin: 0 0 14px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;

    text-align: left !important;
}


/* =========================================================
   TEXT
   ========================================================= */

.oh-door-quality-item p {
    margin: 0 !important;
    padding: 0 !important;

    color: #6d6d6d !important;

    font-size: 13px !important;

    line-height: 1.75 !important;

    text-align: left !important;
}


/* =========================================================
   SMALL DESKTOP
   ========================================================= */

@media (max-width: 1200px) {

    .oh-door-quality-process {
        grid-template-columns: repeat(3, 1fr);
    }


    .oh-door-quality-item {
        border-bottom: 1px solid #deded9;
    }


    .oh-door-quality-item:nth-child(3) {
        border-right: none;
    }


    .oh-door-quality-item:nth-child(4),
    .oh-door-quality-item:nth-child(5) {
        border-bottom: none;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .oh-door-quality-section {
        padding: 90px 5vw 100px;
    }


    .oh-door-quality-top {
        grid-template-columns: 1fr;

        gap: 55px;

        margin-bottom: 70px;
    }


    .oh-door-quality-content {
        max-width: 760px;
    }


    .oh-door-quality-image {
        max-width: 900px;
    }


    .oh-door-quality-content h2 {
        font-size: 37px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oh-door-quality-section {
        padding: 70px 24px 80px;
    }


    .oh-door-quality-top {
        gap: 45px;

        margin-bottom: 55px;
    }


    /* LABEL */

    .oh-door-quality-label {
        font-size: 11px;

        letter-spacing: 1.8px;
    }


    /* H2 */

    .oh-door-quality-content h2 {
        font-size: 31px !important;
    }


    /* DESCRIPTION */

    .oh-door-quality-content > p {
        font-size: 15px !important;

        line-height: 1.75 !important;
    }


    /* BUTTONS */

    .oh-door-quality-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 32px;
    }


    .oh-door-quality-btn {
        width: 100%;
    }


    /* IMAGE */

    .oh-door-quality-image > img {
        aspect-ratio: 4 / 3;
    }


    .oh-door-quality-image-caption {
        left: 22px;
        right: 22px;
        bottom: 20px;
    }


    .oh-door-quality-image-caption p {
        font-size: 13px !important;
    }


    /* PROCESS */

    .oh-door-quality-process {
        grid-template-columns: 1fr;

        border-bottom: none;
    }


    .oh-door-quality-item {
        min-height: auto;

        padding:
            28px
            22px;

        border-right: none !important;
        border-bottom: 1px solid #deded9 !important;
    }


    .oh-door-quality-item:last-child {
        border-bottom: 1px solid #deded9 !important;
    }


    .oh-door-quality-item::before {
        left: 22px;
    }


    .oh-door-quality-number {
        margin-bottom: 19px;
    }


    .oh-door-quality-item h3 {
        font-size: 17px !important;
    }

}


/* =========================================================
   ONEHARBOR ALUMINUM DOOR
   SECTION 9
   Aluminum Entrance Door FAQ

   Desktop:
   Sticky Intro Left
   Accordion FAQ Right
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.oh-door-faq-section {
    width: 100%;

    padding: 115px 6vw 125px;

    box-sizing: border-box;

    background: #f7f7f5;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.oh-door-faq-wrapper {
    width: 100%;

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 7vw;

    align-items: start;
}


/* =========================================================
   LEFT INTRO
   ========================================================= */

.oh-door-faq-intro {
    position: sticky;

    top: 120px;

    text-align: left;
}


/* LABEL */

.oh-door-faq-label {
    margin-bottom: 18px;

    color: #9a7a45;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
    line-height: 1.4;

    text-transform: uppercase;
}


/* H2 */

.oh-door-faq-intro h2 {
    margin: 0 0 25px !important;
    padding: 0 !important;

    color: #111111 !important;

    font-size: clamp(34px, 3vw, 46px) !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;
    letter-spacing: -.5px !important;

    text-align: left !important;
}


/* INTRO TEXT */

.oh-door-faq-intro > p {
    max-width: 600px;

    margin: 0 0 32px !important;
    padding: 0 !important;

    color: #666666 !important;

    font-size: 16px !important;

    line-height: 1.8 !important;

    text-align: left !important;
}


/* =========================================================
   VIEW ALL FAQ LINK
   ========================================================= */

.oh-door-faq-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 7px;

    border-bottom: 1px solid #9a7a45;

    color: #222222 !important;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.3px;

    text-decoration: none !important;

    transition:
        color .25s ease,
        gap .25s ease;
}


.oh-door-faq-link span {
    color: #9a7a45;

    font-size: 16px;

    line-height: 1;
}


.oh-door-faq-link:hover {
    gap: 17px;

    color: #9a7a45 !important;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.oh-door-faq-list {
    width: 100%;
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.oh-door-faq-item {
    width: 100%;

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

    border-top: 1px solid #d8d8d4;

    background: transparent;
}


.oh-door-faq-item:last-child {
    border-bottom: 1px solid #d8d8d4;
}


/* =========================================================
   QUESTION
   ========================================================= */

.oh-door-faq-item summary {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 84px;

    padding:
        20px
        60px
        20px
        0 !important;

    box-sizing: border-box;

    cursor: pointer;

    list-style: none;

    color: #171717 !important;

    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 1.5 !important;

    text-align: left !important;

    transition:
        color .25s ease;
}


/* Hide browser marker */

.oh-door-faq-item summary::-webkit-details-marker {
    display: none;
}


.oh-door-faq-item summary::marker {
    display: none;
}


/* =========================================================
   PLUS / MINUS
   ========================================================= */

.oh-door-faq-item summary::after {
    content: "+";

    position: absolute;

    right: 4px;
    top: 50%;

    transform: translateY(-50%);

    color: #9a7a45;

    font-size: 25px;
    font-weight: 300;

    line-height: 1;
}


.oh-door-faq-item[open] summary::after {
    content: "−";
}


/* Open state */

.oh-door-faq-item[open] summary {
    color: #9a7a45 !important;
}


/* Hover */

.oh-door-faq-item summary:hover {
    color: #9a7a45 !important;
}


/* =========================================================
   ANSWER
   ========================================================= */

.oh-door-faq-answer {
    padding:
        0
        60px
        31px
        0;
}


.oh-door-faq-answer p {
    max-width: 780px;

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

    color: #666666 !important;

    font-size: 15px !important;

    line-height: 1.85 !important;

    text-align: left !important;
}


/* =========================================================
   SUBTLE OPEN BACKGROUND
   ========================================================= */

.oh-door-faq-item[open] {
    background:
        linear-gradient(
            90deg,
            rgba(198,161,91,.045),
            transparent 70%
        );
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .oh-door-faq-section {
        padding: 90px 5vw 100px;
    }


    .oh-door-faq-wrapper {
        grid-template-columns: .9fr 1.1fr;

        gap: 5vw;
    }


    .oh-door-faq-intro {
        top: 90px;
    }


    .oh-door-faq-intro h2 {
        font-size: 36px !important;
    }


    .oh-door-faq-item summary {
        font-size: 17px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oh-door-faq-section {
        padding: 70px 24px 80px;
    }


    .oh-door-faq-wrapper {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* Disable sticky on mobile */

    .oh-door-faq-intro {
        position: static;
    }


    /* LABEL */

    .oh-door-faq-label {
        font-size: 11px;

        letter-spacing: 1.8px;
    }


    /* H2 */

    .oh-door-faq-intro h2 {
        font-size: 30px !important;
    }


    /* INTRO */

    .oh-door-faq-intro > p {
        max-width: none;

        font-size: 15px !important;

        line-height: 1.75 !important;
    }


    /* QUESTION */

    .oh-door-faq-item summary {
        min-height: 72px;

        padding:
            18px
            45px
            18px
            0 !important;

        font-size: 16px !important;

        line-height: 1.5 !important;
    }


    .oh-door-faq-item summary::after {
        right: 0;

        font-size: 22px;
    }


    /* ANSWER */

    .oh-door-faq-answer {
        padding:
            0
            38px
            25px
            0;
    }


    .oh-door-faq-answer p {
        font-size: 14px !important;

        line-height: 1.75 !important;
    }

}


/* =========================================================
   ONEHARBOR — ALUMINUM DOOR BANNER
   PC端：1280px文字区域，居中靠下
   APP端：保持1080×1600完整显示
   无深色遮罩
   ========================================================= */

/* 全局盒模型 */
.oh-door-layer-banner,
.oh-door-layer-banner * {
    box-sizing: border-box;
}

/* 强制关闭旧代码中的遮罩 */
.oh-door-layer-banner::before,
.oh-door-layer-banner::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

/* =========================================================
   PC端基础样式
   ========================================================= */

.oh-door-layer-banner {
    position: relative !important;

    width: 100% !important;
    min-height: 720px !important;

    /* 替换成PC端背景图片地址 */
    background-image: url("YOUR-PC-BACKGROUND-IMAGE-URL.webp");
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-color: transparent !important;

    display: block !important;

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

    filter: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

/* PC端文字总容器 */
.oh-door-layer-content {
    position: absolute !important;

    top: auto !important;
    right: 0 !important;
    bottom: 58px !important;
    left: 0 !important;

    z-index: 2 !important;

    width: calc(100% - 60px) !important;
    max-width: 1280px !important;

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

    text-align: center !important;
    transform: none !important;
}

/* PC端标题 */
.oh-door-layer-title {
    display: block !important;

    width: 100% !important;
    max-width: 1280px !important;

    margin: 0 auto 48px !important;
    padding: 0 !important;

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: clamp(48px, 2.75vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;

    text-align: center !important;
    white-space: normal !important;
    text-wrap: balance;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65) !important;
}

/* PC端描述 */
.oh-door-layer-description {
    display: block !important;

    width: 100% !important;
    max-width: 1280px !important;

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

    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;

    text-align: center !important;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75) !important;
}

/* =========================================================
   大屏PC端
   保持接近参考图的Banner比例
   ========================================================= */

@media screen and (min-width: 1025px) {
    .oh-door-layer-banner {
        width: 100% !important;
        min-height: 720px !important;
        aspect-ratio: 2048 / 824;
    }

    .oh-door-layer-content {
        width: calc(100% - 60px) !important;
        max-width: 1280px !important;
        bottom: 58px !important;
    }

    .oh-door-layer-title {
        width: 100% !important;
        max-width: 1280px !important;
    }

    .oh-door-layer-description {
        width: 100% !important;
        max-width: 1280px !important;
    }
}

/* =========================================================
   平板端
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .oh-door-layer-banner {
        min-height: 650px !important;
        aspect-ratio: auto;
    }

    .oh-door-layer-content {
        width: calc(100% - 56px) !important;
        max-width: 900px !important;
        bottom: 50px !important;
    }

    .oh-door-layer-title {
        max-width: 900px !important;
        margin-bottom: 26px !important;
        font-size: clamp(38px, 5vw, 54px) !important;
        line-height: 1.1 !important;
    }

    .oh-door-layer-description {
        max-width: 900px !important;
        font-size: 17px !important;
        line-height: 1.65 !important;
    }
}

/* =========================================================
   APP端
   保持当前1080×1600完整显示效果
   ========================================================= */

@media screen and (max-width: 767px) {
    .oh-door-layer-banner {
        position: relative !important;

        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 100svh !important;
        aspect-ratio: 1080 / 1600 !important;

        /* 替换成APP端1080×1600图片地址 */
        background-image: url("YOUR-MOBILE-1080X1600-IMAGE-URL.webp");
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-color: transparent !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: center !important;

        padding: 30px 18px 28px !important;
        margin: 0 !important;

        filter: none !important;
        opacity: 1 !important;
        overflow: hidden !important;
    }

    /* APP端继续关闭遮罩 */
    .oh-door-layer-banner::before,
    .oh-door-layer-banner::after {
        content: none !important;
        display: none !important;
        background: none !important;
        opacity: 0 !important;
    }

    /* APP端恢复相对定位 */
    .oh-door-layer-content {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 620px !important;

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

        text-align: center !important;
        transform: none !important;
    }

    .oh-door-layer-title {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 18px !important;
        padding: 0 !important;

        font-size: clamp(26px, 7.5vw, 36px) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.02em !important;
        text-align: center !important;
    }

    .oh-door-layer-description {
        width: 100% !important;
        max-width: 100% !important;

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

        font-size: clamp(13px, 3.5vw, 15px) !important;
        line-height: 1.55 !important;
        text-align: center !important;
    }
}

/* =========================================================
   小屏手机
   ========================================================= */

@media screen and (max-width: 420px) {
    .oh-door-layer-banner {
        padding: 24px 16px 22px !important;
    }

    .oh-door-layer-title {
        margin-bottom: 15px !important;
        font-size: clamp(24px, 7.2vw, 30px) !important;
    }

    .oh-door-layer-description {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}

/* =========================================================
   高度较小的横屏手机
   ========================================================= */

@media screen and (max-width: 767px) and (max-height: 560px) {
    .oh-door-layer-banner {
        height: 100svh !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        padding: 18px 16px !important;
    }

    .oh-door-layer-title {
        margin-bottom: 10px !important;
        font-size: 24px !important;
    }

    .oh-door-layer-description {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}


/* =========================================================
   ONEHARBOR ALUMINUM CARPORT HERO
   CSS ONLY
========================================================= */


/* HERO CONTAINER */

.oh-carport-hero {

    width:100%;

    height:100vh;

    min-height:700px;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-image:url("https://via.placeholder.com/2560x1440");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}






/* CONTENT */

.oh-carport-hero__content {

    position:relative;

    z-index:2;

    width:100%;

    max-width:900px;

    padding-left:6%;

    padding-right:40px;

    box-sizing:border-box;

    color:#ffffff;

}






/* SMALL LABEL */

.oh-carport-hero__eyebrow {

    margin-bottom:24px;

    font-size:13px;

    line-height:1.4;

    font-weight:600;

    letter-spacing:2.5px;

    text-transform:uppercase;

    color:#ffffff;

}


.oh-carport-hero__eyebrow::before {

    content:"";

    display:inline-block;

    width:42px;

    height:1px;

    margin-right:16px;

    margin-bottom:4px;

    background:#ffffff;

}







/* TITLE */

.oh-carport-hero__title {

    max-width:850px;

    margin:0 !important;

    padding:0;

    font-size:clamp(42px,4.5vw,70px);

    line-height:1.1;

    font-weight:700;

    letter-spacing:-1px;

    color:#ffffff;

}







/* DESCRIPTION */

.oh-carport-hero__description {

    max-width:760px;

    margin:34px 0 0 !important;

    padding:0;

    font-size:clamp(16px,1.25vw,19px);

    line-height:1.75;

    color:rgba(255,255,255,0.95);

}







/* BUTTON AREA */

.oh-carport-hero__buttons {

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:60px !important;

}







/* BUTTON */

.oh-carport-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:195px;

    height:56px;

    padding:0 32px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1.2px;

    text-transform:uppercase;

    text-decoration:none !important;

    transition:.3s ease;

}






/* PRIMARY BUTTON */

.oh-carport-btn--primary {

    background:#a98245;

    border:1px solid #a98245;

    color:#ffffff !important;

}


.oh-carport-btn--primary:hover {

    background:#8d6c39;

    border-color:#8d6c39;

}







/* SECONDARY BUTTON */

.oh-carport-btn--secondary {

    background:transparent;

    border:1px solid rgba(255,255,255,.9);

    color:#ffffff !important;

}


.oh-carport-btn--secondary:hover {

    background:#ffffff;

    color:#222222 !important;

}







/* TRUST INFO PC */

.oh-carport-hero__trust {

    position:absolute;

    right:50px;

    bottom:42px;

    z-index:3;

    display:flex;

    align-items:center;

    white-space:nowrap;

    font-size:14px;

    font-weight:500;

    letter-spacing:.8px;

    color:#ffffff;

}


.oh-carport-divider {

    margin:0 11px;

    opacity:.7;

}








/* TABLET */

@media(max-width:1200px){


    .oh-carport-hero__content {

        padding-left:6%;

    }


    .oh-carport-hero__trust {

        right:30px;

        bottom:30px;

        font-size:13px;

    }


}









/* MOBILE */

@media(max-width:768px){


    .oh-carport-hero {

        height:auto;

        min-height:100vh;

        padding:105px 0 70px;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

    }




    .oh-carport-hero__content {

        width:100%;

        max-width:none;

        padding-left:24px;

        padding-right:24px;

    }




    .oh-carport-hero__eyebrow {

        margin-bottom:20px;

        font-size:10px;

        letter-spacing:1.5px;

    }




    .oh-carport-hero__eyebrow::before {

        width:28px;

        margin-right:10px;

    }




    .oh-carport-hero__title {

        font-size:38px;

        line-height:1.15;

    }




    .oh-carport-hero__description {

        margin-top:28px !important;

        font-size:15px;

        line-height:1.7;

    }




    .oh-carport-hero__buttons {

        width:100%;

        flex-direction:column;

        gap:14px;

        margin-top:55px !important;

    }




    .oh-carport-btn {

        width:100%;

        height:54px;

    }




    /* MOBILE TRUST */

    .oh-carport-hero__trust {

        position:relative;

        right:auto;

        bottom:auto;

        width:calc(100% - 48px);

        margin:55px 24px 0;

        display:flex;

        align-items:center;

        white-space:nowrap;

        font-size:10px;

        letter-spacing:.3px;

    }




    .oh-carport-divider {

        margin:0 5px;

    }


}








/* SMALL MOBILE */

@media(max-width:390px){


    .oh-carport-hero {

        padding-top:90px;

    }



    .oh-carport-hero__content {

        padding-left:20px;

        padding-right:20px;

    }




    .oh-carport-hero__title {

        font-size:34px;

    }




    .oh-carport-hero__trust {

        width:calc(100% - 40px);

        margin-left:20px;

        margin-right:20px;

        font-size:9px;

    }


}


/* =========================================================
   ONEHARBOR ALUMINUM CARPORT
   SECTION 2

   Engineering Manufacturer Style

   ========================================================= */



.oh-carport-manufacturer-section {


    width:100%;


    padding:110px 6vw;


    background:#ffffff;


    box-sizing:border-box;


}





/* MAIN */

.oh-carport-manufacturer-wrapper {


    width:100%;


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:6vw;


    align-items:center;


}







/* =====================================================
   IMAGE
   ===================================================== */


.oh-carport-manufacturer-image {


    width:100%;


    overflow:hidden;


    background:#eeeeeb;


}




.oh-carport-manufacturer-image img {


    width:100%;


    height:auto;


    display:block;


    aspect-ratio:4 / 3;


    object-fit:cover;


    transition:.6s ease;


}



.oh-carport-manufacturer-image:hover img {


    transform:scale(1.03);


}








/* =====================================================
   CONTENT
   ===================================================== */


.oh-carport-manufacturer-content {


    text-align:left;


}







/* LABEL */

.oh-carport-manufacturer-label {


    margin-bottom:20px;


    color:#2f80ed;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


    text-transform:uppercase;


}







/* TITLE */


.oh-carport-manufacturer-content h2 {


    margin:0 0 22px!important;


    color:#111111!important;


    font-size:clamp(34px,3vw,48px)!important;


    font-weight:700!important;


    line-height:1.2!important;


    letter-spacing:-.5px;


}







/* SUBTITLE */


.oh-carport-manufacturer-content h3 {


    margin:0 0 30px!important;


    color:#555555!important;


    font-size:20px!important;


    font-weight:500!important;


    line-height:1.5!important;


}








/* TEXT */


.oh-carport-manufacturer-content > p {


    margin:0 0 18px!important;


    color:#666666!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* =====================================================
   ENGINEERING LIST
   ===================================================== */


.oh-carport-engineering-list {


    margin-top:40px;


    display:flex;


    flex-direction:column;


    gap:26px;


}





.oh-carport-engineering-item {


    display:flex;


    gap:20px;


    align-items:flex-start;


    padding-bottom:22px;


    border-bottom:1px solid #e5e5e2;


}







.oh-carport-engineering-item > span {


    color:#2f80ed;


    font-size:12px;


    font-weight:700;


    letter-spacing:1px;


}





.oh-carport-engineering-item h4 {


    margin:0 0 8px!important;


    color:#111111!important;


    font-size:18px!important;


    font-weight:600!important;


}







.oh-carport-engineering-item p {


    margin:0!important;


    color:#777777!important;


    font-size:14px!important;


    line-height:1.7!important;


}







/* =====================================================
   BUTTON
   ===================================================== */


.oh-carport-manufacturer-button {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    margin-top:42px;


    height:54px;


    padding:0 36px;


    background:#111111;


    color:#ffffff!important;


    font-size:12px;


    font-weight:700;


    letter-spacing:1.5px;


    text-decoration:none!important;


    transition:.3s ease;


}



.oh-carport-manufacturer-button:hover {


    background:#2f80ed;


}







/* =====================================================
   TABLET
   ===================================================== */


@media(max-width:1024px){


    .oh-carport-manufacturer-section {


        padding:90px 5vw;


    }



    .oh-carport-manufacturer-wrapper {


        gap:40px;


    }


}







/* =====================================================
   MOBILE
   ===================================================== */


@media(max-width:767px){


    .oh-carport-manufacturer-section {


        padding:70px 24px;


    }




    .oh-carport-manufacturer-wrapper {


        grid-template-columns:1fr;


        gap:45px;


    }



    .oh-carport-manufacturer-content h2 {


        font-size:32px!important;


    }



    .oh-carport-manufacturer-content h3 {


        font-size:18px!important;


    }



    .oh-carport-manufacturer-content > p {


        font-size:15px!important;


    }




    .oh-carport-manufacturer-button {


        width:100%;


    }


}


/* =========================================================
   ONEHARBOR ALUMINUM CARPORT
   SECTION 3

   Engineering Advantage System

   ========================================================= */


.oh-carport-engineering-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#f4f5f6;


    box-sizing:border-box;


}





/* HEADER */

.oh-carport-engineering-header {


    text-align:center;


    margin-bottom:65px;


}



.oh-carport-engineering-label {


    margin-bottom:18px;


    color:#2f80ed;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


    text-transform:uppercase;


}



.oh-carport-engineering-header h2 {


    margin:0 0 22px!important;


    color:#111!important;


    font-size:clamp(34px,3vw,48px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}



.oh-carport-engineering-header p {


    max-width:850px;


    margin:0 auto!important;


    color:#666!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* ADVANTAGE LIST */


.oh-carport-advantage-list {


    width:100%;


    border-top:1px solid #d8dadd;


}






.oh-carport-advantage-item {


    display:grid;


    grid-template-columns:80px 1fr 160px;


    align-items:center;


    gap:35px;



    padding:38px 0;


    border-bottom:1px solid #d8dadd;


    transition:.3s ease;


}




.oh-carport-advantage-item:hover {


    background:#ffffff;


    padding-left:25px;


    padding-right:25px;


}






/* NUMBER */


.oh-carport-advantage-number {


    color:#2f80ed;


    font-size:14px;


    font-weight:700;


    letter-spacing:1.5px;


}






/* CONTENT */


.oh-carport-advantage-content h3 {


    margin:0 0 10px!important;


    color:#111!important;


    font-size:22px!important;


    font-weight:600!important;


}



.oh-carport-advantage-content p {


    margin:0!important;


    color:#666!important;


    font-size:15px!important;


    line-height:1.75!important;


}






/* TAG */


.oh-carport-advantage-tag {


    justify-self:end;


    padding:8px 16px;


    border:1px solid #2f80ed;


    color:#2f80ed;


    font-size:10px;


    font-weight:700;


    letter-spacing:1.5px;


}








/* TABLET */


@media(max-width:1024px){


    .oh-carport-engineering-section {


        padding:90px 5vw;


    }



    .oh-carport-advantage-item {


        grid-template-columns:60px 1fr;


    }



    .oh-carport-advantage-tag {


        display:none;


    }


}








/* MOBILE */


@media(max-width:767px){


    .oh-carport-engineering-section {


        padding:70px 24px;


    }




    .oh-carport-engineering-header {


        text-align:left;


        margin-bottom:45px;


    }



    .oh-carport-engineering-header h2 {


        font-size:31px!important;


        text-align:left!important;


    }



    .oh-carport-engineering-header p {


        text-align:left!important;


        font-size:15px!important;


    }





    .oh-carport-advantage-item {


        grid-template-columns:45px 1fr;


        gap:18px;


        padding:28px 0;


    }



    .oh-carport-advantage-item:hover {


        padding-left:0;


        padding-right:0;


    }




    .oh-carport-advantage-content h3 {


        font-size:18px!important;


    }



    .oh-carport-advantage-content p {


        font-size:14px!important;


    }



}


/* =========================================================
   ONEHARBOR ALUMINUM CARPORT
   SECTION 4

   Solar Aluminum Carport System

   ========================================================= */


.oh-solar-carport-section {


    width:100%;


    padding:120px 6vw;


    background:#111827;


    color:#ffffff;


    box-sizing:border-box;


}






/* MAIN */

.oh-solar-carport-wrapper {


    width:100%;


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:6vw;


    align-items:center;


}







/* IMAGE */

.oh-solar-carport-image {


    width:100%;


    overflow:hidden;


}



.oh-solar-carport-image img {


    display:block;


    width:100%;


    height:auto;


    aspect-ratio:4 / 3;


    object-fit:cover;


    transition:.6s ease;


}



.oh-solar-carport-image:hover img {


    transform:scale(1.04);


}








/* CONTENT */


.oh-solar-carport-content {


    text-align:left;


}







/* LABEL */

.oh-solar-label {


    margin-bottom:20px;


    color:#4da3ff;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}







/* TITLE */


.oh-solar-carport-content h2 {


    margin:0 0 22px!important;


    color:#ffffff!important;


    font-size:clamp(34px,3vw,48px)!important;


    line-height:1.2!important;


    font-weight:700!important;


}







/* SUBTITLE */


.oh-solar-carport-content h3 {


    margin:0 0 30px!important;


    color:rgba(255,255,255,.75)!important;


    font-size:20px!important;


    font-weight:500!important;


    line-height:1.5!important;


}







/* DESCRIPTION */


.oh-solar-carport-content > p {


    margin:0 0 40px!important;


    color:rgba(255,255,255,.72)!important;


    font-size:16px!important;


    line-height:1.8!important;


}








/* FEATURES */


.oh-solar-features {


    display:flex;


    flex-direction:column;


    gap:25px;


}






.oh-solar-feature {


    display:flex;


    gap:20px;


    padding-bottom:20px;


    border-bottom:

    1px solid rgba(255,255,255,.12);


}





.oh-solar-feature span {


    color:#4da3ff;


    font-size:12px;


    font-weight:700;


}





.oh-solar-feature h4 {


    margin:0 0 8px!important;


    color:#ffffff!important;


    font-size:18px!important;


    font-weight:600!important;


}






.oh-solar-feature p {


    margin:0!important;


    color:rgba(255,255,255,.6)!important;


    font-size:14px!important;


    line-height:1.7!important;


}







/* BUTTON */


.oh-solar-button {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    margin-top:45px;


    height:54px;


    padding:0 35px;


    border:1px solid #4da3ff;


    color:#ffffff!important;


    font-size:12px;


    font-weight:700;


    letter-spacing:1.5px;


    text-decoration:none!important;


    transition:.3s ease;


}




.oh-solar-button:hover {


    background:#4da3ff;


    color:#111!important;


}








/* TABLET */


@media(max-width:1024px){


    .oh-solar-carport-section {


        padding:90px 5vw;


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-solar-carport-section {


        padding:70px 24px;


    }




    .oh-solar-carport-wrapper {


        grid-template-columns:1fr;


        gap:45px;


    }




    .oh-solar-carport-image {


        order:-1;


    }




    .oh-solar-carport-content h2 {


        font-size:32px!important;


    }




    .oh-solar-carport-content h3 {


        font-size:18px!important;


    }




    .oh-solar-button {


        width:100%;


    }



}


/* =========================================================
   ONEHARBOR ALUMINUM CARPORT
   SECTION 5
   Simple Content Transition Section

   Label + Heading + Description Only

   ========================================================= */


.oh-carport-custom-section {


    width:100%;


    padding:120px 6vw;


    background:#ffffff;


    box-sizing:border-box;


}





.oh-carport-custom-wrapper {


    width:100%;


    text-align:center;


}







/* LABEL */


.oh-carport-custom-label {


    margin-bottom:20px;


    color:#2f80ed;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


    text-transform:uppercase;


}







/* H2 */


.oh-carport-custom-wrapper h2 {


    margin:0 0 25px!important;


    color:#111111!important;


    font-size:clamp(36px,3.2vw,52px)!important;


    font-weight:700!important;


    line-height:1.2!important;


    letter-spacing:-.5px;


}







/* DESCRIPTION */


.oh-carport-custom-wrapper p {


    max-width:900px;


    margin:0 auto!important;


    color:#666666!important;


    font-size:17px!important;


    line-height:1.85!important;


}







/* =====================================================
   TABLET
   ===================================================== */


@media(max-width:1024px){


    .oh-carport-custom-section {


        padding:90px 5vw;


    }



    .oh-carport-custom-wrapper h2 {


        font-size:38px!important;


    }


}







/* =====================================================
   MOBILE
   ===================================================== */


@media(max-width:767px){


    .oh-carport-custom-section {


        padding:70px 24px;


    }




    .oh-carport-custom-wrapper {


        text-align:left;


    }



    .oh-carport-custom-wrapper h2 {


        font-size:32px!important;


    }




    .oh-carport-custom-wrapper p {


        font-size:15px!important;


        line-height:1.75!important;


    }



}


/* =========================================================
   ONEHARBOR ALUMINUM CARPORT
   SECTION 6

   Applications Matrix

   ========================================================= */



.oh-carport-applications-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#111827;


    color:#ffffff;


    box-sizing:border-box;


}






/* HEADER */


.oh-carport-applications-header {


    text-align:center;


    margin-bottom:65px;


}



.oh-carport-applications-label {


    margin-bottom:18px;


    color:#4da3ff;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


    text-transform:uppercase;


}





.oh-carport-applications-header h2 {


    margin:0 0 22px!important;


    color:#ffffff!important;


    font-size:clamp(34px,3vw,48px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}





.oh-carport-applications-header p {


    max-width:900px;


    margin:0 auto!important;


    color:rgba(255,255,255,.7)!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* GRID */


.oh-carport-applications-grid {


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:24px;


}







/* CARD */


.oh-carport-application-card {


    min-height:330px;


    padding:38px 30px;


    border:

    1px solid rgba(255,255,255,.12);



    background:

    rgba(255,255,255,.03);



    transition:.35s ease;


}





.oh-carport-application-card:hover {


    background:

    rgba(255,255,255,.08);


    transform:translateY(-5px);


}







/* NUMBER */


.application-number {


    margin-bottom:30px;


    color:#4da3ff;


    font-size:13px;


    font-weight:700;


    letter-spacing:1.5px;


}







/* TITLE */


.oh-carport-application-card h3 {


    margin:0 0 18px!important;


    color:#ffffff!important;


    font-size:22px!important;


    font-weight:600!important;


}







/* TEXT */


.oh-carport-application-card p {


    margin:0 0 25px!important;


    color:rgba(255,255,255,.65)!important;


    font-size:14px!important;


    line-height:1.75!important;


}







/* TAG */


.oh-carport-application-card span {


    display:inline-block;


    padding:7px 14px;


    border:

    1px solid #4da3ff;



    color:#4da3ff;


    font-size:10px;


    font-weight:700;


    letter-spacing:1.3px;


}







/* TABLET */


@media(max-width:1024px){


    .oh-carport-applications-grid {


        grid-template-columns:repeat(2,1fr);


    }



}







/* MOBILE */


@media(max-width:767px){


    .oh-carport-applications-section {


        padding:70px 24px 80px;


    }



    .oh-carport-applications-header {


        text-align:left;


        margin-bottom:40px;


    }




    .oh-carport-applications-header h2 {


        font-size:31px!important;


        text-align:left!important;


    }




    .oh-carport-applications-header p {


        text-align:left!important;


        font-size:15px!important;


    }




    .oh-carport-applications-grid {


        grid-template-columns:1fr;


        gap:18px;


    }





    .oh-carport-application-card {


        min-height:auto;


        padding:30px 24px;


    }


}


/* =========================================================
   ONEHARBOR ALUMINUM CARPORT
   SECTION 9

   Technical FAQ Style

   ========================================================= */


.oh-carport-faq-section {


    width:100%;


    padding:115px 6vw 125px;


    background:#111827;


    color:white;


    box-sizing:border-box;


}






/* MAIN */

.oh-carport-faq-wrapper {


    width:100%;


    display:grid;


    grid-template-columns:.85fr 1.15fr;


    gap:7vw;


    align-items:start;


}






/* INTRO */


.oh-carport-faq-intro {


    position:sticky;


    top:120px;


}




.oh-carport-faq-label {


    margin-bottom:18px;


    color:#4da3ff;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}






.oh-carport-faq-intro h2 {


    margin:0 0 25px!important;


    color:#ffffff!important;


    font-size:clamp(34px,3vw,46px)!important;


    line-height:1.2!important;


}







.oh-carport-faq-intro p {


    margin:0 0 35px!important;


    color:rgba(255,255,255,.7)!important;


    font-size:16px!important;


    line-height:1.8!important;


}






/* BUTTON */


.oh-carport-faq-button {


    display:inline-flex;


    align-items:center;


    height:50px;


    padding:0 28px;


    border:1px solid #4da3ff;


    color:#ffffff!important;


    font-size:12px;


    font-weight:700;


    letter-spacing:1.5px;


    text-decoration:none!important;


}






.oh-carport-faq-button:hover {


    background:#4da3ff;


    color:#111!important;


}








/* FAQ ITEM */


.oh-carport-faq-item {


    border-top:

    1px solid rgba(255,255,255,.15);


}



.oh-carport-faq-item:last-child {


    border-bottom:

    1px solid rgba(255,255,255,.15);


}






/* QUESTION */


.oh-carport-faq-item summary {


    position:relative;


    display:flex;


    align-items:center;


    min-height:85px;


    padding:20px 55px 20px 0!important;


    cursor:pointer;


    list-style:none;


    color:#ffffff!important;


    font-size:18px!important;


    font-weight:600!important;


}






.oh-carport-faq-item summary::-webkit-details-marker {


    display:none;


}




.oh-carport-faq-item summary::after {


    content:"+"; 


    position:absolute;


    right:5px;


    top:50%;


    transform:translateY(-50%);


    color:#4da3ff;


    font-size:26px;


}




.oh-carport-faq-item[open] summary::after {


    content:"−";


}







/* ANSWER */


.oh-carport-faq-answer {


    padding:0 55px 30px 0;


}




.oh-carport-faq-answer p {


    margin:0!important;


    color:rgba(255,255,255,.65)!important;


    font-size:15px!important;


    line-height:1.85!important;


}








/* TABLET */


@media(max-width:1024px){


    .oh-carport-faq-wrapper {


        grid-template-columns:1fr;


        gap:50px;


    }



    .oh-carport-faq-intro {


        position:static;


    }


}








/* MOBILE */


@media(max-width:767px){


    .oh-carport-faq-section {


        padding:70px 24px 80px;


    }




    .oh-carport-faq-intro h2 {


        font-size:31px!important;


    }




    .oh-carport-faq-intro p {


        font-size:15px!important;


    }





    .oh-carport-faq-item summary {


        font-size:16px!important;


        min-height:75px;


    }




    .oh-carport-faq-answer p {


        font-size:14px!important;


    }



}


/* =====================================================
   ONEHARBOR ABOUT SECTION 2
   WHO WE ARE

   Text + Brand Information Panel
   ===================================================== */



.oh-about-who-section {


    width:100%;


    padding:110px 6vw;


    background:#f7f7f5;


    box-sizing:border-box;


}






.oh-about-who-wrapper {


    width:100%;


    display:grid;


    grid-template-columns:1fr 0.75fr;


    gap:7vw;


    align-items:center;


}







/* LEFT CONTENT */


.oh-about-who-content {


    text-align:left;


}





.oh-about-who-label {


    margin-bottom:20px;


    color:#9a7a45;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


    text-transform:uppercase;


}





.oh-about-who-content h2 {


    margin:0 0 30px!important;


    color:#111111!important;


    font-size:clamp(36px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


    letter-spacing:-.5px;


}





.oh-about-who-content p {


    margin:0 0 22px!important;


    color:#666666!important;


    font-size:16px!important;


    line-height:1.85!important;


}








/* RIGHT PANEL */


.oh-about-who-panel {


    background:#111111;


    padding:45px 40px;


}






.oh-about-panel-item {


    padding:28px 0;


    border-bottom:

    1px solid rgba(255,255,255,.15);


}





.oh-about-panel-item:first-child {


    padding-top:0;


}



.oh-about-panel-item:last-child {


    border-bottom:none;


    padding-bottom:0;


}





.oh-about-panel-item span {


    display:block;


    margin-bottom:12px;


    color:#c6a15b;


    font-size:11px;


    font-weight:700;


    letter-spacing:2px;


}





.oh-about-panel-item h3 {


    margin:0!important;


    color:#ffffff!important;


    font-size:20px!important;


    font-weight:500!important;


    line-height:1.7!important;


}







/* TABLET */


@media(max-width:1024px){


    .oh-about-who-wrapper {


        grid-template-columns:1fr;


        gap:50px;


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-about-who-section {


        padding:70px 24px;


    }




    .oh-about-who-content h2 {


        font-size:32px!important;


    }




    .oh-about-who-content p {


        font-size:15px!important;


    }




    .oh-about-who-panel {


        padding:35px 25px;


    }




    .oh-about-panel-item h3 {


        font-size:18px!important;


    }


}


/* =====================================================
   ABOUT SECTION 3

   One Alu Aluminum → OneHarborOutdoor

   ===================================================== */


.oh-about-brand-section {


    width:100%;


    padding:110px 6vw;


    background:#111111;


    color:#ffffff;


    box-sizing:border-box;


}





.oh-about-brand-wrapper {


    width:100%;


}







/* HEADER */


.oh-about-brand-header {


    text-align:center;


    margin-bottom:65px;


}





.oh-about-brand-label {


    margin-bottom:20px;


    color:#c6a15b;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}







.oh-about-brand-header h2 {


    margin:0 auto!important;


    color:#ffffff!important;


    font-size:clamp(34px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


    max-width:none;


}







/* GRID */


.oh-about-brand-grid {


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:30px;


}







/* CARD */


.oh-about-brand-card {


    padding:45px;


    border:1px solid rgba(255,255,255,.15);


    background:rgba(255,255,255,.04);


}





.oh-about-brand-highlight {


    border-color:#c6a15b;


    background:rgba(198,161,91,.08);


}







/* YEAR */


.oh-about-brand-year {


    margin-bottom:20px;


    color:#c6a15b;


    font-size:12px;


    font-weight:700;


    letter-spacing:2px;


}







/* TITLE */


.oh-about-brand-card h3 {


    margin:0 0 25px!important;


    color:#ffffff!important;


    font-size:28px!important;


    font-weight:600!important;


}







/* TEXT */


.oh-about-brand-card p {


    margin:0 0 35px!important;


    color:rgba(255,255,255,.72)!important;


    font-size:16px!important;


    line-height:1.85!important;


}







/* STATS */


.oh-about-brand-stats {


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:20px;


}



.oh-about-brand-stats strong {


    display:block;


    color:#ffffff;


    font-size:32px;


    line-height:1;


}



.oh-about-brand-stats span {


    display:block;


    margin-top:8px;


    color:rgba(255,255,255,.6);


    font-size:12px;


}







/* PRODUCT LIST */


.oh-about-product-list {


    display:flex;


    flex-direction:column;


    gap:14px;


}





.oh-about-product-list span {


    padding:14px 18px;


    border-left:2px solid #c6a15b;


    background:rgba(255,255,255,.06);


    color:#ffffff;


    font-size:15px;


}







/* TABLET */


@media(max-width:1024px){


    .oh-about-brand-grid {


        grid-template-columns:1fr;


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-about-brand-section {


        padding:70px 24px;


    }



    .oh-about-brand-card {


        padding:30px 24px;


    }




    .oh-about-brand-card h3 {


        font-size:24px!important;


    }




    .oh-about-brand-stats {


        grid-template-columns:1fr;


    }



}


/* =====================================================
   ABOUT SECTION 4

   Why Choose ONEHARBOR

   ===================================================== */


.oh-about-why-section {


    width:100%;


    padding:110px 6vw;


    background:#f7f7f5;


    box-sizing:border-box;


}





/* HEADER */


.oh-about-why-header {


    text-align:center;


    margin-bottom:65px;


}




.oh-about-why-label {


    margin-bottom:18px;


    color:#9a7a45;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


    text-transform:uppercase;


}




.oh-about-why-header h2 {


    margin:0 0 22px!important;


    color:#111111!important;


    font-size:clamp(36px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}




.oh-about-why-header p {


    max-width:850px;


    margin:0 auto!important;


    color:#666666!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* GRID */


.oh-about-why-grid {


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:25px;


}







/* ITEM */


.oh-about-why-item {


    padding:38px 30px;


    background:#ffffff;


    border:1px solid #e5e5e1;


    transition:.35s ease;


}





.oh-about-why-item:hover {


    transform:translateY(-6px);


    box-shadow:

    0 15px 35px rgba(0,0,0,.08);


}







/* NUMBER */


.oh-about-why-item span {


    display:block;


    margin-bottom:25px;


    color:#c6a15b;


    font-size:13px;


    font-weight:700;


    letter-spacing:1.5px;


}







/* TITLE */


.oh-about-why-item h3 {


    margin:0 0 16px!important;


    color:#111111!important;


    font-size:20px!important;


    font-weight:600!important;


    line-height:1.4!important;


}







/* TEXT */


.oh-about-why-item p {


    margin:0!important;


    color:#666666!important;


    font-size:14px!important;


    line-height:1.75!important;


}







/* TABLET */


@media(max-width:1024px){


    .oh-about-why-grid {


        grid-template-columns:repeat(2,1fr);


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-about-why-section {


        padding:70px 24px;


    }



    .oh-about-why-header {


        text-align:left;


        margin-bottom:40px;


    }




    .oh-about-why-header h2 {


        font-size:32px!important;


        text-align:left!important;


    }




    .oh-about-why-header p {


        text-align:left!important;


        font-size:15px!important;


    }





    .oh-about-why-grid {


        grid-template-columns:1fr;


        gap:18px;


    }





    .oh-about-why-item {


        padding:30px 24px;


    }


}


/* =====================================================
   ABOUT SECTION 5

   Industries We Serve

   ===================================================== */


.oh-about-industries-section {


    width:100%;


    padding:110px 6vw;


    background:#ffffff;


    box-sizing:border-box;


}





/* HEADER */

.oh-about-industries-header {


    text-align:center;


    margin-bottom:65px;


}



.oh-about-industries-label {


    margin-bottom:18px;


    color:#9a7a45;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}





.oh-about-industries-header h2 {


    margin:0 0 22px!important;


    color:#111111!important;


    font-size:clamp(36px,3vw,50px)!important;


    line-height:1.2!important;


}





.oh-about-industries-header p {


    max-width:850px;


    margin:0 auto!important;


    color:#666666!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* GRID */


.oh-about-industries-grid {


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:25px;


}







/* CARD */


.oh-about-industry-card {


    padding:38px 30px;


    background:#f7f7f5;


    border:1px solid #e5e5e1;


    transition:.35s ease;


}




.oh-about-industry-card:hover {


    transform:translateY(-5px);


    background:#ffffff;


    box-shadow:

    0 15px 35px rgba(0,0,0,.08);


}







/* NUMBER */


.oh-about-industry-card span {


    display:block;


    margin-bottom:25px;


    color:#c6a15b;


    font-size:13px;


    font-weight:700;


    letter-spacing:1.5px;


}







/* TITLE */


.oh-about-industry-card h3 {


    margin:0 0 15px!important;


    color:#111111!important;


    font-size:21px!important;


    font-weight:600!important;


}







/* TEXT */


.oh-about-industry-card p {


    margin:0!important;


    color:#666666!important;


    font-size:14px!important;


    line-height:1.75!important;


}







/* TABLET */


@media(max-width:1024px){


    .oh-about-industries-grid {


        grid-template-columns:repeat(2,1fr);


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-about-industries-section {


        padding:70px 24px;


    }



    .oh-about-industries-header {


        text-align:left;


        margin-bottom:40px;


    }




    .oh-about-industries-header h2 {


        font-size:32px!important;


        text-align:left!important;


    }




    .oh-about-industries-header p {


        text-align:left!important;


        font-size:15px!important;


    }





    .oh-about-industries-grid {


        grid-template-columns:1fr;


        gap:18px;


    }




    .oh-about-industry-card {


        padding:30px 24px;


    }


}


/* =====================================================
   ABOUT SECTION 6

   Global Project Experience

   ===================================================== */


.oh-about-global-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#111111;


    color:#ffffff;


    box-sizing:border-box;


}







/* HEADER */


.oh-about-global-header {


    text-align:center;


    margin-bottom:70px;


}



.oh-about-global-label {


    margin-bottom:20px;


    color:#c6a15b;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}







.oh-about-global-header h2 {


    margin:0 0 22px!important;


    color:#ffffff!important;


    font-size:clamp(36px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}







.oh-about-global-header p {


    max-width:850px;


    margin:0 auto!important;


    color:rgba(255,255,255,.7)!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* STATS */


.oh-about-global-stats {


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:30px;


}







.oh-about-global-stat {


    padding:45px 35px;


    border:


    1px solid rgba(255,255,255,.15);



    background:

    rgba(255,255,255,.04);



}







.oh-about-global-stat strong {


    display:block;


    margin-bottom:20px;


    color:#4da3ff;


    font-size:56px;


    font-weight:700;


    line-height:1;


}







.oh-about-global-stat h3 {


    margin:0 0 15px!important;


    color:#ffffff!important;


    font-size:22px!important;


    font-weight:600!important;


}







.oh-about-global-stat p {


    margin:0!important;


    color:rgba(255,255,255,.65)!important;


    font-size:14px!important;


    line-height:1.75!important;


}







/* BUTTON */


.oh-about-global-button {


    display:flex;


    width:max-content;


    margin:55px auto 0;


    height:54px;


    padding:0 38px;


    align-items:center;


    justify-content:center;


    border:1px solid #4da3ff;


    color:#ffffff!important;


    font-size:12px;


    font-weight:700;


    letter-spacing:1.5px;


    text-decoration:none!important;


    transition:.3s ease;


}



.oh-about-global-button:hover {


    background:#4da3ff;


    color:#111111!important;


}







/* TABLET */


@media(max-width:1024px){


    .oh-about-global-stats {


        grid-template-columns:1fr;


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-about-global-section {


        padding:70px 24px 80px;


    }




    .oh-about-global-header {


        text-align:left;


        margin-bottom:45px;


    }




    .oh-about-global-header h2 {


        font-size:32px!important;


        text-align:left!important;


    }




    .oh-about-global-header p {


        text-align:left!important;


        font-size:15px!important;


    }





    .oh-about-global-stat {


        padding:32px 24px;


    }





    .oh-about-global-stat strong {


        font-size:46px;


    }




    .oh-about-global-button {


        width:100%;


    }


}


/* =====================================================
   ONEHARBOR PRODUCTS PAGE
   SECTION 1 HERO

   Brand Catalog Style
   Text Only

   ===================================================== */



.oh-products-hero {


    width:100%;


    padding:140px 6vw;



    background:#ffffff;



    box-sizing:border-box;



    display:flex;



    justify-content:center;



    align-items:center;



}







.oh-products-hero-content {


    width:100%;



    text-align:center;



}








/* LABEL */


.oh-products-label {


    margin-bottom:25px;



    color:#9a7a45;



    font-size:12px;



    font-weight:700;



    letter-spacing:2.5px;



    text-transform:uppercase;



}








/* H1 */


.oh-products-hero-content h1 {


    margin:0 auto 30px!important;



    color:#111111!important;



    font-size:clamp(42px,4vw,64px)!important;



    font-weight:700!important;



    line-height:1.15!important;



    letter-spacing:-1px;



    text-align:center!important;



}








/* DESCRIPTION */


.oh-products-hero-content p {


    max-width:900px;



    margin:0 auto!important;



    color:#666666!important;



    font-size:18px!important;



    line-height:1.85!important;



    text-align:center!important;



}








/* TABLET */


@media(max-width:1024px){


    .oh-products-hero {


        padding:100px 5vw;


    }




    .oh-products-hero-content h1 {


        font-size:42px!important;


    }



}







/* MOBILE */


@media(max-width:767px){


    .oh-products-hero {


        padding:70px 24px;


    }



    .oh-products-label {


        font-size:11px;


    }




    .oh-products-hero-content h1 {


        font-size:32px!important;


    }




    .oh-products-hero-content p {


        font-size:15px!important;


        line-height:1.75!important;


    }



}


/* =====================================================
   ONEHARBOR PRODUCTS PAGE
   SECTION 2

   Product Categories
   ===================================================== */


.oh-products-category-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#f7f7f5;


    box-sizing:border-box;


}





/* HEADER */


.oh-products-category-header {


    text-align:center;


    margin-bottom:65px;


}




.oh-products-category-label {


    margin-bottom:18px;


    color:#9a7a45;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}





.oh-products-category-header h2 {


    margin:0 0 22px!important;


    color:#111!important;


    font-size:clamp(36px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}





.oh-products-category-header p {


    max-width:850px;


    margin:0 auto!important;


    color:#666!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* GRID */


.oh-products-category-grid {


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:25px;


}







/* CARD */


.oh-product-category-card {


    padding:40px 32px;


    background:#ffffff;


    border:1px solid #e5e5e1;


    min-height:300px;


    display:flex;


    flex-direction:column;


    transition:.35s ease;


}





.oh-product-category-card:hover {


    transform:translateY(-6px);


    box-shadow:

    0 15px 35px rgba(0,0,0,.08);


}







/* NUMBER */


.oh-product-number {


    margin-bottom:28px;


    color:#c6a15b;


    font-size:13px;


    font-weight:700;


    letter-spacing:1.5px;


}







/* TITLE */


.oh-product-category-card h3 {


    margin:0 0 18px!important;


    color:#111!important;


    font-size:24px!important;


    font-weight:600!important;


}







/* DESCRIPTION */


.oh-product-category-card p {


    margin:0 0 25px!important;


    color:#666!important;


    font-size:14px!important;


    line-height:1.75!important;


    flex:1;


}







/* LINK */


.oh-product-category-card a {


    color:#111!important;


    font-size:11px;


    font-weight:700;


    letter-spacing:1.3px;


    text-decoration:none!important;


}





.oh-product-category-card a:hover {


    color:#9a7a45!important;


}







/* LAST LARGE */


.oh-product-wide {


    grid-column:span 3;


    min-height:auto;


}







/* TABLET */


@media(max-width:1024px){


    .oh-products-category-grid {


        grid-template-columns:repeat(2,1fr);


    }



    .oh-product-wide {


        grid-column:span 2;


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-products-category-section {


        padding:70px 24px 80px;


    }



    .oh-products-category-header {


        text-align:left;


        margin-bottom:40px;


    }



    .oh-products-category-header h2 {


        font-size:32px!important;


        text-align:left!important;


    }




    .oh-products-category-header p {


        text-align:left!important;


        font-size:15px!important;


    }




    .oh-products-category-grid {


        grid-template-columns:1fr;


        gap:18px;


    }




    .oh-product-wide {


        grid-column:auto;


    }




    .oh-product-category-card {


        min-height:auto;


        padding:30px 24px;


    }


}


/* =====================================================
   ONEHARBOR PRODUCTS PAGE
   SECTION 3

   Product Advantages

   ===================================================== */


.oh-products-advantages-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#111111;


    color:#ffffff;


    box-sizing:border-box;


}







/* HEADER */


.oh-products-advantages-header {


    text-align:center;


    margin-bottom:65px;


}




.oh-products-advantages-label {


    margin-bottom:20px;


    color:#c6a15b;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}




.oh-products-advantages-header h2 {


    margin:0 0 22px!important;


    color:#ffffff!important;


    font-size:clamp(36px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}





.oh-products-advantages-header p {


    max-width:850px;


    margin:0 auto!important;


    color:rgba(255,255,255,.7)!important;


    font-size:16px!important;


    line-height:1.8!important;


}








/* LIST */


.oh-products-advantages-list {


    border-top:

    1px solid rgba(255,255,255,.15);


}







/* ITEM */


.oh-product-advantage-item {


    display:grid;


    grid-template-columns:80px 1fr;


    gap:35px;


    align-items:start;



    padding:38px 0;


    border-bottom:

    1px solid rgba(255,255,255,.15);



    transition:.3s ease;


}






.oh-product-advantage-item:hover {


    padding-left:25px;


    background:

    rgba(255,255,255,.04);


}







/* NUMBER */


.oh-product-advantage-item > span {


    color:#4da3ff;


    font-size:14px;


    font-weight:700;


    letter-spacing:1.5px;


}







/* TITLE */


.oh-product-advantage-item h3 {


    margin:0 0 12px!important;


    color:#ffffff!important;


    font-size:24px!important;


    font-weight:600!important;


}







/* TEXT */


.oh-product-advantage-item p {


    margin:0!important;


    color:rgba(255,255,255,.65)!important;


    font-size:15px!important;


    line-height:1.8!important;


}







/* TABLET */


@media(max-width:1024px){


    .oh-products-advantages-section {


        padding:90px 5vw;


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-products-advantages-section {


        padding:70px 24px 80px;


    }



    .oh-products-advantages-header {


        text-align:left;


        margin-bottom:45px;


    }




    .oh-products-advantages-header h2 {


        font-size:32px!important;


        text-align:left!important;


    }




    .oh-products-advantages-header p {


        text-align:left!important;


        font-size:15px!important;


    }





    .oh-product-advantage-item {


        grid-template-columns:45px 1fr;


        gap:18px;


        padding:28px 0;


    }





    .oh-product-advantage-item:hover {


        padding-left:0;


    }




    .oh-product-advantage-item h3 {


        font-size:19px!important;


    }




    .oh-product-advantage-item p {


        font-size:14px!important;


    }


}


/* =====================================================
   ONEHARBOR PRODUCTS PAGE
   SECTION 4

   Custom Solution Process

   ===================================================== */


.oh-products-process-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#f7f7f5;


    box-sizing:border-box;


}







/* HEADER */


.oh-products-process-header {


    text-align:center;


    margin-bottom:70px;


}




.oh-products-process-label {


    margin-bottom:18px;


    color:#9a7a45;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}





.oh-products-process-header h2 {


    margin:0 0 22px!important;


    color:#111111!important;


    font-size:clamp(36px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}





.oh-products-process-header p {


    max-width:850px;


    margin:0 auto!important;


    color:#666666!important;


    font-size:16px!important;


    line-height:1.8!important;


}








/* PROCESS LIST */


.oh-products-process-list {


    position:relative;


    width:100%;


}








/* VERTICAL LINE */


.oh-products-process-list::before {


    content:"";


    position:absolute;


    left:40px;


    top:0;


    bottom:0;


    width:1px;


    background:#d8d8d3;


}







/* ITEM */


.oh-products-process-item {


    position:relative;


    display:grid;


    grid-template-columns:80px 1fr;


    gap:35px;


    align-items:start;


    padding:0 0 55px;


}







.oh-products-process-item:last-child {


    padding-bottom:0;


}







/* NUMBER */


.process-number {


    position:relative;


    z-index:2;


    width:80px;


    height:80px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:#111111;


    color:#4da3ff;


    font-size:14px;


    font-weight:700;


    letter-spacing:1.5px;


}







/* CONTENT */


.process-content {


    padding-top:12px;


}






.process-content h3 {


    margin:0 0 12px!important;


    color:#111111!important;


    font-size:26px!important;


    font-weight:600!important;


}






.process-content p {


    max-width:700px;


    margin:0!important;


    color:#666666!important;


    font-size:15px!important;


    line-height:1.8!important;


}








/* HOVER */


.oh-products-process-item:hover .process-number {


    background:#2f80ed;


    color:#ffffff;


}








/* TABLET */


@media(max-width:1024px){


    .oh-products-process-section {


        padding:90px 5vw;


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-products-process-section {


        padding:70px 24px 80px;


    }




    .oh-products-process-header {


        text-align:left;


        margin-bottom:45px;


    }





    .oh-products-process-header h2 {


        font-size:32px!important;


        text-align:left!important;


    }





    .oh-products-process-header p {


        text-align:left!important;


        font-size:15px!important;


    }





    .oh-products-process-list::before {


        left:25px;


    }




    .oh-products-process-item {


        grid-template-columns:50px 1fr;


        gap:20px;


        padding-bottom:40px;


    }




    .process-number {


        width:50px;


        height:50px;


        font-size:11px;


    }




    .process-content {


        padding-top:5px;


    }




    .process-content h3 {


        font-size:20px!important;


    }




    .process-content p {


        font-size:14px!important;


    }


}


/* =====================================================
   ONEHARBOR PRODUCTS PAGE
   SECTION 5

   Applications
   ===================================================== */


.oh-products-applications-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#f7f7f5;


    box-sizing:border-box;


}







/* HEADER */


.oh-products-applications-header {


    text-align:center;


    margin-bottom:65px;


}



.oh-products-applications-label {


    margin-bottom:18px;


    color:#9a7a45;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}





.oh-products-applications-header h2 {


    margin:0 0 22px!important;


    color:#111111!important;


    font-size:clamp(36px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}







.oh-products-applications-header p {


    max-width:850px;


    margin:0 auto!important;


    color:#666666!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* GRID */


.oh-products-applications-grid {


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:25px;


}







/* ITEM */


.oh-products-application-item {


    padding:40px 30px;


    background:#ffffff;


    border:1px solid #e5e5e1;


    min-height:280px;


    transition:.35s ease;


}





.oh-products-application-item:hover {


    transform:translateY(-6px);


    box-shadow:

    0 15px 35px rgba(0,0,0,.08);


}







/* NUMBER */


.oh-products-application-item span {


    display:block;


    margin-bottom:28px;


    color:#c6a15b;


    font-size:13px;


    font-weight:700;


    letter-spacing:1.5px;


}







/* TITLE */


.oh-products-application-item h3 {


    margin:0 0 18px!important;


    color:#111111!important;


    font-size:22px!important;


    font-weight:600!important;


    line-height:1.4!important;


}







/* TEXT */


.oh-products-application-item p {


    margin:0!important;


    color:#666666!important;


    font-size:14px!important;


    line-height:1.75!important;


}







/* TABLET */


@media(max-width:1024px){


    .oh-products-applications-grid {


        grid-template-columns:repeat(2,1fr);


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-products-applications-section {


        padding:70px 24px 80px;


    }



    .oh-products-applications-header {


        text-align:left;


        margin-bottom:40px;


    }




    .oh-products-applications-header h2 {


        font-size:32px!important;


        text-align:left!important;


    }




    .oh-products-applications-header p {


        text-align:left!important;


        font-size:15px!important;


    }





    .oh-products-applications-grid {


        grid-template-columns:1fr;


        gap:18px;


    }




    .oh-products-application-item {


        min-height:auto;


        padding:30px 24px;


    }


}


/* =====================================================
   ONEHARBOR PRODUCTS PAGE
   SECTION 6

   Global Project Experience

   ===================================================== */


.oh-products-global-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#111111;


    color:#ffffff;


    box-sizing:border-box;


}







/* HEADER */


.oh-products-global-header {


    text-align:center;


    margin-bottom:65px;


}





.oh-products-global-label {


    margin-bottom:20px;


    color:#c6a15b;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}







.oh-products-global-header h2 {


    margin:0 0 22px!important;


    color:#ffffff!important;


    font-size:clamp(36px,3vw,50px)!important;


    font-weight:700!important;


    line-height:1.2!important;


}







.oh-products-global-header p {


    max-width:850px;


    margin:0 auto!important;


    color:rgba(255,255,255,.7)!important;


    font-size:16px!important;


    line-height:1.8!important;


}








/* STATS */


.oh-products-global-stats {


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:25px;


}







/* CARD */


.oh-products-global-card {


    padding:45px 35px;


    border:

    1px solid rgba(255,255,255,.15);



    background:

    rgba(255,255,255,.04);



}







.oh-products-global-card strong {


    display:block;


    margin-bottom:20px;


    color:#4da3ff;


    font-size:52px;


    font-weight:700;


    line-height:1;


}







.oh-products-global-card h3 {


    margin:0 0 15px!important;


    color:#ffffff!important;


    font-size:22px!important;


    font-weight:600!important;


}







.oh-products-global-card p {


    margin:0!important;


    color:rgba(255,255,255,.65)!important;


    font-size:14px!important;


    line-height:1.75!important;


}







/* BUTTON */


.oh-products-global-button {


    display:flex;


    width:max-content;


    margin:55px auto 0;


    height:54px;


    padding:0 38px;


    align-items:center;


    justify-content:center;


    border:1px solid #4da3ff;


    color:#ffffff!important;


    font-size:12px;


    font-weight:700;


    letter-spacing:1.5px;


    text-decoration:none!important;


    transition:.3s ease;


}




.oh-products-global-button:hover {


    background:#4da3ff;


    color:#111111!important;


}







/* TABLET */


@media(max-width:1024px){


    .oh-products-global-stats {


        grid-template-columns:1fr;


    }


}







/* MOBILE */


@media(max-width:767px){


    .oh-products-global-section {


        padding:70px 24px 80px;


    }




    .oh-products-global-header {


        text-align:left;


        margin-bottom:45px;


    }




    .oh-products-global-header h2 {


        font-size:32px!important;


        text-align:left!important;


    }





    .oh-products-global-header p {


        text-align:left!important;


        font-size:15px!important;


    }





    .oh-products-global-card {


        padding:32px 24px;


    }




    .oh-products-global-card strong {


        font-size:44px;


    }





    .oh-products-global-button {


        width:100%;


    }


}


/* =====================================================
   ONEHARBOR PRODUCTS PAGE
   SECTION 7

   Product FAQ

   ===================================================== */


.oh-products-faq-section {


    width:100%;


    padding:110px 6vw 120px;


    background:#f7f7f5;


    box-sizing:border-box;


}







/* WRAPPER */


.oh-products-faq-wrapper {


    width:100%;


    display:grid;


    grid-template-columns:.8fr 1.2fr;


    gap:7vw;


    align-items:start;


}







/* INTRO */


.oh-products-faq-intro {


    position:sticky;


    top:120px;


}





.oh-products-faq-label {


    margin-bottom:20px;


    color:#9a7a45;


    font-size:12px;


    font-weight:700;


    letter-spacing:2.5px;


}







.oh-products-faq-intro h2 {


    margin:0 0 25px!important;


    color:#111111!important;


    font-size:clamp(34px,3vw,46px)!important;


    line-height:1.2!important;


}







.oh-products-faq-intro p {


    margin:0!important;


    color:#666666!important;


    font-size:16px!important;


    line-height:1.8!important;


}







/* FAQ */


.oh-products-faq-list {


    width:100%;


}







.oh-products-faq-item {


    border-top:

    1px solid #ddddda;


}







.oh-products-faq-item:last-child {


    border-bottom:

    1px solid #ddddda;


}







/* QUESTION */


.oh-products-faq-item summary {


    position:relative;


    display:flex;


    align-items:center;


    min-height:85px;


    padding:20px 55px 20px 0!important;


    cursor:pointer;


    list-style:none;


    color:#111111!important;


    font-size:18px!important;


    font-weight:600!important;


}







.oh-products-faq-item summary::-webkit-details-marker {


    display:none;


}





.oh-products-faq-item summary::after {


    content:"+"; 


    position:absolute;


    right:5px;


    top:50%;


    transform:translateY(-50%);


    color:#9a7a45;


    font-size:25px;


}







.oh-products-faq-item[open] summary::after {


    content:"−";


}







/* ANSWER */


.oh-products-faq-answer {


    padding:0 55px 30px 0;


}





.oh-products-faq-answer p {


    margin:0!important;


    color:#666666!important;


    font-size:15px!important;


    line-height:1.85!important;


}








/* TABLET */


@media(max-width:1024px){


    .oh-products-faq-wrapper {


        grid-template-columns:1fr;


        gap:45px;


    }



    .oh-products-faq-intro {


        position:static;


    }


}








/* MOBILE */


@media(max-width:767px){


    .oh-products-faq-section {


        padding:70px 24px 80px;


    }





    .oh-products-faq-intro h2 {


        font-size:31px!important;


    }





    .oh-products-faq-intro p {


        font-size:15px!important;


    }





    .oh-products-faq-item summary {


        font-size:16px!important;


        min-height:75px;


    }





    .oh-products-faq-answer p {


        font-size:14px!important;


    }



}


/* =========================================================
   ONEHARBOR ABOUT
   CLEAN STATIC BASE VERSION
   NO JS / NO STICKY
   IMAGE: 1920 × 2160
   ========================================================= */


/* =========================================================
   01. SPECTRA PARENT CONTAINER
   ========================================================= */

.oh-about-jomoo {

    position: relative !important;

    display: block !important;

    width: 100vw !important;
    max-width: none !important;

    /*
     * 强制突破 Astra / Spectra 页面宽度
     */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;


    /*
     * 1920 × 2160
     *
     * 2160 / 1920 = 1.125
     *
     * 所以：
     * 图片宽度 = 浏览器宽度
     * Container高度 = 宽度 × 1.125
     *
     * 这样整张长图可以完整显示，
     * 不会从中间开始，也不会上下裁切。
     */
    height: 112.5vw !important;

    min-height: 0 !important;


    /*
     * 最重要的背景设置
     */
    background-size: 100% auto !important;

    background-position:
        center top !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        scroll !important;


    /*
     * 防止Spectra内部对齐把内容推到中间
     */
    justify-content:
        flex-start !important;

    align-items:
        stretch !important;

    align-content:
        flex-start !important;


    overflow: hidden !important;

    box-sizing: border-box !important;

}


/* =========================================================
   02. REMOVE POSSIBLE SPECTRA SPACING
   ========================================================= */

.oh-about-jomoo > .uagb-container-inner-blocks-wrap,
.oh-about-jomoo .uagb-container-inner-blocks-wrap {

    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    top: 0 !important;

    transform: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;

}


/* =========================================================
   03. CUSTOM HTML BLOCK
   ========================================================= */

.oh-about-jomoo .wp-block-html {

    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

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

    top: 0 !important;

    transform: none !important;

    overflow: visible !important;

}


/* =========================================================
   04. ABOUT CANVAS
   ========================================================= */

.oh-about-static {

    position: relative;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    color: #ffffff;

    box-sizing: border-box;

    z-index: 2;

}


/* =========================================================
   05. VERY LIGHT OVERLAY
   ========================================================= */

.oh-about-jomoo::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    /*
     * 不做整张黑罩。
     * 只轻微增强左侧文字可读性。
     */
    background:

        linear-gradient(
            90deg,

            rgba(0, 0, 0, 0.32) 0%,

            rgba(0, 0, 0, 0.16) 34%,

            rgba(0, 0, 0, 0.04) 64%,

            rgba(0, 0, 0, 0) 100%
        );

}


/* =========================================================
   06. COMMON PANEL
   ========================================================= */

.oh-about-panel {

    position: absolute;

    left: clamp(
        55px,
        7vw,
        145px
    );

    width: min(
        950px,
        62vw
    );

    margin: 0;

    padding: 0;

    z-index: 3;

    color: #ffffff;

}


/* =========================================================
   07. STAGE POSITIONS
   ========================================================= */


/*
 * Stage 1
 *
 * 特意放在图片最上方的天空区域。
 */

.oh-about-panel-1 {

    top: 10%;

}


/*
 * Stage 2
 */

.oh-about-panel-2 {

    top: 36%;

}


/*
 * Stage 3
 */

.oh-about-panel-3 {

    top: 60%;

}


/*
 * Stage 4
 */

.oh-about-panel-4 {

    top: 82%;

    width: min(
        1100px,
        72vw
    );

}


/* =========================================================
   08. LABEL
   ========================================================= */

.oh-about-label {

    margin:
        0
        0
        24px;

    padding: 0;

    font-size: clamp(
        11px,
        0.72vw,
        14px
    );

    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

}


/* =========================================================
   09. LARGE MAIN TITLE
   ========================================================= */

.oh-about-panel h2 {

    margin: 0 !important;

    padding: 0 !important;

    max-width: 1100px;

    font-size: clamp(
        48px,
        4.8vw,
        92px
    );

    line-height: 1.01;

    font-weight: 400;

    letter-spacing: -0.045em;

    color: #ffffff !important;

    text-shadow:
        0
        2px
        18px
        rgba(0,0,0,0.14);

}


/* =========================================================
   10. YEAR
   ========================================================= */

.oh-about-year {

    margin:
        0
        0
        31px;

    padding: 0;

    font-size: clamp(
        90px,
        9.5vw,
        180px
    );

    line-height: 0.80;

    font-weight: 300;

    letter-spacing: -0.06em;

    color: #ffffff;

}


/* =========================================================
   11. HISTORY TITLE
   ========================================================= */

.oh-about-panel h3 {

    max-width: 850px;

    margin:
        0
        0
        35px !important;

    padding: 0 !important;

    font-size: clamp(
        32px,
        3vw,
        58px
    );

    line-height: 1.06;

    font-weight: 400;

    letter-spacing: -0.035em;

    color: #ffffff !important;

}


/* =========================================================
   12. DETAIL
   ========================================================= */

.oh-about-detail {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    padding-left: 21px;

    border-left:

        1px solid

        rgba(
            255,
            255,
            255,
            0.55
        );

}


.oh-about-detail strong {

    margin: 0;

    font-size: clamp(
        18px,
        1.3vw,
        25px
    );

    line-height: 1.3;

    font-weight: 500;

    color: #ffffff;

}


.oh-about-detail span {

    margin: 0;

    font-size: clamp(
        14px,
        1vw,
        18px
    );

    line-height: 1.45;

    font-weight: 300;

    color:
        rgba(
            255,
            255,
            255,
            0.80
        );

}


/* =========================================================
   13. TABLET
   ========================================================= */

@media
(max-width: 1200px)
and
(min-width: 769px) {

    .oh-about-panel {

        left: 6vw;

        width: 67vw;

    }


    .oh-about-panel-1 {

        top: 9%;

    }


    .oh-about-panel-4 {

        width: 80vw;

    }


    .oh-about-panel h2 {

        font-size: clamp(
            42px,
            5.4vw,
            70px
        );

    }


    .oh-about-year {

        font-size: clamp(
            85px,
            11vw,
            145px
        );

    }


    .oh-about-panel h3 {

        font-size: clamp(
            29px,
            3.6vw,
            48px
        );

    }

}


/* =========================================================
   14. MOBILE
   ONE SCREEN / NO ANIMATION
   ========================================================= */

@media (max-width: 768px) {

    .oh-about-jomoo {

        width: 100% !important;

        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        /*
         * 手机版直接一屏
         */
        height: 100svh !important;

        min-height: 680px !important;
        max-height: 900px !important;

        background-size:
            cover !important;

        background-position:
            center center !important;

        background-repeat:
            no-repeat !important;

        overflow:
            hidden !important;

    }


    /*
     * 手机遮罩稍微强一点
     */

    .oh-about-jomoo::before {

        background:

            linear-gradient(
                to bottom,

                rgba(0,0,0,0.04)
                0%,

                rgba(0,0,0,0.12)
                35%,

                rgba(0,0,0,0.70)
                100%
            );

    }


    .oh-about-static {

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        gap: 14px;

        padding:

            45px
            21px
            25px;

    }


    /*
     * 手机上取消绝对定位，
     * 四段内容正常排列在一屏内。
     */

    .oh-about-panel,
    .oh-about-panel-1,
    .oh-about-panel-2,
    .oh-about-panel-3,
    .oh-about-panel-4 {

        position: static !important;

        top: auto !important;
        left: auto !important;

        width: 100% !important;

        margin: 0 !important;

    }


    .oh-about-label {

        margin-bottom: 7px;

        font-size: 8px;

        letter-spacing: 0.18em;

    }


    .oh-about-panel h2 {

        font-size: clamp(
            24px,
            7vw,
            35px
        );

        line-height: 1.02;

    }


    /*
     * 2005 / 2025 使用左右结构
     */

    .oh-about-panel-2,
    .oh-about-panel-3 {

        display: grid;

        grid-template-columns:
            70px
            1fr;

        column-gap: 13px;

        align-items: start;

    }


    .oh-about-year {

        grid-column: 1;

        grid-row:
            1 / span 2;

        margin:
            2px
            0
            0;

        font-size: clamp(
            39px,
            11.5vw,
            53px
        );

        line-height: 0.86;

    }


    .oh-about-panel h3 {

        grid-column: 2;

        margin:
            0
            0
            5px !important;

        font-size: clamp(
            14px,
            4vw,
            19px
        );

        line-height: 1.1;

    }


    .oh-about-detail {

        grid-column: 2;

        gap: 1px;

        padding-left: 9px;

    }


    .oh-about-detail strong {

        font-size: 10px;

    }


    .oh-about-detail span {

        font-size: 8.5px;

    }


    .oh-about-panel-4 h2 {

        font-size: clamp(
            21px,
            5.8vw,
            29px
        );

    }

}


/* =========================================================
   15. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .oh-about-static {

        gap: 11px;

        padding:

            35px
            17px
            18px;

    }


    .oh-about-panel-2,
    .oh-about-panel-3 {

        grid-template-columns:
            61px
            1fr;

        column-gap: 10px;

    }


    .oh-about-year {

        font-size: 38px;

    }


    .oh-about-panel-1 h2 {

        font-size: 25px;

    }


    .oh-about-panel-4 h2 {

        font-size: 21px;

    }

}

/* =========================================================
   ONEHARBOR ABOUT
   TYPOGRAPHY SIZE + SPACING REFINEMENT
   PC / TABLET ONLY
   ========================================================= */

@media (min-width: 769px) {

    /* -----------------------------------------
       小标签
       ABOUT ONEHARBOR / GLOBAL VISION
       ----------------------------------------- */

    .oh-about-label {

        font-size: clamp(
            10px,
            0.62vw,
            12px
        ) !important;

        margin-bottom: 18px !important;

        letter-spacing: 0.20em !important;

    }


    /* -----------------------------------------
       Stage 1 / Stage 4 大标题
       ----------------------------------------- */

    .oh-about-panel h2 {

        font-size: clamp(
            42px,
            4.15vw,
            80px
        ) !important;

        line-height: 1.00 !important;

        letter-spacing: -0.04em !important;

    }


    /* Stage 4之前V2动画有单独放大
       这里统一缩回来 */

    .oh-about-panel-4 h2 {

        font-size: clamp(
            44px,
            4.3vw,
            82px
        ) !important;

        line-height: 1.00 !important;

    }


    /* -----------------------------------------
       2005 / 2025
       ----------------------------------------- */

    .oh-about-year {

        font-size: clamp(
            78px,
            8.5vw,
            158px
        ) !important;

        margin-bottom: 22px !important;

        line-height: 0.82 !important;

    }


    /* -----------------------------------------
       One Alu Aluminum Founded
       OneHarborOutdoor Established
       ----------------------------------------- */

    .oh-about-panel h3 {

        font-size: clamp(
            28px,
            2.65vw,
            50px
        ) !important;

        line-height: 1.04 !important;

        margin-bottom: 24px !important;

    }


    /* -----------------------------------------
       下方说明
       ----------------------------------------- */

    .oh-about-detail {

        gap: 4px !important;

        padding-left: 18px !important;

    }


    .oh-about-detail strong {

        font-size: clamp(
            16px,
            1.15vw,
            21px
        ) !important;

        line-height: 1.25 !important;

    }


    .oh-about-detail span {

        font-size: clamp(
            13px,
            0.88vw,
            16px
        ) !important;

        line-height: 1.38 !important;

    }

}
/* =========================================================
   ONEHARBOR ABOUT
   CINEMATIC SCROLL MOTION V3
   Continuous / Soft / Premium

   只控制动画
   不碰背景
   不碰Container
   不碰HTML位置
   ========================================================= */


@media (min-width: 769px) {


    /* =====================================================
       01. PANEL
       JS通过CSS变量实时控制
       ===================================================== */

    .oh-about-panel {

        --oh-opacity: 0;
        --oh-y: 55px;
        --oh-scale: 0.985;
        --oh-blur: 7px;

        opacity:
            var(--oh-opacity);

        visibility: visible;

        transform:
            translate3d(
                0,
                var(--oh-y),
                0
            )
            scale(
                var(--oh-scale)
            );

        filter:
            blur(
                var(--oh-blur)
            );

        transform-origin:
            left center;

        will-change:
            opacity,
            transform,
            filter;

        /*
         * 不用很长transition，
         * 动画主要由滚动实时控制
         */
        transition:
            opacity 0.12s linear,
            filter 0.12s linear;

    }



    /* =====================================================
       02. CHILD ELEMENTS
       ===================================================== */

    .oh-about-label,
    .oh-about-year,
    .oh-about-panel h2,
    .oh-about-panel h3,
    .oh-about-detail {

        will-change:
            opacity,
            transform;

    }



    /* =====================================================
       03. LABEL
       小标题有轻微Tracking变化
       ===================================================== */

    .oh-about-label {

        transform:
            translate3d(
                0,
                calc(
                    var(--oh-child-y, 0px)
                ),
                0
            );

        opacity:
            var(--oh-child-opacity, 1);

        letter-spacing:
            var(
                --oh-label-spacing,
                0.22em
            );

    }



    /* =====================================================
       04. STAGE 1 MAIN TITLE
       ===================================================== */

    .oh-about-panel-1 h2 {

        transform:
            translate3d(
                0,
                var(--oh-title-y, 0px),
                0
            );

        opacity:
            var(--oh-title-opacity, 1);

    }



    /* =====================================================
       05. YEAR
       2005 / 2025
       ===================================================== */

    .oh-about-year {

        transform:
            translate3d(
                var(--oh-year-x, 0px),
                var(--oh-year-y, 0px),
                0
            );

        opacity:
            var(--oh-year-opacity, 1);

    }



    /* =====================================================
       06. HISTORY TITLE
       ===================================================== */

    .oh-about-panel-2 h3,
    .oh-about-panel-3 h3 {

        transform:
            translate3d(
                0,
                var(--oh-history-title-y, 0px),
                0
            );

        opacity:
            var(--oh-history-title-opacity, 1);

    }



    /* =====================================================
       07. DETAIL
       ===================================================== */

    .oh-about-panel-2 .oh-about-detail,
    .oh-about-panel-3 .oh-about-detail {

        position: relative;

        border-left:
            none !important;

        padding-left:
            20px !important;

        transform:
            translate3d(
                0,
                var(--oh-detail-y, 0px),
                0
            );

        opacity:
            var(--oh-detail-opacity, 1);

    }



    /* =====================================================
       08. ANIMATED TIMELINE
       ===================================================== */

    .oh-about-panel-2 .oh-about-detail::before,
    .oh-about-panel-3 .oh-about-detail::before {

        content: "";

        position: absolute;

        left: 0;
        top: 0;

        width: 1px;

        height: 100%;

        background:
            rgba(
                255,
                255,
                255,
                0.55
            );

        transform:
            scaleY(
                var(--oh-line-scale, 0)
            );

        transform-origin:
            top;

        opacity:
            var(--oh-line-opacity, 0);

        will-change:
            transform,
            opacity;

    }



    /* =====================================================
       09. STAGE 4
       ===================================================== */

    .oh-about-panel-4 h2 {

        transform:
            translate3d(
                0,
                var(--oh-title-y, 0px),
                0
            );

        opacity:
            var(--oh-title-opacity, 1);

    }



    /* =====================================================
       10. VERY SUBTLE TEXT SHADOW
       ===================================================== */

    .oh-about-panel h2,
    .oh-about-panel h3,
    .oh-about-year {

        text-shadow:

            0
            8px
            30px
            rgba(
                0,
                0,
                0,
                0.10
            );

    }

}



/* =========================================================
   MOBILE
   完全静态
   ========================================================= */

@media (max-width: 768px) {

    .oh-about-panel,
    .oh-about-label,
    .oh-about-year,
    .oh-about-panel h2,
    .oh-about-panel h3,
    .oh-about-detail {

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        filter: none !important;

        transition: none !important;

    }


    .oh-about-panel-2 .oh-about-detail,
    .oh-about-panel-3 .oh-about-detail {

        border-left:

            1px solid
            rgba(
                255,
                255,
                255,
                0.55
            ) !important;

    }


    .oh-about-panel-2 .oh-about-detail::before,
    .oh-about-panel-3 .oh-about-detail::before {

        display:
            none !important;

    }

}
/* =========================================================
   ONEHARBOR ABOUT
   TIGHTER TEXT SPACING
   ========================================================= */

@media (min-width: 769px) {

    /* ABOUT ONEHARBOR / GLOBAL VISION
       到下面主标题的距离 */
    .oh-about-label {
        margin-bottom: 13px !important;
    }


    /* Stage 1 / Stage 4 两行大标题自身间距 */
    .oh-about-panel h2 {
        line-height: 0.95 !important;
    }


    /* 2005 / 2025
       到下面标题的距离 */
    .oh-about-year {
        margin-bottom: 15px !important;
        line-height: 0.80 !important;
    }


    /* One Alu Aluminum Founded
       OneHarborOutdoor Established
       到下面说明文字的距离 */
    .oh-about-panel h3 {
        margin-bottom: 16px !important;
        line-height: 1.02 !important;
    }


    /* 21+ Years
       Aluminum Manufacturing Experience
       内部间距 */
    .oh-about-detail {
        gap: 2px !important;
        padding-left: 16px !important;
    }


    .oh-about-detail strong {
        line-height: 1.20 !important;
    }


    .oh-about-detail span {
        line-height: 1.30 !important;
    }

}


/* =========================================================
   ONEHARBOR HOME HERO V1
   JOMOO INSPIRED
   3 SLIDES / 10S / CROSS FADE / CINEMATIC ZOOM
   ========================================================= */


/* =========================================================
   01. HERO PARENT
   ========================================================= */

.oh-home-hero {

    position: relative !important;

    display: block !important;

    width: 100vw !important;
    max-width: none !important;

    height: 100vh !important;
    height: 100svh !important;

    min-height: 680px !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: #111 !important;

    box-sizing: border-box !important;

    isolation: isolate;

}


/* =========================================================
   02. SPECTRA PARENT INNER WRAPPER
   ========================================================= */

.oh-home-hero > .uagb-container-inner-blocks-wrap {

    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

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

    gap: 0 !important;

    overflow: hidden !important;

}


/* =========================================================
   03. ALL THREE SLIDES
   三个子Container全部叠在同一个位置
   ========================================================= */

.oh-hero-slide {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 100% !important;

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

    overflow: hidden !important;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 1;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    /*
     * 1.5秒 Cross Fade
     */
    transition:
        opacity 1.5s cubic-bezier(.22,.61,.36,1),
        visibility 1.5s;

    will-change: opacity;

}


/* 当前Slide */

.oh-hero-slide.is-active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    z-index: 3;

}


/* =========================================================
   04. CHILD SPECTRA WRAPPER
   ========================================================= */

.oh-hero-slide > .uagb-container-inner-blocks-wrap {

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

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

    z-index: 3;

}


/* Custom HTML */

.oh-hero-slide .wp-block-html {

    position: relative !important;

    width: 100% !important;

    height: 100% !important;

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

}


/* =========================================================
   05. CINEMATIC BACKGROUND ZOOM

   直接继承你在Spectra子Container中设置的背景图。
   原背景仍然存在。

   ::before覆盖在原背景上，
   用来实现10秒缓慢Zoom。
   ========================================================= */

.oh-hero-slide::before {

    content: "";

    position: absolute;

    inset: -2%;

    z-index: 0;

    pointer-events: none;

    background-image: inherit !important;

    background-size: cover !important;

    background-position: inherit !important;

    background-repeat: no-repeat !important;

    transform: scale(1);

    transform-origin: center center;

    will-change: transform;

}


/* 当前Banner：10秒慢速放大 */

.oh-hero-slide.is-active::before {

    animation:
        ohHeroZoomDesktop
        10s
        linear
        forwards;

}


@keyframes ohHeroZoomDesktop {

    from {

        transform:
            scale(1);

    }

    to {

        transform:
            scale(1.04);

    }

}


/* =========================================================
   06. IMAGE OVERLAY
   ========================================================= */

.oh-hero-slide::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

}


/* 第一屏：非常轻的整体遮罩 */

.oh-hero-slide-1::after {

    background:

        linear-gradient(
            180deg,

            rgba(5, 10, 14, 0.10)
            0%,

            rgba(5, 10, 14, 0.14)
            100%
        );

}


/* 第二三屏：
   左边稍暗方便文字阅读 */

.oh-hero-slide-2::after,
.oh-hero-slide-3::after {

    background:

        linear-gradient(
            90deg,

            rgba(5, 10, 14, 0.38)
            0%,

            rgba(5, 10, 14, 0.18)
            38%,

            rgba(5, 10, 14, 0.04)
            70%,

            rgba(5, 10, 14, 0)
            100%
        );

}


/* =========================================================
   07. COPY COMMON
   ========================================================= */

.oh-hero-copy {

    position: absolute;

    z-index: 5;

    color: #ffffff;

    pointer-events: none;

}


/* =========================================================
   08. SLIDE 01 COPY
   ONEHARBOR完全居中
   ========================================================= */

.oh-hero-copy-center {

    top: 50%;
    left: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width: 90%;

    text-align: center;

}


/* ONEHARBOR */

.oh-hero-brand {

    margin: 0 !important;

    padding: 0 !important;

    font-size: clamp(
        54px,
        5vw,
        94px
    );

    line-height: 1;

    font-weight: 400;

    letter-spacing: 0.20em;

    color: #ffffff !important;

    text-transform: uppercase;

    text-shadow:

        0
        4px
        32px
        rgba(0,0,0,0.16);

}


/* =========================================================
   09. SLIDE 02 / 03 POSITION
   ========================================================= */

.oh-hero-copy-left {

    top: 52%;

    left: clamp(
        45px,
        7vw,
        145px
    );

    transform:
        translateY(-50%);

    width: min(
        900px,
        62vw
    );

}


/* =========================================================
   10. SMALL LABEL
   ========================================================= */

.oh-hero-kicker {

    margin:
        0
        0
        18px;

    padding: 0;

    font-size: clamp(
        10px,
        0.72vw,
        13px
    );

    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

}


/* =========================================================
   11. HERO TITLE
   ========================================================= */

.oh-hero-title {

    max-width: 950px;

    margin: 0 !important;

    padding: 0 !important;

    font-size: clamp(
        44px,
        4.35vw,
        82px
    );

    line-height: 1.00;

    font-weight: 400;

    letter-spacing: -0.04em;

    color: #ffffff !important;

    text-shadow:

        0
        5px
        32px
        rgba(0,0,0,0.14);

}


/* =========================================================
   12. TEXT INITIAL STATE
   ========================================================= */

.oh-hero-brand,
.oh-hero-kicker,
.oh-hero-title {

    opacity: 0;

    filter:
        blur(5px);

    will-change:
        opacity,
        transform,
        filter;

}


/* =========================================================
   13. SLIDE 01 BRAND ANIMATION
   ========================================================= */

.oh-hero-slide.is-active
.oh-hero-brand {

    animation:

        ohHeroBrandIn
        1.65s
        cubic-bezier(.16,1,.3,1)
        0.20s
        both;

}


@keyframes ohHeroBrandIn {

    0% {

        opacity: 0;

        filter:
            blur(6px);

        transform:
            scale(0.985);

        letter-spacing:
            0.30em;

    }


    100% {

        opacity: 1;

        filter:
            blur(0);

        transform:
            scale(1);

        letter-spacing:
            0.20em;

    }

}


/* =========================================================
   14. SLIDE 02 / 03 TEXT ANIMATION
   ========================================================= */

/* 小标签 */

.oh-hero-slide.is-active
.oh-hero-kicker {

    animation:

        ohHeroKickerIn
        1.15s
        cubic-bezier(.16,1,.3,1)
        0.18s
        both;

}


/* 主标题 */

.oh-hero-slide.is-active
.oh-hero-title {

    animation:

        ohHeroTitleIn
        1.35s
        cubic-bezier(.16,1,.3,1)
        0.34s
        both;

}


@keyframes ohHeroKickerIn {

    from {

        opacity: 0;

        filter:
            blur(4px);

        transform:
            translateY(16px);

        letter-spacing:
            0.30em;

    }


    to {

        opacity: 1;

        filter:
            blur(0);

        transform:
            translateY(0);

        letter-spacing:
            0.22em;

    }

}


@keyframes ohHeroTitleIn {

    from {

        opacity: 0;

        filter:
            blur(5px);

        transform:
            translateY(34px)
            scale(0.988);

    }


    to {

        opacity: 1;

        filter:
            blur(0);

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   15. TEXT LEAVING ANIMATION
   在Banner切换前约1秒先淡出文字
   ========================================================= */

.oh-hero-slide.is-leaving
.oh-hero-brand,

.oh-hero-slide.is-leaving
.oh-hero-kicker,

.oh-hero-slide.is-leaving
.oh-hero-title {

    animation:

        ohHeroTextOut
        0.75s
        cubic-bezier(.4,0,.2,1)
        forwards !important;

}


@keyframes ohHeroTextOut {

    from {

        opacity: 1;

        filter:
            blur(0);

        transform:
            translateY(0);

    }


    to {

        opacity: 0;

        filter:
            blur(3px);

        transform:
            translateY(-18px);

    }

}


/* =========================================================
   16. BOTTOM PROGRESS
   ========================================================= */

.oh-hero-progress {

    position: absolute;

    left: 50%;

    bottom: clamp(
        27px,
        4vh,
        48px
    );

    transform:
        translateX(-50%);

    display: grid;

    grid-template-columns:
        auto
        minmax(160px, 380px)
        auto;

    align-items: center;

    gap: 15px;

    width: min(
        470px,
        44vw
    );

    z-index: 50;

    pointer-events: none;

    color: #ffffff;

}


/* 01 / 03 */

.oh-hero-current,
.oh-hero-total {

    font-size: 10px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 0.12em;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

}


/* Track */

.oh-hero-progress-track {

    position: relative;

    display: block;

    width: 100%;

    height: 1px;

    overflow: hidden;

    background:

        rgba(
            255,
            255,
            255,
            0.30
        );

}


/* Fill */

.oh-hero-progress-fill {

    position: absolute;

    inset:
        0
        auto
        0
        0;

    display: block;

    width: 100%;

    height: 100%;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;

}


/* 10秒走完 */

.oh-hero-progress-fill.is-running {

    animation:

        ohHeroProgress
        10s
        linear
        forwards;

}


@keyframes ohHeroProgress {

    from {

        transform:
            scaleX(0);

    }


    to {

        transform:
            scaleX(1);

    }

}


/* =========================================================
   17. TABLET
   ========================================================= */

@media
(max-width: 1200px)
and
(min-width: 769px) {

    .oh-hero-copy-left {

        left: 6vw;

        width: 70vw;

    }


    .oh-hero-title {

        font-size: clamp(
            40px,
            5.4vw,
            68px
        );

    }


    .oh-hero-brand {

        font-size: clamp(
            52px,
            6.2vw,
            80px
        );

    }

}


/* =========================================================
   18. MOBILE
   ========================================================= */

@media (max-width: 768px) {


    .oh-home-hero {

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        height: 100vh !important;
        height: 100svh !important;

        min-height: 620px !important;

    }


    /* 手机背景 */

    .oh-hero-slide {

        background-size:
            cover !important;

        background-position:
            center center !important;

    }


    /*
     * 手机Zoom降低：
     * 1 → 1.025
     */

    .oh-hero-slide.is-active::before {

        animation:

            ohHeroZoomMobile
            10s
            linear
            forwards;

    }


    @keyframes ohHeroZoomMobile {

        from {

            transform:
                scale(1);

        }


        to {

            transform:
                scale(1.025);

        }

    }


    /* -----------------------------------------
       Slide 1
       ----------------------------------------- */

    .oh-hero-brand {

        font-size: clamp(
            39px,
            12vw,
            58px
        );

        letter-spacing:
            0.16em;

    }


    /* -----------------------------------------
       Slide 2 / 3

       手机移动到底部
       ----------------------------------------- */

    .oh-hero-copy-left {

        top: auto;

        bottom: 120px;

        left: 22px;

        transform:
            none;

        width:
            calc(
                100% - 44px
            );

    }


    .oh-hero-kicker {

        margin-bottom:
            11px;

        font-size:
            9px;

    }


    .oh-hero-title {

        max-width: 90%;

        font-size: clamp(
            32px,
            9vw,
            45px
        );

        line-height:
            1.02;

    }


    /* 手机遮罩稍深 */

    .oh-hero-slide-2::after,
    .oh-hero-slide-3::after {

        background:

            linear-gradient(
                to bottom,

                rgba(5,10,14,0.02)
                0%,

                rgba(5,10,14,0.08)
                45%,

                rgba(5,10,14,0.55)
                100%
            );

    }


    /* Progress */

    .oh-hero-progress {

        bottom:
            27px;

        width:
            calc(
                100% - 44px
            );

        grid-template-columns:
            auto
            1fr
            auto;

        gap:
            12px;

    }


    .oh-hero-current,
    .oh-hero-total {

        font-size:
            9px;

    }

}


/* =========================================================
   19. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .oh-hero-copy-left {

        bottom:
            105px;

        left:
            18px;

        width:
            calc(
                100% - 36px
            );

    }


    .oh-hero-title {

        font-size:
            31px;

    }


    .oh-hero-brand {

        font-size:
            38px;

    }


    .oh-hero-progress {

        width:
            calc(
                100% - 36px
            );

    }

}


/* =========================================================
   20. REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

    .oh-hero-slide,
    .oh-hero-slide::before,
    .oh-hero-brand,
    .oh-hero-kicker,
    .oh-hero-title,
    .oh-hero-progress-fill {

        animation:
            none !important;

        transition-duration:
            0.01ms !important;

    }


    .oh-hero-slide.is-active
    .oh-hero-brand,

    .oh-hero-slide.is-active
    .oh-hero-kicker,

    .oh-hero-slide.is-active
    .oh-hero-title {

        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;

    }

}


/* =========================================
   ONEHARBOR - DISABLE STICKY HEADER
   ========================================= */

#masthead,
.site-header,
.ast-primary-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}


/* =========================================================
   ONEHARBOR
   QUALITY & COMPLIANCE SECTION V1
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.oh-quality-section {

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        clamp(100px, 9vw, 170px)
        clamp(30px, 6vw, 110px) !important;

    display: grid !important;

    grid-template-columns:
        minmax(300px, 0.82fr)
        minmax(600px, 1.55fr);

    gap:
        clamp(60px, 7vw, 135px);

    align-items: center !important;

    background:
        #f5f5f2 !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;

}


/* =========================================================
   02. REMOVE SPECTRA WIDTH LIMITS
   ========================================================= */

.oh-quality-section
> .uagb-container-inner-blocks-wrap {

    display: contents !important;

}


/* =========================================================
   03. LEFT COPY
   ========================================================= */

.oh-quality-copy {

    position: relative !important;

    width: 100% !important;

    max-width:
        520px !important;

    padding: 0 !important;

    margin: 0 !important;

    align-self:
        center !important;

}


/* =========================================================
   04. COPY WRAPPER
   ========================================================= */

.oh-quality-content {

    width: 100%;

    margin: 0;

    padding: 0;

}


/* =========================================================
   05. LABEL
   ========================================================= */

.oh-quality-label {

    margin:
        0
        0
        22px;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;

    color:
        rgba(20,20,20,0.54);

}


/* =========================================================
   06. TITLE
   ========================================================= */

.oh-quality-title {

    margin:
        0
        0
        30px !important;

    padding:
        0 !important;

    font-size:
        clamp(
            44px,
            4vw,
            76px
        );

    line-height:
        0.99;

    font-weight:
        400;

    letter-spacing:
        -0.045em;

    color:
        #151515 !important;

}


/* =========================================================
   07. DESCRIPTION
   ========================================================= */

.oh-quality-description {

    max-width:
        440px;

    margin:
        0
        0
        34px;

    font-size:
        clamp(
            15px,
            1vw,
            18px
        );

    line-height:
        1.68;

    font-weight:
        300;

    color:
        rgba(20,20,20,0.63);

}


/* =========================================================
   08. LINK
   ========================================================= */

.oh-quality-link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        0
        0
        8px;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        600;

    letter-spacing:
        0.14em;

    text-decoration:
        none !important;

    color:
        #171717 !important;

}


/* underline */

.oh-quality-link::after {

    content: "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        1px;

    background:
        rgba(20,20,20,0.35);

    transform:
        scaleX(1);

    transform-origin:
        left center;

    transition:
        transform
        0.45s
        cubic-bezier(.16,1,.3,1);

}


/* arrow */

.oh-quality-arrow {

    display:
        inline-block;

    font-size:
        16px;

    line-height:
        1;

    transition:
        transform
        0.4s
        cubic-bezier(.16,1,.3,1);

}


.oh-quality-link:hover
.oh-quality-arrow {

    transform:
        translateX(6px);

}


.oh-quality-link:hover::after {

    transform:
        scaleX(0.65);

}


/* =========================================================
   09. CERTIFICATES AREA
   ========================================================= */

.oh-quality-certificates {

    position: relative !important;

    width: 100% !important;

    max-width:
        980px !important;

    margin:
        0 !important;

    padding:
        30px
        0 !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        clamp(
            18px,
            2vw,
            32px
        );

    align-items:
        center;

}


/* =========================================================
   10. CERTIFICATE CARD
   ========================================================= */

.oh-cert-card {

    position:
        relative !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        clamp(
            18px,
            1.6vw,
            28px
        ) !important;

    background:
        #ffffff !important;

    border:
        1px solid
        rgba(20,20,20,0.06);

    border-radius:
        2px;

    box-shadow:
        0
        18px
        45px
        rgba(20,20,20,0.055);

    box-sizing:
        border-box;

    overflow:
        hidden;

    transition:
        transform
        0.65s
        cubic-bezier(.16,1,.3,1),
        box-shadow
        0.65s
        cubic-bezier(.16,1,.3,1);

}


/* =========================================================
   11. SLIGHT EDITORIAL OFFSET
   ========================================================= */

.oh-cert-card-1 {

    transform:
        translateY(30px);

}


.oh-cert-card-2 {

    transform:
        translateY(-22px);

}


.oh-cert-card-3 {

    transform:
        translateY(42px);

}


/* =========================================================
   12. HOVER
   ========================================================= */

.oh-cert-card:hover {

    box-shadow:
        0
        28px
        70px
        rgba(20,20,20,0.085);

}


.oh-cert-card-1:hover {

    transform:
        translateY(21px);

}


.oh-cert-card-2:hover {

    transform:
        translateY(-31px);

}


.oh-cert-card-3:hover {

    transform:
        translateY(33px);

}


/* =========================================================
   13. CERTIFICATE IMAGE
   ========================================================= */

.oh-cert-card img {

    display:
        block;

    width:
        100% !important;

    height:
        auto !important;

    max-height:
        520px;

    margin:
        0
        auto;

    object-fit:
        contain;

    transition:
        transform
        0.7s
        cubic-bezier(.16,1,.3,1);

}


.oh-cert-card:hover img {

    transform:
        scale(1.012);

}


/* =========================================================
   14. CERTIFICATE TEXT
   ========================================================= */

.oh-cert-card h3,
.oh-cert-card h4 {

    margin:
        18px
        0
        4px !important;

    font-size:
        13px;

    line-height:
        1.25;

    font-weight:
        500;

    letter-spacing:
        0.01em;

    color:
        #171717 !important;

}


.oh-cert-card p {

    margin:
        0 !important;

    font-size:
        10px;

    line-height:
        1.45;

    font-weight:
        400;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

    color:
        rgba(20,20,20,0.46);

}


/* =========================================================
   15. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1600px) {

    .oh-quality-section {

        padding-left:
            max(
                7vw,
                calc(
                    (100vw - 1600px) / 2
                )
            ) !important;

        padding-right:
            max(
                7vw,
                calc(
                    (100vw - 1600px) / 2
                )
            ) !important;

    }

}


/* =========================================================
   16. TABLET
   ========================================================= */

@media
(max-width: 1100px)
and
(min-width: 769px) {

    .oh-quality-section {

        grid-template-columns:
            0.8fr
            1.2fr;

        gap:
            45px;

        padding:
            100px
            45px !important;

    }


    .oh-quality-title {

        font-size:
            clamp(
                39px,
                5vw,
                58px
            );

    }


    .oh-quality-certificates {

        gap:
            14px;

    }


    .oh-cert-card {

        padding:
            14px !important;

    }

}


/* =========================================================
   17. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .oh-quality-section {

        display:
            block !important;

        width:
            100% !important;

        padding:
            78px
            20px
            82px !important;

    }


    .oh-quality-copy {

        max-width:
            none !important;

        margin-bottom:
            52px !important;

    }


    .oh-quality-label {

        margin-bottom:
            15px;

        font-size:
            9px;

    }


    .oh-quality-title {

        margin-bottom:
            22px !important;

        font-size:
            clamp(
                37px,
                11vw,
                53px
            );

        line-height:
            1;

    }


    .oh-quality-description {

        max-width:
            92%;

        margin-bottom:
            27px;

        font-size:
            14px;

        line-height:
            1.6;

    }


    .oh-quality-certificates {

        display:
            grid !important;

        grid-template-columns:
            1fr
            1fr;

        gap:
            14px;

        max-width:
            none !important;

        padding:
            0 !important;

    }


    .oh-cert-card {

        padding:
            12px !important;

        transform:
            none !important;

    }


    /*
     * 第三张占整行并居中
     */

    .oh-cert-card-3 {

        grid-column:
            1 / -1;

        width:
            calc(50% - 7px) !important;

        justify-self:
            center;

    }


    .oh-cert-card:hover {

        transform:
            none !important;

    }


    .oh-cert-card h3,
    .oh-cert-card h4 {

        margin-top:
            12px !important;

        font-size:
            11px;

    }


    .oh-cert-card p {

        font-size:
            8px;

    }

}


/* =========================================================
   18. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .oh-quality-section {

        padding:
            66px
            17px
            70px !important;

    }


    .oh-quality-title {

        font-size:
            36px;

    }


    .oh-quality-certificates {

        gap:
            10px;

    }


    .oh-cert-card {

        padding:
            9px !important;

    }

}


/* =========================================================
   ONEHARBOR
   GLOBAL CONNECTIONS SECTION V1
   DOUBLE ROW INFINITE MARQUEE
   ========================================================= */


/* =========================================================
   01. OUTER SPECTRA SECTION
   ========================================================= */

.oh-global-section {

    position: relative !important;

    display: block !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    background:
        #111111 !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;

}


/* Spectra wrapper */

.oh-global-section
> .uagb-container-inner-blocks-wrap {

    display: block !important;

    width: 100% !important;
    max-width: none !important;

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

}


/* HTML block */

.oh-global-section
.wp-block-html {

    width: 100% !important;
    max-width: none !important;

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

}


/* =========================================================
   02. INNER
   ========================================================= */

.oh-global-inner {

    position: relative;

    width: 100%;

    padding:

        clamp(100px, 9vw, 170px)
        0
        clamp(90px, 8vw, 150px);

    color:
        #ffffff;

    background:
        #111111;

    box-sizing:
        border-box;

    overflow:
        hidden;

}


/* =========================================================
   03. HEADER
   ========================================================= */

.oh-global-head {

    width:
        min(
            1600px,
            calc(100% - 12vw)
        );

    margin:
        0
        auto
        clamp(65px, 7vw, 115px);

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        end;

    gap:
        70px;

}


/* =========================================================
   04. LABEL
   ========================================================= */

.oh-global-label {

    margin:
        0
        0
        20px;

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.52
        );

}


/* =========================================================
   05. TITLE
   ========================================================= */

.oh-global-title {

    margin:
        0 !important;

    padding:
        0 !important;

    max-width:
        1050px;

    font-size:
        clamp(
            44px,
            4.4vw,
            84px
        );

    line-height:
        0.99;

    font-weight:
        400;

    letter-spacing:
        -0.045em;

    color:
        #ffffff !important;

}


/* =========================================================
   06. STAT
   ========================================================= */

.oh-global-stat {

    min-width:
        180px;

    padding-bottom:
        4px;

    text-align:
        left;

}


.oh-global-stat-number {

    margin:
        0
        0
        12px;

    font-size:
        clamp(
            66px,
            6vw,
            112px
        );

    line-height:
        0.78;

    font-weight:
        300;

    letter-spacing:
        -0.065em;

    color:
        #ffffff;

}


.oh-global-stat-label {

    font-size:
        10px;

    line-height:
        1.3;

    font-weight:
        500;

    letter-spacing:
        0.17em;

    color:
        rgba(
            255,
            255,
            255,
            0.50
        );

}


/* =========================================================
   07. GALLERY AREA
   ========================================================= */

.oh-global-gallery {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

}


/* =========================================================
   08. EDGE FADE

   两边轻轻淡出，
   让照片看起来像从画面外经过
   ========================================================= */

.oh-global-gallery::before,
.oh-global-gallery::after {

    content: "";

    position:
        absolute;

    top: 0;
    bottom: 0;

    width:
        clamp(
            30px,
            7vw,
            145px
        );

    z-index:
        20;

    pointer-events:
        none;

}


.oh-global-gallery::before {

    left: 0;

    background:

        linear-gradient(
            90deg,

            #111111 0%,

            rgba(17,17,17,0.86) 25%,

            rgba(17,17,17,0) 100%
        );

}


.oh-global-gallery::after {

    right: 0;

    background:

        linear-gradient(
            270deg,

            #111111 0%,

            rgba(17,17,17,0.86) 25%,

            rgba(17,17,17,0) 100%
        );

}


/* =========================================================
   09. ROW
   ========================================================= */

.oh-global-row {

    position:
        relative;

    display:
        flex;

    width:
        100%;

    overflow:
        hidden;

}


/* 第二排上移一点，形成层次 */

.oh-global-row + .oh-global-row {

    margin-top:
        clamp(
            16px,
            1.8vw,
            30px
        );

}


/* =========================================================
   10. TRACK
   ========================================================= */

.oh-global-track {

    display:
        flex;

    flex-wrap:
        nowrap;

    width:
        max-content;

    will-change:
        transform;

}


/* =========================================================
   11. ORIGINAL SET
   ========================================================= */

.oh-global-set {

    display:
        flex;

    flex-shrink:
        0;

    align-items:
        center;

    gap:
        clamp(
            15px,
            1.5vw,
            26px
        );

    padding-right:
        clamp(
            15px,
            1.5vw,
            26px
        );

}


/* =========================================================
   12. CARD
   ========================================================= */

.oh-global-card {

    position:
        relative;

    flex:
        0
        0
        auto;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    background:
        #202020;

    border-radius:
        2px;

    isolation:
        isolate;

}


/* =========================================================
   13. DIFFERENT CARD SIZES
   ========================================================= */


/* 横向大图 */

.oh-global-card-wide {

    width:
        clamp(
            360px,
            30vw,
            560px
        );

    aspect-ratio:
        4 / 3;

}


/* 稍竖 */

.oh-global-card-tall {

    width:
        clamp(
            270px,
            23vw,
            420px
        );

    aspect-ratio:
        4 / 5;

}


/* 中等 */

.oh-global-card-medium {

    width:
        clamp(
            320px,
            26vw,
            470px
        );

    aspect-ratio:
        5 / 4;

}


/* =========================================================
   14. IMAGE
   ========================================================= */

.oh-global-card img {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center center;

    transform:
        scale(1.01);

    /*
     * 默认稍微克制颜色
     */

    filter:
        saturate(0.72)
        brightness(0.88)
        contrast(0.97);

    transition:

        transform
        0.9s
        cubic-bezier(.16,1,.3,1),

        filter
        0.75s
        cubic-bezier(.16,1,.3,1);

    will-change:
        transform,
        filter;

}


/* =========================================================
   15. SUBTLE IMAGE OVERLAY
   ========================================================= */

.oh-global-card::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,

            rgba(0,0,0,0.02)
            0%,

            rgba(0,0,0,0.07)
            100%
        );

    transition:
        opacity
        0.5s ease;

}


/* =========================================================
   16. HOVER
   ========================================================= */

.oh-global-card:hover img {

    transform:
        scale(1.025);

    filter:
        saturate(1)
        brightness(1)
        contrast(1);

}


.oh-global-card:hover::after {

    opacity:
        0;

}


/* =========================================================
   17. ROW DEPTH

   两排不完全一样高，
   更像Editorial Film Strip
   ========================================================= */

.oh-global-row-left
.oh-global-card:nth-child(2),

.oh-global-row-left
.oh-global-card:nth-child(5) {

    transform:
        translateY(18px);

}


.oh-global-row-right
.oh-global-card:nth-child(1),

.oh-global-row-right
.oh-global-card:nth-child(4) {

    transform:
        translateY(-14px);

}


/* =========================================================
   18. PAUSE ON HOVER
   JS读取这个状态
   ========================================================= */

.oh-global-row {

    cursor:
        default;

}


/* =========================================================
   19. BOTTOM CAPTION
   ========================================================= */

.oh-global-footer {

    width:
        min(
            1600px,
            calc(100% - 12vw)
        );

    margin:

        clamp(55px, 6vw, 95px)
        auto
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        0.20em;

    color:
        rgba(
            255,
            255,
            255,
            0.37
        );

}


.oh-global-footer-line {

    width:
        40px;

    height:
        1px;

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

}


/* =========================================================
   20. INTRO ANIMATION BASE
   ========================================================= */

@media (min-width: 769px) {

    .oh-global-copy,
    .oh-global-stat {

        opacity:
            0;

        transform:
            translate3d(
                0,
                45px,
                0
            );

        transition:

            opacity
            1s
            cubic-bezier(.16,1,.3,1),

            transform
            1.15s
            cubic-bezier(.16,1,.3,1);

    }


    .oh-global-stat {

        transition-delay:
            0.12s;

    }


    .oh-global-section.is-visible
    .oh-global-copy,

    .oh-global-section.is-visible
    .oh-global-stat {

        opacity:
            1;

        transform:
            translate3d(
                0,
                0,
                0
            );

    }

}


/* =========================================================
   21. TABLET
   ========================================================= */

@media
(max-width: 1100px)
and
(min-width: 769px) {

    .oh-global-head {

        width:
            calc(100% - 80px);

        gap:
            45px;

    }


    .oh-global-title {

        font-size:
            clamp(
                42px,
                5.4vw,
                66px
            );

    }


    .oh-global-stat-number {

        font-size:
            74px;

    }


    .oh-global-footer {

        width:
            calc(100% - 80px);

    }

}


/* =========================================================
   22. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .oh-global-inner {

        padding:

            78px
            0
            75px;

    }


    /* Header */

    .oh-global-head {

        width:
            calc(100% - 40px);

        margin-bottom:
            50px;

        display:
            block;

    }


    .oh-global-label {

        margin-bottom:
            14px;

        font-size:
            9px;

    }


    .oh-global-title {

        max-width:
            95%;

        font-size:
            clamp(
                37px,
                10.5vw,
                52px
            );

        line-height:
            1;

    }


    /* Stat */

    .oh-global-stat {

        display:
            flex;

        align-items:
            baseline;

        gap:
            13px;

        margin-top:
            30px;

        padding:
            0;

    }


    .oh-global-stat-number {

        margin:
            0;

        font-size:
            54px;

    }


    .oh-global-stat-label {

        max-width:
            100px;

        font-size:
            8px;

    }


    /* Remove desktop fade width */

    .oh-global-gallery::before,
    .oh-global-gallery::after {

        width:
            25px;

    }


    /* Smaller gaps */

    .oh-global-set {

        gap:
            10px;

        padding-right:
            10px;

    }


    .oh-global-row + .oh-global-row {

        margin-top:
            10px;

    }


    /* Mobile cards */

    .oh-global-card-wide {

        width:
            270px;

    }


    .oh-global-card-medium {

        width:
            235px;

    }


    .oh-global-card-tall {

        width:
            200px;

    }


    /*
     * 手机降低错落幅度
     */

    .oh-global-row-left
    .oh-global-card:nth-child(2),

    .oh-global-row-left
    .oh-global-card:nth-child(5) {

        transform:
            translateY(7px);

    }


    .oh-global-row-right
    .oh-global-card:nth-child(1),

    .oh-global-row-right
    .oh-global-card:nth-child(4) {

        transform:
            translateY(-6px);

    }


    /* 手机上颜色略亮一点 */

    .oh-global-card img {

        filter:
            saturate(0.82)
            brightness(0.93)
            contrast(0.98);

    }


    /* Footer */

    .oh-global-footer {

        width:
            calc(100% - 40px);

        margin-top:
            48px;

        gap:
            9px;

        font-size:
            7px;

        letter-spacing:
            0.14em;

    }


    .oh-global-footer-line {

        width:
            20px;

    }


    /*
     * 手机上不要入场隐藏，
     * 避免JS未加载时标题消失
     */

    .oh-global-copy,
    .oh-global-stat {

        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;

    }

}


/* =========================================================
   23. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .oh-global-inner {

        padding:

            66px
            0
            65px;

    }


    .oh-global-head {

        width:
            calc(100% - 34px);

    }


    .oh-global-title {

        font-size:
            36px;

    }


    .oh-global-card-wide {

        width:
            240px;

    }


    .oh-global-card-medium {

        width:
            210px;

    }


    .oh-global-card-tall {

        width:
            180px;

    }


    .oh-global-footer {

        width:
            calc(100% - 34px);

    }

}


/* =========================================================
   24. REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

    .oh-global-card img,
    .oh-global-copy,
    .oh-global-stat {

        transition:
            none !important;

    }

}


/* =========================================================
   ONEHARBOR
   HUAWEI STYLE VIDEO TEXT REVEAL V2

   Fullscreen Video
   Sticky Scroll
   Progressive Word Reveal
   ========================================================= */


/* =========================================================
   01. OUTER SECTION

   整个Section提供滚动距离。
   视频本身会Sticky在屏幕上。
   ========================================================= */

.oh-video-reveal-section {

    position: relative !important;

    display: block !important;

    width: 100vw !important;
    max-width: none !important;

    /*
     * 340vh = 用户拥有约2.4屏的滚动距离
     * 控制文字动画。
     */

    height: 340vh !important;

    margin-left:
        calc(50% - 50vw) !important;

    margin-right:
        calc(50% - 50vw) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;

    background:
        #0c0c0c !important;

    overflow:
        visible !important;

    box-sizing:
        border-box !important;

}


/* =========================================================
   02. SPECTRA WRAPPER
   ========================================================= */

.oh-video-reveal-section
> .uagb-container-inner-blocks-wrap {

    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

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

    overflow: visible !important;

}


/* Custom HTML */

.oh-video-reveal-section
.wp-block-html {

    width: 100% !important;

    height: 100% !important;

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

}


/* =========================================================
   03. STICKY VIDEO STAGE
   ========================================================= */

.oh-hv2-stage {

    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;
    height: 100svh;

    overflow: hidden;

    background:
        #0b0b0b;

    isolation: isolate;

}


/* =========================================================
   04. VIDEO
   ========================================================= */

.oh-hv2-video {

    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;

    margin: 0;
    padding: 0;

    border: 0;

    /*
     * 初始轻微Zoom。
     * Scroll过程中会慢慢恢复到1。
     */

    transform:
        scale(1.055);

    will-change:
        transform;

}


/* =========================================================
   05. VIDEO OVERLAY
   ========================================================= */

.oh-hv2-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    /*
     * 不做明显黑膜。
     * 只保证白字始终有足够对比度。
     */

    background:

        linear-gradient(
            180deg,

            rgba(0,0,0,0.18)
            0%,

            rgba(0,0,0,0.25)
            50%,

            rgba(0,0,0,0.34)
            100%
        );

    opacity:
        0.80;

    will-change:
        opacity;

}


/* =========================================================
   06. ALL TEXT SCENES
   ========================================================= */

.oh-hv2-scene {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;
    height: 100%;

    padding:

        0
        clamp(
            30px,
            5vw,
            100px
        );

    box-sizing:
        border-box;

    text-align:
        center;

    pointer-events:
        none;

}


/* =========================================================
   07. MAIN TITLE
   ========================================================= */

.oh-hv2-title {

    width:
        min(
            1500px,
            92vw
        );

    margin: 0 !important;

    padding: 0 !important;

    font-size:
        clamp(
            58px,
            6vw,
            118px
        );

    line-height:
        0.94;

    font-weight:
        400;

    letter-spacing:
        -0.055em;

    color:
        #ffffff !important;

}


/* =========================================================
   08. LINES
   ========================================================= */

.oh-hv2-line {

    display: block;

    white-space:
        normal;

}


/* =========================================================
   09. WORDS

   关键：
   第一帧文字已经在视频里面，
   但是非常淡、略Blur。

   GSAP根据Scroll逐个变亮。
   ========================================================= */

.oh-hv2-word {

    display:
        inline-block;

    margin-right:
        0.15em;

    opacity:
        0.13;

    filter:
        blur(8px);

    transform:
        translate3d(
            0,
            28px,
            0
        );

    color:
        #ffffff;

    will-change:
        transform,
        opacity,
        filter;

}


.oh-hv2-word:last-child {

    margin-right:
        0;

}


/* =========================================================
   10. FIRST SCENE
   ========================================================= */

.oh-hv2-scene-1 {

    opacity:
        1;

    visibility:
        visible;

}


/* =========================================================
   11. SECOND SCENE
   ========================================================= */

.oh-hv2-scene-2 {

    opacity:
        0;

    visibility:
        hidden;

}


/* =========================================================
   12. FINAL LABEL
   ========================================================= */

.oh-hv2-final-label {

    margin:
        0
        0
        clamp(
            18px,
            2vw,
            30px
        );

    font-size:
        clamp(
            10px,
            0.75vw,
            13px
        );

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        0.24em;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    opacity:
        0;

    transform:
        translateY(
            20px
        );

}


/* =========================================================
   13. SECOND TITLE SLIGHTLY SMALLER
   ========================================================= */

.oh-hv2-title-2 {

    font-size:
        clamp(
            52px,
            5.4vw,
            104px
        );

}


/* =========================================================
   14. SCROLL INDICATOR
   ========================================================= */

.oh-hv2-scroll {

    position: absolute;

    left: 50%;

    bottom:
        clamp(
            22px,
            4vh,
            44px
        );

    z-index: 20;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap:
        10px;

    transform:
        translateX(-50%);

    pointer-events:
        none;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

}


.oh-hv2-scroll span:first-child {

    font-size:
        8px;

    font-weight:
        500;

    letter-spacing:
        0.25em;

}


/* Vertical line */

.oh-hv2-scroll-line {

    position: relative;

    width:
        1px;

    height:
        38px;

    overflow:
        hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.20
        );

}


/* Moving highlight */

.oh-hv2-scroll-line::after {

    content: "";

    position: absolute;

    top:
        -100%;

    left: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(
            255,
            255,
            255,
            0.90
        );

    animation:
        ohHv2ScrollLine
        2.2s
        ease-in-out
        infinite;

}


@keyframes ohHv2ScrollLine {

    0% {

        transform:
            translateY(0);

    }


    70%,
    100% {

        transform:
            translateY(200%);

    }

}


/* =========================================================
   15. TABLET
   ========================================================= */

@media
(max-width: 1100px)
and
(min-width: 769px) {

    .oh-video-reveal-section {

        height:
            325vh !important;

    }


    .oh-hv2-title {

        font-size:
            clamp(
                52px,
                7vw,
                76px
            );

    }


    .oh-hv2-title-2 {

        font-size:
            clamp(
                48px,
                6.4vw,
                70px
            );

    }

}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .oh-video-reveal-section {

        width:
            100% !important;

        height:
            300svh !important;

        margin-left:
            0 !important;

        margin-right:
            0 !important;

    }


    .oh-hv2-stage {

        height:
            100svh;

        min-height:
            600px;

    }


    /* -----------------------------------------
       Mobile video
       ----------------------------------------- */

    .oh-hv2-video {

        transform:
            scale(1.035);

        /*
         * 如果人物或Pergola主体需要调整，
         * 后续主要改这里。
         */

        object-position:
            center center;

    }


    /* -----------------------------------------
       Scene spacing
       ----------------------------------------- */

    .oh-hv2-scene {

        padding:
            0
            20px;

    }


    /* -----------------------------------------
       Main title
       ----------------------------------------- */

    .oh-hv2-title {

        width:
            100%;

        font-size:
            clamp(
                41px,
                11vw,
                58px
            );

        line-height:
            0.97;

        letter-spacing:
            -0.048em;

    }


    .oh-hv2-title-2 {

        font-size:
            clamp(
                37px,
                9.7vw,
                50px
            );

    }


    /* -----------------------------------------
       Word spacing
       ----------------------------------------- */

    .oh-hv2-word {

        margin-right:
            0.10em;

        transform:
            translate3d(
                0,
                20px,
                0
            );

        filter:
            blur(6px);

    }


    /* -----------------------------------------
       Final label
       ----------------------------------------- */

    .oh-hv2-final-label {

        margin-bottom:
            16px;

        max-width:
            90%;

        font-size:
            8px;

        line-height:
            1.4;

        letter-spacing:
            0.17em;

    }


    /* Scroll */

    .oh-hv2-scroll {

        bottom:
            22px;

    }


    .oh-hv2-scroll-line {

        height:
            30px;

    }

}


/* =========================================================
   17. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .oh-hv2-title {

        font-size:
            39px;

    }


    .oh-hv2-title-2 {

        font-size:
            35px;

    }

}


/* =========================================================
   18. REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

    .oh-video-reveal-section {

        height:
            100svh !important;

    }


    .oh-hv2-word {

        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;

    }


    .oh-hv2-scroll-line::after {

        animation:
            none !important;

    }

}


/* =========================================================
   ONEHARBOR
   GLOBAL TYPOGRAPHY SYSTEM V1

   DISPLAY : MANROPE
   BODY    : INTER
   ========================================================= */


/* =========================================================
   01. FONT TOKENS
   ========================================================= */

:root {

    --oh-font-display:
        "Manrope",
        Arial,
        sans-serif;

    --oh-font-body:
        "Inter",
        Arial,
        sans-serif;

    --oh-weight-light: 300;
    --oh-weight-regular: 400;
    --oh-weight-medium: 500;
    --oh-weight-semibold: 600;

}


/* =========================================================
   02. GLOBAL RENDERING
   ========================================================= */

html {

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


body {

    font-family:
        var(--oh-font-body) !important;

    font-weight:
        var(--oh-weight-regular);

}


/* =========================================================
   03. BODY / UI
   ========================================================= */

body,
p,
li,
a,
button,
input,
textarea,
select,
label {

    font-family:
        var(--oh-font-body);

}


/* =========================================================
   04. ALL HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title,
.wp-block-heading {

    font-family:
        var(--oh-font-display) !important;

    font-weight:
        var(--oh-weight-regular);

}


/* =========================================================
   05. NORMAL PAGE HEADINGS
   ========================================================= */

.entry-content > h1,
.entry-content > h2,
.entry-content > h3 {

    letter-spacing:
        -0.035em;

}


/* =========================================================
   06. HEADER NAVIGATION
   ========================================================= */

.main-header-menu .menu-link,
.ast-header-navigation-arrow,
.ast-builder-menu {

    font-family:
        var(--oh-font-body) !important;

    font-weight:
        var(--oh-weight-medium) !important;

}


/* =========================================================
   07. BUTTON SYSTEM
   ========================================================= */

button,
input[type="submit"],
.wp-block-button__link,
.uagb-button__link,
.uagb-buttons-repeater,
.ast-custom-button {

    font-family:
        var(--oh-font-body) !important;

    font-weight:
        var(--oh-weight-medium) !important;

    letter-spacing:
        0.10em;

}


/* =========================================================
   08. HOME HERO
   ========================================================= */

.oh-hero-brand,
.oh-hero-title {

    font-family:
        var(--oh-font-display) !important;

    font-weight:
        var(--oh-weight-regular) !important;

}


.oh-hero-kicker,
.oh-hero-current,
.oh-hero-total {

    font-family:
        var(--oh-font-body) !important;

    font-weight:
        var(--oh-weight-medium) !important;

}


/* ONEHARBOR brand word */

.oh-hero-brand {

    font-weight:
        400 !important;

}


/* =========================================================
   09. ABOUT SECTION
   ========================================================= */

.oh-about-panel h2,
.oh-about-panel h3,
.oh-about-year {

    font-family:
        var(--oh-font-display) !important;

}


.oh-about-panel h2 {

    font-weight:
        var(--oh-weight-regular) !important;

}


.oh-about-panel h3 {

    font-weight:
        var(--oh-weight-regular) !important;

}


.oh-about-year {

    font-weight:
        var(--oh-weight-light) !important;

}


.oh-about-label,
.oh-about-detail,
.oh-about-detail strong,
.oh-about-detail span {

    font-family:
        var(--oh-font-body) !important;

}


.oh-about-label {

    font-weight:
        var(--oh-weight-medium) !important;

}


/* =========================================================
   10. QUALITY & COMPLIANCE
   ========================================================= */

.oh-quality-title {

    font-family:
        var(--oh-font-display) !important;

    font-weight:
        var(--oh-weight-regular) !important;

}


.oh-quality-label,
.oh-quality-description,
.oh-quality-link,
.oh-cert-card p {

    font-family:
        var(--oh-font-body) !important;

}


.oh-quality-label,
.oh-quality-link {

    font-weight:
        var(--oh-weight-medium) !important;

}


.oh-cert-card h3,
.oh-cert-card h4 {

    font-family:
        var(--oh-font-display) !important;

    font-weight:
        var(--oh-weight-medium) !important;

}


/* =========================================================
   11. GLOBAL CONNECTIONS
   ========================================================= */

.oh-global-title,
.oh-global-stat-number {

    font-family:
        var(--oh-font-display) !important;

}


.oh-global-title {

    font-weight:
        var(--oh-weight-regular) !important;

}


.oh-global-stat-number {

    font-weight:
        var(--oh-weight-light) !important;

}


.oh-global-label,
.oh-global-stat-label,
.oh-global-footer {

    font-family:
        var(--oh-font-body) !important;

    font-weight:
        var(--oh-weight-medium) !important;

}


/* =========================================================
   12. HUAWEI STYLE VIDEO SECTION
   ========================================================= */

.oh-hv2-title {

    font-family:
        var(--oh-font-display) !important;

    font-weight:
        var(--oh-weight-regular) !important;

}


.oh-hv2-final-label,
.oh-hv2-scroll {

    font-family:
        var(--oh-font-body) !important;

    font-weight:
        var(--oh-weight-medium) !important;

}


/* =========================================================
   13. PRODUCTS
   ========================================================= */

.oh-products-section h1,
.oh-products-section h2,
.oh-products-section h3,
.oh-product-card h2,
.oh-product-card h3 {

    font-family:
        var(--oh-font-display) !important;

    font-weight:
        var(--oh-weight-regular) !important;

}


.oh-products-section p,
.oh-product-card p,
.oh-product-card a {

    font-family:
        var(--oh-font-body) !important;

}


/* =========================================================
   14. WHAT WE DO / GENERAL CARDS
   ========================================================= */

.oh-features-section h1,
.oh-features-section h2,
.oh-features-section h3 {

    font-family:
        var(--oh-font-display) !important;

    font-weight:
        var(--oh-weight-regular) !important;

}


.oh-features-section p {

    font-family:
        var(--oh-font-body) !important;

}


/* =========================================================
   15. FOOTER
   ========================================================= */

.site-footer,
.site-footer p,
.site-footer a,
.site-footer li {

    font-family:
        var(--oh-font-body) !important;

}


.site-footer h2,
.site-footer h3,
.site-footer h4 {

    font-family:
        var(--oh-font-display) !important;

    font-weight:
        var(--oh-weight-medium) !important;

}


/* =========================================================
   16. LABEL / EYEBROW STANDARD
   ========================================================= */

.oh-eyebrow {

    font-family:
        var(--oh-font-body);

    font-size:
        11px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        0.20em;

    text-transform:
        uppercase;

}


/* =========================================================
   17. STANDARD DISPLAY CLASSES
   以后新板块可以直接使用
   ========================================================= */

.oh-display-xl {

    font-family:
        var(--oh-font-display);

    font-size:
        clamp(58px, 6vw, 116px);

    line-height:
        0.94;

    font-weight:
        400;

    letter-spacing:
        -0.052em;

}


.oh-display-lg {

    font-family:
        var(--oh-font-display);

    font-size:
        clamp(48px, 4.5vw, 86px);

    line-height:
        0.98;

    font-weight:
        400;

    letter-spacing:
        -0.045em;

}


.oh-heading-md {

    font-family:
        var(--oh-font-display);

    font-size:
        clamp(30px, 2.7vw, 52px);

    line-height:
        1.03;

    font-weight:
        400;

    letter-spacing:
        -0.035em;

}


/* =========================================================
   18. BODY TEXT UTILITIES
   ========================================================= */

.oh-body-lg {

    font-family:
        var(--oh-font-body);

    font-size:
        clamp(16px, 1.05vw, 19px);

    line-height:
        1.65;

    font-weight:
        400;

}


.oh-body {

    font-family:
        var(--oh-font-body);

    font-size:
        16px;

    line-height:
        1.65;

    font-weight:
        400;

}


/* =========================================================
   19. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body {

        font-size:
            15px;

    }


    .oh-eyebrow {

        font-size:
            9px;

        letter-spacing:
            0.18em;

    }


    .oh-display-xl {

        font-size:
            clamp(40px, 11vw, 56px);

        line-height:
            0.98;

    }


    .oh-display-lg {

        font-size:
            clamp(36px, 9.5vw, 48px);

        line-height:
            1;

    }


    .oh-heading-md {

        font-size:
            clamp(28px, 8vw, 38px);

    }

}


/* =========================================================
   09. BELOW FOOTER
   Follow Astra Footer Container
   Same alignment as CTA + Primary Footer
   ========================================================= */


/*
   关键：
   不设置 max-width
   不设置 1280px
   不设置 margin:auto
   不使用 100vw

   直接使用 Astra Footer Builder
   已经存在的内容容器宽度
*/

.oh-footer-bottom {
    width: 100%;

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

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    text-align: left !important;
}


/* -------------------------
   Copyright
   ------------------------- */

.oh-footer-bottom-copy {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-align: left !important;

    white-space: nowrap;
}


/* -------------------------
   Legal Links
   ------------------------- */

.oh-footer-bottom-links {
    margin: 0 !important;
    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    text-align: right !important;

    white-space: nowrap;
}


/* Policy links */

.oh-footer-bottom-links a {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    text-decoration: none !important;

    transition: color 0.25s ease;
}


/* Hover */

.oh-footer-bottom-links a:hover,
.oh-footer-bottom-links a:focus {
    color: #c6a15b !important;
    text-decoration: none !important;
}


/* Separator */

.oh-footer-bottom-links span {
    margin: 0 12px;

    color: rgba(255, 255, 255, 0.38) !important;
}


/* =========================================================
   BELOW FOOTER - ASTRA FIX
   ========================================================= */


/*
   HTML Widget 自身必须占满
   Astra 已经负责外部内容宽度
*/

.site-below-footer-wrap .ast-footer-html-1,
.site-below-footer-wrap .ast-builder-html-element {
    width: 100% !important;

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

    text-align: left !important;
}


/* 清除 HTML Widget 默认 p margin */

.site-below-footer-wrap .ast-builder-html-element p {
    margin: 0 !important;
    padding: 0 !important;
}


/* 防止 Widget 自身产生额外 margin */

.site-below-footer-wrap .widget,
.site-below-footer-wrap .widget-area {
    margin: 0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 921px) {

    .oh-footer-bottom-copy,
    .oh-footer-bottom-links,
    .oh-footer-bottom-links a {
        font-size: 12px !important;
    }

    .oh-footer-bottom-links span {
        margin: 0 8px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .oh-footer-bottom {
        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        gap: 10px;

        text-align: left !important;
    }


    .oh-footer-bottom-copy {
        width: 100%;

        white-space: normal;

        text-align: left !important;
    }


    .oh-footer-bottom-links {
        width: 100%;

        justify-content: flex-start;

        flex-wrap: wrap;

        white-space: normal;

        text-align: left !important;
    }


    .oh-footer-bottom-links span {
        margin: 0 6px;
    }

}


/* =========================================================
   ONEHARBOR ABOUT
   TYPOGRAPHY & SPACING V4
   OVERRIDE ONLY

   调整：
   - Typography
   - Panel Positions
   - Internal Spacing

   不修改：
   - Background Image
   - Background Size
   - Background Position
   - JS Animation
   - Scroll Logic
   ========================================================= */


/* =========================================================
   01. DESKTOP
   ========================================================= */

@media (min-width: 769px) {


    /* =====================================================
       PANEL POSITIONS
       原来约：
       10 / 36 / 60 / 82

       V4：
       10 / 31 / 52 / 73
       ===================================================== */

    .oh-about-jomoo .oh-about-panel-1 {
        top: 10% !important;
    }

    .oh-about-jomoo .oh-about-panel-2 {
        top: 31% !important;
    }

    .oh-about-jomoo .oh-about-panel-3 {
        top: 52% !important;
    }

    .oh-about-jomoo .oh-about-panel-4 {
        top: 73% !important;
    }



    /* =====================================================
       GENERAL PANEL
       ===================================================== */

    .oh-about-jomoo .oh-about-panel {

        /*
         * 不碰 transform，
         * 避免影响你现有 V3 动画。
         */

        max-width: min(960px, 72vw) !important;

    }



    /* =====================================================
       SMALL LABEL

       ABOUT ONEHARBOR
       GLOBAL VISION
       ===================================================== */

    .oh-about-jomoo .oh-about-label {

        margin:
            0
            0
            11px !important;

        font-family:
            var(
                --oh-font-body,
                "Inter",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                9px,
                0.58vw,
                11px
            ) !important;

        line-height:
            1 !important;

        font-weight:
            500 !important;

        letter-spacing:
            0.20em !important;

        text-transform:
            uppercase;

    }



    /* =====================================================
       MAIN H2

       Engineering Aluminum
       for Better Living Spaces.
       ===================================================== */

    .oh-about-jomoo .oh-about-panel h2 {

        margin:
            0 !important;

        padding:
            0 !important;

        max-width:
            900px;

        font-family:
            var(
                --oh-font-display,
                "Manrope",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                38px,
                3.65vw,
                70px
            ) !important;

        line-height:
            0.98 !important;

        font-weight:
            400 !important;

        letter-spacing:
            -0.045em !important;

    }



    /* =====================================================
       STAGE 4

       Stage 4文字比较长，
       单独再收一点。
       ===================================================== */

    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        max-width:
            940px !important;

        font-size:
            clamp(
                38px,
                3.55vw,
                68px
            ) !important;

        line-height:
            0.99 !important;

        letter-spacing:
            -0.043em !important;

    }



    /* =====================================================
       YEAR

       2005 / 2025
       ===================================================== */

    .oh-about-jomoo .oh-about-year {

        margin:
            0
            0
            11px !important;

        padding:
            0 !important;

        font-family:
            var(
                --oh-font-display,
                "Manrope",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                68px,
                7.2vw,
                132px
            ) !important;

        line-height:
            0.82 !important;

        font-weight:
            300 !important;

        letter-spacing:
            -0.065em !important;

    }



    /* =====================================================
       STAGE TITLE

       One Alu Aluminum Founded
       OneHarborOutdoor Established
       ===================================================== */

    .oh-about-jomoo
    .oh-about-panel h3 {

        margin:
            0
            0
            12px !important;

        padding:
            0 !important;

        max-width:
            820px;

        font-family:
            var(
                --oh-font-display,
                "Manrope",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                24px,
                2.25vw,
                42px
            ) !important;

        line-height:
            1.02 !important;

        font-weight:
            400 !important;

        letter-spacing:
            -0.035em !important;

    }



    /* =====================================================
       DETAIL AREA

       21+ Years
       Aluminum Manufacturing Experience
       ===================================================== */

    .oh-about-jomoo
    .oh-about-detail {

        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            1px !important;

        margin:
            0 !important;

        padding-left:
            13px !important;

        border-left:
            1px solid
            rgba(
                255,
                255,
                255,
                0.42
            );

    }



    /* Strong */

    .oh-about-jomoo
    .oh-about-detail strong {

        margin:
            0 !important;

        padding:
            0 !important;

        font-family:
            var(
                --oh-font-body,
                "Inter",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                14px,
                1vw,
                18px
            ) !important;

        line-height:
            1.18 !important;

        font-weight:
            500 !important;

        letter-spacing:
            -0.01em !important;

    }



    /* Secondary text */

    .oh-about-jomoo
    .oh-about-detail span {

        margin:
            0 !important;

        padding:
            0 !important;

        font-family:
            var(
                --oh-font-body,
                "Inter",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                12px,
                0.78vw,
                15px
            ) !important;

        line-height:
            1.28 !important;

        font-weight:
            400 !important;

        letter-spacing:
            0 !important;

    }

}



/* =========================================================
   02. LARGE DESKTOP
   防止超宽屏字号再次显得过大
   ========================================================= */

@media (min-width: 1600px) {

    .oh-about-jomoo
    .oh-about-panel {

        max-width:
            1000px !important;

    }


    .oh-about-jomoo
    .oh-about-panel h2 {

        max-width:
            920px;

    }


    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        max-width:
            980px !important;

    }

}



/* =========================================================
   03. TABLET
   ========================================================= */

@media
(max-width: 1100px)
and
(min-width: 769px) {


    /*
     * Tablet阶段再稍微靠近一点
     */

    .oh-about-jomoo
    .oh-about-panel-1 {

        top:
            9.5% !important;

    }


    .oh-about-jomoo
    .oh-about-panel-2 {

        top:
            30.5% !important;

    }


    .oh-about-jomoo
    .oh-about-panel-3 {

        top:
            51.5% !important;

    }


    .oh-about-jomoo
    .oh-about-panel-4 {

        top:
            72.5% !important;

    }



    .oh-about-jomoo
    .oh-about-panel h2 {

        font-size:
            clamp(
                36px,
                4.5vw,
                52px
            ) !important;

    }



    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        font-size:
            clamp(
                35px,
                4.35vw,
                50px
            ) !important;

    }



    .oh-about-jomoo
    .oh-about-year {

        font-size:
            clamp(
                64px,
                8vw,
                96px
            ) !important;

        margin-bottom:
            10px !important;

    }



    .oh-about-jomoo
    .oh-about-panel h3 {

        font-size:
            clamp(
                23px,
                2.7vw,
                34px
            ) !important;

        margin-bottom:
            11px !important;

    }



    .oh-about-jomoo
    .oh-about-detail strong {

        font-size:
            15px !important;

    }



    .oh-about-jomoo
    .oh-about-detail span {

        font-size:
            12px !important;

    }

}



/* =========================================================
   04. MOBILE

   手机继续保持原来的静态逻辑。
   这里只调整Typography，
   不改变JS、不改变动画结构。
   ========================================================= */

@media (max-width: 768px) {


    .oh-about-jomoo
    .oh-about-label {

        margin-bottom:
            10px !important;

        font-family:
            var(
                --oh-font-body,
                "Inter",
                Arial,
                sans-serif
            ) !important;

        font-size:
            9px !important;

        line-height:
            1 !important;

        font-weight:
            500 !important;

        letter-spacing:
            0.18em !important;

    }



    .oh-about-jomoo
    .oh-about-panel h2 {

        margin:
            0 !important;

        font-family:
            var(
                --oh-font-display,
                "Manrope",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                34px,
                9.5vw,
                46px
            ) !important;

        line-height:
            0.99 !important;

        font-weight:
            400 !important;

        letter-spacing:
            -0.043em !important;

    }



    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        font-size:
            clamp(
                32px,
                8.8vw,
                43px
            ) !important;

        line-height:
            1 !important;

    }



    .oh-about-jomoo
    .oh-about-year {

        margin:
            0
            0
            10px !important;

        font-family:
            var(
                --oh-font-display,
                "Manrope",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                60px,
                18vw,
                92px
            ) !important;

        line-height:
            0.82 !important;

        font-weight:
            300 !important;

        letter-spacing:
            -0.06em !important;

    }



    .oh-about-jomoo
    .oh-about-panel h3 {

        margin:
            0
            0
            10px !important;

        font-family:
            var(
                --oh-font-display,
                "Manrope",
                Arial,
                sans-serif
            ) !important;

        font-size:
            clamp(
                23px,
                6.5vw,
                31px
            ) !important;

        line-height:
            1.03 !important;

        font-weight:
            400 !important;

        letter-spacing:
            -0.032em !important;

    }



    .oh-about-jomoo
    .oh-about-detail {

        gap:
            1px !important;

        padding-left:
            11px !important;

    }



    .oh-about-jomoo
    .oh-about-detail strong {

        font-family:
            var(
                --oh-font-body,
                "Inter",
                Arial,
                sans-serif
            ) !important;

        font-size:
            14px !important;

        line-height:
            1.18 !important;

        font-weight:
            500 !important;

    }



    .oh-about-jomoo
    .oh-about-detail span {

        font-family:
            var(
                --oh-font-body,
                "Inter",
                Arial,
                sans-serif
            ) !important;

        font-size:
            11px !important;

        line-height:
            1.3 !important;

        font-weight:
            400 !important;

    }

}



/* =========================================================
   05. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {


    .oh-about-jomoo
    .oh-about-panel h2 {

        font-size:
            33px !important;

    }


    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        font-size:
            30px !important;

    }


    .oh-about-jomoo
    .oh-about-year {

        font-size:
            62px !important;

    }


    .oh-about-jomoo
    .oh-about-panel h3 {

        font-size:
            22px !important;

    }


    .oh-about-jomoo
    .oh-about-detail strong {

        font-size:
            13px !important;

    }


    .oh-about-jomoo
    .oh-about-detail span {

        font-size:
            10px !important;

    }

}


/* =========================================================
   ONEHARBOR
   PREMIUM TYPOGRAPHY AIRY V5

   Fix:
   - Tight letter spacing
   - Tight word spacing
   - Tight line height

   ABOUT + VIDEO ONLY
   ========================================================= */


/* =========================================================
   01. ABOUT MAIN TITLES
   ========================================================= */

.oh-about-jomoo
.oh-about-panel h2 {

    /*
     * 原来约 -0.045em
     * Manrope不需要压这么紧
     */

    letter-spacing:
        -0.012em !important;

    /*
     * 增加单词之间的空气感
     */

    word-spacing:
        0.045em !important;

    /*
     * 原来约0.98
     */

    line-height:
        1.085 !important;

    font-kerning:
        normal;

}


/* =========================================================
   02. ABOUT STAGE 4

   最后一段文字较长，
   行距稍微再宽一点
   ========================================================= */

.oh-about-jomoo
.oh-about-panel-4 h2 {

    letter-spacing:
        -0.01em !important;

    word-spacing:
        0.05em !important;

    line-height:
        1.10 !important;

}


/* =========================================================
   03. ABOUT H3

   One Alu Aluminum Founded
   OneHarborOutdoor Established
   ========================================================= */

.oh-about-jomoo
.oh-about-panel h3 {

    letter-spacing:
        -0.005em !important;

    word-spacing:
        0.035em !important;

    line-height:
        1.12 !important;

}


/* =========================================================
   04. ABOUT YEAR

   年份仍保持稍紧，
   因为是单独的大数字
   ========================================================= */

.oh-about-jomoo
.oh-about-year {

    letter-spacing:
        -0.035em !important;

    line-height:
        0.86 !important;

}


/* =========================================================
   05. ABOUT SMALL LABEL

   ABOUT ONEHARBOR
   GLOBAL VISION

   小标签继续保持较宽tracking
   ========================================================= */

.oh-about-jomoo
.oh-about-label {

    letter-spacing:
        0.23em !important;

    word-spacing:
        0.08em !important;

    line-height:
        1.25 !important;

}


/* =========================================================
   06. ABOUT DETAIL
   ========================================================= */

.oh-about-jomoo
.oh-about-detail {

    gap:
        3px !important;

}


/* 21+ Years */

.oh-about-jomoo
.oh-about-detail strong {

    letter-spacing:
        0.005em !important;

    word-spacing:
        0.035em !important;

    line-height:
        1.32 !important;

}


/* Aluminum Manufacturing Experience */

.oh-about-jomoo
.oh-about-detail span {

    letter-spacing:
        0.008em !important;

    word-spacing:
        0.035em !important;

    line-height:
        1.42 !important;

}



/* =========================================================
   07. VIDEO MAIN TITLES

   From Aluminum
   to Better Living Spaces.
   ========================================================= */

.oh-hv2-title {

    /*
     * 原来 -0.055em 太紧
     */

    letter-spacing:
        -0.012em !important;

    word-spacing:
        0.04em !important;

    /*
     * 原来0.94
     * 这是看起来挤成一团的主要原因之一
     */

    line-height:
        1.08 !important;

    font-kerning:
        normal;

}


/* =========================================================
   08. VIDEO EACH LINE

   两行之间增加额外呼吸距离
   ========================================================= */

.oh-hv2-line {

    display:
        block;

    line-height:
        inherit;

}


.oh-hv2-line + .oh-hv2-line {

    margin-top:
        0.10em;

}


/* =========================================================
   09. VIDEO WORD SPACING

   每个word本身都是span，
   所以这里也需要单独增加距离
   ========================================================= */

.oh-hv2-word {

    margin-right:
        0.20em !important;

    letter-spacing:
        inherit;

}


.oh-hv2-word:last-child {

    margin-right:
        0 !important;

}


/* =========================================================
   10. SECOND VIDEO TITLE

   Let's Build Better Outdoor
   Living Together
   ========================================================= */

.oh-hv2-title-2 {

    letter-spacing:
        -0.010em !important;

    word-spacing:
        0.045em !important;

    line-height:
        1.09 !important;

}


/* =========================================================
   11. VIDEO SMALL LABEL
   ========================================================= */

.oh-hv2-final-label {

    letter-spacing:
        0.22em !important;

    word-spacing:
        0.08em !important;

    line-height:
        1.45 !important;

}



/* =========================================================
   12. TABLET
   ========================================================= */

@media
(max-width: 1100px)
and
(min-width: 769px) {

    .oh-about-jomoo
    .oh-about-panel h2 {

        line-height:
            1.08 !important;

        letter-spacing:
            -0.01em !important;

    }


    .oh-about-jomoo
    .oh-about-panel h3 {

        line-height:
            1.12 !important;

    }


    .oh-hv2-title {

        line-height:
            1.09 !important;

        letter-spacing:
            -0.008em !important;

    }


    .oh-hv2-line + .oh-hv2-line {

        margin-top:
            0.11em;

    }

}



/* =========================================================
   13. MOBILE

   手机尤其不能压得太紧，
   因为换行更多。
   ========================================================= */

@media (max-width: 768px) {

    /* ABOUT */

    .oh-about-jomoo
    .oh-about-panel h2 {

        letter-spacing:
            -0.005em !important;

        word-spacing:
            0.025em !important;

        line-height:
            1.10 !important;

    }


    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        line-height:
            1.11 !important;

    }


    .oh-about-jomoo
    .oh-about-panel h3 {

        letter-spacing:
            0 !important;

        word-spacing:
            0.025em !important;

        line-height:
            1.14 !important;

    }


    .oh-about-jomoo
    .oh-about-detail strong {

        line-height:
            1.35 !important;

    }


    .oh-about-jomoo
    .oh-about-detail span {

        line-height:
            1.42 !important;

    }


    /* VIDEO */

    .oh-hv2-title {

        letter-spacing:
            -0.003em !important;

        word-spacing:
            0.025em !important;

        line-height:
            1.10 !important;

    }


    .oh-hv2-title-2 {

        letter-spacing:
            -0.003em !important;

        line-height:
            1.11 !important;

    }


    .oh-hv2-word {

        margin-right:
            0.16em !important;

    }


    .oh-hv2-line + .oh-hv2-line {

        margin-top:
            0.12em;

    }

}



/* =========================================================
   14. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .oh-about-jomoo
    .oh-about-panel h2 {

        line-height:
            1.11 !important;

    }


    .oh-about-jomoo
    .oh-about-panel h3 {

        line-height:
            1.15 !important;

    }


    .oh-hv2-title {

        line-height:
            1.11 !important;

    }


    .oh-hv2-title-2 {

        line-height:
            1.12 !important;

    }

}


/* =========================================================
   ONEHARBOR ABOUT
   CINEMATIC STORY V6
   FULL V3 OVERRIDE

   Includes:
   - V3 animation reset
   - Typography refinement
   - Better letter spacing
   - Better line spacing
   - Sticky cinematic text stage
   - Editorial mask reveal
   - Stage progress indicator
   - Tablet / Mobile handling

   IMPORTANT:
   This CSS DOES NOT change:
   - Background image URL
   - background-size
   - background-position
   - ABOUT section image
   ========================================================= */


/* =========================================================
   00. SAFETY RESET
   覆盖旧V3留下的动画状态

   即使V6 JS加载失败，
   文字也至少保持可见。
   ========================================================= */

@media (min-width: 769px) {

    .oh-about-jomoo .oh-about-panel,
    .oh-about-jomoo .oh-about-label,
    .oh-about-jomoo .oh-about-year,
    .oh-about-jomoo .oh-about-panel h2,
    .oh-about-jomoo .oh-about-panel h3,
    .oh-about-jomoo .oh-about-detail,
    .oh-about-jomoo .oh-about-detail strong,
    .oh-about-jomoo .oh-about-detail span {

        animation:
            none !important;

        transition:
            none !important;

        visibility:
            visible !important;

        backface-visibility:
            hidden;

        -webkit-backface-visibility:
            hidden;

    }


    /*
     * V6尚未启动时，
     * 覆盖V3可能残留的opacity / blur。
     */

    .oh-about-jomoo:not(.oh-about-v6-active)
    .oh-about-panel,

    .oh-about-jomoo:not(.oh-about-v6-active)
    .oh-about-label,

    .oh-about-jomoo:not(.oh-about-v6-active)
    .oh-about-year,

    .oh-about-jomoo:not(.oh-about-v6-active)
    .oh-about-panel h2,

    .oh-about-jomoo:not(.oh-about-v6-active)
    .oh-about-panel h3,

    .oh-about-jomoo:not(.oh-about-v6-active)
    .oh-about-detail {

        opacity:
            1 !important;

        visibility:
            visible !important;

        filter:
            none !important;

    }

}



/* =========================================================
   01. ABOUT SECTION
   不修改背景，只保证Sticky可以正常工作
   ========================================================= */

@media (min-width: 769px) {

    .oh-about-jomoo {

        position:
            relative !important;

        overflow:
            visible !important;

        isolation:
            isolate;

    }


    .oh-about-jomoo
    > .uagb-container-inner-blocks-wrap {

        overflow:
            visible !important;

    }

}



/* =========================================================
   02. GLOBAL ABOUT TYPOGRAPHY
   ========================================================= */


/* ---------------------------------------------------------
   LABEL

   ABOUT ONEHARBOR
   GLOBAL VISION
   --------------------------------------------------------- */

.oh-about-jomoo
.oh-about-label {

    margin:
        0
        0
        11px !important;

    padding:
        0 !important;

    font-family:
        var(
            --oh-font-body,
            "Inter",
            Arial,
            sans-serif
        ) !important;

    font-size:
        clamp(
            9px,
            0.58vw,
            11px
        ) !important;

    line-height:
        1.25 !important;

    font-weight:
        500 !important;

    letter-spacing:
        0.23em !important;

    word-spacing:
        0.08em !important;

    text-transform:
        uppercase;

}



/* ---------------------------------------------------------
   MAIN H2

   Engineering Aluminum
   for Better Living Spaces.
   --------------------------------------------------------- */

.oh-about-jomoo
.oh-about-panel h2 {

    margin:
        0 !important;

    padding:
        0 !important;

    max-width:
        940px;

    font-family:
        var(
            --oh-font-display,
            "Manrope",
            Arial,
            sans-serif
        ) !important;

    font-size:
        clamp(
            38px,
            3.65vw,
            70px
        ) !important;

    /*
     * 不再使用以前过紧的0.95
     */

    line-height:
        1.085 !important;

    font-weight:
        400 !important;

    /*
     * 原来大约 -0.04em，
     * 对Manrope压得太狠。
     */

    letter-spacing:
        -0.012em !important;

    word-spacing:
        0.045em !important;

    font-kerning:
        normal;

}



/* ---------------------------------------------------------
   STAGE 4

   最后一段文字更长，
   单独控制。
   --------------------------------------------------------- */

.oh-about-jomoo
.oh-about-panel-4 h2 {

    max-width:
        960px !important;

    font-size:
        clamp(
            38px,
            3.55vw,
            68px
        ) !important;

    line-height:
        1.10 !important;

    letter-spacing:
        -0.010em !important;

    word-spacing:
        0.05em !important;

}



/* ---------------------------------------------------------
   YEAR

   2005 / 2025
   --------------------------------------------------------- */

.oh-about-jomoo
.oh-about-year {

    margin:
        0
        0
        11px !important;

    padding:
        0 !important;

    font-family:
        var(
            --oh-font-display,
            "Manrope",
            Arial,
            sans-serif
        ) !important;

    font-size:
        clamp(
            68px,
            7.2vw,
            132px
        ) !important;

    line-height:
        0.86 !important;

    font-weight:
        300 !important;

    letter-spacing:
        -0.035em !important;

}



/* ---------------------------------------------------------
   H3

   One Alu Aluminum Founded
   OneHarborOutdoor Established
   --------------------------------------------------------- */

.oh-about-jomoo
.oh-about-panel h3 {

    margin:
        0
        0
        12px !important;

    padding:
        0 !important;

    max-width:
        850px;

    font-family:
        var(
            --oh-font-display,
            "Manrope",
            Arial,
            sans-serif
        ) !important;

    font-size:
        clamp(
            24px,
            2.25vw,
            42px
        ) !important;

    line-height:
        1.12 !important;

    font-weight:
        400 !important;

    letter-spacing:
        -0.005em !important;

    word-spacing:
        0.035em !important;

}



/* =========================================================
   03. DETAIL

   21+ Years
   Aluminum Manufacturing Experience
   ========================================================= */

.oh-about-jomoo
.oh-about-detail {

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        3px !important;

    margin:
        0 !important;

    padding-left:
        13px !important;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.42
        );

}



/* Strong */

.oh-about-jomoo
.oh-about-detail strong {

    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        var(
            --oh-font-body,
            "Inter",
            Arial,
            sans-serif
        ) !important;

    font-size:
        clamp(
            14px,
            1vw,
            18px
        ) !important;

    line-height:
        1.32 !important;

    font-weight:
        500 !important;

    letter-spacing:
        0.005em !important;

    word-spacing:
        0.035em !important;

}



/* Description */

.oh-about-jomoo
.oh-about-detail span {

    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        var(
            --oh-font-body,
            "Inter",
            Arial,
            sans-serif
        ) !important;

    font-size:
        clamp(
            12px,
            0.78vw,
            15px
        ) !important;

    line-height:
        1.42 !important;

    font-weight:
        400 !important;

    letter-spacing:
        0.008em !important;

    word-spacing:
        0.035em !important;

}



/* =========================================================
   04. V6 HOST

   由V6 JS自动生成。

   Host覆盖整个ABOUT长图，
   但不会修改背景。
   ========================================================= */

.oh-about-v6-host {

    position:
        absolute !important;

    top:
        0 !important;

    right:
        0 !important;

    bottom:
        0 !important;

    left:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    z-index:
        20;

    pointer-events:
        none;

}



/* =========================================================
   05. STICKY STAGE
   ========================================================= */

.oh-about-v6-stage {

    position:
        sticky !important;

    top:
        0 !important;

    width:
        100% !important;

    height:
        100vh !important;

    height:
        100svh !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    pointer-events:
        none;

    isolation:
        isolate;

}



/* =========================================================
   06. CINEMATIC SIDE SHADE

   不是整屏黑罩。

   只增强左侧文字可读性。
   ========================================================= */

.oh-about-v6-shade {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    opacity:
        var(
            --oh-about-v6-shade,
            0.20
        );

    background:

        linear-gradient(
            90deg,

            rgba(
                3,
                7,
                10,
                0.46
            )
            0%,

            rgba(
                3,
                7,
                10,
                0.26
            )
            31%,

            rgba(
                3,
                7,
                10,
                0.08
            )
            58%,

            rgba(
                3,
                7,
                10,
                0
            )
            82%
        );

}



/* =========================================================
   07. V6 PANELS
   核心V3覆盖规则

   V3原来的：
   top 10 / 31 / 52 / 73
   position / opacity / transforms

   在V6启动后全部由这里接管。
   ========================================================= */

@media (min-width: 769px) {

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-panel {

        position:
            absolute !important;

        top:
            0 !important;

        right:
            0 !important;

        bottom:
            0 !important;

        left:
            0 !important;

        width:
            100% !important;

        max-width:
            none !important;

        height:
            100% !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:

            0
            clamp(
                42px,
                7vw,
                140px
            ) !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        justify-content:
            center !important;

        box-sizing:
            border-box !important;

        z-index:
            5;

        /*
         * 强制取消V3。
         */

        animation:
            none !important;

        transition:
            none !important;

        visibility:
            visible !important;

        /*
         * V6 JS只改变这些CSS变量。
         */

        opacity:
            var(
                --oh-v6-panel-opacity,
                0
            ) !important;

        filter:

            blur(
                var(
                    --oh-v6-panel-blur,
                    0px
                )
            ) !important;

        transform:

            translate3d(
                0,
                var(
                    --oh-v6-panel-y,
                    32px
                ),
                0
            )

            scale(
                var(
                    --oh-v6-panel-scale,
                    0.992
                )
            ) !important;

        transform-origin:
            left center !important;

        backface-visibility:
            hidden;

        -webkit-backface-visibility:
            hidden;

        will-change:
            opacity,
            transform;

    }

}



/* =========================================================
   08. TEXT WIDTH
   ========================================================= */

@media (min-width: 769px) {

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-panel > * {

        max-width:
            min(
                940px,
                68vw
            );

    }

}



/* =========================================================
   09. V6 META

   Labels + 2005 / 2025
   ========================================================= */

@media (min-width: 769px) {

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-label,

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-year {

        animation:
            none !important;

        transition:
            none !important;

        visibility:
            visible !important;

        opacity:
            var(
                --oh-v6-meta-opacity,
                0
            ) !important;

        filter:
            none !important;

        transform:

            translate3d(
                0,
                var(
                    --oh-v6-meta-y,
                    14px
                ),
                0
            ) !important;

        will-change:
            opacity,
            transform;

    }

}



/* =========================================================
   10. V6 MAIN TITLE MASK REVEAL

   H2 / H3
   ========================================================= */

@media (min-width: 769px) {

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-panel h2,

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-panel h3 {

        animation:
            none !important;

        transition:
            none !important;

        visibility:
            visible !important;

        opacity:
            var(
                --oh-v6-title-opacity,
                0
            ) !important;

        filter:
            none !important;

        transform:

            translate3d(
                0,
                var(
                    --oh-v6-title-y,
                    34px
                ),
                0
            ) !important;

        clip-path:

            inset(
                0
                0
                var(
                    --oh-v6-title-clip,
                    40%
                )
                0
            ) !important;

        -webkit-clip-path:

            inset(
                0
                0
                var(
                    --oh-v6-title-clip,
                    40%
                )
                0
            ) !important;

        transform-origin:
            left center !important;

        will-change:
            opacity,
            transform,
            clip-path;

    }

}



/* =========================================================
   11. V6 DETAIL
   ========================================================= */

@media (min-width: 769px) {

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-detail {

        animation:
            none !important;

        transition:
            none !important;

        visibility:
            visible !important;

        opacity:
            var(
                --oh-v6-detail-opacity,
                0
            ) !important;

        filter:
            none !important;

        transform:

            translate3d(
                0,
                var(
                    --oh-v6-detail-y,
                    18px
                ),
                0
            ) !important;

        will-change:
            opacity,
            transform;

    }

}



/* =========================================================
   12. V6 STAGE INDEX

   01 ━━━━━━━━━ 04
   ========================================================= */

.oh-about-v6-index {

    position:
        absolute;

    left:
        clamp(
            42px,
            7vw,
            140px
        );

    bottom:
        clamp(
            28px,
            5vh,
            55px
        );

    z-index:
        30;

    display:
        grid;

    grid-template-columns:
        auto
        120px
        auto;

    align-items:
        center;

    gap:
        13px;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    font-family:
        var(
            --oh-font-body,
            "Inter",
            Arial,
            sans-serif
        );

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        500;

    letter-spacing:
        0.16em;

}



/* Track */

.oh-about-v6-index-track {

    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        1px;

    overflow:
        hidden;

    background:
        rgba(
            255,
            255,
            255,
            0.22
        );

}



/* Fill */

.oh-about-v6-index-fill {

    position:
        absolute;

    top:
        0;

    right:
        auto;

    bottom:
        0;

    left:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    transform:

        scaleX(
            var(
                --oh-v6-progress,
                0
            )
        );

    transform-origin:
        left center;

}



/* =========================================================
   13. TABLET
   ========================================================= */

@media
(max-width: 1100px)
and
(min-width: 769px) {

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-panel {

        padding:

            0
            48px !important;

    }


    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-panel > * {

        max-width:
            72vw;

    }


    .oh-about-jomoo
    .oh-about-panel h2 {

        font-size:
            clamp(
                36px,
                4.5vw,
                52px
            ) !important;

        line-height:
            1.09 !important;

    }


    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        font-size:
            clamp(
                35px,
                4.35vw,
                50px
            ) !important;

    }


    .oh-about-jomoo
    .oh-about-year {

        font-size:
            clamp(
                64px,
                8vw,
                96px
            ) !important;

    }


    .oh-about-jomoo
    .oh-about-panel h3 {

        font-size:
            clamp(
                23px,
                2.7vw,
                34px
            ) !important;

    }


    .oh-about-v6-index {

        left:
            48px;

        grid-template-columns:
            auto
            90px
            auto;

    }

}



/* =========================================================
   14. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1600px) {

    .oh-about-jomoo.oh-about-v6-active
    .oh-about-v6-stage
    .oh-about-panel > * {

        max-width:
            980px;

    }


    .oh-about-jomoo
    .oh-about-panel h2 {

        max-width:
            950px;

    }


    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        max-width:
            980px !important;

    }

}



/* =========================================================
   15. MOBILE

   V6 JS不会在Mobile运行。

   这里：
   - 保留V3原来的Mobile布局
   - 强制取消旧动画隐藏
   - 更新新的字体比例
   ========================================================= */

@media (max-width: 768px) {


    /* -----------------------------------------------------
       NO V6 STAGE
       ----------------------------------------------------- */

    .oh-about-v6-host {

        display:
            none !important;

    }



    /* -----------------------------------------------------
       EVERYTHING MUST BE VISIBLE
       ----------------------------------------------------- */

    .oh-about-jomoo
    .oh-about-panel,

    .oh-about-jomoo
    .oh-about-label,

    .oh-about-jomoo
    .oh-about-year,

    .oh-about-jomoo
    .oh-about-panel h2,

    .oh-about-jomoo
    .oh-about-panel h3,

    .oh-about-jomoo
    .oh-about-detail {

        animation:
            none !important;

        transition:
            none !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        filter:
            none !important;

        clip-path:
            none !important;

        -webkit-clip-path:
            none !important;

    }



    /* -----------------------------------------------------
       LABEL
       ----------------------------------------------------- */

    .oh-about-jomoo
    .oh-about-label {

        margin-bottom:
            10px !important;

        font-size:
            9px !important;

        line-height:
            1.25 !important;

        letter-spacing:
            0.20em !important;

    }



    /* -----------------------------------------------------
       H2
       ----------------------------------------------------- */

    .oh-about-jomoo
    .oh-about-panel h2 {

        font-size:
            clamp(
                34px,
                9.5vw,
                46px
            ) !important;

        line-height:
            1.10 !important;

        letter-spacing:
            -0.005em !important;

        word-spacing:
            0.025em !important;

    }



    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        font-size:
            clamp(
                32px,
                8.8vw,
                43px
            ) !important;

        line-height:
            1.11 !important;

    }



    /* -----------------------------------------------------
       YEAR
       ----------------------------------------------------- */

    .oh-about-jomoo
    .oh-about-year {

        margin-bottom:
            10px !important;

        font-size:
            clamp(
                60px,
                18vw,
                92px
            ) !important;

        line-height:
            0.86 !important;

        letter-spacing:
            -0.035em !important;

    }



    /* -----------------------------------------------------
       H3
       ----------------------------------------------------- */

    .oh-about-jomoo
    .oh-about-panel h3 {

        margin-bottom:
            10px !important;

        font-size:
            clamp(
                23px,
                6.5vw,
                31px
            ) !important;

        line-height:
            1.14 !important;

        letter-spacing:
            0 !important;

        word-spacing:
            0.025em !important;

    }



    /* -----------------------------------------------------
       DETAIL
       ----------------------------------------------------- */

    .oh-about-jomoo
    .oh-about-detail {

        gap:
            3px !important;

        padding-left:
            11px !important;

    }


    .oh-about-jomoo
    .oh-about-detail strong {

        font-size:
            14px !important;

        line-height:
            1.35 !important;

    }


    .oh-about-jomoo
    .oh-about-detail span {

        font-size:
            11px !important;

        line-height:
            1.42 !important;

    }

}



/* =========================================================
   16. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .oh-about-jomoo
    .oh-about-panel h2 {

        font-size:
            33px !important;

        line-height:
            1.11 !important;

    }


    .oh-about-jomoo
    .oh-about-panel-4 h2 {

        font-size:
            30px !important;

        line-height:
            1.12 !important;

    }


    .oh-about-jomoo
    .oh-about-year {

        font-size:
            62px !important;

    }


    .oh-about-jomoo
    .oh-about-panel h3 {

        font-size:
            22px !important;

        line-height:
            1.15 !important;

    }


    .oh-about-jomoo
    .oh-about-detail strong {

        font-size:
            13px !important;

    }


    .oh-about-jomoo
    .oh-about-detail span {

        font-size:
            10px !important;

    }

}



/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

    .oh-about-jomoo
    .oh-about-panel,

    .oh-about-jomoo
    .oh-about-label,

    .oh-about-jomoo
    .oh-about-year,

    .oh-about-jomoo
    .oh-about-panel h2,

    .oh-about-jomoo
    .oh-about-panel h3,

    .oh-about-jomoo
    .oh-about-detail {

        animation:
            none !important;

        transition:
            none !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        filter:
            none !important;

        transform:
            none !important;

        clip-path:
            none !important;

        -webkit-clip-path:
            none !important;

    }

}