/* About 与 Contact 两个固定页的专属样式。
 *
 * 只放这两页独有的版式；通用表单、卡片与按钮词汇留在共享组件层，
 * 避免这两页的规则反向影响首页与目录页。 */

/*  About「WHO WE ARE + OUR STORY」合并模块
 * ≤991px 取消媒体列 sticky 并转单列；正文与当前阅读态不依赖 hover，触屏可直接阅读。
 * 只使用本模块自己的选择器，避免影响 Contact、首页与其他页面。 */
/* hover 与当前阅读项共用同一组激活参数；--pattrix-story-active 是激活态的唯一色源。 */
.pattrix-about-who { --pattrix-about-reveal-y: 56px; --pattrix-about-reveal-duration: 500ms; --pattrix-about-reveal-stagger: 150ms; --pattrix-about-activate-duration: 400ms; --pattrix-about-ease-quad-out: cubic-bezier(.25, .46, .45, .94); --pattrix-about-ease-sine-in-out: cubic-bezier(.37, 0, .63, 1); --pattrix-story-active: var(--pattrix-color-text); background: var(--pattrix-color-bg); }
.pattrix-about-who-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(40px, 7vw, 112px); align-items: start; width: min(100%, var(--pattrix-layout-wide)); margin-inline: auto; }
.pattrix-about-who-media { position: sticky; top: clamp(24px, 8vh, 88px); align-self: start; min-width: 0; }
.pattrix-about-who-media picture, .pattrix-about-who-media img { display: block; width: 100%; }
.pattrix-about-who-media img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pattrix-about-who-content { min-width: 0; overflow-wrap: break-word; }
.pattrix-about-who-intro { display: grid; justify-items: start; gap: var(--wp--preset--spacing--30); }
.pattrix-about-who-eyebrow { color: var(--pattrix-color-interaction); }
.pattrix-about-who-intro h2 { max-width: 520px; margin: 0; color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--section-title); font-weight: 500; letter-spacing: 0; line-height: 1.12; }
.pattrix-about-who-company { margin: 0; color: var(--pattrix-color-text); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: .04em; line-height: 1.45; text-transform: uppercase; }
.pattrix-about-who-lead { max-width: 620px; margin: 0; color: var(--pattrix-color-text-secondary); font-size: var(--wp--preset--font-size--body-large); line-height: 1.55; }
.pattrix-about-who-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 100%; margin: var(--wp--preset--spacing--40) 0 0; padding: var(--wp--preset--spacing--40) 0 0; border-top: 1px solid var(--pattrix-color-border); list-style: none; }
.pattrix-about-who-proof li { position: relative; min-width: 0; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) 0 0; }
.pattrix-about-who-proof li::before { position: absolute; top: 0; left: 0; width: var(--wp--preset--spacing--50); height: 2px; background: var(--pattrix-color-interaction); content: ""; }
.pattrix-about-who-proof li + li { padding-left: var(--wp--preset--spacing--30); }
.pattrix-about-who-proof li + li::before { left: var(--wp--preset--spacing--30); }
.pattrix-about-who-proof strong { display: block; color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 500; line-height: 1.15; }
.pattrix-about-who-proof span { display: block; margin-top: var(--wp--preset--spacing--20); color: var(--pattrix-color-text-secondary); font-size: var(--wp--preset--font-size--caption); line-height: 1.45; }
.pattrix-about-who-cta { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); width: fit-content; margin: var(--wp--preset--spacing--10) 0 0; color: var(--pattrix-color-interaction); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; transition: color var(--pattrix-duration-fast) var(--pattrix-ease-standard); }
.pattrix-about-who-cta.is-unavailable { color: var(--pattrix-color-text-muted); }

.pattrix-about-story { margin-top: clamp(56px, 7vw, 104px); }
.pattrix-about-story-intro { margin-bottom: var(--wp--preset--spacing--40); }
.pattrix-about-story-intro h3 { max-width: 520px; margin: var(--wp--preset--spacing--20) 0 0; color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 500; line-height: 1.15; }
.pattrix-about-story-list { --pattrix-story-axis: clamp(150px, 22%, 220px); --pattrix-story-node-size: 12px; --pattrix-story-row-pad: clamp(36px, 4vw, 56px); position: relative; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pattrix-color-border-strong); }
.pattrix-about-story-list::before { position: absolute; top: 0; bottom: 0; left: var(--pattrix-story-axis); width: 1px; background: var(--pattrix-color-border-strong); content: ""; }
.pattrix-about-story-list.pattrix-about-story-progress::before { background: var(--pattrix-color-border-strong); }
.pattrix-about-story-list > li { position: relative; display: grid; grid-template-columns: var(--pattrix-story-axis) minmax(0, 1fr); gap: var(--wp--preset--spacing--60); min-width: 0; padding: var(--pattrix-story-row-pad) 0; border-bottom: 1px solid var(--pattrix-color-border); }
.pattrix-about-story-list > li::before { position: absolute; top: calc(var(--pattrix-story-row-pad) + 2px); left: calc(var(--pattrix-story-axis) - (var(--pattrix-story-node-size) / 2)); box-sizing: border-box; width: var(--pattrix-story-node-size); height: var(--pattrix-story-node-size); background: var(--pattrix-color-bg); border: 1px solid var(--pattrix-color-border-strong); border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--pattrix-story-active) 0%, transparent); content: ""; transition: background-color var(--pattrix-about-activate-duration) var(--pattrix-about-ease-sine-in-out), border-color var(--pattrix-about-activate-duration) var(--pattrix-about-ease-sine-in-out), box-shadow var(--pattrix-about-activate-duration) var(--pattrix-about-ease-sine-in-out); }
.pattrix-about-story-segment { position: absolute; top: calc(var(--pattrix-story-row-pad) + 12px); left: calc(var(--pattrix-story-axis) - 1px); width: 2px; height: 100%; color: var(--pattrix-color-text); overflow: visible; pointer-events: none; transition: opacity var(--pattrix-about-activate-duration) var(--pattrix-about-ease-sine-in-out); }
.pattrix-about-story-segment path { vector-effect: non-scaling-stroke; transition: stroke-dashoffset var(--pattrix-about-activate-duration) var(--pattrix-about-ease-sine-in-out); }
.pattrix-about-story-label { margin: 0; padding-right: var(--wp--preset--spacing--50); color: var(--pattrix-color-text-muted); font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; transition: color var(--pattrix-about-activate-duration) var(--pattrix-about-ease-sine-in-out); }
.pattrix-about-story-content { position: relative; min-width: 0; }
.pattrix-about-story-content h4 { margin: 0; color: var(--pattrix-color-text-muted); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 500; line-height: 1.15; transition: color var(--pattrix-about-activate-duration) var(--pattrix-about-ease-sine-in-out); }
.pattrix-about-story-content p { margin: var(--wp--preset--spacing--30) 0 0; color: var(--pattrix-color-text-secondary); line-height: 1.6; }
/* 强调线动画 width 0→100%（不是 scaleX —— scaleX 会把 2px 线一起缩放变形）。 */
.pattrix-about-story-rule { position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--pattrix-story-active); transition: width var(--pattrix-about-activate-duration) var(--pattrix-about-ease-sine-in-out); }
.pattrix-about-story-list > li.is-current .pattrix-about-story-rule { width: 100%; }
.pattrix-about-story-list > li.is-current .pattrix-about-story-label, .pattrix-about-story-list > li.is-current .pattrix-about-story-content h4 { color: var(--pattrix-story-active); }
.pattrix-about-story-list > li.is-current::before { background: var(--pattrix-story-active); border-color: var(--pattrix-story-active); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pattrix-story-active) 10%, transparent); }

/* reveal 初始态只在 JS 添加就绪类之后生效：脚本未执行时内容保持可见。
 * 触发线为元素顶边到达视口 70%，每个元素只播放一次。 */
.pattrix-about-who-ready .pattrix-about-who-media { opacity: 0; transition: opacity var(--pattrix-about-reveal-duration) var(--pattrix-about-ease-quad-out); }
.pattrix-about-who-ready .pattrix-about-who-media.is-visible { opacity: 1; }
.pattrix-about-who-ready [data-pattrix-who-reveal], .pattrix-about-story-list.pattrix-reveal-ready > li { opacity: 0; transform: translateY(var(--pattrix-about-reveal-y)); transition: opacity var(--pattrix-about-reveal-duration) var(--pattrix-about-ease-quad-out), transform var(--pattrix-about-reveal-duration) var(--pattrix-about-ease-quad-out); transition-delay: var(--pattrix-reveal-delay, 0ms); }
.pattrix-about-who-ready [data-pattrix-who-reveal].is-visible, .pattrix-about-story-list.pattrix-reveal-ready > li.is-visible { opacity: 1; transform: none; }
/* 首帧定态：加就绪类的那一帧不能跑过渡，否则折叠线以下内容会先淡出一次。 */
.pattrix-about-who-arming [data-pattrix-who-reveal], .pattrix-about-who-arming .pattrix-about-who-media, .pattrix-about-who-arming .pattrix-about-story-list.pattrix-reveal-ready > li { transition: none; }

/* 逐字着色：JS 拆分为字符后按滚动进度逐字点亮（scrub 1.5、范围 = 元素高 + 0.4 视口高）。 */
.pattrix-about-who-ready [data-pattrix-text-reveal] .pattrix-about-who-char, .pattrix-about-who-ready [data-pattrix-text-reveal] .pattrix-about-story-char { color: var(--pattrix-color-text-muted); transition: color 120ms var(--pattrix-ease-standard); }
.pattrix-about-who-ready [data-pattrix-text-reveal] .pattrix-about-who-char.is-lit, .pattrix-about-who-ready [data-pattrix-text-reveal] .pattrix-about-story-char.is-lit, .pattrix-about-who-ready [data-pattrix-text-reveal].is-text-revealed .pattrix-about-who-char, .pattrix-about-who-ready [data-pattrix-text-reveal].is-text-revealed .pattrix-about-story-char { color: var(--pattrix-color-text); }
.pattrix-about-cases { background: var(--pattrix-color-surface); }
.pattrix-about-case-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }
.pattrix-about-case-grid article { position: relative; min-height: clamp(320px, 34vw, 520px); overflow: hidden; background: var(--pattrix-color-inverse); }
.pattrix-about-case-grid article:nth-child(n + 2) { min-height: clamp(280px, 28vw, 440px); }
.pattrix-about-case-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--pattrix-duration-base) var(--pattrix-ease-standard); }
.pattrix-about-case-overlay { position: absolute; inset: auto 0 0; display: grid; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); color: var(--pattrix-color-on-inverse); background: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .76) 100%); }
.pattrix-about-case-overlay p { margin: 0; font-size: var(--wp--preset--font-size--caption); font-weight: 600; letter-spacing: .05em; line-height: 1.3; text-transform: uppercase; }
.pattrix-about-case-overlay h3 { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 500; line-height: 1.15; }
.pattrix-about-case-overlay span { color: rgb(255 255 255 / .84); line-height: 1.5; }
.pattrix-about-case-grid.pattrix-reveal-ready article { opacity: 0; transform: translateY(12px); transition: opacity var(--pattrix-duration-base) var(--pattrix-ease-standard), transform var(--pattrix-duration-base) var(--pattrix-ease-standard); transition-delay: var(--pattrix-reveal-delay, 0ms); }
.pattrix-about-case-grid.pattrix-reveal-ready article.is-visible { opacity: 1; transform: none; }
.pattrix-about-certificates-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }
.pattrix-about-certificates figure { margin: 0; border: 1px solid var(--pattrix-color-border); background: var(--pattrix-color-bg); }
.pattrix-about-certificate-media { aspect-ratio: var(--pattrix-media-frame-ratio, 4 / 3); overflow: hidden; background: var(--pattrix-color-surface-strong); border-bottom: 1px solid var(--pattrix-color-border); }
.pattrix-about-certificate-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pattrix-about-certificate-trigger { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.pattrix-about-certificate-trigger:focus-visible { outline: 2px solid var(--pattrix-color-focus); outline-offset: -4px; }
.pattrix-about-placeholder { aspect-ratio: 4 / 3; background: var(--pattrix-color-surface-strong); border-bottom: 1px solid var(--pattrix-color-border); }
.pattrix-about-certificates figcaption { display: grid; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); }
.pattrix-about-certificates figcaption span { color: var(--pattrix-color-text-muted); font-size: var(--wp--preset--font-size--caption); letter-spacing: .04em; text-transform: uppercase; }
.pattrix-about-certificates figcaption strong { color: var(--pattrix-color-text); font-size: var(--wp--preset--font-size--body); font-weight: 600; }
.pattrix-about-certificate-detail { color: var(--pattrix-color-text-muted); font-size: var(--wp--preset--font-size--caption); line-height: 1.4; }
.pattrix-about-certificate-link { color: var(--pattrix-color-text); font-size: var(--wp--preset--font-size--caption); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.pattrix-about-team-grid, .pattrix-about-services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pattrix-color-border); border-left: 1px solid var(--pattrix-color-border); }
.pattrix-about-team-grid article, .pattrix-about-services-grid article { padding: var(--wp--preset--spacing--50); border-right: 1px solid var(--pattrix-color-border); border-bottom: 1px solid var(--pattrix-color-border); }
.pattrix-about-team-media { aspect-ratio: 4 / 5; margin: calc(-1 * var(--wp--preset--spacing--50)) calc(-1 * var(--wp--preset--spacing--50)) var(--wp--preset--spacing--50); background: var(--pattrix-color-surface-strong); border-bottom: 1px solid var(--pattrix-color-border); }
.pattrix-about-contact-cta { padding: var(--wp--preset--spacing--90) var(--pattrix-layout-gutter); background: var(--pattrix-color-inverse); color: var(--pattrix-color-on-inverse); }
.pattrix-about-contact-cta > div { width: min(100%, var(--pattrix-layout-content)); margin: 0 auto; }
.pattrix-about-contact-cta h2 { max-width: 720px; margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--section-title); font-weight: 500; line-height: 1.1; }
.pattrix-about-contact-cta p { max-width: 620px; margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50); color: var(--pattrix-color-on-inverse); }
.pattrix-contact-location { padding: var(--wp--preset--spacing--90) var(--pattrix-layout-gutter); background: var(--pattrix-color-surface); }
.pattrix-contact-location-inner { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: var(--wp--preset--spacing--80); align-items: center; width: min(100%, var(--pattrix-layout-wide)); margin: 0 auto; }
.pattrix-contact-location-copy h2 { margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40); color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--section-title); font-weight: 500; line-height: 1.12; }
.pattrix-contact-location-company { margin: 0 0 var(--wp--preset--spacing--20); color: var(--pattrix-color-text); font-weight: 600; }
.pattrix-contact-location address { max-width: 420px; color: var(--pattrix-color-text-secondary); font-style: normal; line-height: 1.6; }
.pattrix-contact-location-link { display: inline-flex; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--50); color: var(--pattrix-color-interaction); font-weight: 600; text-decoration: none; transition: color var(--pattrix-duration-fast) var(--pattrix-ease-standard), transform var(--pattrix-duration-fast) var(--pattrix-ease-standard); }
.pattrix-contact-location-link:active { transform: scale(.98); }
.pattrix-contact-location-map { aspect-ratio: 16 / 9; overflow: hidden; background: var(--pattrix-color-surface-strong); }
.pattrix-contact-location-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.pattrix-about-process { background: var(--pattrix-color-bg); }
.pattrix-about-process .pattrix-section-intro { max-width: 720px; }
.pattrix-about-process-gallery { display: flex; gap: 6px; min-height: clamp(360px, 42vw, 580px); overflow: hidden; }
.pattrix-about-process-card { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; padding: 0; overflow: hidden; color: var(--pattrix-color-on-inverse); background: var(--pattrix-color-inverse); border: 1px solid var(--pattrix-color-border-strong); border-radius: 0; cursor: pointer; transition: flex-grow var(--pattrix-duration-base) var(--pattrix-ease-standard), border-color var(--pattrix-duration-fast) var(--pattrix-ease-standard); }
.pattrix-about-process-card.is-active { flex-grow: 3.8; border-color: var(--pattrix-color-interaction); }
.pattrix-about-process-media, .pattrix-about-process-card picture, .pattrix-about-process-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.pattrix-about-process-card img { object-fit: cover; transition: transform var(--pattrix-duration-base) var(--pattrix-ease-standard), filter var(--pattrix-duration-base) var(--pattrix-ease-standard); }
.pattrix-about-process-card::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .06) 16%, rgb(0 0 0 / .82) 100%); content: ""; }
.pattrix-about-process-copy { position: absolute; right: var(--wp--preset--spacing--30); bottom: var(--wp--preset--spacing--30); left: var(--wp--preset--spacing--30); display: grid; gap: var(--wp--preset--spacing--20); text-align: left; }
.pattrix-about-process-title { color: var(--pattrix-color-on-inverse); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 500; line-height: 1.12; }
.pattrix-about-process-detail { color: rgb(255 255 255 / .84); font-size: var(--wp--preset--font-size--small); line-height: 1.55; opacity: 0; transform: translateY(8px); transition: opacity var(--pattrix-duration-fast) var(--pattrix-ease-standard), transform var(--pattrix-duration-fast) var(--pattrix-ease-standard); }
.pattrix-about-process-card.is-active .pattrix-about-process-detail { opacity: 1; transform: none; }
.pattrix-about-process-card:not(.is-active) .pattrix-about-process-title { writing-mode: vertical-rl; transform: rotate(180deg); }
.pattrix-about-process-card:focus-visible { z-index: 1; outline: 2px solid var(--pattrix-color-interaction); outline-offset: -2px; }
.pattrix-about-process-gallery[data-pattrix-process-input="keyboard"] .pattrix-about-process-card, .pattrix-about-process-gallery[data-pattrix-process-input="keyboard"] .pattrix-about-process-card img, .pattrix-about-process-gallery[data-pattrix-process-input="keyboard"] .pattrix-about-process-detail { transition-duration: 0ms; }
@media (hover: hover) and (pointer: fine) { .pattrix-contact-location-link:hover { color: var(--pattrix-color-text); } .pattrix-about-case-grid article:hover img { transform: scale(1.02); } .pattrix-about-process-card:hover img { transform: scale(1.025); } .pattrix-about-process-card:hover { border-color: var(--pattrix-color-interaction); } .pattrix-about-who-cta:hover { color: var(--pattrix-color-text); } /* hover 只加视觉强调：故事正文在任何设备上都直接可读。 */ .pattrix-about-story-list > li:hover .pattrix-about-story-rule { width: 100%; } .pattrix-about-story-list > li:hover .pattrix-about-story-label, .pattrix-about-story-list > li:hover .pattrix-about-story-content h4 { color: var(--pattrix-story-active); } .pattrix-about-story-list > li:hover::before { background: var(--pattrix-story-active); border-color: var(--pattrix-story-active); } }
@media (max-width: 991px) { .pattrix-about-who-layout { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--60); } .pattrix-about-who-media { position: static; top: auto; } .pattrix-about-story-list { padding-left: 38px; } .pattrix-about-story-list::before { left: 6px; } .pattrix-about-story-list > li { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); } .pattrix-about-story-list > li::before { left: -38px; } .pattrix-about-story-segment { left: -33px; } .pattrix-contact-location-inner { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); } }
@media (max-width: 767px) { .pattrix-about-who-layout { grid-template-columns: minmax(0, 1fr); } .pattrix-about-who-media img { aspect-ratio: auto; height: min(82vw, 320px); object-fit: cover; } .pattrix-about-who-intro h2 { font-size: var(--wp--preset--font-size--h-3); } .pattrix-about-who-proof { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--wp--preset--spacing--30); } .pattrix-about-who-proof li, .pattrix-about-who-proof li + li { padding: var(--wp--preset--spacing--30) 0 0; } .pattrix-about-who-proof li + li { border-top: 1px solid var(--pattrix-color-border); } .pattrix-about-who-proof li + li::before { left: 0; } .pattrix-about-story { margin-top: var(--wp--preset--spacing--70); } .pattrix-about-story-list { --pattrix-story-row-pad: var(--wp--preset--spacing--50); } .pattrix-about-certificates-grid { grid-auto-columns: minmax(260px, 82vw); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; padding-bottom: var(--wp--preset--spacing--20); scroll-snap-type: x mandatory; } .pattrix-about-certificates figure { scroll-snap-align: start; } /* 生产工序是有序信息，不在移动端要求横向滑动才能逐项阅读。 */ .pattrix-about-process-gallery { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); min-height: 0; overflow: visible; } .pattrix-about-process-card, .pattrix-about-process-card.is-active { min-height: min(110vw, 440px); } .pattrix-about-process-card:not(.is-active) .pattrix-about-process-title { writing-mode: horizontal-tb; transform: none; } .pattrix-about-process-card:not(.is-active) .pattrix-about-process-detail { opacity: 1; transform: none; } .pattrix-about-case-grid, .pattrix-about-team-grid, .pattrix-about-services-grid { grid-template-columns: 1fr; } .pattrix-about-case-grid article, .pattrix-about-case-grid article:nth-child(n + 2) { min-height: min(118vw, 460px); } .pattrix-about-contact-cta, .pattrix-contact-location { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); } }
@media (max-width: 479px) { .pattrix-about-who-layout { gap: var(--wp--preset--spacing--50); } .pattrix-about-who-media img { height: min(78vw, 264px); } .pattrix-about-story { margin-top: var(--wp--preset--spacing--60); } }
@media (prefers-reduced-motion: reduce) { .pattrix-about *, .pattrix-contact-location * { scroll-behavior: auto; transition-duration: .01ms !important; } /* 缩减动效下合并模块内容直接可见，SVG 路径直接显示终态。 */ .pattrix-about-who-ready .pattrix-about-who-media, .pattrix-about-who-ready [data-pattrix-who-reveal], .pattrix-about-story-list.pattrix-reveal-ready > li, .pattrix-about-case-grid.pattrix-reveal-ready article { opacity: 1; transform: none; } .pattrix-about-story-list.pattrix-reveal-ready > li::before { background: var(--pattrix-story-active); border-color: var(--pattrix-story-active); transform: none; } .pattrix-about-story-list > li .pattrix-about-story-segment path { stroke-dashoffset: 0 !important; } .pattrix-about-who-ready [data-pattrix-text-reveal] .pattrix-about-who-char, .pattrix-about-who-ready [data-pattrix-text-reveal] .pattrix-about-story-char { color: inherit; } }

/*
   Contact 页

   地图直接嵌入，不展示工厂图片或手动加载入口：地点确认是这一页的主任务，
   不应再要求一次点击或等待脚本（另见 pattrix-about-contact-overrides.css）。 */

/* 独立页面紧接 Header，不继承区块编辑器的默认段间距。 */
:where(.wp-site-blocks) > :is(main.pattrix-about, main.pattrix-contact) { margin-block-start: 0; }
.pattrix-page-hero-banner--contact .pattrix-page-hero-banner__scrim { background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .66) 60%, rgb(0 0 0 / .64) 100%); }
.pattrix-page-hero-banner--contact .pattrix-page-hero-banner__description { color: var(--pattrix-color-on-inverse); font-size: clamp(18px, 1.5vw, 20px); font-weight: 500; line-height: 1.6; text-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.pattrix-contact .pattrix-contact-container { box-sizing: border-box; width: min(100% - 30px, 1520px); }
.pattrix-contact-form-section { padding-block: clamp(64px, 6vw, 96px); background: var(--pattrix-color-surface); }
.pattrix-contact-workspace { display: grid; grid-template-columns: minmax(0, 58fr) minmax(360px, 42fr); gap: 0; align-items: stretch; overflow: hidden; background: var(--pattrix-color-bg); border: 1px solid var(--pattrix-color-border); }
.pattrix-contact-workspace-main { min-width: 0; padding: clamp(32px, 4vw, 64px); }
.pattrix-contact-overview { display: grid; gap: var(--wp--preset--spacing--60); }
.pattrix-contact-intro h2 { max-width: 22ch; font-size: var(--wp--preset--font-size--h-2); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.pattrix-contact-intro > p:not(.pattrix-contact-kicker) { max-width: 60ch; color: var(--pattrix-color-text-secondary); font-size: var(--wp--preset--font-size--body-large); }
.pattrix-contact-intro p.pattrix-contact-response { color: var(--pattrix-color-text); }
.pattrix-contact-form-panel { min-width: 0; padding-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--pattrix-color-border); }
.pattrix-contact .pattrix-contact-submit { box-sizing: border-box; width: min(100%, 320px); min-width: min(100%, 280px); min-height: 56px; padding: 14px 32px; border-radius: var(--pattrix-radius-control); font-size: var(--wp--preset--font-size--body-large); font-weight: 600; }
.pattrix-contact .pattrix-contact-submit:not(:disabled) { background: var(--pattrix-color-brand); color: var(--pattrix-color-on-inverse); }
.pattrix-contact .pattrix-contact-submit:not(:disabled):hover { background: var(--pattrix-color-interaction); }
.pattrix-contact .pattrix-contact-submit:focus-visible { outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-interaction)); outline-offset: 3px; }
.pattrix-contact .pattrix-contact-form[aria-busy="true"] .pattrix-contact-submit { background: var(--pattrix-color-interaction); color: var(--pattrix-color-on-inverse); border-color: var(--pattrix-color-interaction); }
/* 标题与副标题的距离只由 grid gap 决定；保留全局标题外边距会让副标题在视觉上归属卡片而不是标题。 */
.pattrix-contact-direct { display: grid; gap: var(--wp--preset--spacing--30); margin-top: clamp(64px, 7vw, 104px); padding-top: 0; border-top: 0; text-align: left; }
.pattrix-contact-direct h2 { margin: 0; font-size: clamp(28px, 3.2vw, 48px); font-weight: 600; line-height: 1.2; }
/* 正文必须有行长上限：1520px 容器里整宽排版会让一行超过 100 字符。 */
.pattrix-contact-direct > p { max-width: 60ch; margin: 0; font-size: 20px; }
.pattrix-contact-direct .pattrix-contact-direct-link { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; min-height: 44px; gap: var(--wp--preset--spacing--20); color: var(--pattrix-color-text); font-size: 20px; font-weight: 400; text-decoration: none; text-align: left; }
.pattrix-contact-direct-link .pattrix-ui-icon { --pattrix-icon-size: 24px; }
.pattrix-contact-direct-link span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pattrix-contact-direct .pattrix-contact-direct-link:hover { color: var(--pattrix-color-interaction); text-decoration: underline; }
/* 可变人数按三列宽度换行，末行居中以免留下偏在一侧的空位。 */
.pattrix-contact-advisors { --pattrix-advisor-gap: var(--wp--preset--spacing--50); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pattrix-advisor-gap); margin-top: var(--wp--preset--spacing--60); }
/* 列宽与 100% 按钮包含内边距和边框，避免实际宽度超出换行预算。 */
.pattrix-contact-advisor, .pattrix-contact-advisor :is(a, button) { box-sizing: border-box; }
.pattrix-contact-advisor { display: flex; flex: 0 1 calc((100% - 2 * var(--pattrix-advisor-gap)) / 3); flex-direction: column; min-width: 0; padding: clamp(24px, 2.5vw, 32px); color: var(--pattrix-color-text); background: var(--pattrix-color-bg); border: 1px solid var(--pattrix-color-border); border-radius: var(--pattrix-radius-control); text-align: left; transition: border-color var(--pattrix-duration-fast) var(--pattrix-ease-out), box-shadow var(--pattrix-duration-fast) var(--pattrix-ease-out); }
.pattrix-contact-advisor:hover, .pattrix-contact-advisor:focus-within { border-color: var(--pattrix-color-border-strong); box-shadow: 0 10px 24px color-mix(in srgb, var(--pattrix-color-inverse) 6%, transparent); }
.pattrix-contact-advisor-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 1.6vw, 24px); margin-bottom: var(--wp--preset--spacing--50); }
.pattrix-contact-advisor-avatar { display: block; width: 128px; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--pattrix-color-bg) 88%, var(--pattrix-color-inverse)); border: 1px solid var(--pattrix-color-border); border-radius: var(--pattrix-radius-control); }
.pattrix-contact-advisor-avatar picture, .pattrix-contact-advisor-avatar img { display: block; width: 100%; height: 100%; }
/* 白底证件照需要放大并上移才能让脸部落在裁切中心；更换头像素材时须核对裁切参数。 */
.pattrix-contact-advisor-avatar img { object-fit: cover; mix-blend-mode: multiply; transform: translateY(-16%) scale(1.38); transform-origin: center; }
.pattrix-contact-advisor-copy { display: grid; gap: 8px; min-width: 0; }
.pattrix-contact-advisor-copy h3 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.pattrix-contact-advisor-role { color: var(--pattrix-color-text-muted); font-size: 18px; line-height: 1.4; }
.pattrix-contact-advisor-initial { display: grid; width: 100%; height: 100%; place-items: center; color: var(--pattrix-color-text); font-size: var(--wp--preset--font-size--h-3); font-weight: 600; }
.pattrix-contact-advisor-details { display: grid; width: 100%; margin-top: auto; margin-bottom: var(--wp--preset--spacing--50); border-top: 1px solid var(--pattrix-color-border); }
.pattrix-contact-advisor-details .pattrix-contact-direct-link { justify-content: flex-start; width: 100%; min-height: 64px; padding-block: 16px; border-bottom: 1px solid var(--pattrix-color-border); font-size: 20px; }
.pattrix-contact-advisor-details .pattrix-contact-direct-link .pattrix-ui-icon { --pattrix-icon-size: 24px; flex-shrink: 0; }
/* 两种渠道共用等宽轨道，链接须填满轨道以覆盖全局 fit-content，避免文字长度改变点击区域。 */
.pattrix-contact-advisor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); width: 100%; }
.pattrix-contact-direct .pattrix-contact-advisor-action { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; min-height: 56px; padding: 10px 8px; color: var(--pattrix-color-text); background: var(--pattrix-color-bg); border: 1px solid var(--pattrix-color-border-strong); border-radius: var(--pattrix-radius-control); font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--pattrix-duration-fast) var(--pattrix-ease-out), border-color var(--pattrix-duration-fast) var(--pattrix-ease-out), color var(--pattrix-duration-fast) var(--pattrix-ease-out); }
.pattrix-contact-direct .pattrix-contact-advisor-whatsapp .pattrix-ui-icon { color: #08663c; }
.pattrix-contact-direct .pattrix-contact-advisor-wechat .pattrix-ui-icon { color: #285f20; }
.pattrix-contact-direct .pattrix-contact-advisor-whatsapp:hover { background: #edf7f1; border-color: #08663c; color: #08663c; }
.pattrix-contact-direct .pattrix-contact-advisor-wechat:hover { background: #f0f7ed; border-color: #285f20; color: #285f20; }
.pattrix-contact-advisor :is(a, button):focus-visible { outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-interaction)); outline-offset: 3px; }
.pattrix-contact-advisor-action .pattrix-ui-icon { --pattrix-icon-size: 20px; }
.pattrix-ui-icon--wechat { -webkit-mask-image: url("../icons/simple-icons/wechat.svg"); mask-image: url("../icons/simple-icons/wechat.svg"); }
.pattrix-ui-icon--whatsapp { -webkit-mask-image: url("../icons/simple-icons/whatsapp.svg"); mask-image: url("../icons/simple-icons/whatsapp.svg"); }
.pattrix-contact-advisor-unavailable { align-self: center; color: var(--pattrix-color-text-muted); font-size: var(--wp--preset--font-size--small); }
.pattrix-contact-location-placeholder { display: none; }
.pattrix-contact-location-map iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* 地图和地址共用正常流，地址换行时不会遮挡地图定位或控件。 */
.pattrix-contact-workspace-map { display: grid; grid-template-rows: minmax(360px, 1fr) auto; min-height: 680px; background: var(--pattrix-color-surface-strong); border-left: 1px solid var(--pattrix-color-border); }
.pattrix-contact-workspace-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.pattrix-contact-workspace-map .pattrix-contact-location-copy { box-sizing: border-box; position: static; margin: 0; padding: var(--wp--preset--spacing--50); background: var(--pattrix-color-bg); border-top: 1px solid var(--pattrix-color-border); }
.pattrix-contact-location-details { display: block; }
.pattrix-contact-location-copy h2 { margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30); color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: 24px; font-weight: 600; line-height: 1.25; }
.pattrix-contact-location-company { margin: 0 0 var(--wp--preset--spacing--20); color: var(--pattrix-color-text); font-weight: 600; }
.pattrix-contact-location-copy address { color: var(--pattrix-color-text-secondary); font-style: normal; line-height: 1.6; }
.pattrix-contact-location-link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); min-height: 44px; margin-top: var(--wp--preset--spacing--20); color: var(--pattrix-color-interaction); font-weight: 600; text-decoration: none; }
.pattrix-contact-location-link:hover { color: var(--pattrix-color-text); }
.pattrix-contact-location-link:focus-visible { outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-interaction)); outline-offset: 3px; }

.pattrix-contact-advisor-dialog[hidden], .pattrix-contact-success[hidden] { display: none; }
.pattrix-contact-advisor-dialog { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow: auto; }
.pattrix-contact-advisor-dialog-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: color-mix(in srgb, var(--pattrix-color-inverse) 70%, transparent); border: 0; cursor: default; }
.pattrix-contact-advisor-dialog-panel { position: relative; display: grid; gap: var(--wp--preset--spacing--30); width: min(100%, 460px); max-height: min(720px, calc(100dvh - 48px)); padding: var(--wp--preset--spacing--60); overflow: auto; color: var(--pattrix-color-text); background: var(--pattrix-color-bg); border: 1px solid var(--pattrix-color-border-strong); box-shadow: 0 18px 50px color-mix(in srgb, var(--pattrix-color-inverse) 20%, transparent); }
.pattrix-contact-advisor-dialog-close { display: grid; width: 44px; height: 44px; place-items: center; justify-self: end; padding: 0; color: var(--pattrix-color-text); background: transparent; border: 1px solid var(--pattrix-color-border-strong); border-radius: var(--pattrix-radius-control); cursor: pointer; }
.pattrix-contact-advisor-dialog-close:hover { border-color: var(--pattrix-color-interaction); }
.pattrix-contact-advisor-dialog-close:focus-visible { outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-interaction)); outline-offset: 3px; }
.pattrix-contact-advisor-dialog-kicker { margin: 0; color: var(--pattrix-color-text-muted); font-size: var(--wp--preset--font-size--caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pattrix-contact-advisor-dialog-panel h2 { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-3); font-weight: 500; }
.pattrix-contact-advisor-dialog-panel h2:focus-visible { outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-interaction)); outline-offset: 4px; }
.pattrix-contact-advisor-dialog-panel img { display: block; width: min(100%, 400px); height: auto; margin: 0 auto; background: var(--pattrix-color-surface); }
.pattrix-contact-success { display: grid; justify-items: center; gap: var(--wp--preset--spacing--30); min-height: 420px; padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50); place-content: center; text-align: center; }
.pattrix-contact-success-mark { display: grid; width: 56px; height: 56px; place-items: center; color: var(--pattrix-color-on-inverse); background: var(--pattrix-color-status-success); border-radius: 50%; }
.pattrix-contact-success-mark .pattrix-ui-icon { --pattrix-icon-size: 28px; }
.pattrix-contact-success h2 { margin: 0; color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-3); font-weight: 500; }
.pattrix-contact-success h2:focus-visible { outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-interaction)); outline-offset: 5px; }
.pattrix-contact-success p { max-width: 38ch; margin: 0; color: var(--pattrix-color-text-secondary); line-height: 1.6; }
.pattrix-contact-success-again { min-height: 44px; padding: 10px 18px; color: var(--pattrix-color-text); background: transparent; border: 1px solid var(--pattrix-color-border-strong); border-radius: var(--pattrix-radius-control); font: inherit; font-weight: 600; cursor: pointer; transition: border-color var(--pattrix-duration-fast) var(--pattrix-ease-out), transform var(--pattrix-duration-fast) var(--pattrix-ease-out); }
.pattrix-contact-success-again:hover { border-color: var(--pattrix-color-interaction); }
.pattrix-contact-success-again:active { transform: scale(.98); }
.pattrix-contact-success-again:focus-visible { outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-interaction)); outline-offset: 3px; }

@media (max-width: 1199px) {
	.pattrix-contact-advisor { flex-basis: calc((100% - var(--pattrix-advisor-gap)) / 2); }
	.pattrix-contact-advisor-avatar { width: 112px; }
}

@media (max-width: 991px) {
	.pattrix-contact-workspace { grid-template-columns: minmax(0, 1fr); }
	.pattrix-contact-workspace-main { padding: clamp(28px, 6vw, 56px); }
	.pattrix-contact-workspace-map { grid-template-rows: 440px auto; min-height: 0; border-top: 1px solid var(--pattrix-color-border); border-left: 0; }
}

@media (max-width: 767px) {
	.pattrix-contact-workspace-main { padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30); }
	.pattrix-contact-advisor { flex-basis: 100%; padding: 24px; }
	.pattrix-contact-advisor-avatar { width: 96px; }
	.pattrix-contact-direct > p { font-size: var(--wp--preset--font-size--body); }
	.pattrix-contact-direct .pattrix-contact-direct-link { font-size: 18px; }
	.pattrix-contact-direct .pattrix-contact-advisor-action { gap: 6px; min-height: 48px; font-size: 14px; }
		.pattrix-contact-workspace-map { grid-template-rows: 340px auto; }
		.pattrix-contact-workspace-map iframe { min-height: 340px; }
		.pattrix-contact-workspace-map .pattrix-contact-location-copy { padding: var(--wp--preset--spacing--40); }
		.pattrix-contact-location-details { padding: 0; background: transparent; }
	.pattrix-contact-advisor-dialog-panel { max-height: calc(100dvh - 32px); padding: var(--wp--preset--spacing--40); }
	.pattrix-contact-success { min-height: 340px; padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30); }
}

@media (prefers-reduced-motion: reduce) {
	.pattrix-contact-advisor :is(a, button), .pattrix-contact-success-again, .pattrix-contact-field-label, .pattrix-contact-field :is(input, textarea), .pattrix-contact-submit { transition-duration: .01ms !important; }
}