/* ===== 变量 =====
   --header-h : 固定头部高度(桌面 94px,≤1100px 为 64px)
   --screen-h : 每一段的高度,PC 端固定 600px(手机端见下方,保持原样)
   --k        : 设计稿缩放系数。设计稿按 1920×600 一段制作,k = min(宽/1920, 段高/600),PC 段高固定 600px 时 k = min(宽/1920, 1)。
                图片整体按 k 等比缩放,文案字号/间距也按 k 缩放(带下限),所以窗口怎么变图片都不会变形,
                图片与文案的相对位置也始终和设计稿一致。
*/
.finprime-our-clients { --header-h: 94px; --k: 1; color: #0c264c; background: #e6edf6; padding-top: var(--header-h); }
.finprime-our-clients .client-screen { --screen-h: 600px; }
@supports (width: calc(tan(atan2(1px, 1px)) * 1px)) { .finprime-our-clients .client-screen { --k: min(tan(atan2(100vw, 1920px)), tan(atan2(var(--screen-h), 600px))); } }

/* ===== 整屏滚动 =====
   触屏设备:用 CSS scroll-snap,每个模块一个吸附点,一次滑动一屏。
   鼠标/触控板:由 our-clients.js 接管滚轮,一次滚动固定翻一屏(最后一屏再往下进入页脚)。 */
@media (hover: none), (pointer: coarse) {
 html:has(.finprime-our-clients:not(.protected-page)) { scroll-snap-type: y mandatory; }
 html:has(.finprime-our-clients:not(.protected-page)) .finprime-footer { scroll-snap-align: end; }
}
@media (hover: none), (pointer: coarse) {
 html.finprime-clients-snap { scroll-snap-type: y mandatory; }
 html.finprime-clients-snap .finprime-footer { scroll-snap-align: end; }
}

.finprime-our-clients .client-screen { position: relative; isolation: isolate; overflow: hidden; min-height: var(--screen-h); scroll-margin-top: var(--header-h); scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; padding: max(40px, calc(60px * var(--k))) 0; }
.finprime-our-clients .screen-background { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== 文案 ===== */
.finprime-our-clients .screen-copy { position: relative; z-index: 2; max-width: 700px; width: calc(55% - 20px); min-height: calc(350px * var(--k)); display: flex; flex-direction: column; justify-content: space-between; margin-left: 107px; gap: calc(48px * var(--k)); overflow-wrap: anywhere; }
.finprime-our-clients .client-screen:nth-of-type(even) .screen-copy { margin-left: auto; text-align: right; }
.finprime-our-clients h2 { margin: 0; font-size: 56px; text-transform: capitalize; }
.finprime-our-clients .screen-intro { font-size: 18px; line-height: 1.2; font-weight: 500; margin: calc(40px * var(--k)) 0 0; }
.finprime-our-clients .screen-description { font-size: 16px; line-height: 1.5; opacity: .8; margin: calc(32px * var(--k)) 0 0; }
.finprime-our-clients .section-marker { display: block; width: 36.5px; height: 17.5px; }
.finprime-our-clients .client-screen:nth-of-type(even) .section-marker { margin-left: auto; }

/* ===== 图片舞台 =====
   .client-stage 是一块固定 1920×600 的设计稿画布,整体 transform: scale(k)。
   里面的图片/装饰按设计稿的百分比定位,画布宽高比永远是 2:1,所以图片比例永远不变。
   奇数屏(文案在左)画布贴右缩放,偶数屏(文案在右)贴左缩放,图片永远在文案的另一侧。 */
.finprime-our-clients .client-stage { position: absolute; z-index: -1; bottom: 0; width: 1920px; height: 600px; transform: scale(var(--k)); pointer-events: none; }
.finprime-our-clients .row1 .client-stage,.finprime-our-clients .row3 .client-stage,.finprime-our-clients .row5 .client-stage { right: 0; transform-origin: right bottom; }
.finprime-our-clients .row2 .client-stage,.finprime-our-clients .row4 .client-stage { left: 0; transform-origin: left bottom; }
.finprime-our-clients .client-art { position: absolute; z-index: -1; pointer-events: none; }
.finprime-our-clients .client-art picture { display: block; width: 100%; height: 100%; }
.finprime-our-clients .client-art picture img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.finprime-our-clients .row1 .client-art { left: 62.4%;
    top: 13.8%;
    width: 34.6%; }
.finprime-our-clients .row2 .client-art {     left: -1%;
    top: 39.7%;
    width: 40.5%; }
.finprime-our-clients .row3 .client-art { left: 62.4%;
    top: 40.5%;
    width: 34.6%; }
.finprime-our-clients .row4 .client-art { left: 10.5%;
    top: 9.7%;
    width: 31.4%; }
.finprime-our-clients .client-art-secondary { display: none; } /* no longer used in the design; hides it for any language file that still lists secondaryImage */
.finprime-our-clients .row5 .client-art {     left: 62.4%;
    top: 45.5%;
    width: 34.6%; }
.finprime-our-clients .screen-chevron { position: absolute; z-index: -2; pointer-events: none; }
.finprime-our-clients .screen-chevron img { display: block; max-width: none; }
.finprime-our-clients .row1 .screen-chevron-1 { left: 44.9%; top: 10.9%; }
.finprime-our-clients .row1 .screen-chevron-2 { left: 19.16%; top: 98%; opacity: 0.1; }
.finprime-our-clients .row2 .screen-chevron-1 { left: 46.04%; top: 10.9%; }
.finprime-our-clients .row2 .screen-chevron-2 { left: 75.57%; bottom: 0; }
.finprime-our-clients .row3 .screen-chevron-1 { left: 77.76%; top: 88%; }
.finprime-our-clients .row3 .screen-chevron-2 { left: 57.03%; top: 11%; }
.finprime-our-clients .row4 .screen-chevron-1 { left: 26.1%; top: 17.7%; opacity: 0.5;}
.finprime-our-clients .row4 .screen-chevron-2 { left: 71.56%; top: 76%; }
.finprime-our-clients .row5 .screen-chevron-1 { left: 31.04%; bottom: 0; }
.finprime-our-clients .row5 .screen-chevron-2 { left: 63.23%; top: 3%; }

/* ===== 导航 ===== */
.finprime-our-clients .screen-nav { position: absolute; top: max(16px, calc(24px * var(--k))); left: max(20px,calc((100vw - 1440px)/2)); display: flex; flex-direction: column; gap: max(20px, calc(60px * var(--k))); z-index: 3; }
.finprime-our-clients .screen-nav a { min-width: 100px; min-height: 44px; display: flex; align-items: center; color: #1b354e; font-size: 18px; opacity: .3; padding-left: 36px; position: relative; }
.finprime-our-clients .screen-nav a[aria-current] { color: #1B354E; font-weight: 500; font-size: 20px; opacity: 1; }
.finprime-our-clients .screen-nav a[aria-current]::before { content: ''; position: absolute; left: 0; top: 20px; width: 20px; height: 4px; background: #9c6a45; }
.finprime-our-clients .row2 .screen-nav a { color: #fff; opacity: .5; }
.finprime-our-clients .row2 .screen-nav a[aria-current] { color: #fff; opacity: 1; }
.finprime-our-clients .screen-next { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); min-height: 44px; font-size: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.finprime-our-clients .screen-nav a:focus-visible,.finprime-our-clients .screen-next:focus-visible,.finprime-our-clients .mobile-client-picker summary:focus-visible,.finprime-our-clients .mobile-client-picker a:focus-visible { outline: 2px solid #9c6a45; outline-offset: 3px; }
.finprime-our-clients .mobile-client-picker { display: none; }
.finprime-our-clients.protected-page { padding: 150px 20px; }
@media (hover: hover) and (pointer: fine) { .finprime-our-clients .screen-nav a:hover,.finprime-our-clients .screen-next:hover,.finprime-our-clients .mobile-client-picker a:hover { color: #9c6a45; text-decoration: underline; opacity: 1; } }
@media (max-width: 1600px) { .finprime-our-clients .screen-copy { margin-left: 100px; width: calc(50% - 100px); } .finprime-our-clients .screen-nav { left: 12px; } .finprime-our-clients .screen-nav a { padding-left: 28px; } }

/* ===== PC 端文案(按设计稿):标题不再强制每个单词首字母大写("and" 保持小写),导语/说明按设计稿宽度换行 ===== */
@media (min-width: 1101px) {
 .finprime-our-clients h2 { text-transform: none; }
 .finprime-our-clients .client-art picture,.finprime-our-clients .client-art picture img { height: auto; }
 .finprime-our-clients .client-art picture img { object-fit: initial; }
 .finprime-our-clients .screen-intro { max-width: 600px; }
 .finprime-our-clients .row1 .screen-intro { max-width: 640px; }
 .finprime-our-clients .screen-description { max-width: 600px; }
 .finprime-our-clients .client-screen:nth-of-type(even) .screen-intro,.finprime-our-clients .client-screen:nth-of-type(even) .screen-description { margin-left: auto; }
}

/* ===== 平板 / 手机(≤1100px):图片取消画布缩放,按原来的固定尺寸贴底居中 ===== */
@media (max-width: 1100px) {
 .finprime-our-clients { --header-h: 64px; }
 .finprime-our-clients .client-screen { --screen-h: max(calc(100vh - var(--header-h)), 748px); }
 @supports (height: 100svh) { .finprime-our-clients .client-screen { --screen-h: max(calc(100svh - var(--header-h)), 748px); } }
 .finprime-our-clients .client-screen:first-of-type { --screen-h: max(calc(100vh - var(--header-h)), 740px); }
 @supports (height: 100svh) { .finprime-our-clients .client-screen:first-of-type { --screen-h: max(calc(100svh - var(--header-h)), 740px); } }
 .finprime-our-clients .client-stage { display: contents; }
 .finprime-our-clients .client-screen { display: block; padding: 64px 0 320px; }
 .finprime-our-clients .screen-copy,.finprime-our-clients .client-screen:nth-of-type(even) .screen-copy { width: 100%; max-width: none; min-height: 0; margin: 0; gap: 24px; text-align: left; }
 .finprime-our-clients h2 { font-size: 40px; }
 .finprime-our-clients .screen-intro { font-size: 14px; line-height: 1.4; font-weight: 400; margin: 23px 0 0; }
 .finprime-our-clients .row3 .screen-intro,.finprime-our-clients .row4 .screen-intro,.finprime-our-clients .row5 .screen-intro { font-weight: 500; line-height: 1.1; }
 .finprime-our-clients .screen-description { font-size: 10px; line-height: 1.3; margin-top: 18.4px; }
 .finprime-our-clients .row1 .screen-description { max-width: 290px; }
 .finprime-our-clients .section-marker,.finprime-our-clients .client-screen:nth-of-type(even) .section-marker { width: 20.987px; height: 10.063px; margin-left: 0; }
 .finprime-our-clients .row1 .client-art { --w: min(96vw, 560px); width: var(--w); height: calc(var(--w) * .9460); left: auto; right: 0; top: auto; bottom: 0; }
 .finprime-our-clients .row2 .client-art { --w: min(108vw, 640px); width: var(--w); height: calc(var(--w) * .5041); left: 0; right: auto; top: auto; bottom: 0; }
 .finprime-our-clients .row3 .client-art { --w: min(104vw, 640px); width: var(--w); height: calc(var(--w) * .5948); left: auto; right: 0; top: auto; bottom: 0; }
 .finprime-our-clients .row4 .client-art { --w: min(80vw, 520px); width: var(--w); height: calc(var(--w) * .8089); left: calc(50% - var(--w) / 2); top: auto; bottom: 45px; }
 .finprime-our-clients .row5 .client-art { --w: min(104vw, 560px); width: var(--w); height: calc(var(--w) * .6177); left: auto; right: 0; top: auto; bottom: 16px; }
 .finprime-our-clients .row1 .screen-chevron-1 { left: calc(50% - 148.5px); top: auto; bottom: 160px; }
 .finprime-our-clients .row1 .screen-chevron-2 { left: calc(50% - 6.5px); top: auto; bottom: 265px; }
 .finprime-our-clients .row2 .screen-chevron-1 { left: calc(50% - 171.5px); top: auto; bottom: 222px; }
 .finprime-our-clients .row2 .screen-chevron-2 { left: calc(50% - 109.5px); top: auto; bottom: 153px; }
 .finprime-our-clients .row3 .screen-chevron-1 { left: calc(50% - 101.5px); top: auto; bottom: 219px; }
 .finprime-our-clients .row3 .screen-chevron-2,.finprime-our-clients .row4 .screen-chevron-2 { left: calc(50% + 55.5px); top: auto; bottom: -13px; }
 .finprime-our-clients .row4 .screen-chevron-1 { left: calc(50% - 148.5px); top: auto; bottom: 245px; }
 .finprime-our-clients .row5 .screen-chevron-1 { left: calc(50% - 130.5px); top: auto; bottom: 210px; }
 .finprime-our-clients .row5 .screen-chevron-2 { left: calc(50% - 30.5px); top: auto; bottom: 289px; }
 .finprime-our-clients .screen-nav { display: none; }
 .finprime-our-clients .mobile-client-picker { display: block; position: absolute; bottom: 162px; left: 20px; z-index: 4; }
 .finprime-our-clients .mobile-client-picker summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 32px; min-height: 60px; border-radius: 100px; color: #9c6a45; background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; font-size: 12px; list-style: none; }
 .finprime-our-clients .mobile-client-picker summary::-webkit-details-marker { display: none; }
 .finprime-our-clients .picker-total { color: rgba(12,38,76,.5); }
 .mobile-client-picker [aria-hidden="true"] { display: inline-block; width: 12px; height: 8px; background-image: url(/wp-content/themes/finprime/images/serial-number-interval.svg); background-size: cover; background-repeat: no-repeat; }
 .finprime-our-clients .mobile-client-picker nav { display: flex; gap: 4px; position: absolute; left: 40px; top: 0; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.94); }
 .finprime-our-clients .mobile-client-picker nav a { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: #5c6875; font-size: 12px; }
 .finprime-our-clients .mobile-client-picker nav a[aria-current] { color: #9c6a45; font-weight: 600; }
 .finprime-our-clients .mobile-client-picker:not([open]) nav { display: none; }
}