/*
Theme Name: WITMIRROR
Theme URI: https://www.witmirror.com/
Description: WITMIRROR 官网主题 3.2（正文 Open Sans；草绿 + 炭灰；整幅大图、色块、卡片阴影、深浅交替的层次感；中英双语）。
Version: 3.2.0
Author: WITMIRROR
Text Domain: witmirror
*/

@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url(assets/fonts/montserrat-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url(assets/fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url(assets/fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url(assets/fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(assets/fonts/open-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(assets/fonts/open-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url(assets/fonts/open-sans-latin-700-normal.woff2) format("woff2"); }

:root {
    --ink: #1f2224; --ink2: #5b5f61; --ink3: #969a9c;
    --line: #e7eae3; --soft: #f3f7ee; --warm: #f7f6f2;
    --lime: #7cb342; --lime2: #5f9631; --limel: #eef6e3; --lime-t: #b5dd7a;
    --grad: linear-gradient(135deg, #8cc152 0%, #5f9631 100%);
    --char: #26292b; --char2: #1b1d1f;
    --r: 6px;
    --sh: 0 16px 40px -14px rgba(28, 40, 18, .16);
    --sh2: 0 30px 64px -20px rgba(28, 40, 18, .30);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --f-body: "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --f-head: "Montserrat", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --wrap: 1280px; --gut: 32px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.8; color: var(--ink2); background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--lime2); }
h1, h2, h3, h4 { font-family: var(--f-head); color: var(--ink); line-height: 1.22; margin: 0 0 .6em; letter-spacing: -.01em; }
h1, h2 { font-weight: 400; }
h1 { font-size: 48px; } h2 { font-size: 42px; }
h3 { font-size: 18px; font-weight: 500; }
h1 b, h2 b, h1 strong, h2 strong { font-weight: 600; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
.sr-only, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 999; background: #fff; padding: 8px 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap--text { max-width: 980px; }
.empty { padding: 40px 0; text-align: center; color: var(--ink3); }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; background: var(--lime); color: #fff; border: 1px solid var(--lime); padding: 14px 30px; border-radius: 4px; font-family: var(--f-head); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; transition: all .3s var(--ease); }
.btn:hover { background: var(--lime2); border-color: var(--lime2); color: #fff; box-shadow: 0 14px 28px -12px rgba(95,150,49,.75); transform: translateY(-1px); }
.btn--gold { background: var(--lime); border-color: var(--lime); color: #fff; }
.btn--line, .btn--ghost { background: transparent; color: var(--ink); border-color: #c9cdc5; }
.btn--line:hover, .btn--ghost:hover { background: var(--char); border-color: var(--char); color: #fff; box-shadow: 0 14px 28px -12px rgba(0,0,0,.45); }
.btn--dark { background: var(--char); border-color: var(--char); color: #fff; }
.btn--dark:hover { background: var(--lime); border-color: var(--lime); }
.btn--sm { padding: 11px 20px; font-size: 11px; }
.btn--lg { padding: 16px 34px; }
.btn--block { display: flex; width: 100%; }
.btn .ic, .btn svg { width: 15px; height: 15px; }

/* ---------- 顶栏（炭灰细条） ---------- */
.topbar { background: var(--char2); color: #a3a7a9; font-size: 12.5px; }
.topbar__in { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 40px; max-width: 1440px; }
.topbar__l, .topbar__r { display: flex; align-items: center; gap: 26px; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; color: #c9cccd; }
.topbar a:hover { color: #fff; }
.topbar svg, .topbar .ic { width: 14px; height: 14px; color: var(--lime-t); }
.topbar__r > span { font-family: var(--f-head); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #8d9193; }
.topbar .lang a { color: #8d9193; }
.topbar .lang a.is-on { color: #fff; box-shadow: inset 0 -2px 0 var(--lime); }

/* ---------- 页头：白色单行 ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .3s; }
.admin-bar .hd { top: 32px; }
.hd.is-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.hd__in { display: flex; align-items: center; gap: 28px; min-height: 84px; max-width: 1440px; }
.brand { display: flex; flex-direction: column; justify-content: center; flex: none; }
.brand img { width: 170px; height: auto; filter: invert(.88); }
.brand__txt { font-family: var(--f-head); font-weight: 600; font-size: 24px; letter-spacing: .14em; color: var(--ink); }
.brand__tag { font-family: var(--f-head); font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--lime2); margin-top: 7px; }
.nav { flex: 1; display: flex; justify-content: center; }
.nav .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav .menu > li { position: relative; }
.nav .menu > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 31px 14px; font-family: var(--f-head); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); position: relative; }
.nav .menu > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 24px; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav .menu > li:hover > a::after, .nav .menu > li.current-menu-item > a::after, .nav .menu > li.current-menu-ancestor > a::after, .nav .menu > li.current-menu-parent > a::after { transform: scaleX(1); }
.nav .menu > li > a .ic, .nav .menu > li > a svg { width: 9px; height: 6px; }
.nav .sub-menu { list-style: none; margin: 0; padding: 20px; position: absolute; top: 100%; left: -20px; min-width: 260px; background: #fff; border-radius: var(--r); box-shadow: 0 30px 60px -18px rgba(0,0,0,.22); border-top: 3px solid var(--lime); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s var(--ease); }
.nav .menu > li:hover > .sub-menu, .nav .menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav .menu > li.is-mega > .sub-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; width: 620px; left: -210px; }
.nav .sub-menu a { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 4px; font-size: 14px; color: var(--ink); line-height: 1.35; transition: background .2s; }
.nav .sub-menu a:hover { background: var(--soft); color: var(--lime2); }
.nav .sub-menu a img { width: 54px; height: 54px; object-fit: cover; flex: none; border-radius: 4px; background: var(--soft); }
.nav .sub-menu a span { display: flex; flex-direction: column; }
.nav .sub-menu a small { color: var(--ink3); font-size: 12px; }
.hd__tools { display: flex; align-items: center; gap: 14px; flex: none; }
.hd__icon, .hd__burger { background: none; border: 0; color: var(--ink); padding: 8px; display: flex; }
.hd__icon:hover { color: var(--lime2); }
.hd__burger { display: none; }
.search-pop { background: #fff; border-top: 1px solid var(--line); }
.search-pop__in { max-width: 860px; margin: 0 auto; padding: 20px var(--gut); display: flex; gap: 8px; align-items: center; }
.search-pop input[type=search] { flex: 1; border: 0; border-bottom: 1px solid var(--ink); padding: 10px 2px; font-size: 18px; font-family: var(--f-head); font-weight: 300; outline: none; border-radius: 0; }
.search-pop button { background: none; border: 0; padding: 8px; display: flex; }
.lang { display: inline-flex; align-items: center; gap: 2px; font-family: var(--f-head); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; }
.lang a { padding: 4px 6px; color: var(--ink3); }
.lang a.is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--lime); }

/* 手机抽屉 */
.drawer { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.45); }
.drawer__panel { width: min(86vw, 360px); height: 100%; background: #fff; padding: 64px 28px 28px; overflow-y: auto; position: relative; }
.drawer__x { position: absolute; top: 16px; right: 16px; background: none; border: 0; padding: 6px; }
.drawer__menu { list-style: none; margin: 0; padding: 0; }
.drawer__menu li { border-bottom: 1px solid var(--line); }
.drawer__menu a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; font-family: var(--f-head); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.drawer__menu .sub-menu { list-style: none; padding: 0 0 10px 12px; margin: 0; display: none; }
.drawer__menu .sub-menu li { border: 0; }
.drawer__menu .sub-menu a { padding: 7px 0; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink2); font-family: var(--f-body); font-weight: 400; justify-content: flex-start; gap: 10px; }
.drawer__menu .sub-menu img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
.drawer__menu .sub-menu small { display: none; }
.drawer__menu .is-open > .sub-menu { display: block; }
.drawer .lang { margin-top: 20px; }
.drawer__contact { margin-top: 20px; font-size: 14px; }
.drawer__contact .btn { margin-top: 14px; }
body[class*="is-locked-"] { overflow: hidden; }

/* ---------- 首屏：整幅场景大图 ---------- */
.hero { position: relative; background: radial-gradient(90% 120% at 90% 20%, #33383b 0%, #222527 45%, #1b1d1f 100%); overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -8%; top: -20%; width: 52%; height: 120%; background: radial-gradient(closest-side, rgba(140,193,82,.16), rgba(140,193,82,0)); pointer-events: none; }
.hero__slide { position: absolute; inset: 0; display: flex; min-height: clamp(580px, calc(100vh - 124px), 760px); opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 1.2s; }
.hero__slide.is-on { position: relative; opacity: 1; visibility: visible; }
.hero__img { position: absolute; top: 0; bottom: 0; left: 0; width: 56%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 68%, transparent 100%); mask-image: linear-gradient(90deg, #000 68%, transparent 100%); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 7s ease-out; }
.hero__slide.is-on .hero__img img { transform: scale(1); }
.hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(27,29,31,.6) 0%, rgba(27,29,31,0) 30%); }
.hero__wrap { position: relative; z-index: 2; width: 100%; max-width: 1400px; display: flex; justify-content: flex-end; align-items: center; padding-top: 60px; padding-bottom: 140px; }
.hero__txt { width: 40%; max-width: 560px; color: rgba(255,255,255,.86); }
.hero .eyebrow { color: var(--lime-t); }
.hero__t { color: #fff; font-size: 52px; font-weight: 400; line-height: 1.12; margin-bottom: 28px; }
.hero .ticks { margin-bottom: 38px; }
.hero .ticks li { color: rgba(255,255,255,.88); font-size: 15.5px; }
.hero .ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5dd7a' stroke-width='2.4'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn--ghost:hover { background: #fff; color: var(--char); border-color: #fff; }
.hero__no { margin: 44px 0 0; font-family: var(--f-head); font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,.5); }
.hero__no b { font-size: 22px; font-weight: 300; color: #fff; letter-spacing: .06em; margin-right: 4px; }
.hero__slide.is-on .hero__txt > * { animation: wmUp 1s var(--ease) both; }
.hero__slide.is-on .hero__txt > :nth-child(2) { animation-delay: .1s; }
.hero__slide.is-on .hero__txt > :nth-child(3) { animation-delay: .2s; }
.hero__slide.is-on .hero__txt > :nth-child(4) { animation-delay: .3s; }
.hero__slide.is-on .hero__txt > :nth-child(5) { animation-delay: .4s; }
@keyframes wmUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero__dots { position: absolute; z-index: 3; left: var(--gut); bottom: 118px; display: flex; gap: 10px; }
.hero__dots button { width: 34px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255,255,255,.35); transition: all .3s; }
.hero__dots button.is-on { width: 56px; background: var(--lime-t); }
@media (min-width: 1360px) { .hero__dots { left: calc((100vw - 1400px) / 2 + var(--gut)); } }

.eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--f-head); color: var(--lime2); font-weight: 500; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 16px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.sh--c .eyebrow { justify-content: center; }
.sh--c .eyebrow::after { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; padding: 6px 0; }
.ticks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cb342' stroke-width='2.4'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* ---------- 数字条：浮在大图下沿的白色卡片 ---------- */
.stats { position: relative; z-index: 4; margin-top: -80px; }
.stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-radius: var(--r); box-shadow: 0 34px 70px -22px rgba(20,30,10,.28); }
.stats__grid div { position: relative; padding: 40px 14px 36px; text-align: center; }
.stats__grid div + div::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: var(--line); }
.stats__grid b { display: inline-block; font-family: var(--f-head); font-size: 44px; font-weight: 300; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats__grid span { display: block; margin-top: 10px; font-family: var(--f-head); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }

/* ---------- 通用区块 ---------- */
.sec { padding: 120px 0; }
.stats + .sec { padding-top: 110px; }
.sec--soft { background: var(--soft); }
.sec--warm { background: var(--warm); }
.sec--dark { background: var(--soft); }
.sh { max-width: 780px; margin-bottom: 60px; }
.sh--c { text-align: center; margin-left: auto; margin-right: auto; }
.sh__lead { color: var(--ink2); font-size: 16.5px; margin: 0; }
.more { text-align: center; margin-top: 60px; }
.lead { font-size: 17px; color: var(--ink2); line-height: 1.9; }

/* 分类卡：大图 + 底部渐变压字 */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.catc { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--soft); box-shadow: var(--sh); transition: transform .6s var(--ease), box-shadow .6s var(--ease), opacity .9s var(--ease); }
.catc__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.catc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.catc__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,23,0) 48%, rgba(20,22,23,.8) 100%); }
.catc__t { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; padding: 24px 24px 22px; }
.catc__t b { font-family: var(--f-head); font-weight: 500; font-size: 17px; color: #fff; line-height: 1.3; }
.catc__t small { margin-top: 6px; font-family: var(--f-head); font-size: 10.5px; letter-spacing: .18em; color: rgba(255,255,255,.72); text-transform: uppercase; }
.catc__go { position: absolute; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6) rotate(-45deg); transition: all .45s var(--ease); }
.catc__go svg { width: 16px; height: 16px; }
.catc:hover { box-shadow: var(--sh2); }
.catc:hover, .rv-on .catc.rv.is-in:hover { transform: translateY(-8px); }
.catc:hover .catc__img img { transform: scale(1.07); }
.catc:hover .catc__go { opacity: 1; transform: none; }

/* 产品卡：白色卡片 + 阴影 */
.grid { display: grid; gap: 30px 26px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.pc { position: relative; display: flex; flex-direction: column; color: var(--ink); min-width: 0; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: transform .6s var(--ease), box-shadow .6s var(--ease), opacity .9s var(--ease); }
.pc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.pc:hover { box-shadow: var(--sh2); color: var(--ink); }
.pc:hover, .rv-on .pc.rv.is-in:hover { transform: translateY(-8px); }
.pc:hover::after { transform: scaleX(1); }
.pc__img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f5f6f2; }
.pc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s, transform 1.2s var(--ease); }
.pc__b { opacity: 0; }
.pc:hover .pc__b { opacity: 1; }
.pc:hover .pc__img img { transform: scale(1.05); }
.pc__t { display: flex; flex-direction: column; padding: 20px 22px 24px; line-height: 1.45; flex: 1; }
.pc__t small { font-family: var(--f-head); color: var(--lime2); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.pc__t b { font-family: var(--f-head); font-weight: 500; font-size: 15px; color: var(--ink); margin: 8px 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.pc__t em { font-style: normal; font-family: var(--f-head); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); margin-top: auto; transition: color .2s; }
.pc:hover .pc__t em, .pc:hover .pc__t b { color: var(--lime2); }

/* 关于我们：叠放图片 + 绿色色块 + 年限徽章 */
.intro { display: grid; grid-template-columns: 1.05fr 1fr; gap: 100px; align-items: center; }
.intro__media { position: relative; padding: 0 0 50px 50px; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.intro__media::before { content: ""; position: absolute; left: 0; bottom: 0; width: 60%; height: 74%; background: var(--grad); border-radius: var(--r); }
.intro__img { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: end; }
.intro__img img { width: 100%; height: 480px; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh2); }
.intro__img img:last-child { height: 340px; }
.intro__img:not(.one) img:last-child { margin-top: 140px; }
.intro__img.one { display: block; } .intro__img.one img { height: auto; aspect-ratio: 4 / 3; }
.intro__badge { position: absolute; z-index: 2; right: 0; top: 0; width: calc((100% - 68px) / 2.3); min-height: 116px; display: flex; align-items: center; gap: 14px; background: var(--char); color: #fff; padding: 20px 20px; border-radius: var(--r); box-shadow: var(--sh2); }
.intro__badge b { flex: none; font-family: var(--f-head); font-size: 50px; font-weight: 300; line-height: 1; color: var(--lime-t); }
.intro__badge span { font-family: var(--f-head); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #cfd2d3; line-height: 1.6; }
.intro .sh { margin-bottom: 26px; }
.intro__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }

/* 优势卡片 */
.whys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why { background: #fff; border-radius: var(--r); padding: 42px 36px 38px; box-shadow: var(--sh); border: 1px solid transparent; transition: transform .6s var(--ease), box-shadow .6s var(--ease), background .4s, border-color .4s, opacity .9s var(--ease); }
.why:hover { box-shadow: var(--sh2); }
.why:hover, .rv-on .why.rv.is-in:hover { transform: translateY(-6px); }
.why__ic { width: 58px; height: 58px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -10px rgba(95,150,49,.7); }
.why__ic svg { width: 24px; height: 24px; }
.why h3 { margin: 26px 0 10px; font-size: 18px; }
.why p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.75; }

/* 优势区：深色背景（工厂图压暗） */
.sec--why { position: relative; background: var(--char2) center / cover no-repeat; color: #b4b8ba; }
.sec--why::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,24,25,.94) 0%, rgba(22,24,25,.86) 100%); }
.sec--why .wrap { position: relative; }
.sec--why h2 { color: #fff; }
.sec--why .sh__lead { color: #b4b8ba; }
.sec--why .eyebrow { color: var(--lime-t); }
.sec--why .why { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.09); box-shadow: none; }
.sec--why .why:hover { background: rgba(255,255,255,.08); border-color: rgba(140,193,82,.55); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.sec--why .why h3 { color: #fff; }
.sec--why .why p { color: #a9adaf; }
@media (min-width: 960px) and (hover: hover) { .sec--why { background-attachment: fixed; } }

/* 合作流程：白色步骤卡 + 渐变数字圆 */
.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.flow li { position: relative; background: #fff; border-radius: var(--r); padding: 34px 26px 30px; box-shadow: var(--sh); transition: transform .6s var(--ease), box-shadow .6s var(--ease), opacity .9s var(--ease); }
.flow li:hover { box-shadow: var(--sh2); }
.flow li:hover, .rv-on .flow li.rv.is-in:hover { transform: translateY(-6px); }
.flow li::after { content: ""; position: absolute; top: 58px; right: -17px; width: 10px; height: 10px; border-top: 2px solid var(--lime); border-right: 2px solid var(--lime); transform: rotate(45deg); }
.flow li:last-child::after { display: none; }
.flow li span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--grad); color: #fff; font-family: var(--f-head); font-weight: 500; font-size: 16px; margin-bottom: 22px; box-shadow: 0 12px 24px -10px rgba(95,150,49,.7); }
.flow li b { display: block; color: var(--ink); font-family: var(--f-head); font-weight: 500; font-size: 16px; margin-bottom: 8px; }
.flow li p { margin: 0; font-size: 14.5px; color: var(--ink2); line-height: 1.7; }

/* 工厂相册：首图放大的拼贴 */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gal figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); box-shadow: var(--sh); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.gal img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.gal figure:hover img { transform: scale(1.06); }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 20px 16px; background: linear-gradient(180deg, rgba(20,22,23,0) 0%, rgba(20,22,23,.78) 100%); color: #fff; font-family: var(--f-head); font-size: 12.5px; letter-spacing: .06em; }
.gal--mosaic figure:first-child { grid-column: span 2; grid-row: span 2; }
.gal--mosaic figure:first-child img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.gal--mosaic figure:first-child figcaption { font-size: 15px; padding: 60px 26px 22px; }

/* 认证 */
.cert { display: grid; grid-template-columns: 1fr 1.1fr; gap: 90px; align-items: center; }
.cert__img { background: #fff; padding: 16px; border-radius: var(--r); box-shadow: var(--sh2); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.cert__img img { width: 100%; border-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 32px; }
.chips span { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); font-family: var(--f-head); font-weight: 500; font-size: 12px; letter-spacing: .1em; padding: 9px 16px; border-radius: 30px; box-shadow: 0 6px 16px -8px rgba(28,40,18,.25); }
.chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }

/* 常见问题：左侧标题 + 深色联系卡，右侧卡片式问答 */
.faq2 { display: grid; grid-template-columns: .85fr 1.3fr; gap: 80px; align-items: start; }
.faq2__l { position: sticky; top: 120px; }
.faq2__l .sh { margin-bottom: 34px; }
.faq2__card { position: relative; overflow: hidden; background: var(--char); color: #b4b8ba; padding: 38px 34px 34px; border-radius: var(--r); box-shadow: var(--sh2); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.faq2__card::after { content: ""; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: var(--grad); opacity: .22; }
.faq2__card h3 { color: #fff; font-size: 22px; font-weight: 400; }
.faq2__card p { font-size: 15px; margin-bottom: 24px; }
.faq2__mail { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #fff; font-size: 14px; }
.faq2__mail svg { width: 16px; height: 16px; color: var(--lime-t); }
.faqw { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; }
.faq2 .faqw { max-width: none; margin: 0; }
.qa { background: #fff; border: 1px solid var(--line); border-radius: var(--r); transition: box-shadow .4s, border-color .4s; }
.qa[open] { border-color: transparent; box-shadow: var(--sh); }
.qa summary { cursor: pointer; list-style: none; position: relative; padding: 22px 70px 22px 26px; font-family: var(--f-head); font-weight: 500; font-size: 16px; color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--limel); color: var(--lime2); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 400; line-height: 1; transition: all .3s; }
.qa[open] summary::after { content: "–"; background: var(--lime); color: #fff; }
.qa__a { padding: 0 70px 24px 26px; color: var(--ink2); }
.qa__a p { margin: 0; }

/* 询价条：整幅场景图 + 炭灰压暗 */
.cta { position: relative; background: var(--char2) center / cover no-repeat; color: #c3c7c9; padding: 120px 0; }
.cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,23,.93) 0%, rgba(20,22,23,.8) 55%, rgba(20,22,23,.55) 100%); }
.cta__in { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.cta .eyebrow { color: var(--lime-t); }
.cta h2 { color: #fff; font-size: 44px; font-weight: 400; margin-bottom: 14px; }
.cta p { margin: 0; max-width: 620px; font-size: 16.5px; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.cta .btn--ghost:hover { background: #fff; color: var(--char); border-color: #fff; }

/* ---------- 页脚 ---------- */
.ft { position: relative; background: var(--char2); color: #979b9d; font-size: 14px; padding-top: 90px; }
.ft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 56px; padding-bottom: 70px; }
.ft__brand img { width: 170px; margin-bottom: 8px; }
.ft__brand .brand__tag { color: var(--lime-t); }
.ft__about { margin: 22px 0 0; line-height: 1.85; }
.ft h4 { color: #fff; font-family: var(--f-head); font-weight: 500; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; margin: 6px 0 24px; }
.ft__menu { list-style: none; margin: 0; padding: 0; }
.ft__menu li { padding: 5px 0; }
.ft a:hover { color: var(--lime-t); }
.ft__c { display: flex; gap: 12px; margin: 0 0 14px; line-height: 1.6; }
.ft__c .ic, .ft__c svg { color: var(--lime-t); margin-top: 3px; width: 16px; height: 16px; flex: none; }
.ft__news { display: flex; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding-left: 14px; margin-top: 24px; }
.ft__news input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; padding: 13px 0; font-size: 14px; outline: none; }
.ft__news input::placeholder { color: #7d8183; }
.ft__news button { background: var(--lime); border: 0; color: #fff; width: 46px; align-self: stretch; display: flex; align-items: center; justify-content: center; border-radius: 0 3px 3px 0; }
.ft__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 26px 0; font-size: 12.5px; color: #75797b; }
.ft__bottom .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.ft__bottom a { color: #8a8e90; margin-left: 20px; }
.ft__bottom a:first-child { margin-left: 0; }

/* 悬浮按钮 */
.floats { position: fixed; right: 22px; bottom: 26px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.floats a, .floats button { width: 48px; height: 48px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--char); box-shadow: 0 10px 24px rgba(0,0,0,.2); transition: transform .2s, background .2s, opacity .2s; }
.floats a:hover, .floats button:hover { transform: translateY(-2px); background: var(--lime); color: #fff; }
.floats .f-wa { background: #25d366; }
.floats .f-top { background: #fff; color: var(--ink); opacity: 0; pointer-events: none; }
.floats .f-top.is-on { opacity: 1; pointer-events: auto; }

/* ---------- 内页横幅 ---------- */
.pban { position: relative; background: var(--char2) center / cover no-repeat; color: #fff; padding: 150px 0 120px; }
.pban::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,22,23,.86) 0%, rgba(20,22,23,.58) 50%, rgba(20,22,23,.18) 100%); }
.pban .wrap { position: relative; }
.pban h1 { color: #fff; font-size: 56px; font-weight: 400; margin: 0 0 18px; }
.pban p { color: rgba(255,255,255,.86); font-size: 17px; max-width: 680px; margin: 0; }
.pban .eyebrow { color: var(--lime-t); }
.crumbs { font-family: var(--f-head); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); margin-bottom: 26px; }
.crumbs a { color: var(--ink2); }
.crumbs span { margin: 0 6px; color: #c8c8c6; }
.crumbs .crumbs__cur { margin: 0; color: var(--ink3); }
.pban .crumbs, .pban .crumbs a, .pban .crumbs span, .pban .crumbs .crumbs__cur { color: rgba(255,255,255,.72); }
.pban .crumbs a:hover { color: #fff; }
.crumbbar { background: var(--soft); padding: 18px 0; }
.crumbbar .crumbs { margin: 0; }

/* ---------- 产品列表 ---------- */
.plist { display: grid; grid-template-columns: 270px 1fr; gap: 50px; padding-top: 80px; padding-bottom: 110px; align-items: start; }
.side { position: sticky; top: 112px; }
.side h4 { margin: 0; font-family: var(--f-head); font-weight: 500; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #fff; padding: 18px 22px; background: var(--char); border-radius: var(--r) var(--r) 0 0; }
.side > a { display: flex; justify-content: space-between; gap: 8px; padding: 13px 22px; font-size: 14.5px; color: var(--ink2); background: #fff; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: all .2s; }
.side > a small { color: var(--ink3); font-size: 12px; }
.side > a:hover { color: var(--lime2); background: var(--soft); }
.side > a.is-on { color: var(--lime2); font-weight: 700; background: var(--soft); box-shadow: inset 3px 0 0 var(--lime); }
.side > a:last-of-type { border-radius: 0 0 var(--r) var(--r); }
.side__c { margin-top: 26px; padding: 30px 26px; background: var(--grad); color: #f2f8ea; border-radius: var(--r); box-shadow: var(--sh); }
.side__c b { font-family: var(--f-head); font-weight: 500; font-size: 17px; display: block; margin-bottom: 8px; color: #fff; }
.side__c p { font-size: 13.5px; color: #eaf4dd; margin: 0 0 18px; }
.side__c .btn { background: #fff; border-color: #fff; color: var(--lime2); }
.side__c .btn:hover { background: var(--char); border-color: var(--char); color: #fff; }
.cintro { margin-bottom: 40px; color: var(--ink2); font-size: 15.5px; max-width: 860px; }
.cintro p { margin-bottom: .9em; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 30px; padding: 14px 20px; background: var(--soft); border-radius: var(--r); font-family: var(--f-head); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.bar select { border: 1px solid var(--line); padding: 9px 34px 9px 14px; background: #fff; font-size: 13px; letter-spacing: 0; text-transform: none; min-width: 190px; border-radius: 4px; }
.nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 60px; }
.nav-links .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: #fff; box-shadow: 0 6px 16px -8px rgba(28,40,18,.3); font-family: var(--f-head); font-size: 13px; }
.nav-links .page-numbers.current, .nav-links a.page-numbers:hover { background: var(--lime); color: #fff; }

/* ---------- 产品详情 ---------- */
.pd { display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; padding-top: 50px; padding-bottom: 90px; align-items: start; }
.pd__gallery { min-width: 0; }
.pd__main { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f5f6f2; border-radius: var(--r); box-shadow: var(--sh); }
.pd__shot { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .4s; }
.pd__shot.is-on { opacity: 1; visibility: visible; }
.pd__shot img { width: 100%; height: 100%; object-fit: contain; }
.pd__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: var(--sh); transition: background .2s, color .2s; }
.pd__arrow:hover { background: var(--lime); color: #fff; }
.pd__arrow--prev { left: 18px; } .pd__arrow--next { right: 18px; }
.pd__thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pd__thumb { width: 78px; height: 78px; padding: 0; border: 2px solid transparent; border-radius: 4px; background: #f5f6f2; overflow: hidden; opacity: .65; transition: all .2s; }
.pd__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd__thumb.is-on, .pd__thumb:hover { border-color: var(--lime); opacity: 1; }
.pd__info { position: sticky; top: 120px; }
.pd__t { font-size: 38px; font-weight: 400; margin: 8px 0 26px; }
.pd__info .ticks { background: var(--soft); border-radius: var(--r); padding: 22px 26px; margin-bottom: 28px; }
.pd__info .ticks li { font-size: 15px; padding: 5px 0; }
.pd__opt { margin-bottom: 20px; }
.pd__opt-n { font-family: var(--f-head); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin-bottom: 10px; }
.pd__opt-v { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid #d9ddd4; background: #fff; padding: 9px 18px; font-size: 13.5px; line-height: 1.2; border-radius: 30px; transition: all .2s; }
.chip:hover { border-color: var(--lime); color: var(--lime2); }
.chip.is-on { border-color: var(--lime); background: var(--lime); color: #fff; }
.pd__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 26px; }
.pd__btns .btn { flex: 1; min-width: 180px; }
.serv { list-style: none; margin: 0; padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.serv li { display: flex; gap: 12px; font-size: 14px; padding: 5px 0; color: var(--ink2); }
.serv .ic, .serv svg { color: var(--lime); margin-top: 4px; width: 16px; height: 16px; flex: none; }
.pd__share { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; font-family: var(--f-head); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.pd__share a { color: var(--ink2); }
.tabs { border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.tabs h2 { display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 -1px; padding: 14px 0; border-bottom: 2px solid var(--lime); }
.pd__desc { padding-bottom: 110px; }

/* ---------- 富文本 ---------- */
.rte { font-size: 16px; line-height: 1.9; color: var(--ink2); }
.rte h2 { font-size: 32px; margin: 1.6em 0 .6em; }
.rte h3 { font-size: 20px; margin: 1.4em 0 .5em; }
.rte strong { color: var(--ink); }
.rte img { margin: 0 auto 1em; border-radius: 4px; }
.rte p { margin: 0 0 1.1em; }
.rte ul, .rte ol { padding-left: 1.3em; }
.rte li { margin: 5px 0; }
.rte table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0 0 1.8em; font-size: 15px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rte th, .rte td { border-bottom: 1px solid var(--line); padding: 13px 18px; text-align: left; vertical-align: top; }
.rte tr:last-child td { border-bottom: 0; }
.rte tr td:first-child { font-family: var(--f-head); font-weight: 500; color: var(--ink); width: 34%; background: var(--soft); }
.rte video { max-width: 100%; height: auto; margin: 0 auto 1.2em; background: #000; border-radius: var(--r); }
.rte iframe { display: block; max-width: 100%; border: 0; margin: 0 auto 34px; }
.rte iframe[src*="youtube"], .rte iframe[src*="vimeo"] { width: 100%; max-width: 880px; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r); }
.rte blockquote { margin: 1.6em 0; padding: 22px 28px; background: var(--soft); border-left: 3px solid var(--lime); border-radius: 0 var(--r) var(--r) 0; color: var(--ink2); font-style: italic; }
.page-body { padding-top: 90px; padding-bottom: 110px; }
.rte .wm-lead { font-size: 19px; line-height: 1.8; color: var(--ink); font-family: var(--f-head); font-weight: 300; }
.rte .gal { margin: 14px 0 50px; }
.rte .gal img { margin: 0; border-radius: 0; }
.rte .whys, .rte .flow { margin: 14px 0 50px; }
.rte .flow { grid-template-columns: repeat(3, 1fr); }
.rte .flow li:nth-child(3n)::after { display: none; }
.rte .stats__grid { margin: 24px 0 50px; box-shadow: var(--sh); }
.rte .stats__grid div { padding: 30px 10px; }
.rte .stats__grid b { font-size: 34px; }

/* ---------- 询价表单 / 弹窗 ---------- */
.wm-form { max-width: 760px; margin: 50px auto 0; display: grid; gap: 18px; }
.wm-form__title { font-size: 30px; font-weight: 400; text-align: center; margin: 0 0 6px; }
.wm-form label { display: grid; gap: 8px; font-family: var(--f-head); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.wm-form input:not([type=hidden]), .wm-form textarea { width: 100%; border: 1px solid #dfe3da; padding: 13px 15px; font-size: 15px; font-family: var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); background: #fafbf8; outline: none; border-radius: 4px; transition: border-color .2s, box-shadow .2s, background .2s; }
.wm-form input:focus, .wm-form textarea:focus { border-color: var(--lime); background: #fff; box-shadow: 0 0 0 3px rgba(124,179,66,.15); }
.wm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wm-form .btn { justify-self: start; min-width: 200px; margin-top: 6px; }
.wm-form__ok { background: var(--limel); color: #3d6b16; padding: 14px 16px; margin: 0; border-radius: 4px; }
.wm-form__err { background: #fdecec; color: #a12020; padding: 14px 16px; margin: 0; border-radius: 4px; }
.wm-form__hp { position: absolute; left: -9999px; }
.modal { position: fixed; inset: 0; z-index: 95; background: rgba(20,22,23,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__box { background: #fff; width: min(660px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 46px 42px 38px; position: relative; border-radius: 8px; border-top: 4px solid var(--lime); box-shadow: 0 40px 80px -20px rgba(0,0,0,.4); }
.modal__box .wm-form { margin: 0; }
.modal__x { position: absolute; top: 14px; right: 14px; background: none; border: 0; padding: 6px; }

/* ---------- 博客 ---------- */
.blog { padding-top: 80px; padding-bottom: 110px; }
.blog__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 54px; font-family: var(--f-head); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.blog__cats a { color: var(--ink2); padding: 9px 18px; border-radius: 30px; background: var(--soft); transition: all .2s; }
.blog__cats a.is-on, .blog__cats a:hover { color: #fff; background: var(--lime); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.post-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: transform .6s var(--ease), box-shadow .6s var(--ease), opacity .9s var(--ease); }
.post-card:hover { box-shadow: var(--sh2); }
.post-card:hover, .rv-on .post-card.rv.is-in:hover { transform: translateY(-6px); }
.post-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.05); }
.post-card__ph { display: flex; height: 100%; align-items: center; justify-content: center; font-family: var(--f-head); font-weight: 300; letter-spacing: .3em; color: #fff; background: var(--char) linear-gradient(135deg, #2f3335 0%, #1b1d1f 100%); }
.post-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-family: var(--f-head); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); margin-bottom: 10px; }
.post-card__meta span { color: var(--lime2); }
.post-card__t { font-size: 19px; font-weight: 500; line-height: 1.42; margin: 0 0 12px; }
.post-card__ex { font-size: 14.5px; color: var(--ink2); margin: 0 0 18px; flex: 1; }
.post-card__more { font-family: var(--f-head); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--lime2); }
.post__hd { max-width: 920px; text-align: center; padding-top: 80px; padding-bottom: 40px; }
.post__cat { display: inline-block; margin: 6px 0 16px; padding: 6px 14px; border-radius: 30px; background: var(--limel); font-family: var(--f-head); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--lime2); }
.post__t { font-size: 46px; font-weight: 400; line-height: 1.2; margin: 0 0 20px; }
.post__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-family: var(--f-head); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.post__hero { max-width: 1180px; margin: 0 auto 20px; }
.post__hero img { width: 100%; border-radius: var(--r); box-shadow: var(--sh2); }
.post__wrap { max-width: 860px; padding-top: 40px; padding-bottom: 90px; }
.post__body { font-size: 17px; }
.post__body h2, .post__body h3 { scroll-margin-top: 120px; }
.answer { background: var(--soft); border-left: 3px solid var(--lime); border-radius: 0 var(--r) var(--r) 0; padding: 26px 30px; margin: 0 0 40px; }
.answer__t { font-family: var(--f-head); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--lime2); margin-bottom: 8px; }
.answer__b { font-size: 17px; line-height: 1.8; color: var(--ink); }
.answer__b p { margin: 0; }
.toc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px 28px; margin: 0 0 44px; }
.toc__t { font-family: var(--f-head); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 2; }
.faq { margin-top: 60px; }
.faq h2 { font-size: 30px; margin-top: 50px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; }
.faq__item[open] { border-color: transparent; box-shadow: var(--sh); }
.faq__item summary { cursor: pointer; list-style: none; padding: 20px 66px 20px 24px; font-family: var(--f-head); font-weight: 500; font-size: 16px; position: relative; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--limel); color: var(--lime2); display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; }
.faq__item[open] summary::after { content: "–"; background: var(--lime); color: #fff; }
.faq__a { padding: 0 66px 22px 24px; font-size: 15.5px; color: var(--ink2); }
.post__tags { margin-top: 40px; font-size: 13px; }
.post__tags a { display: inline-block; background: var(--soft); border-radius: 30px; padding: 5px 14px; margin: 0 4px 6px 0; }
.post__tags span { color: var(--ink3); margin-right: 6px; }
.author-box { display: flex; gap: 24px; align-items: center; margin-top: 56px; padding: 28px 30px; background: var(--soft); border-radius: var(--r); }
.author-box__logo { flex: 0 0 130px; height: 70px; display: flex; align-items: center; justify-content: center; background: var(--char); padding: 12px; color: #fff; font-family: var(--f-head); font-weight: 600; border-radius: 4px; }
.author-box__n { font-family: var(--f-head); font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.author-box p { margin: 0; font-size: 14.5px; }
.cta-box { position: relative; overflow: hidden; margin-top: 50px; padding: 54px 40px; background: var(--char); color: #b9bdbf; text-align: center; border-radius: var(--r); }
.cta-box::after { content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: var(--grad); opacity: .2; }
.cta-box h2 { position: relative; color: #fff; font-size: 30px; margin-bottom: 12px; }
.cta-box p { position: relative; margin: 0 auto 26px; max-width: 600px; }
.cta-box__btns { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.cta-box .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }

/* ---------- 滚动渐显 ---------- */
.rv-on .rv { opacity: 0; transform: translateY(30px); }
.rv-on .rv.is-in { opacity: 1; transform: none; }
.rv-on .sh.rv, .rv-on .stats__grid > div.rv { transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ---------- 中文排版 ---------- */
html[lang^="zh"] body { letter-spacing: .02em; line-height: 1.9; }
html[lang^="zh"] h1, html[lang^="zh"] h2 { font-weight: 400; letter-spacing: .04em; }

/* ---------- 响应式 ---------- */
@media (max-width: 1280px) {
    .nav .menu > li > a { padding: 31px 10px; letter-spacing: .1em; }
    .nav .menu > li > a::after { left: 10px; right: 10px; }
    .hero__t { font-size: 46px; }
    .topbar__r > span { display: none; }
}
@media (max-width: 1100px) {
    .hd__tools .btn { display: none; }
    .grid--4, .cats { grid-template-columns: repeat(3, 1fr); }
    .flow { grid-template-columns: repeat(3, 1fr); }
    .flow li:nth-child(3n)::after { display: none; }
    .intro, .cert, .faq2 { gap: 50px; }
    .stats__grid b { font-size: 36px; }
}
@media (max-width: 959px) {
    :root { --gut: 20px; }
    h1 { font-size: 34px; } h2 { font-size: 30px; }
    .topbar { display: none; }
    .admin-bar .hd { top: 0; }
    .hd__in { min-height: 64px; display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; }
    .hd__burger { display: flex; }
    .brand { justify-self: center; align-items: center; }
    .brand img { width: 132px; } .brand__tag { font-size: 7px; letter-spacing: .06em; margin-top: 5px; white-space: nowrap; }
    .nav, .hd__tools .btn { display: none; }
    .hd__tools { justify-content: flex-end; }
    .hero__slide { flex-direction: column; min-height: 0; }
    .hero__img { position: relative; width: 100%; aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 22%); mask-image: linear-gradient(0deg, transparent 0%, #000 22%); }
    .hero__img::after { display: none; }
    .hero__wrap { justify-content: flex-start; margin-top: -40px; padding-top: 0; padding-bottom: 96px; }
    .hero__txt { width: 100%; }
    .hero__t { font-size: 32px; margin-bottom: 18px; }
    .hero .ticks { margin-bottom: 26px; }
    .hero .ticks li { font-size: 14.5px; padding: 3px 0; }
    .hero__no { display: none; }
    .hero__dots { bottom: 74px; }
    .stats { margin-top: -50px; }
    .stats__grid { grid-template-columns: repeat(3, 1fr); }
    .stats__grid div::before { display: none; }
    .stats__grid div { padding: 26px 8px 22px; }
    .stats__grid div:nth-child(n+4) { border-top: 1px solid var(--line); }
    .stats__grid b { font-size: 28px; }
    .sec { padding: 76px 0; }
    .stats + .sec { padding-top: 70px; }
    .sh { margin-bottom: 40px; }
    .grid--4, .grid--3, .cats { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .catc__t { padding: 16px 16px 14px; }
    .catc__t b { font-size: 15px; }
    .pc__t { padding: 14px 14px 18px; }
    .intro, .cert, .faq2 { grid-template-columns: 1fr; gap: 44px; }
    .intro__media { padding: 0 0 30px 24px; }
    .intro__img img { height: 300px; } .intro__img img:last-child { height: 220px; }
    .intro__badge { min-height: 0; padding: 16px; }
    .intro__badge b { font-size: 38px; }
    .intro__img:not(.one) img:last-child { margin-top: 110px; }
    .faq2__l { position: static; }
    .whys { grid-template-columns: 1fr 1fr; gap: 16px; }
    .why { padding: 32px 24px; }
    .flow { grid-template-columns: 1fr 1fr; gap: 16px; }
    .flow li::after { display: none; }
    .gal { grid-template-columns: 1fr 1fr; gap: 14px; }
    .cta { padding: 80px 0; }
    .cta h2 { font-size: 30px; }
    .ft { padding-top: 64px; }
    .ft__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-bottom: 50px; }
    .pban { padding: 90px 0 72px; } .pban h1 { font-size: 36px; }
    .plist { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; }
    .side { position: static; }
    .pd { grid-template-columns: 1fr; gap: 34px; padding-top: 30px; }
    .pd__info { position: static; }
    .pd__t { font-size: 30px; }
    .post-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .post__t { font-size: 32px; }
    .page-body { padding-top: 56px; padding-bottom: 76px; }
    .rte .flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .hero__t { font-size: 28px; }
    .hero__btns .btn { padding: 14px 22px; }
    .stats__grid { grid-template-columns: 1fr 1fr; }
    .stats__grid div:nth-child(n+3) { border-top: 1px solid var(--line); }
    .stats__grid div:nth-child(odd):not(:last-child) { border-right: 1px solid var(--line); }
    .stats__grid div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .catc__go { display: none; }
    .whys, .flow, .rte .flow { grid-template-columns: 1fr; }
    .gal--mosaic figure:first-child { grid-column: 1 / -1; grid-row: auto; }
    .gal--mosaic figure:first-child img { position: static; height: auto; aspect-ratio: 4 / 3; }
    .ft__grid { grid-template-columns: 1fr; }
    .ft__bottom .wrap { flex-direction: column; }
    .wm-form__row { grid-template-columns: 1fr; }
    .wm-form .btn { justify-self: stretch; }
    .modal__box { padding: 38px 20px 28px; }
    .post-grid { grid-template-columns: 1fr; }
    .post__t { font-size: 27px; }
    .author-box { flex-direction: column; align-items: flex-start; }
    .floats { right: 12px; bottom: 14px; }
    .floats a, .floats button { width: 44px; height: 44px; }
    .pd__btns .btn { min-width: 0; }
    .bar select { min-width: 0; }
    .pban h1 { font-size: 32px; }
    .intro__badge { position: relative; width: auto; margin: 18px 0 0 -24px; }
    .intro__img:not(.one) img:last-child { margin-top: 0; }
}

/* ================= 内页排版组件（x-，页面正文用）================= */
.x-sec { position: relative; padding: 110px 0; }
.x-sec--soft { background: var(--soft); }
.x-sec--warm { background: var(--warm); }
.x-sec--dark { background: var(--char); color: #b4b8ba; }
.x-sec--dark h2, .x-sec--dark h3 { color: #fff; }
.x-sec--dark .eyebrow { color: var(--lime-t); }
.x-sec--dark .ticks li { color: #c9cccd; }
.x-sec--dark .x-lead { color: #fff; }
.x-sec--dark .btn--line { color: #fff; border-color: rgba(255,255,255,.5); }
.x-sec--dark .btn--line:hover { background: #fff; color: var(--char); border-color: #fff; }
.x-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.x-head .eyebrow { justify-content: center; }
.x-head .eyebrow::after { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.x-head h2 { margin-bottom: 18px; }
.x-head p { font-size: 16.5px; margin: 0; }
.x-split { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.x-split--rev > .x-media { order: 2; }
.x-text h2 { font-size: 40px; margin-bottom: 22px; }
.x-text p { line-height: 1.85; }
.x-lead { font-family: var(--f-body); font-weight: 400; font-size: 18.5px; line-height: 1.75; color: var(--ink); margin-bottom: 22px; }
.x-head .x-lead { margin: 0 auto; max-width: 900px; }
.x-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.x-center { text-align: center; margin-top: 50px; }
.x-gap { height: 60px; }
.x-media { position: relative; }
.x-media img { position: relative; z-index: 1; display: block; width: 100%; border-radius: var(--r); box-shadow: var(--sh2); object-fit: cover; }
.x-media--one img { aspect-ratio: 4 / 3; }
.x-media--stack { padding: 0 70px 70px 0; }
.x-media--stack img:first-of-type { aspect-ratio: 4 / 3; }
.x-media--stack img:nth-of-type(2) { position: absolute; right: 0; bottom: 0; z-index: 2; width: 46%; aspect-ratio: 1 / 1; border: 8px solid #fff; }
.x-sec--soft .x-media--stack img:nth-of-type(2) { border-color: var(--soft); }
.x-sec--dark .x-media--stack img:nth-of-type(2) { border-color: var(--char); }
.x-media--deco::before { content: ""; position: absolute; left: -28px; top: -28px; width: 46%; height: 56%; background: var(--grad); border-radius: var(--r); }
.x-media--frame { background: #fff; padding: 16px; border-radius: var(--r); box-shadow: var(--sh2); }
.x-media--frame img { box-shadow: none; border-radius: 4px; }
.x-badge { position: absolute; z-index: 3; left: -24px; bottom: 34px; display: flex; align-items: center; gap: 14px; max-width: 270px; background: var(--char); color: #fff; padding: 20px 24px; border-radius: var(--r); box-shadow: var(--sh2); }
.x-badge b { flex: none; font-family: var(--f-head); font-size: 46px; font-weight: 300; line-height: 1; color: var(--lime-t); }
.x-badge span { font-family: var(--f-head); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #cfd2d3; line-height: 1.6; }
.x-ticks2 { columns: 2; column-gap: 30px; }
.x-ticks2 li { break-inside: avoid; }
.x-note { font-size: 14px; color: var(--ink3); margin-top: 24px; }

/* 图标卡片 */
.x-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.x-cards--3 { grid-template-columns: repeat(3, 1fr); }
.x-cards--5 { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.x-card { background: #fff; border-radius: var(--r); padding: 36px 30px 34px; box-shadow: var(--sh); border: 1px solid transparent; transition: opacity .9s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.x-cards--5 .x-card { padding: 32px 24px 30px; }
.x-card:hover { box-shadow: var(--sh2); }
.x-card:hover, .rv-on .x-card.rv.is-in:hover { transform: translateY(-6px); }
.x-card__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; box-shadow: 0 12px 26px -10px rgba(95,150,49,.7); }
.x-card__ic svg { width: 24px; height: 24px; }
.x-card h3 { font-size: 17.5px; margin: 0 0 10px; }
.x-card p { margin: 0; font-size: 15px; line-height: 1.75; }
.x-sec--dark .x-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); box-shadow: none; }
.x-sec--dark .x-card:hover { border-color: rgba(140,193,82,.55); }
.x-sec--dark .x-card p { color: #aeb2b4; }
.x-sec--dark .why { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.09); box-shadow: none; }
.x-sec--dark .why:hover { background: rgba(255,255,255,.08); border-color: rgba(140,193,82,.55); }
.x-sec--dark .why h3 { color: #fff; }
.x-sec--dark .why p { color: #a9adaf; }

/* 照片卡片 */
.x-pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.x-pcard { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: opacity .9s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease); }
.x-pcard:hover { box-shadow: var(--sh2); }
.x-pcard:hover, .rv-on .x-pcard.rv.is-in:hover { transform: translateY(-6px); }
.x-pcard__img { display: block; overflow: hidden; }
.x-pcard__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.x-pcard:hover .x-pcard__img img { transform: scale(1.06); }
.x-pcard__b { padding: 22px 24px 26px; }
.x-pcard__b h3 { font-size: 16.5px; margin: 0 0 8px; }
.x-pcard__b p { margin: 0; font-size: 14.5px; line-height: 1.7; }

/* 理念引言条 */
.x-quote { position: relative; padding: 130px 0 110px; background: var(--char2) center / cover no-repeat; color: #c9cccd; text-align: center; }
.x-quote::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,23,.9) 0%, rgba(20,22,23,.8) 100%); }
.x-quote .wrap { position: relative; }
.x-quote .eyebrow { color: var(--lime-t); justify-content: center; }
.x-quote .eyebrow::after { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.x-quote blockquote { margin: 10px auto 56px; max-width: 900px; font-family: var(--f-head); font-weight: 300; font-size: 42px; line-height: 1.3; color: #fff; }
.x-quote blockquote::before { content: "\201C"; display: block; font-size: 96px; line-height: .55; margin-bottom: 14px; color: var(--lime-t); }
.x-values { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.14); }
.x-values div { padding: 30px 16px 0; }
.x-values b { display: block; font-family: var(--f-head); font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--lime-t); }
.x-values span { display: block; margin-top: 8px; font-family: var(--f-head); font-size: 21px; font-weight: 300; color: #fff; }
.x-mission { margin: 46px auto 0; max-width: 680px; font-size: 15.5px; color: #aeb2b4; }

/* 工厂相册：疏密拼贴 */
.x-tour { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 18px; }
.x-tour figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); box-shadow: var(--sh); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.x-tour figure.is-big { grid-column: span 2; grid-row: span 2; }
.x-tour figure.is-wide { grid-column: span 2; }
.x-tour img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.x-tour figure:hover img { transform: scale(1.06); }
.x-tour figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 44px 18px 14px; background: linear-gradient(180deg, rgba(20,22,23,0) 0%, rgba(20,22,23,.78) 100%); color: #fff; font-family: var(--f-head); font-size: 12.5px; letter-spacing: .04em; }

/* 联系页 */
.x-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: start; }
.x-ccards { display: grid; gap: 14px; margin: 30px 0 0; }
.x-ccard { display: flex; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; transition: opacity .9s var(--ease), transform .6s var(--ease), box-shadow .4s, border-color .4s; }
.x-ccard:hover { border-color: transparent; box-shadow: var(--sh); }
.x-ccard__ic { width: 48px; height: 48px; border-radius: 50%; background: var(--limel); color: var(--lime2); display: flex; align-items: center; justify-content: center; flex: none; }
.x-ccard__ic svg { width: 20px; height: 20px; }
.x-ccard small { display: block; font-family: var(--f-head); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.x-ccard p { margin: 3px 0 0; color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.x-ccard a { color: var(--ink); }
.x-ccard a:hover { color: var(--lime2); }
.x-sec--dark .x-ccard { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.x-sec--dark .x-ccard p, .x-sec--dark .x-ccard a { color: #fff; }
.x-formcard { background: #fff; border-radius: 8px; box-shadow: var(--sh2); padding: 44px 42px 40px; border-top: 4px solid var(--lime); }
.x-formcard .wm-form { margin: 0; }
.x-map { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); background: #e9ece6; }
.x-map iframe { display: block; width: 100%; height: 440px; border: 0; }

/* 视频 */
.x-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.x-video { background: #000; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh2); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.x-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.x-faq .faq { margin-top: 0; }
.x-faq .faq h2 { margin-top: 0; text-align: center; }

@media (max-width: 1100px) {
    .x-cards, .x-pcards { grid-template-columns: repeat(2, 1fr); }
    .x-cards--5 { grid-template-columns: repeat(3, 1fr); }
    .x-split, .x-contact { gap: 54px; }
}
@media (max-width: 959px) {
    .x-sec { padding: 72px 0; }
    .x-quote { padding: 90px 0 80px; }
    .x-split, .x-contact { grid-template-columns: 1fr; gap: 44px; }
    .x-split--rev > .x-media { order: 0; }
    .x-text h2 { font-size: 30px; }
    .x-lead { font-size: 18.5px; }
    .x-head { margin-bottom: 40px; }
    .x-media--stack { padding: 0 34px 40px 0; }
    .x-media--deco::before { left: -12px; top: -12px; }
    .x-badge { left: -8px; bottom: 16px; padding: 14px 16px; }
    .x-badge b { font-size: 34px; }
    .x-quote blockquote { font-size: 28px; }
    .x-values { grid-template-columns: 1fr 1fr; }
    .x-tour { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 12px; }
    .x-videos { grid-template-columns: 1fr; }
    .x-formcard { padding: 32px 22px 28px; }
    .x-map iframe { height: 320px; }
}
@media (max-width: 600px) {
    .x-cards, .x-pcards, .x-cards--5, .x-cards--3 { grid-template-columns: 1fr; }
    .x-ticks2 { columns: 1; }
    .x-badge { position: relative; left: 0; bottom: 0; margin-top: 16px; max-width: none; }
    .x-media--stack { padding: 0; }
    .x-media--stack img:nth-of-type(2) { display: none; }
    .x-tour figure.is-big { grid-column: span 2; grid-row: span 1; }
}
.x-media, .x-formcard, .x-head { transition: opacity .9s var(--ease), transform .9s var(--ease); }