/* Full-bleed artwork; readable content follows the shared 1200px grid. */
.catalog-hero{position:relative;isolation:isolate;width:100%;max-width:none;min-height:380px;overflow:hidden;border-radius:0;background:var(--banner-bg);color:var(--banner-ink)}
.catalog-photo,.catalog-hero-wash{position:absolute;inset:0;z-index:-2;pointer-events:none}
.catalog-photo{background-image:var(--banner-photo);background-position:var(--banner-position);background-size:cover;background-repeat:no-repeat}
.catalog-hero-wash{z-index:-1;background:linear-gradient(90deg,var(--banner-bg) 0%,color-mix(in srgb,var(--banner-bg) 92%,transparent) 26%,color-mix(in srgb,var(--banner-bg) 48%,transparent) 52%,color-mix(in srgb,var(--banner-bg) 12%,transparent) 74%,transparent 92%)}
.catalog-hero-inner{position:relative;display:flex;flex-direction:column;min-height:380px;padding-block:23px 39px}
.catalog-hero .catalog-crumb,.catalog-hero .catalog-crumb .breadcrumb-current{color:var(--banner-ink);opacity:.76}
.catalog-hero .catalog-crumb a:hover{color:var(--banner-accent)}
.catalog-hero-copy{position:relative;max-width:570px;margin-block:auto;padding-top:28px}
.catalog-hero-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 17px;color:var(--banner-accent);font-size:12px;font-weight:600;letter-spacing:.13em}
.catalog-hero-eyebrow>span{display:block;width:22px;height:2px;background:currentColor}
.catalog-hero h1{max-width:620px;margin:0 0 18px;color:var(--banner-ink);font-size:clamp(32px,3.3vw,46px);font-weight:600;line-height:1.25;letter-spacing:-.025em;text-wrap:balance}
.catalog-hero-description{max-width:490px;margin:0;color:var(--banner-ink);opacity:.76;font-size:15px;line-height:1.85}
.catalog-hero-facets{display:flex;flex-wrap:wrap;gap:0;margin:25px 0 0;padding:0;list-style:none;font-size:12px;font-weight:500;color:var(--banner-ink)}
.catalog-hero-facets li{display:flex;align-items:center;gap:10px;padding-right:22px;line-height:1.7}
.catalog-hero-facets li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--banner-accent)}
.catalog-hero-baseline{position:absolute;bottom:0;left:max(20px,calc((100% - 1200px)/2));width:54px;height:4px;background:var(--banner-accent)}
.catalog-hero-note{position:absolute;right:0;bottom:28px;display:flex;gap:12px;align-items:center;padding:12px 18px;border:1px solid #ffffffb3;border-radius:12px;background:#fffffff2;color:var(--banner-ink);font-size:13px;box-shadow:0 6px 24px #2534400a}
.catalog-hero-note svg{width:30px;height:30px;color:var(--banner-accent)}
.catalog-hero--dark .catalog-hero-note{color:#324254}
/* Engineering: structural diagonal and an unobstructed project view. */
.catalog-hero--technical .catalog-photo{left:30%}
.catalog-hero--technical .catalog-hero-wash{background:var(--banner-bg);clip-path:polygon(0 0,55% 0,46% 100%,0 100%)}
.catalog-hero--technical::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 48%,#12344a15 48%,transparent 74%);pointer-events:none}
.catalog-hero--technical .catalog-hero-copy{max-width:500px}
.catalog-hero--technical .catalog-hero-facets li{padding:5px 12px;margin-right:9px;border:1px solid color-mix(in srgb,var(--banner-accent) 23%,transparent);border-radius:6px}
.catalog-hero--technical .catalog-hero-facets li::before{display:none}
/* Finance: paper-like copy area and a continuous photographic field. */
.catalog-hero--editorial .catalog-photo{
  left:0;
  background-position:var(--banner-position,72% center);
  background-size:cover;
}
.catalog-hero--editorial .catalog-hero-wash{
  /* 连续柔化，避免左色块与照片硬边分隔；右侧保留清晰实景 */
  background:linear-gradient(90deg,
    var(--banner-bg) 0%,
    color-mix(in srgb,var(--banner-bg) 94%,transparent) 22%,
    color-mix(in srgb,var(--banner-bg) 62%,transparent) 42%,
    color-mix(in srgb,var(--banner-bg) 28%,transparent) 62%,
    color-mix(in srgb,var(--banner-bg) 8%,transparent) 78%,
    transparent 92%);
}
.catalog-hero--editorial .catalog-hero-eyebrow{border-left:3px solid currentColor;padding-left:12px;letter-spacing:.08em}
.catalog-hero--editorial .catalog-hero-eyebrow>span{display:none}
.catalog-hero--editorial .catalog-hero-facets{border-top:1px solid color-mix(in srgb,var(--banner-ink) 16%,transparent);padding-top:16px;max-width:420px}
/* Trademark / innovation: airy studio compositions with tactile materials. */
.catalog-hero--studio .catalog-hero-wash{background:linear-gradient(90deg,var(--banner-bg),color-mix(in srgb,var(--banner-bg) 92%,transparent) 29%,transparent 67%)}
.catalog-hero--studio .catalog-hero-facets li{padding:6px 13px;margin-right:8px;border-radius:100px;background:#ffffff91;border:1px solid #ffffffb3}
.catalog-hero--studio .catalog-hero-facets li::before{display:none}
/* Trade / global business: an atmospheric white-on-navy panorama. */
.catalog-hero--horizon .catalog-hero-wash{background:linear-gradient(90deg,var(--banner-bg) 0%,color-mix(in srgb,var(--banner-bg) 90%,transparent) 30%,color-mix(in srgb,var(--banner-bg) 35%,transparent) 65%,#07152610)}
.catalog-hero--horizon .catalog-hero-facets li::before{width:12px;height:1px;border-radius:0}
.catalog-hero--dark .catalog-hero-eyebrow{color:#ffc49a}
.catalog-hero--panorama .catalog-hero-wash{background:linear-gradient(90deg,var(--banner-bg) 0%,color-mix(in srgb,var(--banner-bg) 94%,transparent) 24%,color-mix(in srgb,var(--banner-bg) 72%,transparent) 41%,transparent 72%)}
@media(min-width:1800px){.catalog-hero,.catalog-hero-inner{min-height:420px}}
@media(max-width:1000px){.catalog-hero-copy{max-width:52%}.catalog-hero h1{font-size:36px}.catalog-hero-description{font-size:14px}.catalog-hero-note{right:0;max-width:220px}.catalog-hero--technical .catalog-hero-wash{clip-path:polygon(0 0,64% 0,54% 100%,0 100%)}}
@media(max-width:600px){
 .catalog-hero,.catalog-hero-inner{min-height:370px}
 .catalog-hero-inner{padding-block:18px 32px}
 .catalog-hero-copy,.catalog-hero--technical .catalog-hero-copy{max-width:100%;padding-top:32px;padding-bottom:18px}
 .catalog-hero h1{max-width:100%;font-size:30px;margin-bottom:14px}
 .catalog-hero-description{max-width:90%;font-size:14px;line-height:1.8}
 .catalog-hero .catalog-photo{inset:0;opacity:.38;background-position:65% center}
 .catalog-hero .catalog-hero-wash{clip-path:none;background:linear-gradient(90deg,var(--banner-bg) 0%,color-mix(in srgb,var(--banner-bg) 88%,transparent) 45%,color-mix(in srgb,var(--banner-bg) 42%,transparent))}
 .catalog-hero-note{display:none}
 .catalog-hero-eyebrow{font-size:11px;margin-bottom:16px}
 .catalog-hero-facets{gap:8px 0;margin-top:22px}
 .catalog-hero-facets li{font-size:11px;padding-right:16px}
 .catalog-hero--editorial .catalog-hero-facets{max-width:90%}
 .catalog-hero--technical .catalog-hero-facets li{padding:5px 8px;margin-right:7px}
 .catalog-hero .catalog-crumb{font-size:11px;gap:6px}
}