:root {
  --paper: #f4f0e8;
  --paper-deep: #e9e1d4;
  --ink: #181a1b;
  --muted: #716c64;
  --red: #a43b31;
  --red-deep: #75271f;
  --brass: #c69a55;
  --line: rgba(24, 26, 27, .18);
  --serif: "Songti SC", "STSong", "SimSun", serif; /* @kind font */
  --sans: "Microsoft YaHei", "PingFang SC", sans-serif; /* @kind font */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: min(calc(100% - 48px), 1240px); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid transparent; background: rgba(117,39,31,.96); color: #fff; backdrop-filter: blur(16px); transition: box-shadow .3s ease, border-color .3s ease; }
.site-header.is-scrolled { border-bottom-color: rgba(198,154,85,.35); box-shadow: 0 10px 30px rgba(24,26,27,.18); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { width: 178px; height: auto; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.main-nav a { padding: 9px 11px; border: 1px solid transparent; color: rgba(255,255,255,.76); font-size: 12px; white-space: nowrap; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); outline: none; }
.main-nav a.active { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); }
.header-meta { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.header-meta span { color: rgba(255,255,255,.72); }
.header-meta strong { color: #fff; letter-spacing: .06em; }
/* 列间距提成变量：结果实拍那块要按它算列宽，才能让两块视频的内侧边缘落在同一条竖线上 */
.hero { --hero-gap: clamp(48px, 7vw, 104px); min-height: 560px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: var(--hero-gap); padding-block: 56px 64px; }
.kicker { margin: 0; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.kicker::before { content: ""; display: inline-block; width: 36px; height: 2px; margin-right: 12px; background: var(--red); vertical-align: middle; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; text-wrap: pretty; }
h1 { margin: 24px 0 26px; font-size: clamp(52px, 7vw, 92px); line-height: .98; letter-spacing: -.06em; }
h1 em { color: var(--red); font-style: normal; }
.hero-copy > p:not(.kicker) { max-width: 610px; color: var(--muted); font-size: clamp(16px, 1.65vw, 20px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid var(--ink); border-radius: 3px; font-weight: 800; transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease; }
.button.primary { color: #fff; background: var(--red); border-color: var(--red); }
.button.secondary { background: transparent; }
.button:hover, .button:focus-visible { color: #fff; background: var(--red-deep); border-color: var(--red-deep); outline: 3px solid rgba(198,154,85,.42); outline-offset: 3px; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24,26,27,.16); }
.button:active { transform: translateY(1px); box-shadow: none; }
.hero-art { position: relative; min-height: 570px; display: flex; flex-direction: column; justify-content: center; }
.key-anim { width: 100%; height: auto; overflow: visible; }
/* 首屏门店实拍视频：与线稿动效同一区域，16:9 先占位免得加载时跳动；
   窄屏和减少动态效果由 motion.js 拦下不注入 src，只留 poster 静态图 */
.hero-video { width: 100%; }
.hero-video-el { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-deep); }
.hero-art-note { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: 14px; letter-spacing: .02em; }
/* 该页的招牌场景，图注按信任条的黄铜菱形提级 */
.hero-art-note.is-feature { color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.hero-art-note.is-feature::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: 1px; background: var(--brass); box-shadow: inset 0 0 0 2px var(--paper); transform: rotate(45deg); }

/* —— SVG 遥控解锁：线稿风轿车 —— */
.key-anim .ground { stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.key-anim .body { fill: #fbf7ef; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.key-anim .glass { fill: #d7dee0; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.key-anim .pillar { stroke: var(--ink); stroke-width: 3; }
.key-anim .seam { stroke: rgba(24,26,27,.4); stroke-width: 1.6; }
.key-anim .handle { fill: var(--ink); }
.key-anim .mirror { fill: #fbf7ef; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.key-anim .tire { fill: #23262a; stroke: var(--ink); stroke-width: 2; }
.key-anim .rim { fill: #e9e1d4; stroke: var(--ink); stroke-width: 2; }
.key-anim .spokes line { stroke: #8b8377; stroke-width: 3; stroke-linecap: round; }
.key-anim .lamp { fill: #b9b1a2; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.key-anim .flash { fill: var(--brass); opacity: 0; }

.key-anim .fob-body { fill: var(--ink); stroke: #000; stroke-width: 1; }
.key-anim .fob-ring { fill: none; stroke: var(--ink); stroke-width: 5; }
.key-anim .fob-btn { fill: #6f6a62; }
.key-anim .fob-btn-unlock { fill: var(--brass); }
.key-anim .fob-open { fill: none; stroke: var(--ink); stroke-width: 2; }

.key-anim .wave { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.key-anim .lock-shackle { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.key-anim .lock-body { fill: #fbf7ef; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.key-anim .lock-hole { fill: var(--ink); }

/* 时间轴统一 4.8s，靠关键帧百分比对齐各动作 */
.key-anim .fob-btn-unlock { transform-box: fill-box; transform-origin: center; animation: fobPress 4.8s infinite; }
.key-anim .wave1 { animation: wave1 4.8s infinite; }
.key-anim .wave2 { animation: wave2 4.8s infinite; }
.key-anim .wave3 { animation: wave3 4.8s infinite; }
.key-anim .lamp { animation: lampBody 4.8s infinite; }
.key-anim .flash { animation: flashHalo 4.8s infinite; }
.key-anim .car { animation: carNudge 4.8s infinite; }
.key-anim .lock-shackle { transform-box: fill-box; transform-origin: center bottom; animation: lockPop 4.8s infinite; }
.key-anim .lock { animation: lockGlow 4.8s infinite; }

@keyframes fobPress { 0%, 3%, 12%, 100% { transform: scale(1); fill: var(--brass); } 5%, 9% { transform: scale(.8); fill: var(--red); } }
@keyframes wave1 { 0%, 8% { opacity: 0; } 12% { opacity: .95; } 28% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wave2 { 0%, 14% { opacity: 0; } 18% { opacity: .85; } 34% { opacity: 0; } 100% { opacity: 0; } }
@keyframes wave3 { 0%, 20% { opacity: 0; } 24% { opacity: .7; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes lampBody {
  0%, 32% { fill: #b9b1a2; }
  34%, 38% { fill: #ffd267; }
  40% { fill: #b9b1a2; }
  43%, 47% { fill: #ffd267; }
  49%, 100% { fill: #b9b1a2; }
}
@keyframes flashHalo {
  0%, 32% { opacity: 0; }
  35% { opacity: .6; }
  40% { opacity: 0; }
  45% { opacity: .6; }
  49%, 100% { opacity: 0; }
}
@keyframes carNudge { 0%, 50%, 100% { transform: translateY(0); } 54% { transform: translateY(-3px); } 58% { transform: translateY(0); } }
@keyframes lockPop {
  0%, 50% { transform: translateY(0); }
  56% { transform: translateY(-8px); }
  62% { transform: translateY(-5px); }
  88% { transform: translateY(-5px); }
  94%, 100% { transform: translateY(0); }
}
@keyframes lockGlow {
  0%, 52% { opacity: .9; }
  56%, 88% { opacity: 1; }
  100% { opacity: .9; }
}

/* —— 线稿逐段描边入场：draw-el / fade-el / is-drawing 全由 motion.js 添加，
   脚本不跑或减弱动效时这些选择器都不命中，线稿照常完整呈现 —— */
.key-anim .draw-el { fill-opacity: 0; transition: fill-opacity .5s ease .2s; }
.key-anim .draw-el.is-drawn { fill-opacity: 1; }
.key-anim .fade-el { opacity: 0; transition: opacity .5s ease; }
.key-anim .fade-el.is-drawn { opacity: 1; }
/* 描边期间先按住循环动效，画完再从头播（放在关键帧之后才能盖住上面的 animation 声明） */
.key-anim.is-drawing * { animation-play-state: paused; }

/* —— 首屏线稿 hover 微交互：指针设备才有，触摸屏不触发 —— */
@media (hover: hover) {
  .hero-art .art-lift { transform-box: fill-box; transform-origin: center; transition: transform .34s cubic-bezier(.22,.61,.36,1); }
  .hero-art:hover .art-lift-fob { transform: translateY(-9px) rotate(-2deg); }
  .hero-art:hover .art-lift-lock { transform: translateY(-7px); }
  .grid-icon { transition: transform .22s cubic-bezier(.22,.61,.36,1), color .18s ease; }
  .shortcut-grid a:hover .grid-icon, .shortcut-grid a:focus-visible .grid-icon { transform: translateY(-3px) scale(1.08); }
}

.trust-line { border-block: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid div { min-height: 104px; display: flex; align-items: center; gap: 14px; padding: 20px 26px; border-right: 1px solid var(--line); }
.trust-icon { width: 30px; height: 30px; color: var(--red); flex: 0 0 auto; }
.trust-text { display: grid; gap: 2px; }
.trust-grid div:first-child { border-left: 1px solid var(--line); }
.trust-grid span { color: var(--red); font: 800 11px/1 var(--sans); }
.trust-grid strong { font-family: var(--serif); font-size: 19px; }
[id] { scroll-margin-top: 112px; }
.shortcut-section { padding-block: 48px; background: var(--paper-deep); border-bottom: 1px solid var(--line); }
.shortcut-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.shortcut-head h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); }
.shortcut-head p { margin: 0; color: var(--muted); }
.shortcut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--ink); background: var(--ink); }
.shortcut-grid a { position: relative; min-height: 156px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; background: var(--paper); transition: color .18s ease, background .18s ease; }
.grid-icon { position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; color: var(--red); pointer-events: none; }
.shortcut-grid a:hover .grid-icon, .shortcut-grid a:focus-visible .grid-icon { color: #fff; }
.shortcut-grid small { color: var(--red); font-weight: 800; }
.shortcut-grid strong { font-family: var(--serif); font-size: 22px; line-height: 1.3; }
.shortcut-grid span { color: var(--muted); font-size: 12px; }
.shortcut-grid a:hover, .shortcut-grid a:focus-visible { color: #fff; background: var(--red); outline: none; }
.shortcut-grid a:hover small, .shortcut-grid a:hover span, .shortcut-grid a:focus-visible small, .shortcut-grid a:focus-visible span { color: rgba(255,255,255,.76); }
.section { padding-block: clamp(52px, 7vw, 96px); }
.section-head { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; margin-bottom: 40px; align-items: end; }
.section-head h2 { margin: 0; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.06; letter-spacing: -.045em; }
.section-head p { margin: 0 0 8px; max-width: 520px; color: var(--muted); }
.page-hero { padding-block: 48px 40px; border-bottom: 1px solid var(--line); }
/* 字号不再单独压小：内页标题与用 .hero 的汽车钥匙 / 手机钥匙两页统一走全局 h1，
   只保留本区块自己的外边距。窄屏那档的覆盖也一并撤掉。 */
.page-hero h1 { margin: 20px 0 18px; }
.page-hero .lede { max-width: 660px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); }
.page-hero .actions { margin-top: 30px; }
.situations { background: #ebe2d6; }
.situation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.situation-card { min-height: 310px; display: flex; flex-direction: column; padding: 30px; border-top: 4px solid var(--red); background: var(--paper); }
.situation-card > span { color: var(--red); font-size: 11px; font-weight: 800; }
.situation-card h3 { margin: 64px 0 16px; font-size: 27px; line-height: 1.25; }
.situation-card p { margin: 0; color: var(--muted); }
.situation-card a { margin-top: auto; padding-top: 22px; color: var(--red); font-weight: 800; font-size: 13px; }
.case-art { width: 100%; max-width: 178px; height: auto; margin: 20px 0 0; display: block; }
.case-art .cs { stroke: var(--ink); }
.case-art .cf { fill: #f8f4ec; }
.case-art .cd { fill: var(--paper-deep); }
.case-art .cg { fill: #cfd7d7; }
.case-art .ch { stroke: #fff; opacity: .55; }
.case-art .cl { stroke: #d8d0c3; fill: none; }
.case-art .cbf { fill: var(--brass); }
.case-art .cif { fill: var(--ink); }
.situation-card.has-art h3 { margin-top: 24px; }
.situation-card.has-photos h3 { margin-top: 26px; }
/* 参考图已抠成透明底 PNG：不套白格子，改成上下交叉摆放——横排三张在卡片里太小，
   竖着错开每张能占七成宽，手机端也不用横向找 */
.situation-photos { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.situation-photos figure { width: 78%; height: 166px; margin: 0; display: flex; align-items: center; }
.situation-photos figure:nth-child(odd) { align-self: flex-start; justify-content: flex-start; }
.situation-photos figure:nth-child(even) { align-self: flex-end; justify-content: flex-end; }
.situation-photos img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(24, 26, 27, .13)); }
.situation-note { margin: 18px 0 0; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .04em; }

/* ============ 上门装锁：首屏三类对称卡片 + 三类切换展厅 ============ */
/* 首屏版头：左大标题、右简介与信任条，底线对齐 */
.install-lock-hero { min-height: 0; align-items: end; padding-block: 56px 34px; }
.install-lock-hero h1 { margin-bottom: 0; }
.install-hero-side { padding-bottom: 10px; }
.install-hero-side .lede { margin: 0; max-width: 460px; color: var(--muted); font-size: clamp(16px, 1.65vw, 20px); }
/* 三类上下排、图文左右交叉；产品图都是透明底，直接落在纸色上，不套卡片也不加白底 */
.install-showcase { padding-bottom: clamp(46px, 6vw, 84px); }
.install-row {
  display: grid;
  grid-template-columns: 1.28fr .72fr;
  gap: clamp(24px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(28px, 3.6vw, 52px);
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.install-row:last-child { border-bottom: 1px solid var(--line); }
/* 交叉那行连列宽一起换向，否则图区落进窄列、产品被压小 */
.install-row.is-flip { grid-template-columns: .72fr 1.28fr; }
.install-row.is-flip .install-row-art { order: 2; }
.install-row:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.install-row-art {
  position: relative;
  min-width: 0;
  min-height: clamp(250px, 27vw, 390px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 46px);
  padding-left: 34px;
}
.install-row.is-flip .install-row-art { padding: 0 34px 0 0; }
.install-row-label {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}
.install-row.is-flip .install-row-label { left: auto; right: 0; }
/* 三张一组错开落位：一沉、一居中放大、一浮，读起来像陈列而不是并排贴图 */
.install-piece {
  width: auto;
  max-width: 30%;
  max-height: clamp(220px, 24vw, 345px);
  object-fit: contain;
  filter: drop-shadow(0 20px 18px rgba(24, 26, 27, .17));
}
.install-piece:first-of-type { align-self: flex-end; }
.install-piece:last-of-type { align-self: flex-start; }
.install-piece.is-lead { max-width: 36%; max-height: clamp(260px, 28vw, 400px); }
/* 普通门锁只有两款真素材，两张就各占一半版面，不留一块空 */
.install-row-art.is-pair .install-piece { max-width: 42%; }
.install-row-art.is-pair .install-piece.is-lead { max-width: 46%; }
.install-row-copy { min-width: 0; }
.install-row-copy small { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.install-row-copy h3 { margin: 12px 0 8px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.03em; transition: color .18s ease; }
.install-row-copy p { margin: 0; color: var(--muted); font-size: 15px; }
.install-row-copy em { display: inline-block; margin-top: 24px; color: var(--red); font: 800 12px/1 var(--sans); font-style: normal; letter-spacing: .08em; }
.install-showroom { padding-block: clamp(64px, 8vw, 108px); background: #ebe2d6; }
.install-showroom-head { margin-bottom: 30px; }
.install-tabs { border: 1px solid var(--ink); background: var(--ink); }
.install-tablist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink); }
.install-tablist button {
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 18px;
  padding: 22px 24px;
  border: 0;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.install-tablist button small { grid-row: 1 / 3; color: var(--red); font-size: 11px; font-weight: 800; }
.install-tablist button strong { align-self: end; font: 700 22px/1.2 var(--serif); }
.install-tablist button span { align-self: start; color: var(--muted); font-size: 11px; }
.install-tablist button:hover, .install-tablist button:focus-visible { color: #fff; background: var(--red-deep); outline: none; }
.install-tablist button:hover small, .install-tablist button:hover span,
.install-tablist button:focus-visible small, .install-tablist button:focus-visible span { color: rgba(255, 255, 255, .76); }
.install-tablist button[aria-selected="true"] { color: #fff; background: var(--red); }
.install-tablist button[aria-selected="true"] small, .install-tablist button[aria-selected="true"] span { color: rgba(255, 255, 255, .78); }
.install-tabpanel { padding: clamp(28px, 5vw, 64px); background: var(--paper); }
.install-tabpanel[hidden] { display: none; }
.install-panel-intro {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 42px;
}
.install-panel-intro h3 { margin: 18px 0 0; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -.045em; }
.install-panel-intro > p { margin: 0 0 8px; color: var(--muted); }
.install-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.install-product-grid figure { min-width: 0; margin: 0; background: var(--paper-deep); }
.install-product-grid figure > div { height: 360px; display: flex; align-items: center; justify-content: center; padding: 24px; }
.install-product-grid img { width: auto; max-width: 78%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 12px rgba(24, 26, 27, .14)); }
.install-product-grid figcaption { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--red); background: var(--paper); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
/* 品牌参考图原生分辨率只有 200 出头，格子压矮才不会被拉大发虚 */
.install-product-grid.is-compact figure > div { height: 250px; }
/* 实拍格用 contain 不用 cover：铺满会把锁体裁掉大半，看不到整把锁 */
.install-product-grid.is-compact figure.is-photo > div { padding: 0; }
.install-product-grid.is-compact figure.is-photo img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; filter: none; }
.install-product-grid.is-compact figure.is-photo:hover img { transform: none; }
.install-panel-note { margin: 18px 0 0; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
/* 同一扇门的新旧对比沿用安装展厅图片网格，只用语义修饰保持两列对应。 */
.install-compare { border-top: 1px solid var(--line); }
.install-compare.is-condensed { width: min(calc(100% - 48px), 900px); }
.install-compare.is-condensed .section-head h2 { font-size: clamp(36px, 4vw, 46px); }
.install-product-grid.install-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.install-product-grid.install-compare-grid figure > div { width: 100%; height: clamp(180px, 20vw, 260px); padding: 0; }
.install-product-grid.install-compare-grid figure.is-photo img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; filter: none; }

/* ============ 全站 hover 上扬（装锁首屏那把锁的同款曲线）============
   指针设备 + 未要求减弱动效时才挂；触摸屏点一下就永久停在悬停态，所以整段隔离。
   连边框的网格（流程格 / 快捷入口 / 展厅九宫格外框）不整块上扬——1px 缝会露出底色，只抬里面的图。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .case-card, .support-card, .situation-card {
    transition: transform .34s cubic-bezier(.22, .61, .36, 1), box-shadow .34s cubic-bezier(.22, .61, .36, 1), border-color .18s ease;
  }
  .case-card:hover, .support-card:hover, .situation-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 32px rgba(24, 26, 27, .16);
  }

  .install-piece, .install-product-grid img, .fleet-item img,
  .install-row-copy em, .situation-photos img, .key-brand-line img {
    transition: transform .34s cubic-bezier(.22, .61, .36, 1);
  }
  /* 钥匙没有底板，抬的是钥匙本身 */
  .key-brand-line figure:hover img { transform: translateY(-8px); }
  /* 陈列行整条不抬（通栏抬起会晃版面），抬的是产品本身：主件比侧件多走几像素，读作有前后 */
  .install-row:hover .install-piece { transform: translateY(-8px); }
  .install-row:hover .install-piece.is-lead { transform: translateY(-12px); }
  .install-row:hover .install-row-copy h3 { color: var(--red); }
  .install-row:hover .install-row-copy em { transform: translateX(4px); }
  /* 参考图没有底板，只抬图不加阴影——透明格子上的方形阴影会露馅 */
  .situation-photos figure:hover img { transform: translateY(-6px); }
  .install-product-grid figure:hover img { transform: translateY(-8px); }
  .fleet-item:hover img { transform: translateY(-8px); }
}

@media (max-width: 880px) {
  .install-lock-hero { padding-block: 48px 26px; }
  .install-hero-side { padding-bottom: 0; }
  .install-hero-side .lede { max-width: none; }
  /* 单列后图在上、说明在下；交叉版式只在双栏时成立 */
  .install-row, .install-row.is-flip { grid-template-columns: 1fr; gap: 18px; }
  .install-row.is-flip .install-row-art { order: 0; padding: 0 0 0 30px; }
  .install-row-art { min-height: 230px; padding-left: 30px; }
  .install-row.is-flip .install-row-label { left: 0; right: auto; }
  .install-tablist button { min-height: 96px; padding: 18px; gap: 4px 12px; }
  .install-tablist button strong { font-size: 18px; }
  .install-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .install-row-art { min-height: 200px; gap: 14px; }
  .install-piece { max-height: 180px; }
  .install-piece.is-lead { max-height: 210px; }
  .install-row-copy h3 { font-size: 28px; }
  .install-tablist { grid-template-columns: 1fr; }
  .install-tablist button { min-height: 78px; grid-template-columns: 32px 1fr auto; grid-template-rows: 1fr; }
  .install-tablist button small { grid-row: auto; }
  .install-tablist button strong, .install-tablist button span { align-self: center; }
  .install-panel-intro { grid-template-columns: 1fr; gap: 20px; }
  .install-product-grid { grid-template-columns: 1fr; }
  .install-product-grid figure > div { height: 330px; }
  /* 品牌参考图本身就小，窄屏保持两列，单列会剩一大片空格子 */
  .install-product-grid.is-compact { grid-template-columns: repeat(2, 1fr); }
  .install-product-grid.is-compact figure > div { height: 190px; padding: 14px; }
  .install-product-grid.is-compact figcaption { padding: 10px 12px; }
}
.key-showcase { background: var(--paper); border-bottom: 1px solid var(--line); }
/* 钥匙实拍已抠成透明底：不套卡片、不加相框，直接落纸色，靠交叉错位和投影分层。
   42 张按品牌分组成行，每行「品牌名 + 该品牌全部款式」，行内双数格下沉一档做交叉。
   分组是为了避免 42 张平铺成一堵墙——客人是按自己的车找，不是按数量看。 */
.key-brands { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 4vw, 64px); border-top: 1px solid var(--line); }
/* 款数多的品牌占满整行，只有 1-2 款的两两并排；否则单个品牌一整行右边会空掉大半 */
.key-brand { grid-column: span 1; display: grid; grid-template-columns: 116px 1fr; gap: clamp(16px, 2vw, 28px); align-items: center; padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--line); }
.key-brand.is-wide { grid-column: 1 / -1; grid-template-columns: 150px 1fr; gap: clamp(20px, 3vw, 44px); }
.key-brand-name { align-self: center; }
.key-brand-name small { display: block; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.key-brand-name strong { display: block; margin-top: 8px; font: 700 clamp(19px, 1.9vw, 24px)/1.25 var(--serif); }
.key-brand-name em { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-style: normal; letter-spacing: .04em; }
.key-brand-line { min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(14px, 2.2vw, 34px); }
.key-brand-line figure { margin: 0; }
.key-brand-line figure:nth-child(even) { margin-bottom: clamp(14px, 2vw, 30px); }
.key-brand-line img { width: auto; max-width: clamp(150px, 17vw, 245px); height: clamp(112px, 11vw, 168px); object-fit: contain; filter: drop-shadow(0 14px 13px rgba(24, 26, 27, .17)); transition: transform .22s ease; }
.key-brand-line figure:hover img { transform: translateY(-7px); }
/* 只有一款的品牌合并成一行，各自带名字；单独通栏会空一大片 */
.key-brand.is-singles .key-brand-line { gap: clamp(18px, 2.6vw, 40px); }
.key-single { display: flex; flex-direction: column; align-items: center; }
.key-single figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.key-brands-foot { margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.key-brands-foot a { margin-left: 6px; border-bottom: 1px solid var(--red); color: var(--red); font-weight: 700; }
/* 同一区块里各组素材来源不同时，身份标必须落到每组，不能只靠区块总注 */
.key-brand-src { display: block; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .06em; }
/* 家用钥匙复用汽车钥匙的分组陈列：去卡片、直接落纸色；每组一类，多支在库钥匙胚同行陈列 */
.civil-key-brands .key-brand { min-height: clamp(224px, 20vw, 278px); }
/* 每组是一排在库钥匙胚，一律靠左紧接名称列；居中会让各组首支落在不同竖轴上 */
.civil-key-brands .key-brand-line { justify-content: flex-start; }
.civil-key-brands .key-brand-line img { max-width: clamp(190px, 22vw, 320px); height: clamp(150px, 14vw, 198px); }
/* 一组多支之后，交叉错位改成相邻两组反相：奇数组沉偶数支，偶数组沉奇数支 */
.civil-key-brands .key-brand:nth-child(even) .key-brand-line figure { margin-bottom: 0; }
.civil-key-brands .key-brand:nth-child(even) .key-brand-line figure:nth-child(odd) { margin-bottom: clamp(14px, 2vw, 28px); }
/* 到店小服务沿用同一产品目录原型，不另起卡片体系；三组满行展示，图片直接落在区块底色上 */
.civil-service-brands .key-brand { grid-column: 1 / -1; grid-template-columns: clamp(176px, 19vw, 236px) 1fr; min-height: clamp(218px, 20vw, 270px); }
.civil-service-brands .key-brand-line { justify-content: flex-start; gap: clamp(28px, 5vw, 76px); }
.civil-service-brands .key-brand-line img { max-width: clamp(160px, 18vw, 250px); height: clamp(138px, 13vw, 184px); }
.civil-service-brands .key-brand:nth-child(even) .key-brand-line { justify-content: flex-end; }
.civil-service-brands .key-brand:nth-child(even) .key-brand-line figure:nth-child(even) { margin-bottom: clamp(12px, 1.6vw, 22px); }
.workshop { color: #f7f1e7; background: var(--ink); }
.workshop-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 0; align-items: stretch; }
/* .workshop-image 与 .storefront-band 当前无页面使用（08-21 撤掉首页两张门店照），
   规则留着等新照片；未验收前不要当现成原型往新页面套。 */
.workshop-image { min-height: 600px; width: 100%; height: 100%; object-fit: cover; filter: saturate(.64) contrast(1.04); }
.workshop-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 7vw, 96px); }
.workshop-copy .kicker { color: var(--brass); }
.workshop-copy .kicker::before { background: var(--brass); }
.workshop-copy h2 { margin: 28px 0 24px; font-size: clamp(42px, 5vw, 68px); line-height: 1.04; }
.workshop-copy p { color: rgba(247,241,231,.68); }
.workshop-copy dl { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 42px 0 0; }
.workshop-copy dt { color: var(--brass); font-family: var(--serif); font-size: 30px; }
.workshop-copy dd { margin: 0; color: rgba(247,241,231,.58); font-size: 12px; }
/* 备案区块只公示事实字段，不放回执原件图（08-04 决策：公示信息、不公开可翻印原件）：
   单栏 + 版心限宽，编号跨全宽作主字段。原 .license-media / .license-band .workshop-image
   两条随图一并移除，勿再引入证件图重开两栏。 */
.license-band .workshop-grid { grid-template-columns: 1fr; }
.license-band .workshop-copy { width: 100%; max-width: 1240px; margin-inline: auto; }
.license-band .workshop-copy dl { max-width: 720px; }
.license-band .workshop-copy dl div.is-wide { grid-column: 1 / -1; }
/* 首页门店区块 08-21 起撤掉店内实拍（照片太简陋，等新照片到位再按原样加回图片列）：
   与备案区块同一套单栏 + 版心限宽的做法，但用自己的修饰类，别借 .license-band 那个备案语义。 */
.workshop.is-copy-only .workshop-grid { grid-template-columns: 1fr; }
.workshop.is-copy-only .workshop-copy { width: 100%; max-width: 1240px; margin-inline: auto; }
.workshop.is-copy-only .workshop-copy dl { max-width: 720px; }
/* 手机钥匙页门店实拍：左文案、右照片铺满右半区（贴上下与右缘），左缘斜切像卡片插进来。
   照片是竖构图（约 3:4），铺进横向区域必然 cover 裁切——所以区块要给足高度（min-height），
   把裁切压到「手机主体仍完整」的范围内。曾经全幅铺满只截 20% 高度，手机轮廓全裁光，勿回退。 */
.phone-shot { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(520px, 44vw, 800px); border-block: 1px solid var(--ink); background: #16181a; color: #fff; }
/* 斜切只切顶部 30% 高度、下面 70% 垂直到底——这样读作「卡片斜插进来」；
   整条边一斜到底会变成平行四边形，是两回事。写法取自参考站 ineedakey.com 同款区块。 */
.phone-shot-photo { position: absolute; inset: 0 0 0 auto; width: 48%; margin: 0; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 30%); }
.phone-shot-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: brightness(.86); }
.phone-shot-inner { position: relative; z-index: 1; }
.phone-shot-copy { max-width: min(560px, 100%); }
.phone-shot .kicker { color: var(--brass); }
.phone-shot h2 { margin: 20px 0 0; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.08; }
.shot-facts { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; }
.shot-facts li { position: relative; padding-left: 19px; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.shot-facts li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -5px; background: var(--brass); transform: rotate(45deg); }
.shot-note { margin: 34px 0 0; color: rgba(247,241,231,.62); font-size: 13px; }
.case-showcase { background: #ebe2d6; border-block: 1px solid var(--line); }
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.case-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--paper); }
.case-card figure { flex: 0 0 auto; position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #e7e8e6; }
.case-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .28s ease; }
.case-card img.focus-lower { object-position: center 70%; }
.case-card:hover img { transform: scale(1.025); }
.case-card figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 10px; color: #fff; background: var(--red); font-size: 10px; letter-spacing: .08em; }
.case-copy { flex: 1; padding: 22px; }
.case-copy small { color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.case-copy p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.case-note { margin: 22px 0 0; color: var(--muted); font-size: 13px; }
/* 普通钥匙页的门店实拍走手机钥匙页同一条带子，只是照片贴左缘、斜切在右上角。
   只在双栏档生效——窄屏那档要把照片放回静态流并取消斜切，写在这里会盖掉它（特异性更高）。 */
@media (min-width: 881px) {
  .phone-shot.is-left .phone-shot-photo { inset: 0 auto 0 0; clip-path: polygon(0 0, 88% 0, 100% 30%, 100% 100%, 0 100%); }
  .phone-shot.is-left .phone-shot-photo img { object-position: center 42%; }
  .phone-shot.is-left .phone-shot-inner { display: flex; justify-content: flex-end; }
}
.support-section { background: #ebe2d6; border-block: 1px solid var(--line); }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.support-card { min-height: 300px; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); background: var(--paper); }
.support-card span { color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.support-card h3 { margin: 50px 0 16px; font-size: 30px; line-height: 1.2; }
.support-card p { margin: 0; color: var(--muted); }
.support-card a { margin-top: auto; padding-top: 28px; color: var(--red); font-weight: 800; font-size: 13px; }
.check-list { list-style: none; margin: 32px 0; padding: 0; border-top: 1px solid var(--line); }
.check-list li { position: relative; padding: 15px 0 15px 32px; border-bottom: 1px solid var(--line); }
.check-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--red); font-weight: 900; }
.civil-proof-list li { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; padding-left: 0; }
.civil-proof-list li::before { content: none; }
.civil-proof-list strong { color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.25; }
.civil-proof-list span { color: var(--muted); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.civil-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--ink); }
.process-grid article { min-height: 280px; padding: 28px; border-right: 1px solid var(--line); }
.process-grid article:last-child { border-right: 0; }
.process-grid span { color: var(--red); font-size: 12px; font-weight: 800; }
.process-grid h3 { margin: 70px 0 14px; font-size: 24px; }
.process-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.faq-section { background: var(--paper-deep); }
.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(46px, 8vw, 108px); align-items: start; }
.faq-intro { position: sticky; top: 124px; }
.faq-intro h2 { margin: 20px 0; font-size: clamp(42px, 5vw, 64px); line-height: 1.06; }
.faq-intro p { color: var(--muted); }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 24px 46px 24px 4px; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 21px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 8px; color: var(--red); font: 400 28px/1 var(--sans); }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { margin: 0; padding: 0 48px 26px 4px; color: var(--muted); }
.storefront-band { position: relative; overflow: hidden; background: var(--ink); }
.storefront-band img { width: 100%; height: clamp(380px, 53vw, 780px); object-fit: cover; object-position: 50% 0; filter: saturate(.74) contrast(1.06) sepia(.05); }
.storefront-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(24,26,27,.96), rgba(24,26,27,0) 21%, rgba(24,26,27,0) 86%, rgba(24,26,27,.92)); pointer-events: none; }
.contact { color: #fff; background: var(--red); }
.contact-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 80px); align-items: stretch; padding-block: 54px; }
.contact-inner > div:first-child { align-self: end; }
.contact h2 { margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: 1.03; }
.contact h2 a { position: relative; display: inline-block; }
.contact h2 a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.contact h2 a:hover::after, .contact h2 a:focus-visible::after { transform: scaleX(1); }
.contact p { color: rgba(255,255,255,.74); }
.contact-inner > div:first-child p { color: rgba(255,255,255,.9); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.contact-inner > div:first-child p.contact-wechat { margin: 14px 0 0; color: rgba(255,255,255,.76); font-size: 14px; font-weight: 400; letter-spacing: .04em; }
.contact-address { margin-top: 20px; color: rgba(255,255,255,.92); font-size: 15px; line-height: 1.9; }
.contact-address strong { display: block; font-family: var(--serif); font-size: 18px; letter-spacing: .01em; }
.map-link { min-height: 72px; display: grid; place-items: center; margin-top: 24px; border: 1px solid rgba(255,255,255,.48); color: #fff; font-size: 14px; letter-spacing: .08em; text-decoration: none; }
.map-link:hover { background: rgba(255,255,255,.1); }
.footer { padding-block: 34px; color: var(--muted); background: var(--paper-deep); font-size: 12px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; }
.mobile-sticky { display: none; }

/* 红底联系区分两组：左号码、右营业与到店信息，中间一条细线隔开 */
@media (min-width: 881px) {
  .contact-inner > div:last-child { padding-left: clamp(40px, 6vw, 80px); border-left: 1px solid rgba(255,255,255,.22); }
}

@media (max-width: 880px) {
  .shell { width: min(calc(100% - 32px), 720px); }
  .header-inner { min-height: 68px; }
  .wordmark { width: 138px; }
  .header-meta span { display: none; }
  /* 七项导航换行铺成两行：单行横滚时后两项落在屏幕外，手机上等于看不见「上门开锁 / 地库拖车救援」 */
  .main-nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 4px 3px; padding-bottom: 6px; }
  .main-nav a { padding: 8px 9px; font-size: 12.5px; }
  .header-inner { flex-wrap: wrap; padding-top: 10px; gap: 8px 18px; }
  /* 窄屏页眉实测 154px（logo 一行 + 导航两行），锚点留 12px 呼吸，别让标题贴在页眉底下 */
  [id] { scroll-margin-top: 166px; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-block: 64px 84px; }
  .hero-art { min-height: auto; }
  /* 单列后照片回到静态流、整张显示，斜切与裁切都取消 */
  .phone-shot { display: block; min-height: 0; }
  .phone-shot-photo { position: static; width: 100%; margin-top: 36px; clip-path: none; }
  .phone-shot-photo img { width: min(100%, 380px); height: auto; margin-inline: auto; }
  .phone-shot-copy { max-width: 100%; }
  .hero-cutout { width: min(100%, 560px); margin: -34px auto -30px; } /* 单列后不再外扩，免得挤出横向滚动 */
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid div:nth-child(3) { border-left: 1px solid var(--line); }
  .shortcut-head { align-items: start; flex-direction: column; }
  .shortcut-grid { grid-template-columns: 1fr 1fr; }
  .section-head { grid-template-columns: 1fr; gap: 20px; }
  .situation-grid { grid-template-columns: 1fr; }
  .situation-card { min-height: 250px; }
  .situation-card h3 { margin-top: 38px; }
  .situation-card.has-art h3 { margin-top: 20px; }
  .situation-card.has-photos h3 { margin-top: 20px; }
  .situation-photos figure { height: 132px; }
  .key-brands { grid-template-columns: 1fr; }
  .key-brand, .key-brand.is-wide { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 14px; }
  .civil-key-brands .key-brand { min-height: 0; }
  .civil-key-brands .key-brand-line { justify-content: flex-start; padding-left: clamp(24px, 8vw, 74px); }
  .civil-key-brands .key-brand:nth-child(even) .key-brand-line { justify-content: flex-end; padding: 0 clamp(24px, 8vw, 74px) 0 0; }
  /* 单列后一组多支会折行，交错会读成散乱，全部落平 */
  .civil-key-brands .key-brand-line figure,
  .civil-key-brands .key-brand-line figure:nth-child(even),
  .civil-key-brands .key-brand:nth-child(even) .key-brand-line figure,
  .civil-key-brands .key-brand:nth-child(even) .key-brand-line figure:nth-child(odd) { margin-bottom: 0; }
  .civil-service-brands .key-brand { grid-template-columns: 1fr; min-height: 0; }
  .civil-service-brands .key-brand-line, .civil-service-brands .key-brand:nth-child(even) .key-brand-line { justify-content: flex-start; padding-left: clamp(36px, 14vw, 96px); }
  .civil-service-brands .key-brand:nth-child(even) .key-brand-line { justify-content: flex-end; padding: 0 clamp(36px, 14vw, 96px) 0 0; }
  .case-grid { grid-template-columns: 1fr; }
  .workshop-grid, .contact-inner { grid-template-columns: 1fr; }
  .workshop-image { min-height: 420px; }
  .workshop-copy { padding-inline: 24px; }
  .civil-feature, .support-grid, .faq-grid { grid-template-columns: 1fr; }
  .civil-image { min-height: 420px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid article:nth-child(2) { border-right: 0; }
  .process-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .faq-intro { position: static; }
  body { padding-bottom: 64px; }
  .mobile-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; min-height: 62px; border-top: 1px solid rgba(255,255,255,.22); box-shadow: 0 -10px 30px rgba(24,26,27,.18); }
  .mobile-sticky a { display: grid; place-items: center; align-content: center; gap: 1px; color: #fff; background: var(--ink); font-weight: 800; }
  .mobile-sticky a small { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.82); }
  .mobile-sticky a:last-child { background: var(--red); }
}

@media (max-width: 560px) {
  .civil-key-brands .key-brand-line, .civil-key-brands .key-brand:nth-child(even) .key-brand-line { padding-inline: 20px; }
  .civil-key-brands .key-brand-line img { max-width: min(82vw, 300px); height: 174px; }
  .civil-key-brands .key-brand.is-wide .key-brand-line img { max-width: min(78vw, 300px); }
  .civil-service-brands .key-brand-line, .civil-service-brands .key-brand:nth-child(even) .key-brand-line { padding-inline: 20px; }
  .civil-service-brands .key-brand-line img { max-width: min(38vw, 164px); height: 132px; }
  .header-meta strong { font-size: 13px; }
  h1 { font-size: clamp(48px, 15vw, 68px); }
  .storefront-band img { height: clamp(240px, 62vw, 320px); }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid div, .trust-grid div:nth-child(3) { min-height: 82px; border-left: 1px solid var(--line); }
  .shortcut-grid { grid-template-columns: 1fr; }
  .shortcut-grid a { min-height: 118px; }
  .key-brand-line { gap: 12px; }
  .key-brand-line img { height: 104px; }
  .key-brand-line figure:nth-child(even) { margin-bottom: 12px; }
  .key-brand-name strong { font-size: 18px; }
  .case-grid { gap: 10px; }
  .case-copy { padding: 16px; }
  .shot-facts { gap: 10px 18px; }
  .civil-proof-list li { grid-template-columns: 1fr; gap: 4px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article, .process-grid article:nth-child(2) { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--line); }
  .process-grid article:last-child { border-bottom: 0; }
  .process-grid h3 { margin-top: 38px; }
  .footer-inner { flex-direction: column; }
}

.js-motion [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.js-motion [data-reveal].is-revealed { opacity: 1; transform: none; }
/* 实拍卡片随区块入场从右切入（参考站 ineedakey.com 同款：viewport 触发、从右、1s、slide+fade 组合）。
   区块自身 overflow: hidden，位移期间不会溢出到页面外。 */
.js-motion .phone-shot[data-reveal] .phone-shot-photo { opacity: 0; transform: translateX(15%); transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
/* 照片在左的那条从左边切入，方向跟着版式走 */
.js-motion .phone-shot.is-left[data-reveal] .phone-shot-photo { transform: translateX(-15%); }
.js-motion .phone-shot[data-reveal].is-revealed .phone-shot-photo { opacity: 1; transform: none; }

/* 救援车辆：区块滚入视口时两台车从左右开进来，同 phone-shot 实拍的入场做法 */
.js-motion .fleet-section[data-reveal] .fleet-item img { opacity: 0; transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); }
.js-motion .fleet-section[data-reveal] .fleet-item:first-child img { transform: translateX(-38%); }
.js-motion .fleet-section[data-reveal] .fleet-item:last-child img { transform: translateX(38%); }
.js-motion .fleet-section[data-reveal].is-revealed .fleet-item img { opacity: 1; transform: none; }

/* 问答：展开时 + 号转 45° 成 ×（无脚本时保持原生的减号） */
.js-motion .faq-list summary::after { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.js-motion .faq-list details[open] summary::after { content: "+"; transform: rotate(45deg); }
/* 问答整块滚入视口后，各行按 70ms 间隔依次入场；.faq-row 由脚本添加，脚本不跑就没有隐藏态 */
.js-motion .faq-list details.faq-row { opacity: 0; transform: translateY(12px); transition: opacity .34s cubic-bezier(.22,.61,.36,1), transform .34s cubic-bezier(.22,.61,.36,1); }
.js-motion .faq-list details.faq-row.is-shown { opacity: 1; transform: none; }
/* 联系区号码：滚入视口时从 1.06 收束到 1 并淡入 */
.js-motion .contact h2 a.phone-in { opacity: 0; transform: scale(1.06); transform-origin: left center; }
.js-motion .contact h2 a.phone-in.is-shown { opacity: 1; transform: none; transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .phone-shot-photo, .fleet-item img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-header { transition: none; }
  .button { transition: none; }
  .button:hover, .button:focus-visible, .button:active { transform: none; }
  .contact h2 a::after { transition: none; }
  .key-anim * { animation: none !important; }
  .hero-art .art-lift, .grid-icon { transition: none; }
  .hero-art:hover .art-lift-fob, .hero-art:hover .art-lift-lock { transform: none; }
  .shortcut-grid a:hover .grid-icon, .shortcut-grid a:focus-visible .grid-icon { transform: none; }
}

/* ============ 车标墙（门店照暗背景 + 双行流动车标｜放大做首屏视觉冲击）============ */
.bx-brands {
  position: relative;
  padding: clamp(60px, 7.5vw, 100px) 0;
  color: #f4f0e8;
  background-image:
    linear-gradient(rgba(20,16,14,.82), rgba(20,16,14,.86)),
    url(images/key-wall.jpg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bx-brands .shell { position: relative; z-index: 1; }
.bx-brands-head { text-align: center; max-width: 820px; margin: 0 auto 38px; }
.bx-brands .kicker { color: var(--brass); justify-content: center; }
.bx-brands .kicker::before { background: var(--brass); }
.bx-brands h2 {
  margin: 14px 0 16px; color: #fbf7ef;
  font-family: var(--serif); font-size: clamp(36px, 5.4vw, 60px); letter-spacing: .01em;
}
.bx-brands-sub { margin: 0; color: #d8cdbb; font-size: 17px; }

.bx-marquee {
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bx-marquee + .bx-marquee { margin-top: 20px; }
.bx-track {
  display: flex; width: max-content;
  gap: 18px;
  animation: bx-scroll 46s linear infinite;
}
.bx-track.rev { animation-direction: reverse; animation-duration: 54s; }
.bx-marquee:hover .bx-track { animation-play-state: paused; }
/* 脚本接管后位移由 JS 累加，CSS 动画必须让位；同时整条带子可以按住拖 */
.bx-marquee.is-live { cursor: grab; touch-action: pan-y; }
.bx-marquee.is-live.is-dragging { cursor: grabbing; }
.bx-marquee.is-live .bx-track { animation: none; will-change: transform; }
.bx-marquee.is-live img { -webkit-user-drag: none; user-select: none; }
@keyframes bx-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bx-chip {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 196px; height: 108px; padding: 0 30px;
  border-radius: 10px;
  background: #fbf7ef;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bx-chip img { max-width: 100%; max-height: 62px; object-fit: contain; }
.bx-chip:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.36); }

.bx-brands-foot { margin: 46px auto 0; max-width: 820px; text-align: center; color: #cdbfa8; font-size: 14px; }
.bx-brands-foot a { color: var(--brass); font-weight: 700; }

/* ============ 底部 footer（红底并入联系区，去掉与联系区重复的“联系我们”列）============ */
.bx-footer { background: var(--red); color: rgba(255,255,255,.82); }
.bx-footer .shell { padding: 30px 0 0; }
.contact-flush .contact-inner { padding-bottom: 38px; }
/* 联系区：地址/电话前的定位与电话图标（参考 _sections-sample 页脚） */
.contact-lead { display: flex; gap: 14px; align-items: flex-start; }
.contact-address { display: flex; gap: 10px; align-items: flex-start; }
.contact-ico { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 4px; color: #f4d9a0; }
.contact-ico-tel { margin-top: 2px; }
.bx-footer-grid {
  display: grid; gap: 26px 44px;
  grid-template-columns: 1.35fr 1fr;
}
.bx-footer h4 {
  margin: 0 0 13px; padding-bottom: 9px;
  color: #fff; font-size: 14px; letter-spacing: .08em;
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.bx-footer-brand .fwm { font-family: var(--serif); font-size: 20px; color: #f6dca8; letter-spacing: .12em; }
.bx-footer-brand p { margin: 10px 0 0; font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.82); }
.bx-footer ul { margin: 0; padding: 0; list-style: none; }
.bx-footer li { margin-bottom: 8px; }
.bx-footer a { color: rgba(255,255,255,.82); font-size: 13.5px; transition: color .18s ease; }
.bx-footer a:hover { color: #fff; }
/* 服务范围排两列，页脚不再被一长条链接拉高 */
.bx-footer-services ul {
  display: grid; gap: 0 20px;
  grid-auto-flow: column; grid-template-rows: repeat(4, auto);   /* 先填满左列再排右列，读起来顺 */
}
.bx-footer-bar {
  margin-top: 22px; padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.22);
  text-align: center; font-size: 12.5px; color: rgba(255,255,255,.62);
}
/* 备案号链接跟版权行的字号走，不套用 .bx-footer a 的 13.5px；下划线保证不只靠颜色辨识；nowrap 防止备案号被拆到两行 */
.bx-footer-bar a { font-size: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; white-space: nowrap; }
.bx-footer-bar a:hover { color: #fff; }
/* 公安联网备案图标：平台规定图标在前、编号在右。要 inline-block 抵消全局 img 的 display:block，否则图标会独占一行 */
.bx-footer-bar .beian-icon { display: inline-block; height: 15px; width: auto; vertical-align: -3px; margin-right: 3px; }

@media (max-width: 860px) {
  .bx-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 540px) {
  .bx-footer-grid { grid-template-columns: 1fr; }
  .bx-footer-services ul { gap: 0 14px; }
  .bx-brands { padding: 64px 0; }
  .bx-chip { width: 156px; height: 86px; padding: 0 22px; }
  .bx-chip img { max-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .bx-track { animation: none; }
  .bx-marquee { overflow-x: auto; }
}

/* ============ 地库拖车实拍（拖车页｜暗背景大字，沿用车标墙做法）============ */
.bx-garage {
  position: relative;
  padding: clamp(96px, 12vw, 168px) 0;
  color: #f4f0e8;
  background-image:
    linear-gradient(rgba(16,14,13,.7), rgba(16,14,13,.84)),
    url(images/towing-garage.jpg);
  background-size: cover;
  background-position: center 58%;
  background-color: #1a1716;
  border-block: 1px solid var(--ink);
}
.bx-garage .shell { position: relative; z-index: 1; text-align: center; }
.bx-garage .kicker { color: var(--brass); justify-content: center; }
.bx-garage .kicker::before { background: var(--brass); }
.bx-garage h2 {
  margin: 16px 0 18px; color: #fbf7ef;
  font-family: var(--serif); font-size: clamp(56px, 9.4vw, 116px); line-height: 1.02; letter-spacing: .06em;
}
.bx-garage-sub { margin: 0; color: #d8cdbb; font-size: 17px; }

/* 救援车辆：说明文字按东家要求提大，与大标题同一视觉层 */
.fleet-section .section-head p {
  margin-bottom: 2px; max-width: none; text-align: center; color: var(--ink);
  font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
}

/* 救援车辆：绿幕抠图后的透明实拍，直接落在米白底上，无相框 */
/* 两台车从左右各自开进版面，位移期间在区块内裁掉，不撑出横向滚动 */
.fleet-section { overflow: hidden; }
.fleet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: end; }
.fleet-item { margin: 0; }
/* 两张实拍宽高比不同，给一致的高度让两台车落在同一条底线上，宽屏才限高 */
.fleet-item img { display: block; width: 100%; height: clamp(260px, 27vw, 380px); object-fit: contain; object-position: bottom center; }
.fleet-item figcaption {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: .01em;
}
@media (max-width: 880px) {
  .fleet-grid { grid-template-columns: 1fr; gap: 34px; }
  .fleet-item img { height: auto; }
}

/* ============ 右下角固定呼叫按钮（全站唯一常驻号码入口）============ */
.call-fab {
  position: fixed; z-index: 60; right: 22px; bottom: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 15px; border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 16px; font-weight: 800; letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.call-fab svg { width: 20px; height: 20px; flex: 0 0 auto; }
.call-fab:hover, .call-fab:focus-visible { transform: translateY(-2px); background: var(--red-deep); box-shadow: 0 14px 34px rgba(0,0,0,.34); }
@media (max-width: 540px) {
  .call-fab { right: 14px; bottom: 16px; padding: 13px; gap: 0; }
  .call-fab span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .call-fab { transition: none; }
  .call-fab:hover, .call-fab:focus-visible { transform: none; }
}

/* ============ 开锁 / 拖车 首屏线稿动效（照搬样本调色，站点缺的变量在作用域内补齐）============ */
.service-anim { --steel: #8f9595; --glass: #cfd7d7; --paper-2: #fbf7ef; width: 100%; height: auto; display: block; overflow: visible; }
.service-anim[data-scene="tow"] { overflow: hidden; } /* 拖车开出画面时在动画区左缘裁掉，不压到左侧文案 */
.service-anim text { font-family: var(--sans); }
.service-anim .line-stroke { stroke: #d8d0c3; }
.service-anim .ink-stroke { stroke: var(--ink); }
.service-anim .red-stroke { stroke: var(--red); }
.service-anim .brass-stroke { stroke: var(--brass); }
.service-anim .steel-fill { fill: var(--steel); }
.service-anim .paper-fill { fill: var(--paper-2); }
.service-anim .glass-fill { fill: var(--glass); }
.service-anim .ink-fill { fill: var(--ink); }
.service-anim .red-fill { fill: var(--red); }
.service-anim .brass-fill { fill: var(--brass); }

/* 首屏资质信任条（紧贴 CTA，黄铜菱形点，仅列可核验硬事实）*/
.hero-trust { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.hero-trust li { position: relative; padding-left: 18px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.hero-trust li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -5px; background: var(--brass); box-shadow: inset 0 0 0 2px var(--paper); transform: rotate(45deg); }

/* 手机钥匙首屏：透明底实拍前景素材（原线稿动效已撤） */
/* 素材四周留了大片透明，负边距吃掉空白，让车与手机占满动画区 */
/* 双向渐隐：素材里手臂同时触到画布的右边缘和底边（右下角像素 alpha=255，原片就这么拍的），
   不渐隐就是两条硬直线、像照片直接贴上去。两个方向的遮罩取交集，让手臂朝右下淡进米白底。 */
.hero-cutout { display: block; width: min(116%, 700px); height: auto; margin: -52px auto -46px;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.4) 86%, transparent 98%), linear-gradient(to right, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.4) 86%, transparent 98%), linear-gradient(to right, #000 86%, transparent 100%);
  mask-composite: intersect; }

/* 出血贴右缘：图片挣脱 .shell 版心、顶到视口右边缘，手臂那侧的切边落到屏幕外。
   负边距＝版心到视口右缘的距离；overflow-x: clip 只加在本区块上（不能加到 body，
   会破坏 .site-header 的 sticky），clip 比 hidden 稳，不产生滚动容器。 */
/* clip 必须加在版心的外层：加在 .hero-bleed 自己身上（它就是 .shell）会当场把出血裁掉。
   加在 main 上而不是 body，是为了不动 .site-header 的 sticky。 */
main:has(.hero-bleed) { overflow-x: clip; }
/* 放大 + 右下角贴页面边缘：图片挣脱 .shell 版心，右边缘顶到视口右缘、下边缘顶到本区块底边，
   抠图的切边正好落在页面边界上，读作「出画」而不是「被切断」。米白底不再加深色衬块。 */
.hero-bleed { padding-bottom: 0; }
/* justify-content: flex-end 让图片沉到底（.hero-art 默认 center，图片够不着底边）；
   max-width: none 是关键——全局 img{max-width:100%} 会把 width 的放大值一路卡回容器宽度，
   不解开这条，width 设多大都等于 100%。 */
.hero-bleed .hero-art { position: relative; justify-content: flex-end; }
.hero-bleed .hero-art-note { position: absolute; left: 0; bottom: 18px; z-index: 2; margin: 0; text-align: left; }
.hero-bleed .hero-cutout { position: relative; z-index: 1;
  width: min(152%, 880px); max-width: none;
  margin: 0 calc(-1 * max(24px, (100vw - 1240px) / 2)) 0 auto;
  -webkit-mask-image: none; mask-image: none; }
/* 汽车钥匙页首屏视频：同样出血顶到视口右缘，但宽度算法和上面抠图不同。
   抠图用 min(152%, 880px) 会溢出容器、右边缘落到屏幕外，切边读作「出画」；
   视频是完整画面，同样写法会把右侧近四分之一连同成品钥匙一起裁掉。
   所以宽度写成「容器宽 + 负边距量」，右边缘正好停在视口右缘，一帧不裁。
   放大改由 grid 配比补：左栏收到 .88fr，标题四个字仍放得下。 */
/* 视频上下贴边：区块自身不留纵向 padding，改由左栏文案单独持有，
   视频因此从页眉下沿一直铺到下一区块上沿，自成一个完整色块。
   留了上下米白缝隙时视频像浮在纸上，块面立不住，冲击力全泄掉。
   min-height 必须归零——.hero 的 560px 会把区块撑高，视频为填满得裁掉更多两侧。 */
/* 列宽用 calc 而非 fr 比例：要让两块视频的内侧边缘落在页面正中，必须满足
   「文案栏 + 列间距 = 视频栏」。文案栏取 calc(50% - gap) 时，视频栏正好等于 50%，
   分割线落到版心中线上——此时边缘对齐与左右等宽同时成立（fr 比例做不到，
   因为 gap 是 clamp 值，比例固定时分割线会随视口漂移）。 */
.hero-bleed:has(.hero-video) { grid-template-columns: calc(50% - var(--hero-gap)) 1fr;
  align-items: stretch; min-height: 0; padding-block: 0; }
.hero-bleed:has(.hero-video) .hero-copy { align-self: center; padding-block: 56px 64px; }
/* 首屏转深墨：素材是深色暖调实拍，压在米白纸上像贴了一块补丁，左右色调对不上。
   深色带本身是站内既有手法（.bx-brands / .phone-shot / .bx-garage），
   这里照搬 .bx-brands 的处理——底色用现成的 --ink，kicker 转黄铜，不新造近似色。
   背景靠伪元素向两侧各撑 100vw 出血，溢出由 main:has(.hero-bleed) 的 clip 兜住。 */
.hero-bleed:has(.hero-video) { position: relative; }
.hero-bleed:has(.hero-video)::before { content: ""; position: absolute; inset: 0 -100vw; background: var(--ink); z-index: 0; }
.hero-bleed:has(.hero-video) > * { position: relative; z-index: 1; }
.hero-bleed:has(.hero-video) h1 { color: var(--paper); }
.hero-bleed:has(.hero-video) .lede { color: rgba(244, 240, 232, .72); }
.hero-bleed:has(.hero-video) .kicker { color: var(--brass); }
.hero-bleed:has(.hero-video) .kicker::before { background: var(--brass); }
.hero-bleed:has(.hero-video) .hero-trust li { color: var(--paper); }
.hero-bleed:has(.hero-video) .hero-trust li::before { box-shadow: inset 0 0 0 2px var(--ink); }
.hero-bleed:has(.hero-video) .hero-art-note { color: rgba(244, 240, 232, .5); }
/* 结果实拍：与首屏同构、左右镜像，两块视频上下紧邻成对称，出血方向翻到左缘。
   与首屏的关键差别是视频按原比例完整显示，不做满高 cover——双闪要同时看见
   左右两个尾灯，满高裁切会把右侧那盏连同画面右缘一起切掉，「双闪」就只剩单边。
   因此这一块由视频自身高度决定区块高度，align-items 回到 center。 */
/* 布局部分整段包进双栏档——照 .phone-shot.is-left 的写法。这些选择器特异性都高过
   下面 max-width:880px 里的还原规则，写在外面窄屏会被它们钉住（视频算出 362px 宽、
   -24px 负边距，比单列容器还宽）。包进来窄屏自动回到基础规则，一条覆盖都不用写。 */
@media (min-width: 881px) {
  /* 首屏列宽的镜像。两块都满足「文案栏 + 间距 = 视频栏」，分割线落在版心中线上，
     因此内侧边缘对齐与左右等宽同时成立——先前以为二者不可兼得是算错了列宽。 */
  .hero-bleed.is-left { grid-template-columns: 1fr calc(50% - var(--hero-gap)); align-items: center; }
  /* .hero-art 自带 min-height:570px，首屏那块视频满高 591 撑得住，这块按原比例只有 415，
     不归零就会在视频上下各留 77px 深色空档，两块视频的边界也对不齐 */
  .hero-bleed.is-left .hero-art { justify-content: center; min-height: 0; }
  .hero-bleed.is-left .hero-video { flex: none;
    width: calc(100% + max(24px, (100vw - 1240px) / 2));
    margin: 0 auto 0 calc(-1 * max(24px, (100vw - 1240px) / 2)); }
}
/* 结果位放静态特写：素材按 1.22 裁切，与该栏 720×591 的容器同比例，
   宽度铺满后高度自然等于首屏那块，竖向随之对齐，不需要 cover 也不留空档 */
.hero-still { display: block; width: 100%; height: auto; }
/* 外观不分档：窄屏同样是深色底，标题仍要浅色。页内区块用 h2，字号对齐 .section-head */
.hero-bleed.is-left h2,
.hero-video-band h2 { margin: 20px 0 0; color: var(--paper);
  font-size: clamp(40px, 5.4vw, 68px); line-height: 1.08; letter-spacing: -.03em; }
.hero-bleed:has(.hero-video) .hero-art { justify-content: stretch; }
.hero-bleed .hero-video { position: relative; z-index: 1; max-width: none; flex: 1; display: flex;
  width: calc(100% + max(24px, (100vw - 1240px) / 2));
  margin: 0 calc(-1 * max(24px, (100vw - 1240px) / 2)) 0 auto; }
/* 满高由 cover 完成，故解开基础样式里的 16/9 定比 */
.hero-bleed .hero-video .hero-video-el { height: 100%; aspect-ratio: auto; }
/* 放大版视频带（手机钥匙实车片、普通钥匙门店片共用一个修饰类）：
   画面两侧信息都要看全——手机界面与车灯、钥匙与设备——所以按 16:9 完整显示，
   不沿用汽车钥匙首屏的满高 cover 裁切。 */
@media (min-width: 881px) {
  /* 视频栏由 50% 放到 60%：这两页的视频带上下都不是第二块视频，
     不受汽车钥匙页「两块视频内侧边缘落版心中线」的对齐约束，版面可以让给画面。
     文案栏留 40% - gap（1880 视口下 392px），68px 的两行四字标题实测占 345px，仍不断行。 */
  .hero-bleed.hero-video-band { align-items: center;
    grid-template-columns: 1fr calc(40% - var(--hero-gap)); }
  .hero-bleed.hero-video-band .hero-art { min-height: 0; justify-content: center; }
  .hero-bleed.hero-video-band .hero-video .hero-video-el { height: auto; aspect-ratio: 16 / 9; }
}
/* 素材身份移到左栏文案末尾：视频铺满后画面上已无处安放，压上去也读不清。
   position 必须显式归位——上面 .hero-bleed .hero-art-note 的 absolute 仍在命中，
   元素离开 .hero-art 后就没了定位祖先，会掉到整个页面的左下角压在下一区块上。 */
.hero-copy .hero-art-note { position: static; margin: 18px 0 0; text-align: left; }
/* 单列后取消出血、回到居中。这段必须写在出血规则之后：特异性相同，
   放进上面第 880px 那个媒体查询块（文件更靠前）会被后面的出血规则覆盖掉。 */
@media (max-width: 880px) {
  /* 桌面端放大版视频带为左视频右文案；单列时恢复文字在前、画面在后的阅读顺序。 */
  .hero-video-band .hero-copy { order: -1; }
  /* 单列后取消深色圆：图片居中在米白底上，圆会挤破版面；图注同步还原深色 */
  .hero-bleed .hero-art::before { display: none; }
  .hero-bleed .hero-art-note { color: var(--muted); }
  /* 视频版的 .88fr/1.12fr 配比特异性(0,2,0)高过前面媒体查询里的 .hero(0,1,0)，
     不在这里显式还原，窄屏会一直卡在双栏、视频被压成一条 190px 的小图。
     纵向 padding 也要一起还原：宽屏版归零是为了让视频贴满上下，
     单列后视频不再撑高度，留 0 会让标题直接顶到页眉。 */
  .hero-bleed:has(.hero-video) { grid-template-columns: 1fr; padding-block: 48px 40px; }
  .hero-bleed:has(.hero-video) .hero-copy { padding-block: 0; }
  .hero-bleed .hero-video { width: 100%; margin: 0; }
  /* 单列后回到原始比例：满高 cover 只在双栏、视频需要跟文案齐高时才成立 */
  .hero-bleed .hero-video .hero-video-el { height: auto; aspect-ratio: 16 / 9; }
  .hero-bleed .hero-cutout { width: min(100%, 560px); margin: -34px auto -30px;
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.4) 86%, transparent 98%), linear-gradient(to right, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 66%, rgba(0,0,0,.4) 86%, transparent 98%), linear-gradient(to right, #000 86%, transparent 100%);
    mask-composite: intersect; }
}

/* 普通钥匙首屏动效：一串家用钥匙挂钥匙圈上轻摆，中间一把黄铜高亮 */
.civil-anim .cring { fill: none; stroke: var(--ink); stroke-width: 7; }
.civil-anim .cring-inner { fill: none; stroke: var(--ink); stroke-width: 2; opacity: .5; }
.civil-anim .ckey-bow { fill: #fbf7ef; stroke: var(--ink); stroke-width: 3; }
.civil-anim .ckey-hole { fill: var(--paper-deep); stroke: var(--ink); stroke-width: 2; }
.civil-anim .ckey-shaft { fill: #fbf7ef; stroke: var(--ink); stroke-width: 3; }
.civil-anim .ckey-bit { fill: #fbf7ef; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.civil-anim .ckey-b .ckey-bow, .civil-anim .ckey-b .ckey-shaft, .civil-anim .ckey-b .ckey-bit { stroke: var(--brass); fill: #fbf4e6; }
.civil-anim .ckey-b .ckey-hole { stroke: var(--brass); }
.civil-anim .keyring { transform-box: fill-box; transform-origin: 50% 14%; animation: keySway 5.4s ease-in-out infinite; }
.civil-anim .ckey-b { animation: keyGlint 5.4s ease-in-out infinite; }
@keyframes keySway { 0%, 100% { transform: rotate(-3.4deg); } 50% { transform: rotate(3.4deg); } }
@keyframes keyGlint { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }