/* Clients directory: Tesla-inspired type, open spacing and source-backed project imagery.
   Page-only layer; generated global and tesla-local files remain separate. */

/* Navigation floats over the opening image, then becomes a white bar on scroll. */
html:not(#qmT):not(#qmT2):not(#qmT3) body.qm-clients-design #lcn {--lcn-bar-ink:#fff!important; --lcn-logo-filter:brightness(0) invert(1)!important;}
html:not(#qmT):not(#qmT2):not(#qmT3) body.qm-clients-design #lcn .lcn-bar {background:transparent!important; color:#fff!important; border-bottom:0!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;}

html:not(#qmT):not(#qmT2):not(#qmT3) body.qm-clients-design {padding-top:0!important; background:#fff!important;}
html body #page #content #main #clients-page {background:#fff!important; color:#171a20!important; font-family:var(--t-font,-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif);}
html body #page #content #main #clients-page * {text-transform:none!important;}
html body #page #content #main #clients-page .cl-hero-media {position:absolute; inset:0; z-index:-2; margin:0; overflow:hidden;}
html body #page #content #main #clients-page .cl-hero-media img {width:100%; height:100%; max-width:none; display:block; object-fit:cover; object-position:50% 30%;}
html body #page #content #main #clients-page .cl-hero::after {content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(8,18,28,.38),rgba(8,18,28,.08) 42%,transparent 62%,rgba(8,18,28,.6));}
html body #page #content #main #clients-page .cl-hero :is(h1,p,.cl-hero-caption,.cl-scroll) {color:#fff!important;}
html body #page #content #main #clients-page .cl-hero .cl-kicker {font-size:11px; letter-spacing:.18em; margin-bottom:16px;}
html body #page #content #main #clients-page .cl-hero .cl-secondary {background:rgba(255,255,255,.94)!important; color:#171a20!important;}
html body #page #content #main #clients-page .cl-hero .cl-secondary:hover {background:#fff!important;}
html body #page #content #main #clients-page .cl-hero-caption {display:inline-block; font-size:12px; margin-top:24px; text-decoration:none; text-underline-offset:4px;}
html body #page #content #main #clients-page .cl-hero-caption:hover {text-decoration:underline;}
html body #page #content #main #clients-page .cl-scroll {display:flex; width:44px; height:36px; margin:12px auto 0; align-items:center; justify-content:center;}
html body #page #content #main #clients-page .cl-section-nav {position:sticky; top:64px; z-index:45; display:block; margin:0; padding:0; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border-bottom:1px solid #e2e3e3;}
html body #page #content #main #clients-page .cl-section-nav > .cl-wrap {display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:56px;}
html body #page #content #main #clients-page .cl-section-links {display:flex; gap:28px;}
html body #page #content #main #clients-page .cl-section-nav a {display:inline-flex; min-height:44px; align-items:center; margin:0; padding:8px 0; border:0!important; background:none; color:#5c5e62!important; font-size:13px;}
html body #page #content #main #clients-page .cl-section-nav a:hover {color:#171a20!important; text-decoration:underline; text-underline-offset:6px;}
html body #page #content #main #clients-page .cl-section-links a[aria-current] {color:#171a20!important; box-shadow:inset 0 -2px #171a20;}
html body #page #content #main #clients-page .cl-section-nav .cl-section-name {font-weight:600; color:#171a20!important;}
html body #page #content #main #clients-page :is(#cl-featured,#cl-industry) {scroll-margin-top:120px;}
html body #page #content #main #clients-page #cl-title {scroll-margin-top:140px;}
html body #page #content #main #clients-page .cl-featured-intro {font-size:15px; line-height:1.8; margin:16px 0 0; max-width:38em;}
html:not(#qmT):not(#qmT2):not(#qmT3) body.qm-clients-design #lcn:is(.is-solid,.is-open,.is-drawer) {--lcn-bar-ink:#171a20!important; --lcn-logo-filter:brightness(0)!important;}
html:not(#qmT):not(#qmT2):not(#qmT3) body.qm-clients-design #lcn:is(.is-solid,.is-open,.is-drawer) .lcn-bar {background:rgba(255,255,255,.96)!important; color:#171a20!important; border-bottom:1px solid #eee!important; backdrop-filter:blur(16px)!important;}
html body #page #content #main #clients-page .cl-wrap {width:calc(100% - 96px); max-width:1280px; margin-inline:auto;}
html body #page #content #main #clients-page .cl-hero > .cl-wrap {margin-block:0;}
html body #page #content #main #clients-page :is(h1,h2,h3) {font-weight:500!important; letter-spacing:-.025em; color:#171a20!important;}
html body #page #content #main #clients-page p {color:#5c5e62!important;}
html body #page #content #main #clients-page .cl-hero {position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; height:100svh; min-height:660px; max-height:1100px; padding:140px 0 32px; border:0!important; text-align:center; background:#202d38;}
html body #page #content #main #clients-page .cl-kicker {margin:0 0 20px; color:#5c5e62!important; font-size:11px; font-weight:500; letter-spacing:.14em;}
html body #page #content #main #clients-page h1 {font-size:clamp(36px,4vw,56px)!important; font-weight:500!important; line-height:1.25; margin:0 0 20px; color:#fff!important;}
html body #page #content #main #clients-page .cl-mobile-break {display:none;}
html body #page #content #main #clients-page .cl-intro {font-size:16px; line-height:1.8; margin:0 auto; max-width:620px;}
html body #page #content #main #clients-page .cl-hero-actions {display:flex; justify-content:center; gap:20px; margin:28px 0 0;}
html body #page #content #main #clients-page .cl-hero-actions a {display:inline-flex; justify-content:center; align-items:center; min-width:264px; min-height:44px; padding:12px 24px; border:0; border-radius:4px; font-size:14px; font-weight:500; text-decoration:none; transition:background .2s;}
html body #page #content #main #clients-page .cl-primary {background:#3e6ae1!important; color:#fff!important;}
html body #page #content #main #clients-page .cl-primary:hover {background:#3457b1!important;}
html body #page #content #main #clients-page .cl-secondary {background:#f4f4f4!important; color:#171a20!important;}
html body #page #content #main #clients-page .cl-secondary:hover {background:#e2e3e3!important;}
html body #page #content #main #clients-page .cl-source {font-size:12px; margin:24px 0 0; color:#5c5e62!important;}
html body #page #content #main #clients-page .cl-featured {padding:96px 0;}
html body #page #content #main #clients-page .cl-featured-head {display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; margin-bottom:48px;}
html body #page #content #main #clients-page .cl-featured-head .cl-kicker {margin-bottom:10px;}
html body #page #content #main #clients-page .cl-featured-head h2 {font-size:36px; line-height:1.4; margin:0;}
html body #page #content #main #clients-page .cl-featured-head > a {font-size:13px; color:#393c41; text-underline-offset:5px;}
html body #page #content #main #clients-page .cl-feature-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
html body #page #content #main #clients-page .cl-feature {display:block; min-width:0; color:#171a20; text-decoration:none;}
html body #page #content #main #clients-page .cl-feature-media {overflow:hidden; background:#f4f4f4; border-radius:4px; aspect-ratio:16/10;}
html body #page #content #main #clients-page .cl-feature-media img {display:block; width:100%; height:100%; object-fit:contain; transition:transform .45s ease;}
html body #page #content #main #clients-page .cl-feature:nth-child(2) img {object-position:50% 56%;}
html body #page #content #main #clients-page .cl-feature-copy {display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 0 0;}
html body #page #content #main #clients-page .cl-feature-copy p {font-size:12px; margin:0 0 6px;}
html body #page #content #main #clients-page .cl-feature-copy h3 {font-size:22px; line-height:1.5; margin:0;}
html body #page #content #main #clients-page .cl-feature-arrow {display:grid; place-items:center; width:40px; height:40px; border-radius:4px; background:#f4f4f4; transition:background .2s;}
html body #page #content #main #clients-page .cl-feature:hover img {transform:scale(1.025);}
html body #page #content #main #clients-page .cl-feature:hover .cl-feature-arrow {background:#e2e3e3;}
html body #page #content #main #clients-page .cl-directory-tools {padding:80px 0 28px; scroll-margin-top:120px; border-top:1px solid #e2e3e3; background:#f4f4f4;}
html body #page #content #main #clients-page .cl-directory-heading {display:flex; justify-content:space-between; gap:32px; align-items:flex-end; margin-bottom:28px;}
html body #page #content #main #clients-page .cl-directory-heading .cl-kicker {margin-bottom:10px;}
html body #page #content #main #clients-page .cl-directory-heading h2 {font-size:36px; line-height:1.5; margin:0;}
html body #page #content #main #clients-page .cl-directory-heading > p {font-size:13px; margin:0 0 4px;}
html body #page #content #main #clients-page .cl-search-row {display:flex; align-items:center; gap:16px;}
html body #page #content #main #clients-page .cl-search-field {position:relative; flex:1; min-width:0;}
html body #page #content #main #clients-page .cl-filter-field {display:block; flex:0 1 320px; min-width:0; margin:0;}
html body #page #content #main #clients-page select {display:block; width:100%; min-height:48px; padding:12px 44px 12px 16px; border:1px solid transparent!important; border-radius:4px; box-shadow:none; color:#171a20!important; font:inherit; font-size:14px; appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235c5e62' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center!important; cursor:pointer;}
html body #page #content #main #clients-page .cl-search {position:relative; display:block; max-width:none; margin:0;}
html body #page #content #main #clients-page .cl-search-icon {position:absolute; top:50%; left:16px; transform:translateY(-50%); width:20px; height:20px; fill:none; stroke:#5c5e62; stroke-width:1.6; pointer-events:none;}
html body #page #content #main #clients-page input {min-height:48px; padding:12px 52px 12px 48px; border:1px solid transparent!important; border-radius:4px; background:#fff!important; color:#171a20!important; font-size:16px; box-shadow:none; appearance:none; -webkit-appearance:none;}
html body #page #content #main #clients-page input::-webkit-search-cancel-button {-webkit-appearance:none;}
html body #page #content #main #clients-page input::placeholder {color:#74777b;}
html body #page #content #main #clients-page input:focus {border-color:#a2a3a5!important; outline:2px solid #3e6ae1!important; outline-offset:3px;}
html body #page #content #main #clients-page .cl-clear {position:absolute; top:4px; right:4px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:4px; background:transparent; color:#5c5e62; font:24px/1 sans-serif; cursor:pointer;}
html body #page #content #main #clients-page .cl-clear:hover {background:#e2e3e3; color:#171a20;}
html body #page #content #main #clients-page #cl-result {flex-shrink:0; font-size:12px; margin:0; color:#5c5e62!important;}
html body #page #content #main #clients-page .cl-result-row {display:flex; align-items:center; justify-content:space-between; min-height:40px; margin-top:12px; gap:16px;}
html body #page #content #main #clients-page .cl-reset {min-height:40px; padding:8px 0; border:0; background:transparent; color:#393c41; font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:4px; cursor:pointer;}
html body #page #content #main #clients-page .cl-directory-index {position:sticky; top:120px; z-index:40; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); border-bottom:1px solid #e2e3e3;}
html body #page #content #main #clients-page .cl-directory-index > .cl-wrap {display:flex; align-items:center; min-height:64px; gap:20px;}
html body #page #content #main #clients-page nav[aria-label="客户名称字母索引"] {display:flex; flex:1; flex-wrap:nowrap; gap:4px; margin:0; padding:4px 0; overflow-x:auto; scrollbar-width:thin; border:0; overscroll-behavior-x:contain;}
html body #page #content #main #clients-page nav[aria-label="客户名称字母索引"] a {display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:44px; padding:8px 10px; border:0!important; border-radius:4px; background:transparent; color:#393c41!important; font-size:13px; font-weight:500;}
html body #page #content #main #clients-page .cl-alphabet a {flex-shrink:0;}
html body #page #content #main #clients-page .cl-find-again {display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; color:#5c5e62; font-size:12px; white-space:nowrap; text-decoration:none;}
html body #page #content #main #clients-page .cl-find-again:hover {color:#171a20; text-decoration:underline; text-underline-offset:4px;}
html body #page #content #main #clients-page nav[aria-label="客户名称字母索引"] a:hover {background:#eee; color:#171a20!important;}
html body #page #content #main #clients-page nav[aria-label="客户名称字母索引"] a[aria-current] {background:#171a20!important; color:#fff!important;}
html body #page #content #main #clients-page nav[aria-label="客户名称字母索引"] a[aria-disabled="true"] {color:#a2a3a5!important; background:transparent!important; cursor:default;}
html body #page #content #main #clients-page .cl-industry-nav {padding:0; background:#fff!important; border:0!important;}
html body #page #content #main #clients-page .cl-industry-details {border-top:1px solid #e2e3e3; border-bottom:1px solid #e2e3e3;}
html body #page #content #main #clients-page .cl-industry-details > summary {display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:64px; padding:12px 0; font-size:15px; color:#171a20; list-style:none; cursor:pointer;}
html body #page #content #main #clients-page .cl-industry-details > summary::-webkit-details-marker {display:none;}
html body #page #content #main #clients-page .cl-industry-note {display:inline-flex; gap:20px; align-items:center; font-size:12px; color:#5c5e62;}
html body #page #content #main #clients-page .cl-industry-note > b {font-size:20px; font-weight:400; transition:transform .2s;}
html body #page #content #main #clients-page .cl-industry-details[open] .cl-industry-note > b {transform:rotate(45deg);}
html body #page #content #main #clients-page .cl-industry-tags {gap:8px; padding-top:8px;}
html body #page #content #main #clients-page .cl-industry-tags a {padding:10px 14px; min-height:40px; display:inline-flex; align-items:center; border:0!important; border-radius:4px; background:#f4f4f4!important; color:#5c5e62!important; font-size:12px; transition:background .2s;}
html body #page #content #main #clients-page .cl-industry-tags a:hover {background:#e2e3e3!important; color:#171a20!important;}
html body #page #content #main #clients-page .cl-industry-all {display:inline-block; margin:20px 0 24px; font-size:12px; color:#393c41; text-decoration:underline; text-underline-offset:5px;}
html body #page #content #main #clients-page .cl-list {padding:12px 0 72px;}
html body #page #content #main #clients-page .cl-group {grid-template-columns:64px minmax(0,1fr); padding:40px 0; border-bottom:1px solid #e2e3e3!important; scroll-margin-top:200px; gap:32px;}
html body #page #content #main #clients-page .cl-group h2 {font-size:36px; line-height:1.3; position:sticky; top:204px; align-self:start;}
html body #page #content #main #clients-page ul {grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; align-items:start;}
html body #page #content #main #clients-page li {font-size:15px; padding:0; min-width:0; overflow-wrap:anywhere;}
html body #page #content #main #clients-page .cl-client-link {align-items:flex-start; min-height:44px; padding:10px 0; border:0!important; color:#171a20!important;}
html body #page #content #main #clients-page .cl-client-link > span:last-child {color:#5c5e62!important; flex-shrink:0; transition:transform .2s;}
html body #page #content #main #clients-page .cl-client-link:hover > span:last-child {transform:translate(2px,-2px);}
html body #page #content #main #clients-page .cl-client-link:hover > span:first-child {text-decoration:underline; text-underline-offset:4px;}
html body #page #content #main #clients-page .cl-client-projects {padding:0; border:0!important;}
html body #page #content #main #clients-page .cl-client-projects summary {min-height:44px; padding:10px 0; align-items:flex-start; color:#171a20!important;}
html body #page #content #main #clients-page .cl-project-count {color:#5c5e62!important; padding-top:3px;}
html body #page #content #main #clients-page .cl-project-links {margin:4px 0 16px; border-left:1px solid #d0d1d2!important; padding-left:12px;}
html body #page #content #main #clients-page .cl-project-links a {font-size:13px; color:#5c5e62!important;}
html body #page #content #main #clients-page .cl-project-links a:hover {color:#171a20!important; text-decoration:underline; text-underline-offset:4px;}
html body #page #content #main #clients-page .cl-client-industries {gap:4px; margin-top:4px;}
html body #page #content #main #clients-page .cl-client-industries a {font-size:11px; color:#5c5e62!important; background:transparent!important; padding:2px 0; border-radius:0;}
html body #page #content #main #clients-page .cl-client-industries a + a::before {content:"·"; margin-right:4px; color:#a2a3a5;}
html body #page #content #main #clients-page .cl-client-industries a:hover {color:#171a20!important; text-decoration:underline; text-underline-offset:3px;}
html body #page #content #main #clients-page .cl-empty {text-align:center; padding:64px 24px; background:#f4f4f4; border-radius:4px;}
html body #page #content #main #clients-page .cl-bottom {padding:48px 0 0; margin-top:24px; justify-content:center; gap:20px; flex-wrap:wrap;}
html body #page #content #main #clients-page .cl-bottom a {display:inline-flex; min-height:44px; align-items:center; justify-content:center; min-width:264px; padding:12px 24px; border:0; border-radius:4px; color:#171a20!important; background:#f4f4f4!important; font-size:14px;}
html body #page #content #main #clients-page .cl-bottom a:first-child {background:#3e6ae1!important; color:#fff!important;}
html body #page #content #main #clients-page .cl-bottom a:first-child:hover {background:#3457b1!important;}
html body #page #content #main #clients-page .cl-bottom a:last-child:hover {background:#e2e3e3!important;}
html body #page #content #main #clients-page :is(a,summary,input,select,button):focus-visible {outline:2px solid #3e6ae1!important; outline-offset:4px;}
html body #page #content #main #clients-page [hidden] {display:none!important;}
@media(max-width:1100px) {
html body #page #content #main #clients-page ul {grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;}
}
@media(max-width:921px) {
html:not(#qmT):not(#qmT2):not(#qmT3) body.qm-clients-design #lcn .lcn-tools {display:none!important;}
html body #page #content #main #clients-page .cl-section-nav {top:56px;}
html body #page #content #main #clients-page .cl-directory-index {top:112px;}
html body #page #content #main #clients-page .cl-hero-media img {object-position:50% 30%;}
}
@media(max-width:760px) {
html body #page #content #main #clients-page .cl-wrap {width:calc(100% - 48px);}
html body #page #content #main #clients-page .cl-hero {padding:128px 0 28px; min-height:680px;}
html body #page #content #main #clients-page .cl-hero-media img {object-position:50% 50%;}
html body #page #content #main #clients-page .cl-hero-actions a {min-width:0; flex:1;}
html body #page #content #main #clients-page .cl-featured {padding:64px 0;}
html body #page #content #main #clients-page .cl-feature-grid {gap:20px;}
html body #page #content #main #clients-page .cl-featured-head h2 {font-size:25px;}
html body #page #content #main #clients-page .cl-feature-copy h3 {font-size:20px;}
html body #page #content #main #clients-page .cl-directory-heading {align-items:flex-start; flex-direction:column; gap:8px;}
html body #page #content #main #clients-page .cl-group {grid-template-columns:40px minmax(0,1fr); gap:16px;}
html body #page #content #main #clients-page ul {grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px;}
html body #page #content #main #clients-page .cl-directory-heading h2 {font-size:25px;}
html body #page #content #main #clients-page .cl-filter-field {flex-basis:240px;}
}
@media(max-width:480px) {
html body #page #content #main #clients-page .cl-section-nav > .cl-wrap {gap:12px;}
html body #page #content #main #clients-page .cl-section-links {gap:16px;}
html body #page #content #main #clients-page .cl-section-nav a {font-size:12px;}
html body #page #content #main #clients-page .cl-hero .cl-intro {max-width:22em;}
html body #page #content #main #clients-page .cl-hero {padding:108px 0 20px; min-height:720px; max-height:980px;}
html body #page #content #main #clients-page .cl-hero-media img {object-position:50% 32%;}
html body #page #content #main #clients-page h1 {font-size:38px!important;}
html body #page #content #main #clients-page .cl-mobile-break {display:block;}
html body #page #content #main #clients-page .cl-intro {font-size:14px;}
html body #page #content #main #clients-page .cl-hero-actions {flex-direction:column; gap:12px;}
html body #page #content #main #clients-page .cl-hero-actions a {width:100%;}
html body #page #content #main #clients-page .cl-source {font-size:11px;}
html body #page #content #main #clients-page .cl-featured-head {gap:16px; margin-bottom:32px;}
html body #page #content #main #clients-page .cl-feature-grid {grid-template-columns:1fr; gap:28px;}
html body #page #content #main #clients-page .cl-directory-tools {padding-top:48px;}
html body #page #content #main #clients-page .cl-search-row {align-items:stretch; flex-direction:column; gap:12px;}
html body #page #content #main #clients-page .cl-filter-field {flex-basis:auto;}
html body #page #content #main #clients-page .cl-directory-index > .cl-wrap {gap:12px; min-height:56px;}
html body #page #content #main #clients-page nav[aria-label="客户名称字母索引"] {gap:2px;}
html body #page #content #main #clients-page nav[aria-label="客户名称字母索引"] a {min-width:36px; flex-shrink:0;}
html body #page #content #main #clients-page .cl-group {grid-template-columns:1fr; gap:16px; padding:28px 0;}
html body #page #content #main #clients-page .cl-group h2 {font-size:30px; position:static;}
html body #page #content #main #clients-page li {font-size:14px;}
html body #page #content #main #clients-page .cl-client-projects summary {gap:6px;}
html body #page #content #main #clients-page .cl-project-count {font-size:10px;}
html body #page #content #main #clients-page .cl-bottom {flex-direction:column;}
}
@media(prefers-reduced-motion:reduce) {
html body #page #content #main #clients-page * {transition:none!important; scroll-behavior:auto!important;}
}
@media print {
html body #page #content #main #clients-page .cl-hero {height:auto; min-height:0; padding:24px 0; background:#fff;}
html body #page #content #main #clients-page .cl-hero :is(h1,p) {color:#171a20!important;}
html body #page #content #main #clients-page :is(.cl-hero-media,.cl-hero::after,.cl-hero-bottom,.cl-section-nav) {display:none;}
html body #page #content #main #clients-page :is(.cl-hero-actions,.cl-featured,.cl-directory-tools,.cl-directory-index,.cl-industry-nav,.cl-bottom) {display:none;}
html body #page #content #main #clients-page .cl-wrap {width:100%;}
html body #page #content #main #clients-page .cl-group {break-inside:avoid;}
html body #page #content #main #clients-page .cl-group h2 {position:static;}
}
