/* Muse Auto Group — site styles
   Direction (Gary, 2026-08-04 brief): dark & premium, cinematic, deep blacks with warm highlights, gold accents, clean and elegant.
   Layout: full-bleed cinematic bands alternating with quiet editorial sections; one gold accent, never more. */
:root {
  --bg: #0a0a0a; --band: #111111; --panel: #151515; --line: #ffffff17; --line-2: #ffffff2e;
  --fg: #f4f1ea; --muted: #a8a397; --faint: #6f6b63;
  --gold: #c5a059; --gold-hi: #e0c286; --paper: #f2efe9; --ink: #141414; --ink-muted: #5d5a54;
  --sans: "Manrope", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1240px;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased }
img, video { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)) }

/* type */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold) }
.h-xl { font-size: clamp(42px, 6.4vw, 92px); font-weight: 300; line-height: .98; letter-spacing: -.025em; margin: 0; text-wrap: balance }
.h-lg { font-size: clamp(32px, 4.2vw, 58px); font-weight: 300; line-height: 1.04; letter-spacing: -.02em; margin: 0; text-wrap: balance }
.h-md { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; margin: 0 }
.h-xl b, .h-lg b { font-weight: 600 }
.lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); max-width: 54ch; margin: 0 }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold); transition: background .25s, color .25s }
.btn:hover { background: var(--gold); color: #0a0a0a }
.btn.solid { background: var(--gold); color: #0a0a0a }
.btn.solid:hover { background: var(--gold-hi); border-color: var(--gold-hi) }
.btn.ghost { border-color: #ffffff59; color: #fff }
.btn.ghost:hover { background: #fff; color: #0a0a0a; border-color: #fff }
.btn::after { content: "→"; font-size: 15px; letter-spacing: 0 }
.link { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: inline-flex; gap: 10px }
.link::after { content: "→" }
.link:hover { color: var(--gold-hi) }

/* header */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; padding-top: env(safe-area-inset-top, 0px) }
.hdr.solid { background: #0a0a0aeb; border-color: var(--line); backdrop-filter: blur(10px) }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px }
.hdr .logo img { height: 40px; width: auto }
.nav { display: flex; gap: 30px; align-items: center }
.nav a { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #ffffffcc; transition: color .2s }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold) }
.nav .btn { padding: 11px 18px; font-size: 11px }
.nav .btn::after { display: none }
.burger { display: none; width: 44px; height: 44px; position: relative }
.burger span, .burger::before, .burger::after { content: ""; position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; transition: transform .25s, opacity .25s }
.burger::before { top: 15px } .burger span { top: 21px } .burger::after { top: 27px }
.hdr.open .burger::before { transform: translateY(6px) rotate(45deg) } .hdr.open .burger span { opacity: 0 } .hdr.open .burger::after { transform: translateY(-6px) rotate(-45deg) }
@media (max-width: 960px) {
  .burger { display: block }
  .nav { position: fixed; inset: 78px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: #0a0a0af7; border-bottom: 1px solid var(--line); padding: 8px max(24px, env(safe-area-inset-left, 0px)) 24px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s }
  .nav a { padding: 15px 0; width: 100%; border-bottom: 1px solid var(--line); font-size: 13px }
  .nav .btn { margin-top: 18px; width: auto; border-bottom: 1px solid var(--gold) }
  .hdr.open { background: #0a0a0af7 }
  .hdr.open .nav { opacity: 1; transform: none; pointer-events: auto }
}

/* hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #000 }
.hero video, .hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: center / cover no-repeat }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #000000a6 0%, #00000026 30%, #00000040 60%, #000000eb 100%) }
.hero .wrap { position: relative; z-index: 2; padding-block: 0 clamp(56px, 9vh, 110px); width: 100% }
.hero .h-xl { margin: 18px 0 22px; max-width: 14ch }
.hero .lead { color: #ffffffcc }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px }
.scroll-cue { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); bottom: 40px; z-index: 2; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #ffffff99; writing-mode: vertical-rl }
@media (max-width: 700px) { .scroll-cue { display: none } }

/* sections */
.sec { padding-block: clamp(80px, 11vw, 150px) }
.sec.band { background: var(--band) }
.sec.paper { background: var(--paper); color: var(--ink) }
.sec.paper .lead { color: var(--ink-muted) }
.sec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 60px; margin-bottom: clamp(40px, 5vw, 64px) }
.sec-h > div { max-width: 880px }   /* 10-16 从 640 放宽：标题第二句（粗体）一行放得下，不再被挤成两行 */
.sec-h .lead { max-width: 640px }
.sec-h .h-lg { margin-top: 14px }
.sec-h .lead { margin-top: 18px }

/* announcement */
.notice { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--band) }
.notice .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; padding-block: 26px }
.notice .tag { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #0a0a0a; background: var(--gold); padding: 6px 12px }
.notice p { margin: 0; color: var(--muted) } .notice p b { color: var(--fg); font-weight: 600 }
@media (max-width: 760px) { .notice .wrap { grid-template-columns: minmax(0, 1fr); gap: 14px } }

/* divisions */
.divs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.div { position: relative; display: flex; flex-direction: column; min-height: 400px; padding: 34px 26px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .3s }
.div:hover { background: var(--panel) }
.div .lg { height: 116px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px }
.div .lg img { height: 96px; width: auto; max-width: 88%; object-fit: contain; object-position: center }
.div .no { font-size: 12px; color: var(--faint); letter-spacing: .1em; font-variant-numeric: tabular-nums }
.div h3 { font-size: 19px; font-weight: 600; letter-spacing: .01em; margin: 10px 0 8px }
.div p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55 }
.div .link { margin-top: auto; padding-top: 26px }
.div.new::before { content: "NEW"; position: absolute; top: 18px; right: 18px; font-size: 10px; font-weight: 700; letter-spacing: .2em; color: var(--gold); border: 1px solid var(--gold); padding: 3px 7px }
@media (max-width: 1100px) { .divs { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 700px) { .divs { grid-template-columns: minmax(0, 1fr) } .div { min-height: 0 } }

/* inventory cards */
.cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px }
@media (max-width: 1000px) { .cars { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 620px) { .cars { grid-template-columns: minmax(0, 1fr) } }
.car { display: flex; flex-direction: column; background: #fff; color: var(--ink); transition: transform .3s, box-shadow .3s }
.car:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px #00000059 }
.car .ph { aspect-ratio: 4 / 3; background: #ddd center / cover no-repeat; position: relative }
.car .ph .flag { position: absolute; left: 14px; top: 14px; background: #0a0a0a; color: var(--gold); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px }
.car .bd { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1 }
.car .yr { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--ink-muted) }
.car .nm { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em }
.car .tr { font-size: 13.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.car .ft { margin-top: auto; padding-top: 16px; border-top: 1px solid #00000014; display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
.car .km { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums }
.car .pr { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: #8a6a2a }
.car .pr.call { font-size: 14px; letter-spacing: .08em; text-transform: uppercase }
.cars-empty { color: var(--ink-muted) }

/* feature (image + text) */
.feature { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden }
.feature .bg { position: absolute; inset: 0; background: center / cover no-repeat }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000000e6 0%, #000000b3 38%, #00000014 75%) }
.feature .wrap { position: relative; z-index: 1; width: 100% }
.feature .box { max-width: 520px }
.feature .h-lg { margin: 16px 0 10px }
.feature .addr { color: var(--gold); font-size: 15px; letter-spacing: .04em; margin-bottom: 20px }
.feature ul { list-style: none; padding: 0; margin: 24px 0 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 14px; color: #ffffffcc }
.feature li::before { content: "—"; color: var(--gold); margin-right: 10px }
@media (max-width: 700px) { .feature::after { background: linear-gradient(180deg, #00000033 0%, #000000e6 60%) } .feature { align-items: flex-end; padding-top: 240px } .feature .wrap { padding-bottom: 60px } }

/* future HQ：左文右图 + 下方三张效果图 */
.hq { background: #070707; border-top: 1px solid var(--line) }
.hq-top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(30px, 5vw, 70px); align-items: center }
.hq-addr { color: var(--gold); font-size: 15px; letter-spacing: .04em; margin-bottom: 18px }
.hq-txt ul { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 14px; color: #ffffffcc }
.hq-txt li::before { content: "—"; color: var(--gold); margin-right: 10px }
.soon { font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #0a0a0a; background: var(--gold); padding: 7px 12px }
.hq figure { margin: 0; position: relative; overflow: hidden; background: #111 }
.hq figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1) }
.hq figure:hover img { transform: scale(1.03) }
.hq figcaption { position: absolute; left: 16px; bottom: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #fff; background: #000000a6; padding: 6px 10px }
.hq-main { aspect-ratio: 16 / 9 }
.hq-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px }
.hq-row figure { aspect-ratio: 4 / 3 }
.hq-note { margin: 14px 0 0; font-size: 12px; color: var(--faint) }
@media (max-width: 900px) { .hq-top { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 600px) { .hq-row { grid-template-columns: repeat(2, minmax(0, 1fr)) } .hq-row figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10 } }

/* duo (two legacy tiles) */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: #000 }
.tile { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden }
.tile .bg { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform 1.2s cubic-bezier(.2,.7,.2,1) }
.tile:hover .bg { transform: scale(1.04) }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 35%, #000000e0 100%) }
.tile .in { position: relative; z-index: 1; padding: 44px clamp(24px, 4vw, 56px) }
.tile .h-md { margin: 12px 0 10px; font-size: clamp(26px, 2.8vw, 38px); font-weight: 300 }
.tile p { color: #ffffffbf; margin: 0 0 22px; max-width: 40ch }
@media (max-width: 800px) { .duo { grid-template-columns: minmax(0, 1fr) } .tile { min-height: 440px } }

/* journey */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #00000024 }
.steps div { padding: 26px 18px 0 0 }
.steps b { display: block; font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; letter-spacing: -.01em }
.steps span { font-size: 13.5px; color: var(--ink-muted) }
.steps i { display: block; font-style: normal; font-size: 12px; color: #8a6a2a; letter-spacing: .14em; margin-bottom: 14px; font-variant-numeric: tabular-nums }
@media (max-width: 800px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px } .steps div { padding-bottom: 22px } }

/* contact / footer */
.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; align-items: start }
.contact dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px }
.contact dt { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px }
.contact dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7 }
.contact dd a:hover { color: var(--fg) }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); gap: 40px } }
@media (max-width: 480px) { .contact dl { grid-template-columns: minmax(0, 1fr) } }
.ftr { border-top: 1px solid var(--line); padding-block: 34px calc(34px + env(safe-area-inset-bottom, 0px)); color: var(--faint); font-size: 13px }
.ftr .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; align-items: center }
.ftr img { height: 32px; width: auto; opacity: .9 }
.ftr nav { display: flex; flex-wrap: wrap; gap: 8px 22px }
.ftr a:hover { color: var(--fg) }

/* reveal */
.rv { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1) }
.js .rv.pre { opacity: 0; transform: translateY(26px) }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important } .js .rv.pre { opacity: 1; transform: none } }

/* 复制号码提示 */
.toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 200; background: var(--gold); color: #0a0a0a; font-weight: 700; font-size: 14px; letter-spacing: .02em; padding: 14px 22px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 12px 30px #00000080; max-width: calc(100vw - 32px) }
.toast.on { opacity: 1; transform: translate(-50%, 0) }

.car .pr s { color: #9a958c; font-weight: 500; font-size: 14px; margin-right: 6px }
/* 通用表单 */
.lf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.lf .f { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.lf .f.wide { grid-column: 1 / -1 }
.lf label { font-size: 13.5px; color: var(--muted) }
.lf input, .lf select, .lf textarea { background: var(--panel); color: var(--fg); border: 1px solid var(--line-2); border-radius: 0; padding: 12px 14px; font: inherit; font-size: 15px; width: 100% }
.lf input:focus, .lf select:focus, .lf textarea:focus { outline: none; border-color: var(--gold) }
.lf input[type=date], .lf input[type=time] { color-scheme: dark }
.lf .err { grid-column: 1 / -1; color: #ff8a7a; min-height: 1.2em; white-space: pre-line }
#qErr { white-space: pre-line }
.lf .act { grid-column: 1 / -1 }
.lf-done { padding: 30px; border-left: 3px solid var(--gold); background: var(--panel); font-size: 16px }
@media (max-width: 600px) { .lf { grid-template-columns: minmax(0, 1fr) } }

/* 手机底部常驻按钮（10-16 用户反馈：手机上预约按钮藏在三条杠里，客人找不到） */
.mbar { display: none }
@media (max-width: 960px) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; background: #0a0a0af2; border-top: 1px solid var(--line);
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); backdrop-filter: blur(8px) }
  .mbar a { flex: 1; min-width: 0; text-align: center; padding: 14px 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .mbar a.solid { background: var(--gold); color: #111 }
  body.has-mbar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) }
}

/* .hero.right：照片只占右边，完整显示；文字在左边暗区（10-16 Granville 首屏：车被切一半、被文字压住） */
.hero.right { background: #0b0b0c; align-items: center }
.hero.right .bg { left: 36%; width: auto; background-size: cover; background-position: center }
.hero.right::after { background: linear-gradient(90deg, #0b0b0c 36%, #0b0b0cd9 42%, #0b0b0c00 62%), linear-gradient(180deg, #0b0b0c99 0%, #0b0b0c00 18%) }
.hero.right .wrap { padding-block: calc(78px + env(safe-area-inset-top, 0px)) 60px }
.hero.right .h-xl { max-width: 11ch }
.hero.right .lead { max-width: 30ch }
@media (max-width: 900px) {   /* 手机/平板：照片完整放上面，文字放下面，互不遮挡 */
  .hero.right { display: block; min-height: 0 !important; padding-top: 71vw }
  .hero.right .bg { left: 0; height: 71vw }
  .hero.right::after { inset: 0 0 auto 0; height: 71vw; background: linear-gradient(180deg, #0b0b0c80 0%, #0b0b0c00 22%, #0b0b0c00 82%, #0b0b0c 100%) }
  .hero.right .wrap { padding-block: 22px 56px }
}

/* RWB / 洗车页首屏：照片是 1920×800 横幅，电脑上按照片比例定高度，不再被拉伸放大发糊（10-16 全站查糊图） */
@media (min-width: 901px) { .rwb-hero, .spa-hero { min-height: 41.67vw } }

/* 正文段落避免最后一行只剩一个词（10-16 文案断行优化） */
.lead, p { text-wrap: pretty }
.hero .h-xl { max-width: 15ch }
@media (min-width: 901px) { .hero.right .h-xl { max-width: min(30vw, 12ch) } .hero.right .lead { max-width: 30vw } }

/* 流动条（10-16）：品牌名滚动条 + 照片滚动带；内容复制一份首尾相接，无缝循环 */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: #0b0b0c; padding-block: 18px }
.ticker-track { display: flex; width: max-content; animation: flow-x 48s linear infinite }
.ticker-track span { font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #ffffff8c; padding-inline: 34px; white-space: nowrap; position: relative }
.ticker-track span::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; background: var(--gold); transform: translateY(-50%) rotate(45deg) }
.flow { padding-block: clamp(70px, 9vw, 120px) 0 }
.flow .eyebrow { margin-bottom: 26px }
.flow-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.flow-track { display: flex; width: max-content; animation: flow-x 70s linear infinite }
.flow-track img { height: clamp(180px, 22vw, 300px); width: auto; display: block; object-fit: cover; margin-right: 14px }   /* 用 margin 不用 gap：首尾接缝处间距一致，循环不跳 */
.flow-row:hover .flow-track { animation-play-state: paused }
@keyframes flow-x { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .ticker-track, .flow-track { animation: none } }

/* 滚动动效（motion.js，10-16）—— 只有加载了动效脚本（html.motion）才生效，没有脚本时页面照常显示 */
.motion main .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em }
.motion main .wi { display: inline-block; will-change: transform }
.motion .flow.pinned { display: block; padding-block: 0; position: relative }   /* 高度由 motion.js 设成「一屏 + 横向长度」 */
.flow-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden }
.motion .flow.pinned .flow-row { -webkit-mask-image: none; mask-image: none }
.motion .flow.pinned .flow-track { animation: none; padding-left: max(24px, calc((100vw - 1240px) / 2)) }
.motion .flow.pinned .flow-track img { height: min(58vh, 560px); margin-right: 24px; will-change: transform }
.motion main .pic, .motion main .tile2, .motion main .shot { overflow: hidden }
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }

/* 照片轮播（10-16 用户反馈：手机上照片不动、也划不了）：手机可左右划 + 自动轮播；电脑有箭头 */
.flow-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px }
.flow-head .eyebrow { margin-bottom: 0 }
.flow-nav { display: flex; gap: 10px }
.flow-nav button { width: 46px; height: 46px; border: 1px solid var(--line-2, #ffffff33); color: var(--fg); background: transparent; font-size: 18px; cursor: pointer; transition: border-color .2s, color .2s }
.flow-nav button:hover { border-color: var(--gold); color: var(--gold) }
.flow { padding-bottom: 10px }
.flow .flow-head { margin-bottom: 26px }
.flow-row.carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none }
.flow-row.carousel::-webkit-scrollbar { display: none }
.flow-row.carousel .flow-track { animation: none; padding-inline: max(16px, calc((100vw - 1240px) / 2)) }
.flow-row.carousel .flow-track img { scroll-snap-align: start; scroll-margin-left: max(16px, calc((100vw - 1240px) / 2)) }
.motion .flow.pinned .flow-head { margin-bottom: 26px }