/* ---------------------------------------------------------------------------
* 成已设计 Chengyi — 版权声明（Copyright Notice）
*
* 本主题（含全部 PHP、CSS、JavaScript、图片与文案）由张灿林先生所属公司
* 接受委托定制开发，开发费用人民币 130,000 元（约 13 万元）；
* 著作权归开发方所有，授权使用域名：aihashu.com。
*
* 未经开发方书面许可，禁止复制、镜像、二次分发、转售本主题源码，禁止将
* 其用于其他站点，禁止移除本声明。
* 违者将依据《中华人民共和国著作权法》《计算机软件保护条例》追究民事及
* 刑事责任。侵权举报与正版授权请联系：15026716081。
*
* 所有权标识：CY5-a97c0908-1a99c627
* ------------------------------------------------------------------------ */
/* 构建信息：令牌源表校验值，随构建脚本写入，用于核对线上样式与源表是否同批 */
/* build-hash: a97c09081a99c627f24bda595b34f55aa1040b86bf10b9bc370f40b249011f84df1547db91081796759c38afd7d91cce5deec36c50987410e2b8da67ff8b56b5 */
/* ==========================================================================
成已设计 CHENGYI DESIGN — 共享样式
配色依据（2025–2026 高端设计通行方法论）：
· 默认主题「奶杏白 · 石榴红」：暖调近白底 #F5EDE4 / 深咖啡字 #3A2E28 / 石榴红强调 #B5485D
· 灵感来自用户提供的「石榴红 & 奶杏白」配色卡（#B5485D / #F3E2D1）
· 高端配色公式 60-30-10：大面积中性底 + 中比例中性结构色 + 极少量强调色
· 用「深咖啡」替代纯黑，红色仅做点缀，避免大面积高饱和
========================================================================== */
/* ---------- 1. Tokens ---------- */
:root{
--ds-build: a97c09; /* 构建短码，令牌源表版本 */
/* —— 默认：云白 · 香槟金 Cloud & Champagne ——
Pantone 2026 年度色打底，近白偏暖，只用香槟金点缀 */
--paper: #F0EEE9; /* Pantone 17-4201 Cloud Dancer */
--paper-2: #E6E3DC;
--paper-3: #F8F7F4;
--paper-4: #D8D4CB;
--ink: #1C1A17; /* 柔和黑，非纯黑 */
--ink-2: #63605A;
--ink-3: #8E8A82;
--ink-4: #B4B0A7;
--line: rgba(28,26,23,.10);
--line-strong: rgba(28,26,23,.24);
--line-soft: rgba(28,26,23,.05);
--accent: #A98B4F; /* 香槟金（克制的金属色） */
--accent-dk: #8B7040;
--accent-soft: rgba(169,139,79,.12);
--on-accent: #FFFFFF;
--gold: #C0A76A;
--gold-soft: rgba(192,167,106,.14);
--deep: #24221E;
--deep-2: #1B1916;
--deep-line: rgba(240,238,233,.16);
--nav-bg: rgba(240,238,233,.80);
--thumb: #C2BEB4;
/* 质感：柔和扩散阴影（高端站用阴影做层次，不靠描边） */
--shadow-sm: 0 1px 2px rgba(28,26,23,.04), 0 6px 18px rgba(28,26,23,.05);
--shadow-md: 0 2px 6px rgba(28,26,23,.05), 0 18px 46px rgba(28,26,23,.08);
--shadow-lg: 0 4px 14px rgba(28,26,23,.06), 0 36px 90px rgba(28,26,23,.11);
/* 同色系微渐变（增加深度，避免死平） */
--tint: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%);
--tint-2: linear-gradient(180deg, rgba(28,26,23,.028) 0%, rgba(28,26,23,0) 60%);
/* 案例抽象视觉的明度（深色主题下压暗） */
--art-dim: brightness(1) saturate(1);
--art-dim-hover: saturate(1.12);
--serif: "Noto Serif SC","Songti SC","STSong","Source Han Serif SC","SimSun",serif;
--sans: "Inter","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
--ease: cubic-bezier(.22,1,.36,1);
--ease-io: cubic-bezier(.65,0,.35,1);
--pad: clamp(20px, 5vw, 88px);
--max: 1680px;
--nav-h: 76px;
--grain-opacity: .03;
}
/* ============================================================
主题变体 —— 通过 切换
============================================================ */
/* 摩卡慕斯 Mocha Mousse · 浅色暖调（Pantone 2025 年度色为主角） */
html[data-theme="mocha"]{
--paper: #F3EFE9;
--paper-2: #E9E2D8;
--paper-3: #FAF7F2;
--paper-4: #DCD2C4;
--ink: #2B221C;
--ink-2: #6D6055;
--ink-3: #998B7C;
--ink-4: #BDB1A3;
--line: rgba(43,34,28,.11);
--line-strong: rgba(43,34,28,.26);
--line-soft: rgba(43,34,28,.05);
--accent: #8E6247;
--accent-dk: #744E37;
--accent-soft: rgba(164,120,100,.14);
--on-accent: #FFFFFF;
--gold: #A47864; /* Pantone 17-1230 Mocha Mousse */
--gold-soft: rgba(164,120,100,.14);
--deep: #322620;
--deep-2: #251C17;
--deep-line: rgba(243,239,233,.16);
--nav-bg: rgba(243,239,233,.80);
--thumb: #C9BBA9;
--shadow-sm: 0 1px 2px rgba(43,34,28,.04), 0 6px 18px rgba(43,34,28,.05);
--shadow-md: 0 2px 6px rgba(43,34,28,.05), 0 18px 46px rgba(43,34,28,.08);
--shadow-lg: 0 4px 14px rgba(43,34,28,.06), 0 36px 90px rgba(43,34,28,.11);
--tint: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%);
--tint-2: linear-gradient(180deg, rgba(43,34,28,.03) 0%, rgba(43,34,28,0) 60%);
}
/* 深摩卡 Deep Mocha · 深色暖调（用深棕替代纯黑） */
html[data-theme="deep-mocha"]{
--paper: #221C18;
--paper-2: #2A231E;
--paper-3: #26201B;
--paper-4: #3A312A;
--ink: #EFE9E0;
--ink-2: #B6AA9C;
--ink-3: #837869;
--ink-4: #635A4E;
--line: rgba(239,233,224,.12);
--line-strong: rgba(239,233,224,.28);
--line-soft: rgba(239,233,224,.05);
--accent: #C08F5E;
--accent-dk: #A4763F;
--accent-soft: rgba(192,143,94,.15);
--on-accent: #221C18;
--gold: #C08F5E;
--gold-soft: rgba(192,143,94,.13);
--deep: #17120F;
--deep-2: #100C0A;
--deep-line: rgba(239,233,224,.15);
--nav-bg: rgba(34,28,24,.82);
--thumb: #4A4038;
--shadow-sm: 0 1px 2px rgba(0,0,0,.22), 0 6px 18px rgba(0,0,0,.24);
--shadow-md: 0 2px 6px rgba(0,0,0,.26), 0 18px 46px rgba(0,0,0,.34);
--shadow-lg: 0 4px 14px rgba(0,0,0,.30), 0 36px 90px rgba(0,0,0,.42);
--tint: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 46%);
--tint-2: linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 60%);
--art-dim: brightness(.72) saturate(.92);
--art-dim-hover: brightness(.80) saturate(1);
}
/* 墨翠 Emerald · 浅底 + 深祖母绿（Emerald Sophistication 公式）
#F2F1EC 底 / #0D4C3C 主 / #7BA05B 点缀 */
html[data-theme="emerald"]{
--paper: #F2F1EC;
--paper-2: #E4E7DE;
--paper-3: #F8F8F4;
--paper-4: #D2D8CC;
--ink: #0D3B2E;
--ink-2: #3F5A4E;
--ink-3: #6E867A;
--ink-4: #9BADA1;
--line: rgba(13,59,46,.12);
--line-strong: rgba(13,59,46,.28);
--line-soft: rgba(13,59,46,.05);
--accent: #0D4C3C;
--accent-dk: #093329;
--accent-soft: rgba(13,76,60,.09);
--on-accent: #FFFFFF;
--gold: #7BA05B; /* 鼠尾草绿 */
--gold-soft: rgba(123,160,91,.16);
--deep: #0B2B22;
--deep-2: #071E18;
--deep-line: rgba(242,241,236,.16);
--nav-bg: rgba(242,241,236,.80);
--thumb: #B4C2B6;
--shadow-sm: 0 1px 2px rgba(13,59,46,.04), 0 6px 18px rgba(13,59,46,.05);
--shadow-md: 0 2px 6px rgba(13,59,46,.05), 0 18px 46px rgba(13,59,46,.08);
--shadow-lg: 0 4px 14px rgba(13,59,46,.06), 0 36px 90px rgba(13,59,46,.11);
--tint: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%);
--tint-2: linear-gradient(180deg, rgba(13,59,46,.03) 0%, rgba(13,59,46,0) 60%);
}
/* 净白底 · 石榴红 Pomegranate White —— 默认主题
参考设计工作室案例册：大面积纯白/极浅灰底，石榴红只做标题强调与点缀，
让真实案例照片和文字本身成为视觉主体 */
html[data-theme="pomegranate"]{
--paper: #FFFFFF;
--paper-2: #F5F5F5;
--paper-3: #FAFAFA;
--paper-4: #EAEAEA;
--ink: #1A1A1A;
--ink-2: #555555;
--ink-3: #888888;
--ink-4: #CCCCCC;
--line: rgba(0,0,0,.08);
--line-strong: rgba(0,0,0,.16);
--line-soft: rgba(0,0,0,.04);
--accent: #B5485D;
--accent-dk: #8F3342;
--accent-soft: rgba(181,72,93,.08);
--on-accent: #FFFFFF;
--gold: #9E8B7A; /* 暖灰褐，替代旧金色，与白底更融合 */
--gold-soft: rgba(158,139,122,.12);
--deep: #1A1A1A;
--deep-2: #0F0F0F;
--deep-line: rgba(255,255,255,.14);
--nav-bg: rgba(255,255,255,.82);
--thumb: #D8D8D8;
--shadow-sm: 0 1px 2px rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.05);
--shadow-md: 0 2px 6px rgba(0,0,0,.04), 0 18px 46px rgba(0,0,0,.07);
--shadow-lg: 0 4px 14px rgba(0,0,0,.05), 0 36px 90px rgba(0,0,0,.09);
--tint: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%);
--tint-2: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,0) 60%);
--grain-opacity:.015;
}
/* 主题切换时的平滑过渡 */
html.is-theming,
html.is-theming body,
html.is-theming body *{
transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease) !important;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
margin:0; background:var(--paper); color:var(--ink);
font-family:var(--sans); font-weight:300; line-height:1.7;
letter-spacing:.01em; overflow-x:hidden;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
::selection{ background:var(--accent); color:var(--on-accent); }
html.is-locked, body.is-locked{ overflow:hidden; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:var(--thumb); border-radius:99px; border:2px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); }
/* 纸纹 */
.grain{
position:fixed; inset:-200%; z-index:9000; pointer-events:none; opacity:var(--grain-opacity,.03);
background-image:url("data:image/svg+xml;utf8,");
animation:grain 8s steps(6,end) infinite;
}
@keyframes grain{
0%,100%{transform:translate(0,0)} 10%{transform:translate(-4%,-4%)} 20%{transform:translate(-8%,3%)}
30%{transform:translate(3%,-7%)} 40%{transform:translate(-3%,6%)} 50%{transform:translate(-6%,4%)}
60%{transform:translate(6%,0)} 70%{transform:translate(0,7%)} 80%{transform:translate(4%,-3%)} 90%{transform:translate(-3%,4%)}
}
/* ---------- 2. 光标 & 进度 ---------- */
.cursor,.cursor-ring{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none; border-radius:50%; mix-blend-mode:difference; }
.cursor{ width:6px; height:6px; background:#fff; margin:-3px 0 0 -3px; }
.cursor-ring{
width:40px; height:40px; margin:-20px 0 0 -20px; border:1px solid rgba(255,255,255,.6);
transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s var(--ease);
}
.cursor-ring.is-hover{ width:76px; height:76px; margin:-38px 0 0 -38px; background:rgba(255,255,255,.16); border-color:transparent; }
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:9200; }
@media (hover:none),(max-width:900px){ .cursor,.cursor-ring{ display:none; } }
/* ---------- 3. 预加载 ---------- */
/* 已移除。这里曾是一个全屏预加载层（品牌字逐字浮现 + 00→100 计数 + 进度条），
由 JS 的 setInterval 计时驱动，首页与所有内页都要先看它一眼才显示内容，
手机上体感就是单纯的多等一秒。入口页不该有这种东西，故连同 DOM 与 JS 一并删除。
若将来确实需要「等待首屏资源」的反馈，请用 或骨架屏，
不要再引入遮挡内容的全屏蒙层。 */
/* ---------- 4. 导航 ---------- */
.nav{
position:fixed; top:0; left:0; right:0; z-index:9100; height:var(--nav-h);
display:flex; align-items:center; justify-content:space-between;
padding:0 var(--pad);
transition:height .45s var(--ease), background .45s var(--ease), border-color .45s;
border-bottom:1px solid transparent;
}
.nav.is-stuck{
height:66px; background:var(--nav-bg);
backdrop-filter:blur(16px) saturate(160%);
-webkit-backdrop-filter:blur(16px) saturate(160%);
border-bottom-color:var(--line);
}
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand b{ font-family:var(--serif); font-weight:500; font-size:19px; letter-spacing:.22em; }
.brand em{ font-style:normal; font-size:9.5px; letter-spacing:.34em; color:var(--ink-2); text-transform:uppercase; }
.menu{ display:flex; gap:clamp(18px,3vw,46px); align-items:center; }
.menu a{ position:relative; font-size:13px; letter-spacing:.16em; color:var(--ink-2); padding:6px 0; transition:color .35s; }
.menu a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.menu a:hover{ color:var(--ink); }
.menu a:hover::after, .menu a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.menu a.is-active{ color:var(--ink); font-weight:400; }
.nav-right{ display:flex; align-items:center; gap:16px; }
.nav-cta{ border:1px solid var(--line-strong); border-radius:99px; padding:11px 24px; font-size:12.5px; letter-spacing:.16em; transition:.4s var(--ease); white-space:nowrap; }
.nav-cta:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.burger{ display:none; width:30px; height:14px; position:relative; }
.burger i{ position:absolute; left:0; width:100%; height:1.5px; background:var(--ink); transition:.4s var(--ease); }
.burger i:nth-child(1){top:0} .burger i:nth-child(2){bottom:0}
body.menu-open .burger i:nth-child(1){ top:6px; transform:rotate(45deg); }
body.menu-open .burger i:nth-child(2){ bottom:6px; transform:rotate(-45deg); }
.drawer{
position:fixed; inset:0; z-index:9050; background:var(--paper);
padding:calc(var(--nav-h) + 40px) var(--pad) 40px;
display:flex; flex-direction:column; justify-content:space-between;
transform:translateY(-100%); transition:transform .7s var(--ease);
}
body.menu-open .drawer{ transform:none; }
.drawer nav{ display:flex; flex-direction:column; gap:6px; }
.drawer nav a{
font-family:var(--serif); font-size:clamp(24px,4.6vw,38px); letter-spacing:.06em;
padding:12px 0; border-bottom:1px solid var(--line);
display:flex; align-items:baseline; justify-content:space-between;
}
.drawer nav a small{ font-family:var(--sans); font-size:11px; letter-spacing:.28em; color:var(--ink-3); }
.drawer .d-foot{ font-size:12px; letter-spacing:.2em; color:var(--ink-3); }
@media(max-width:1000px){
.menu,.nav-cta{ display:none; }
.burger{ display:block; }
/* 平板/手机端：logo 需要更有分量，与右侧「导航」二字平衡。
中英文上下居中对齐，中文加粗、英文加大加重，避免被首屏大字压下去。 */
.brand{ align-items:center; gap:8px; }
.brand b{ font-size:20px; font-weight:600; letter-spacing:.16em; }
.brand em{ font-size:11px; font-weight:500; letter-spacing:.30em; }
/* 「导航」二字：挂在线的左侧，不占按钮的触控区（44×44 不变）。
打开抽屉后换成「关闭」—— 纯 CSS 跟着 body.menu-open / aria-expanded 走，不加 JS。 */
.burger-label{
position:absolute; right:calc(100% + 7px); top:50%; transform:translateY(-50%);
display:inline-flex; white-space:nowrap; pointer-events:none;
font-size:11.5px; letter-spacing:.22em; line-height:1; color:var(--ink-2);
}
.burger-label .bl-off{ display:none; }
body.menu-open .burger-label .bl-on,
.burger[aria-expanded="true"] .burger-label .bl-on{ display:none; }
body.menu-open .burger-label .bl-off,
.burger[aria-expanded="true"] .burger-label .bl-off{ display:inline; }
}
@media(min-width:1001px){ .drawer{ display:none; } }
/* ---------- 5. 版式 ---------- */
.wrap{ padding-inline:var(--pad); max-width:var(--max); margin-inline:auto; width:100%; }
section{ position:relative; }
.eyebrow{ display:inline-flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); }
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--accent); flex:none; }
.eyebrow.no-rule::before{ display:none; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:34px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.sec-head h2{ font-family:var(--serif); font-weight:400; margin:14px 0 0; font-size:clamp(24px,3.2vw,44px); letter-spacing:.04em; line-height:1.24; }
.sec-head p{ margin:0 0 6px; max-width:44ch; color:var(--ink-2); font-size:14px; }
.section{ padding:clamp(80px,13vh,170px) 0; }
.section.tight{ padding:clamp(60px,9vh,110px) 0; }
.bg-2{ background-color:var(--paper-2); background-image:var(--tint); }
.bg-2.top-line{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.page-head{ padding:calc(var(--nav-h) + clamp(50px,10vh,110px)) 0 clamp(40px,7vh,80px); }
.page-head h1{ font-family:var(--serif); font-weight:400; margin:20px 0 0; font-size:clamp(32px,6.6vw,92px); line-height:1.06; letter-spacing:.03em; }
.page-head .lede{ margin-top:clamp(24px,4vh,44px); max-width:58ch; color:var(--ink-2); font-size:clamp(14px,1.25vw,16.5px); line-height:2.05; }
.page-head .crumb{ font-size:11px; letter-spacing:.26em; color:var(--ink-3); text-transform:uppercase; margin-bottom:18px; }
.page-head .crumb b{ color:var(--ink); font-weight:400; }
/* 滚动揭示 */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
.line-mask{ overflow:hidden; display:block; }
.line-mask>span{ display:block; transform:translateY(104%); transition:transform 1.15s var(--ease); }
.is-in .line-mask>span, .line-mask.is-in>span{ transform:none; }
/* ---------- 6. 按钮 ---------- */
.btn{
position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:14px;
border:1px solid var(--line-strong); border-radius:99px; padding:16px 34px;
font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
transition:color .5s var(--ease), border-color .5s var(--ease); color:var(--ink);
}
.btn>span,.btn>svg{ position:relative; z-index:2; }
.btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .5s var(--ease); }
.btn::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .6s var(--ease); z-index:1; }
.btn:hover{ color:var(--paper); border-color:var(--ink); box-shadow:var(--shadow-md); }
.btn:hover::before{ transform:none; }
.btn:hover svg{ transform:translate(4px,-4px); }
.btn.solid{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.btn.solid::before{ background:var(--ink); }
.btn.solid:hover{ color:#fff; border-color:var(--ink); }
.btn.accent{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.accent::before{ background:var(--ink); }
.btn.accent:hover{ border-color:var(--ink); }
.btn.sm{ padding:12px 26px; font-size:11.5px; }
.btn[disabled]{ opacity:.42; pointer-events:none; }
.link-arrow{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
.link-arrow svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .5s var(--ease); }
.link-arrow:hover svg{ transform:translate(5px,-5px); }
/* ---------- 7. Hero（首页） ---------- */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; padding-top:var(--nav-h); }
.hero-bg{ position:absolute; inset:0; z-index:0; background:
radial-gradient(56% 60% at 80% 20%, var(--accent-soft) 0%, transparent 62%),
radial-gradient(48% 54% at 10% 84%, var(--gold-soft) 0%, transparent 68%),
linear-gradient(180deg,var(--paper-3) 0%, var(--paper) 52%, var(--paper-2) 100%); }
.hero-inner{ position:relative; z-index:2; }
.hero .eyebrow{ margin-bottom:clamp(24px,4vh,52px); }
/* 标题由两段遮罩组成：flex + wrap 让它在宽屏并排、窄屏自动折行，
避免 CJK 在任意字符处断行造成的凌乱排版 */
.hero-title{ display:flex; flex-wrap:wrap; align-items:flex-start; font-family:var(--serif); font-weight:400; font-size:clamp(40px,9.4vw,138px); line-height:.94; letter-spacing:.02em; margin:0; }
.hero-title .line-mask{ display:block; }
.hero-title .line-mask:nth-child(2)>span{ transition-delay:.12s; }
.hero-title .sep{ display:inline-block; width:clamp(14px,2.2vw,40px); }
.hero-title .ch{ position:relative; display:inline-block; }
.hero-title .ch::after{ content:""; position:absolute; left:0; bottom:.10em; height:3px; width:0; background:var(--accent); transition:width 1.4s var(--ease); }
.hero-title.is-in .ch::after{ width:100%; }
.hero-meta{ display:flex; align-items:flex-end; justify-content:space-between; gap:48px; margin-top:clamp(32px,6vh,70px); flex-wrap:wrap; }
.hero-meta .latin{ font-size:clamp(11px,1vw,13px); letter-spacing:.5em; text-transform:uppercase; color:var(--ink-3); }
.hero-desc{ max-width:44ch; color:var(--ink-2); font-size:clamp(13.5px,1.15vw,15.5px); line-height:2.05; margin:26px 0 0; }
.hero-desc b{ color:var(--ink); font-weight:400; }
.hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.scroll-cue{ display:flex; align-items:center; gap:14px; font-size:10.5px; letter-spacing:.3em; color:var(--ink-3); text-transform:uppercase; }
.scroll-cue i{ display:block; width:1px; height:52px; background:linear-gradient(var(--ink-4),transparent); position:relative; overflow:hidden; }
.scroll-cue i::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--accent); animation:cue 2.2s var(--ease-io) infinite; }
@keyframes cue{ 0%{top:-100%} 60%,100%{top:100%} }
.badge{ position:absolute; right:var(--pad); bottom:clamp(90px,16vh,160px); z-index:3; width:clamp(96px,10vw,136px); height:clamp(96px,10vw,136px); display:grid; place-items:center; }
.badge svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 28s linear infinite; }
.badge svg text{ font-family:var(--sans); font-size:8.4px; letter-spacing:2.1px; fill:var(--ink-3); }
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(max-width:1000px){ .badge{ display:none; } }
/* ---------- 8. 跑马灯 ---------- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; overflow:hidden; white-space:nowrap; background:var(--paper-3); }
.marquee-track{ display:inline-flex; align-items:center; animation:slide 36s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--serif); font-size:clamp(17px,2.1vw,30px); letter-spacing:.14em; color:var(--ink-2); padding:0 30px; display:inline-flex; align-items:center; gap:30px; }
.marquee-track span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.85; }
@keyframes slide{ to{ transform:translateX(-50%); } }
/* ---------- 9. 首页 · 关于摘要 / 服务 / 数据 ---------- */
.about-grid{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(40px,6vw,110px); align-items:start; }
.about-lead{ font-family:var(--serif); font-weight:400; font-size:clamp(18px,2.1vw,30px); line-height:1.62; letter-spacing:.02em; margin:26px 0 0; }
.about-lead em{ font-style:normal; color:var(--accent); }
.about-body{ color:var(--ink-2); font-size:15px; line-height:2.15; }
.about-body p{ margin:0 0 22px; }
.about-sign{ margin-top:36px; display:flex; align-items:center; gap:18px; font-size:12px; letter-spacing:.2em; color:var(--ink-3); }
.about-sign b{ font-family:var(--serif); font-weight:400; font-size:15px; letter-spacing:.3em; color:var(--ink); white-space:nowrap; }
.about-sign i{ flex:1; height:1px; background:var(--line); }
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.svc-list{ border-top:1px solid var(--line); }
.svc{
display:grid; grid-template-columns:78px minmax(0,1fr) minmax(0,1.35fr) 46px;
gap:clamp(16px,3vw,48px); align-items:center;
padding:clamp(26px,4vh,42px) 0; border-bottom:1px solid var(--line);
position:relative; transition:padding .55s var(--ease);
}
.svc::before{ content:""; position:absolute; inset:0 calc(var(--pad) * -1); z-index:-1; background:linear-gradient(90deg,var(--accent-soft),transparent 72%); opacity:0; transition:opacity .55s var(--ease); }
.svc:hover{ padding-left:26px; }
.svc:hover::before{ opacity:1; }
.svc .num{ font-size:11px; letter-spacing:.24em; color:var(--ink-3); }
.svc h3{ font-family:var(--serif); font-weight:400; margin:0; font-size:clamp(21px,2.6vw,35px); letter-spacing:.05em; line-height:1.35; }
.svc h3 small{ display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.3em; color:var(--ink-3); margin-top:8px; text-transform:uppercase; }
.svc p{ margin:0; color:var(--ink-2); font-size:14px; line-height:1.95; }
.svc .arrow{ justify-self:end; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:.5s var(--ease); }
.svc .arrow svg{ width:14px; height:14px; fill:none; stroke:var(--ink-2); stroke-width:1.5; transition:.5s var(--ease); }
.svc:hover .arrow{ background:var(--accent); border-color:var(--accent); transform:rotate(-45deg); }
.svc:hover .arrow svg{ stroke:var(--on-accent); }
@media(max-width:820px){ .svc{ grid-template-columns:54px 1fr; row-gap:16px; } .svc p{ grid-column:1/-1; } .svc .arrow{ display:none; } }
.stats-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.stat{ padding:clamp(28px,4.5vh,50px) clamp(14px,2vw,30px); border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.stat:first-child{ border-left:1px solid var(--line); }
.stat b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.8vw,54px); line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.stat b i{ font-style:normal; font-size:.4em; color:var(--accent); margin-left:4px; vertical-align:super; }
.stat p{ margin:16px 0 0; font-size:11.5px; letter-spacing:.24em; color:var(--ink-3); text-transform:uppercase; }
@media(max-width:820px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(3){border-left:1px solid var(--line);} }
/* ---------- 10. 案例卡 ---------- */
.works-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px); margin-top:clamp(38px,6vh,70px); }
.works-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{ position:relative; overflow:hidden; border:1px solid var(--line); background:var(--paper-3); aspect-ratio:4/3; display:block; box-shadow:var(--shadow-sm); transition:box-shadow .7s var(--ease), transform .7s var(--ease); }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.card .art{ position:absolute; inset:0; filter:var(--art-dim); transition:transform 1.25s var(--ease), filter 1.25s var(--ease); }
.card:hover .art{ transform:scale(1.06); filter:var(--art-dim-hover); }
.card .art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(20,26,23,.80) 100%); }
.card .meta{ position:absolute; left:clamp(20px,2.4vw,32px); right:clamp(20px,2.4vw,32px); bottom:clamp(20px,2.4vw,32px); z-index:2; color:#fff; }
.card .meta .tag{ font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.card .meta h4{ font-family:var(--serif); font-weight:400; margin:10px 0 0; font-size:clamp(18px,2vw,28px); letter-spacing:.05em; color:#fff; transform:translateY(8px); opacity:.94; transition:.7s var(--ease); }
.card:hover .meta h4{ transform:none; }
.card .meta .yr{ position:absolute; right:0; bottom:3px; font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.72); }
.card .go{ position:absolute; top:clamp(20px,2.4vw,32px); right:clamp(20px,2.4vw,32px); z-index:2; width:52px; height:52px; border-radius:50%; background:var(--paper); color:var(--ink); display:grid; place-items:center; transform:scale(0) rotate(-40deg); transition:.6s var(--ease); }
.card:hover .go{ transform:scale(1) rotate(0); }
.card .go svg{ width:17px; height:17px; fill:none; stroke:var(--ink); stroke-width:1.5; }
@media(max-width:900px){ .works-grid,.works-grid.three{ grid-template-columns:1fr; } }
/* 抽象视觉 —— 统一在「暖中性 + 摩卡 + 香槟金」一个family里，
避免彩色占位图把克制的配色打散 */
.art-1{ background:radial-gradient(120% 110% at 22% 14%,#F2ECE2 0%,#E4D9C8 52%,#D6C8B3 100%); }
.art-1::before{ content:""; position:absolute; width:60%; aspect-ratio:1; left:10%; top:16%; border-radius:50%; background:conic-gradient(from 200deg,#A47864,#7E5A45,#F0E7DA,#A47864); filter:blur(2px); opacity:.85; }
.art-2{ background:linear-gradient(160deg,#E9E9E3 0%,#D2D4CB 100%); }
.art-2::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(43,34,28,.13) 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,rgba(43,34,28,.07) 0 1px,transparent 1px 34px); }
.art-2::after{ content:""; position:absolute; width:44%; aspect-ratio:1; right:13%; top:19%; border:1px solid rgba(43,34,28,.34); border-radius:50%; }
.art-3{ background:linear-gradient(200deg,#F4EEE3 0%,#DFD4BC 100%); }
.art-3::before{ content:""; position:absolute; width:54%; aspect-ratio:3/4; left:23%; top:15%; background:linear-gradient(180deg,rgba(169,139,79,.55),rgba(169,139,79,.05)); clip-path:polygon(50% 0,100% 26%,100% 100%,0 100%,0 26%); }
.art-4{ background:radial-gradient(110% 100% at 78% 18%,#EDEAE5 0%,#D9D4CB 100%); }
.art-4::before{ content:""; position:absolute; inset:14% 16%; border:1px solid rgba(43,34,28,.26); border-radius:4px; }
.art-4::after{ content:""; position:absolute; width:38%; aspect-ratio:1; right:20%; top:26%; border-radius:50%; background:radial-gradient(circle,rgba(164,120,100,.72),transparent 68%); filter:blur(6px); }
.art-5{ background:linear-gradient(150deg,#EFEAE1 0%,#D6CEC1 100%); }
.art-5::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 30% 70%,rgba(164,120,100,.38),transparent 70%),radial-gradient(46% 52% at 76% 30%,rgba(43,34,28,.18),transparent 72%); }
.art-6{ background:linear-gradient(120deg,#F1E9DA 0%,#DCCDB2 100%); }
.art-6::before{ content:""; position:absolute; inset:18% 20%; background:repeating-linear-gradient(45deg,rgba(43,34,28,.18) 0 2px,transparent 2px 16px); }
.art-7{ background:linear-gradient(140deg,#E5E6E0 0%,#CBD0C6 100%); }
.art-7::before{ content:""; position:absolute; inset:0; background:conic-gradient(from 90deg at 62% 42%,rgba(164,120,100,.45),transparent 40%,rgba(43,34,28,.24)); }
.art-8{ background:linear-gradient(170deg,#F3EDE1 0%,#E0D4BE 100%); }
.art-8::before{ content:""; position:absolute; width:66%; aspect-ratio:1/1.2; right:8%; bottom:-6%; background:linear-gradient(180deg,rgba(164,120,100,.42),transparent); clip-path:polygon(38% 0,100% 0,100% 100%,0 100%); }
.art-9{ background:linear-gradient(150deg,#EAE8E4 0%,#D2CFC8 100%); }
.art-9::before{ content:""; position:absolute; inset:16% 18%; border:1px solid rgba(43,34,28,.24); }
.art-9::after{ content:""; position:absolute; inset:26% 30%; border:1px solid rgba(169,139,79,.55); }
.art-10{ background:linear-gradient(140deg,#F0E8D9 0%,#D9CBB3 100%); }
.art-10::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(43,34,28,.12) 0 1px,transparent 1px 22px); }
.art-11{ background:linear-gradient(160deg,#EAEAE6 0%,#CFD2CE 100%); }
.art-11::before{ content:""; position:absolute; width:52%; aspect-ratio:1; left:24%; top:24%; border-radius:50%; background:radial-gradient(circle,rgba(169,139,79,.55),transparent 70%); }
.art-12{ background:linear-gradient(150deg,#F1EADF 0%,#D8CCB8 100%); }
.art-12::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 68% 32%,rgba(164,120,100,.38),transparent 66%),repeating-linear-gradient(90deg,rgba(43,34,28,.1) 0 1px,transparent 1px 28px); }
/* 案例筛选 */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-top:clamp(28px,4vh,44px); }
.filters button{
border:1px solid var(--line); border-radius:99px; padding:10px 22px;
font-size:12px; letter-spacing:.16em; color:var(--ink-2);
transition:.4s var(--ease);
}
.filters button:hover{ border-color:var(--line-strong); color:var(--ink); }
.filters button.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.card.is-hide{ display:none; }
/* ---------- 11. 关于页 · 价值观 / 团队 / 时间线 ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.value{ padding:clamp(30px,4.5vh,52px) clamp(20px,2.6vw,42px); border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.value:first-child{ border-left:1px solid var(--line); }
.value .vn{ font-family:var(--serif); font-size:13px; color:var(--accent); letter-spacing:.2em; }
.value h3{ font-family:var(--serif); font-weight:400; margin:22px 0 14px; font-size:clamp(20px,2.2vw,28px); letter-spacing:.05em; }
.value p{ margin:0; color:var(--ink-2); font-size:14px; line-height:2; }
@media(max-width:900px){ .values{ grid-template-columns:1fr; } .value{ border-left:1px solid var(--line); } }
/* 四列变体（客户墙等） */
.values.four{ grid-template-columns:repeat(4,1fr); }
.values.four .value{ padding:clamp(22px,3vh,34px) clamp(16px,2vw,28px); }
.values.four .value:nth-child(4n+1){ border-left:1px solid var(--line); }
@media(max-width:900px){
.values.four{ grid-template-columns:1fr 1fr; }
.values.four .value:nth-child(2n+1){ border-left:1px solid var(--line); }
}
@media(max-width:560px){
.values.four{ grid-template-columns:1fr; }
.values.four .value{ border-left:1px solid var(--line); }
}
.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px); margin-top:clamp(38px,6vh,64px); }
.member{ text-align:left; }
.member .ph{ aspect-ratio:3/4; background:var(--paper-2); border:1px solid var(--line); position:relative; overflow:hidden; margin-bottom:20px; }
.member .ph::before{ content:""; position:absolute; inset:0; filter:var(--art-dim); transition:transform 1.1s var(--ease), filter 1.1s var(--ease); }
.member:hover .ph::before{ transform:scale(1.06); filter:var(--art-dim-hover); }
.member:nth-child(1) .ph::before{ background:radial-gradient(80% 70% at 50% 30%,rgba(164,120,100,.40),transparent 72%),linear-gradient(180deg,#EFE8DC,#D8CEBD); }
.member:nth-child(2) .ph::before{ background:radial-gradient(80% 70% at 40% 36%,rgba(43,34,28,.26),transparent 72%),linear-gradient(180deg,#E8E8E2,#D0D3CA); }
.member:nth-child(3) .ph::before{ background:radial-gradient(80% 70% at 60% 34%,rgba(169,139,79,.42),transparent 72%),linear-gradient(180deg,#F3ECDF,#DED2B9); }
.member:nth-child(4) .ph::before{ background:radial-gradient(80% 70% at 52% 32%,rgba(164,120,100,.26),transparent 72%),linear-gradient(180deg,#ECEAE4,#D4D1C9); }
.member h4{ margin:0; font-family:var(--serif); font-weight:400; font-size:20px; letter-spacing:.06em; }
.member span{ display:block; margin-top:8px; font-size:11.5px; letter-spacing:.2em; color:var(--ink-3); text-transform:uppercase; }
@media(max-width:900px){ .team{ grid-template-columns:repeat(2,1fr); } }
.timeline{ margin-top:clamp(38px,6vh,60px); border-top:1px solid var(--line); }
.tl{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:clamp(20px,4vw,60px); padding:clamp(24px,3.6vh,38px) 0; border-bottom:1px solid var(--line); align-items:baseline; }
.tl .yr{ font-family:var(--serif); font-size:clamp(20px,2.4vw,30px); letter-spacing:.06em; color:var(--accent); }
.tl h4{ margin:0 0 8px; font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.9vw,22px); letter-spacing:.05em; }
.tl p{ margin:0; color:var(--ink-2); font-size:13.5px; line-height:1.95; }
@media(max-width:700px){ .tl{ grid-template-columns:1fr; gap:10px; } }
/* ---------- 12. 服务页 · 详情卡 / 流程 ---------- */
.svc-block{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(30px,5vw,80px); padding:clamp(44px,7vh,86px) 0; border-bottom:1px solid var(--line); align-items:start; }
.svc-block .idx{ font-family:var(--serif); font-size:clamp(40px,5.2vw,76px); line-height:.9; color:var(--paper-4); letter-spacing:.02em; }
.svc-block h3{ font-family:var(--serif); font-weight:400; margin:0 0 6px; font-size:clamp(22px,2.9vw,38px); letter-spacing:.04em; }
.svc-block .en{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); margin-bottom:26px; }
.svc-block p{ color:var(--ink-2); font-size:15px; line-height:2.1; margin:0 0 24px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.tag-list span{ border:1px solid var(--line); border-radius:99px; padding:7px 15px; font-size:11.5px; letter-spacing:.1em; color:var(--ink-2); }
@media(max-width:900px){ .svc-block{ grid-template-columns:1fr; gap:20px; } }
.process{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(38px,6vh,64px); border-top:1px solid var(--line); }
.step{ padding:clamp(28px,4vh,46px) clamp(16px,2vw,32px); border-bottom:1px solid var(--line); border-right:1px solid var(--line); position:relative; }
.step:first-child{ border-left:1px solid var(--line); }
.step .sn{ font-size:11px; letter-spacing:.24em; color:var(--accent); }
.step h4{ font-family:var(--serif); font-weight:400; margin:20px 0 12px; font-size:clamp(17px,1.8vw,22px); letter-spacing:.05em; }
.step p{ margin:0; color:var(--ink-2); font-size:13.5px; line-height:2; }
.step::after{ content:""; position:absolute; right:-4.5px; top:calc(clamp(28px,4vh,46px) + 12px); width:8px; height:8px; border-radius:50%; background:var(--paper); border:1px solid var(--line-strong); }
.step:last-child::after{ display:none; }
@media(max-width:900px){ .process{ grid-template-columns:1fr 1fr; } .step:nth-child(3){ border-left:1px solid var(--line); } }
@media(max-width:560px){ .process{ grid-template-columns:1fr; } .step{ border-left:1px solid var(--line); } .step::after{ display:none; } }
/* ---------- 13. CTA ---------- */
.cta{ padding:clamp(80px,14vh,180px) 0; text-align:center; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; left:50%; top:52%; width:118%; aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle,var(--accent-soft) 0%,transparent 58%); pointer-events:none; }
.cta .eyebrow{ justify-content:center; }
.cta .eyebrow::before{ display:none; }
.cta h2{ font-family:var(--serif); font-weight:400; margin:24px 0 0; font-size:clamp(26px,4.8vw,68px); line-height:1.18; letter-spacing:.03em; position:relative; }
.cta .mail{ display:inline-block; margin-top:clamp(28px,5vh,50px); font-size:clamp(14px,1.6vw,22px); letter-spacing:.06em; color:var(--ink); position:relative; }
.cta .mail::after{ content:""; position:absolute; left:0; bottom:-8px; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease); }
.cta .mail:hover::after{ transform:scaleX(1); transform-origin:left; }
.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:clamp(34px,6vh,58px); position:relative; }
/* ---------- 14. 页脚 ---------- */
footer{ background:var(--deep); color:var(--paper); padding:clamp(56px,8vh,96px) 0 32px; }
footer .foot-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,60px); }
footer .foot-brand b{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.8vw,36px); letter-spacing:.24em; display:block; }
footer .foot-brand p{ margin:20px 0 0; color:rgba(244,241,233,.6); font-size:12.5px; letter-spacing:.14em; line-height:2.1; }
footer .foot-brand .socials{ display:flex; gap:10px; margin-top:26px; }
footer .foot-brand .socials a{ width:40px; height:40px; border:1px solid var(--deep-line); border-radius:50%; display:grid; place-items:center; font-size:10px; letter-spacing:.05em; color:rgba(244,241,233,.72); transition:.4s var(--ease); }
footer .foot-brand .socials a:hover{ background:var(--paper); color:var(--deep); border-color:var(--paper); }
footer .foot-col h5{ margin:0 0 20px; font-size:10.5px; letter-spacing:.28em; color:rgba(244,241,233,.45); text-transform:uppercase; font-weight:400; }
footer .foot-col a,footer .foot-col p{ display:block; margin:0 0 12px; font-size:13px; color:rgba(244,241,233,.76); transition:color .35s, transform .35s var(--ease); }
footer .foot-col a:hover{ color:var(--paper); transform:translateX(4px); }
footer .foot-bottom{ margin-top:clamp(46px,7vh,78px); padding-top:26px; border-top:1px solid var(--deep-line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:11px; letter-spacing:.16em; color:rgba(244,241,233,.48); }
@media(max-width:820px){ footer .foot-grid{ grid-template-columns:1fr 1fr; } footer .foot-brand{ grid-column:1/-1; } }
/* ---------- 15. 联系页 ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(30px,4.5vw,72px); align-items:start; }
/* 单列也必须写 minmax(0,1fr)。裸 1fr 的隐式最小值是 auto，
会被 .date-strip 里那串不换行的日期按钮（14 个 ×58px ≈ 903px）撑开，
列宽一旦被撑开，.booking 与整页就跟着横向溢出（实测 390 视口 → scrollWidth 957）。 */
@media(max-width:1040px){ .contact-grid{ grid-template-columns:minmax(0,1fr); } }
.info-card{ border-top:1px solid var(--line); }
.info-row{ display:flex; gap:20px; padding:26px 0; border-bottom:1px solid var(--line); }
.info-row .ic{ flex:none; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; }
.info-row .ic svg{ width:16px; height:16px; fill:none; stroke:var(--ink-2); stroke-width:1.4; }
.info-row h5{ margin:2px 0 8px; font-size:10.5px; letter-spacing:.26em; color:var(--ink-3); text-transform:uppercase; font-weight:400; }
.info-row p{ margin:0; font-size:14.5px; color:var(--ink); line-height:1.8; }
.info-row p a:hover{ color:var(--accent); }
.info-row small{ display:block; margin-top:6px; font-size:12px; color:var(--ink-3); letter-spacing:.04em; }
/* --- 预约：一屏简表 --- */
.booking{ background-color:var(--paper-3); background-image:var(--tint); border:1px solid var(--line); padding:clamp(24px,3.4vw,48px); box-shadow:var(--shadow-lg); }
.booking-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line); }
.booking-head h3{ font-family:var(--serif); font-weight:400; margin:0; font-size:clamp(22px,2.6vw,32px); letter-spacing:.05em; }
.booking-head p{ margin:8px 0 0; color:var(--ink-3); font-size:12.5px; letter-spacing:.06em; }
.booking-head .bk-code{ font-size:11px; letter-spacing:.2em; color:var(--ink-3); }
.bk-body{ display:flex; flex-direction:column; gap:clamp(22px,3vh,30px); margin-top:clamp(24px,3.4vh,34px); }
.bk-row{ display:flex; flex-direction:column; gap:12px; }
/* 字段标签（行内与表单通用） */
.bk-row>label,.field label{ font-size:10.5px; letter-spacing:.22em; color:var(--ink-3); text-transform:uppercase; }
.bk-row>label b,.field label b{ color:var(--accent); font-weight:400; }
.bk-row .err,.field .err{ font-size:11.5px; color:var(--accent); letter-spacing:.04em; display:none; }
.bk-row.has-err .err,.field.has-err .err{ display:block; }
.bk-row.has-err .chips button,.field.has-err input,.field.has-err textarea{ border-color:var(--accent); }
/* ---------- chip ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips button{ border:1px solid var(--line); border-radius:99px; padding:9px 18px; font-size:12.5px; color:var(--ink-2); transition:.35s var(--ease); }
.chips button:hover:not([disabled]){ border-color:var(--line-strong); }
.chips button.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.chips button[disabled]{ opacity:.32; cursor:not-allowed; text-decoration:line-through; }
/* 需求方向：整块单选，更醒目 */
.chips.lg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:8px; }
.chips.lg button{ border-radius:2px; padding:15px 16px; text-align:left; font-family:var(--serif); font-size:15px; letter-spacing:.05em; color:var(--ink); background:var(--paper); }
.chips.lg button.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--ink); box-shadow:var(--shadow-sm); }
@media(max-width:560px){ .chips.lg{ grid-template-columns:repeat(2,minmax(0,1fr)); } .chips.lg button{ font-size:14px; padding:13px 14px; } }
/* ---------- 日期条 ---------- */
/* min-width:0 是双保险：它作为 flex/grid 子项时不要参与固有宽度计算，
横向滚动交给自己，宽度由父级决定。 */
.date-strip{ display:flex; gap:8px; overflow-x:auto; min-width:0; padding-bottom:2px; scrollbar-width:none; }
.date-strip::-webkit-scrollbar{ display:none; }
/* 日期条现在只出星期（一周不重复），单行内容比原来的「周几 + 日期」矮，
min-height 兜住高度，避免按钮随内容缩水。 */
.date-strip button{
flex:none; width:64px; min-height:64px; padding:11px 0; border:1px solid var(--line); border-radius:2px;
background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
transition:.35s var(--ease);
}
.date-strip button em{ font-style:normal; font-size:10.5px; letter-spacing:.08em; color:var(--ink-3); }
.date-strip button b{ font-family:var(--serif); font-weight:400; font-size:19px; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.date-strip button:hover{ border-color:var(--line-strong); }
.date-strip button.is-on{ background:var(--accent); border-color:var(--accent); }
.date-strip button.is-on em,.date-strip button.is-on b{ color:var(--on-accent); }
/* 时段文案已简化为「上午 / 下午 / 晚间」，按钮不必再留那么宽。 */
.chips.slots button{ min-width:120px; text-align:center; padding:12px 18px; }
/* ---------- 表单 ---------- */
.bk-two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:640px){ .bk-two{ grid-template-columns:minmax(0,1fr); } }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1/-1; }
.field input,.field select,.field textarea{
width:100%; background:var(--paper); border:1px solid var(--line); border-radius:2px;
padding:14px 16px; font-size:14.5px; color:var(--ink); outline:none;
transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
font-family:var(--sans); font-weight:300;
}
.field textarea{ resize:vertical; min-height:92px; line-height:1.85; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-4); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* ---------- 提交 ---------- */
.bk-submit{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line); }
.bk-tip{ margin:0; max-width:38ch; font-size:11.5px; line-height:1.85; color:var(--ink-3); letter-spacing:.03em; }
.bk-error{ display:none; padding:14px 18px; border:1px solid var(--accent); background:var(--accent-soft); color:var(--ink); font-size:13px; line-height:1.8; }
.bk-error.is-on{ display:block; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
/* 成功 */
.success{ text-align:center; padding:clamp(20px,4vh,40px) 0; animation:paneIn .7s var(--ease) both; }
.success .tick{ width:74px; height:74px; margin:0 auto 26px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent); display:grid; place-items:center; }
.success .tick svg{ width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:draw .8s .25s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success h3{ font-family:var(--serif); font-weight:400; margin:0 0 14px; font-size:clamp(22px,2.4vw,30px); letter-spacing:.05em; }
.success p{ margin:0 auto 8px; max-width:46ch; color:var(--ink-2); font-size:14.5px; line-height:2; }
.success .code{ display:inline-block; margin-top:22px; padding:14px 28px; border:1px dashed var(--line-strong); font-family:var(--serif); font-size:19px; letter-spacing:.24em; }
.success .acts{ display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
/* FAQ */
.faq{ border-top:1px solid var(--line); margin-top:clamp(38px,6vh,60px); }
.qa{ border-bottom:1px solid var(--line); }
.qa>button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; padding:clamp(20px,3vh,30px) 0; }
.qa>button h4{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(16px,1.8vw,21px); letter-spacing:.05em; }
.qa>button i{ flex:none; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:.45s var(--ease); position:relative; }
.qa>button i::before,.qa>button i::after{ content:""; position:absolute; background:var(--ink-2); transition:.45s var(--ease); }
.qa>button i::before{ width:11px; height:1px; }
.qa>button i::after{ width:1px; height:11px; }
.qa.is-open>button i{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.qa.is-open>button i::before,.qa.is-open>button i::after{ background:var(--on-accent); }
.qa.is-open>button i::after{ opacity:0; }
.qa .ans{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); }
.qa .ans p{ margin:0 0 26px; max-width:72ch; color:var(--ink-2); font-size:14px; line-height:2.05; }
/* 地图占位 */
.map{ position:relative; aspect-ratio:16/6; background-color:var(--paper-2); background-image:var(--tint); border:1px solid var(--line); overflow:hidden; margin-top:clamp(38px,6vh,60px); box-shadow:var(--shadow-sm); }
.map::before{ content:""; position:absolute; inset:0; background:
repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 62px),
repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 62px),
radial-gradient(60% 70% at 42% 46%, var(--accent-soft), transparent 70%); }
.map::after{ content:""; position:absolute; width:12px; height:12px; left:42%; top:46%; border-radius:50%; background:var(--accent); box-shadow:0 0 0 7px var(--accent-soft), 0 0 0 16px var(--accent-soft); animation:pulse 2.6s var(--ease-io) infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 11px var(--accent-soft), 0 0 0 24px transparent; } }
.map .tag{ position:absolute; left:42%; top:46%; transform:translate(24px,-52%); background:var(--paper-3); border:1px solid var(--line); padding:12px 18px; font-size:12.5px; letter-spacing:.08em; line-height:1.7; }
.map .tag b{ display:block; font-family:var(--serif); font-weight:400; font-size:15px; letter-spacing:.1em; }
/* 装饰中文大字 */
.ghost{ position:absolute; right:var(--pad); top:calc(var(--nav-h) + 30px); font-family:var(--serif); font-size:clamp(90px,17vw,260px); line-height:.8; color:transparent; -webkit-text-stroke:1px var(--line); pointer-events:none; user-select:none; z-index:0; opacity:.9; }
@media(max-width:900px){ .ghost{ display:none; } }
/* 无障碍圆角降级 */
@media (prefers-reduced-motion:reduce){
*{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
.reveal{ opacity:1; transform:none; } .line-mask>span{ transform:none; }
html{ scroll-behavior:auto; }
}
/* ==========================================================================
16. 移动端与窄屏
--------------------------------------------------------------------------
设计原则（手机是装修咨询的主入口，不是桌面的缩水版）：
· 断点只有两个：≤1000px（导航折叠）、≤760px（手机版式）、≤380px（小屏兜底）
· 触控目标一律 ≥44px，输入框字号 16px（否则 iOS 聚焦会强制放大整页）
· 拇指区：底部常驻「电话 / 预约」，抽屉里补预约与拨号入口
· 版式收紧节奏：段落间距、段落行高、区块内边距一起降，避免手机上一次只看到一段话
· 装饰性元素（大字描边、圆形徽标、自定义光标、滚动提示）在窄屏让位给内容
· 尊重刘海屏：safe-area-inset 用于导航与底部操作条
========================================================================== */
/* ---------- 16.1 触控基础 ---------- */
@media (max-width:1000px){
a,button,input,textarea,select,label{ -webkit-tap-highlight-color:transparent; }
/* 触屏没有 hover，去掉所有依赖 hover 的位移/缩放反馈，改用 :active */
.svc:hover{ padding-left:0; }
.svc:hover .arrow{ background:none; border-color:var(--line); transform:none; }
.svc:hover .arrow svg{ stroke:var(--ink-2); }
.card:hover{ transform:none; }
.card:hover .art{ transform:none; }
.member:hover .ph::before{ transform:none; }
footer .foot-col a:hover{ transform:none; }
.btn:hover svg{ transform:none; }
.link-arrow:hover svg{ transform:none; }
}
/* ---------- 16.2 导航（折叠）与抽屉 ---------- */
@media (max-width:1000px){
.nav{ height:var(--nav-h); }
.nav.is-stuck{ height:54px; }
.brand{ gap:7px; }
.brand b{ font-size:19px; font-weight:600; letter-spacing:.15em; }
.brand em{ font-size:10.5px; font-weight:500; letter-spacing:.28em; }
/* 汉堡按钮撑到 44×44 的可点区域，线条仍保持视觉上的细 */
.burger{ width:44px; height:44px; margin-right:-12px; flex:none; }
.burger i{ left:11px; width:22px; }
.burger i:nth-child(1){ top:17px; }
.burger i:nth-child(2){ top:25px; bottom:auto; }
body.menu-open .burger i:nth-child(1){ top:21px; transform:rotate(45deg); }
body.menu-open .burger i:nth-child(2){ top:21px; bottom:auto; transform:rotate(-45deg); }
/* 手机上按钮是 44px 宽、线条从 11px 起，所以文字要往回贴一点，
让「导航」与线条之间的视觉间距和 761~1000px 档一致；字号同时提到 12px。 */
.burger-label{ right:calc(100% + 3px); font-size:12px; }
/* 抽屉：内容可能超过一屏，改为可滚动 + 底部安全区 */
.drawer{
justify-content:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch;
padding:calc(var(--nav-h) + 14px) var(--pad) calc(24px + env(safe-area-inset-bottom,0px));
}
.drawer nav{ gap:0; }
/* 字号从 clamp(20px,5.6vw,26px) 下调。原值在 390px 屏算到 21.84px，
而抽屉里的英文注脚只有 9.5px、底部两个按钮 11.5px —— 主导航高出一倍，
整屏头重脚轻。现在 390px≈17.9px、360px≈16.6px、320px 收到 16px 下限，
与站内其他字号落在同一档位；行距同步放大到 16px，字小了反而更透气。 */
.drawer nav a{
font-family:var(--serif); font-size:clamp(16px,4.6vw,18.5px); letter-spacing:.08em;
padding:16px 0; min-height:52px;
}
.drawer nav a small{ font-size:10px; letter-spacing:.2em; }
/* margin-top:auto 比 justify-content:space-between 更耐内容溢出 */
.drawer .d-bottom{ margin-top:auto; padding-top:26px; }
.drawer .d-cta{ display:flex; flex-direction:column; gap:9px; }
.drawer .d-cta .btn{ width:100%; }
.drawer .d-foot{ margin-top:20px; font-size:11px; letter-spacing:.16em; line-height:2; }
.admin-bar .drawer{ padding-top:calc(var(--nav-h) + 46px + 14px); }
}
/* ---------- 16.3 底部操作条（仅手机） ---------- */
.tabbar{ display:none; }
@media (max-width:760px){
.tabbar{
position:fixed; left:0; right:0; bottom:0; z-index:8900;
display:grid; grid-template-columns:1fr 1fr; gap:8px;
padding:7px 14px calc(7px + env(safe-area-inset-bottom,0px));
background:var(--nav-bg);
backdrop-filter:blur(18px) saturate(170%);
-webkit-backdrop-filter:blur(18px) saturate(170%);
border-top:1px solid var(--line);
transform:translateY(calc(100% + 2px));
transition:transform .55s var(--ease);
}
.tabbar.is-on{ transform:none; }
body.menu-open .tabbar{ transform:translateY(calc(100% + 2px)); }
.tabbar .tb{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-height:46px; border:1px solid var(--line-strong); border-radius:99px;
font-size:13px; letter-spacing:.1em; color:var(--ink);
transition:transform .24s var(--ease);
}
.tabbar .tb svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.tabbar .tb:active{ transform:scale(.97); }
.tabbar .tb.solid{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
}
/* ---------- 16.4 版式节奏 ---------- */
@media (max-width:760px){
:root, html[data-theme]{
--pad:20px;
--nav-h:62px;
--shadow-sm:0 1px 2px rgba(28,26,23,.04), 0 5px 14px rgba(28,26,23,.05);
--shadow-md:0 1px 3px rgba(28,26,23,.05), 0 12px 30px rgba(28,26,23,.08);
--shadow-lg:0 2px 8px rgba(28,26,23,.06), 0 22px 50px rgba(28,26,23,.10);
}
html[data-theme="deep-mocha"]{
--shadow-sm:0 1px 2px rgba(0,0,0,.20), 0 5px 14px rgba(0,0,0,.22);
--shadow-md:0 1px 3px rgba(0,0,0,.24), 0 12px 30px rgba(0,0,0,.30);
--shadow-lg:0 2px 8px rgba(0,0,0,.28), 0 22px 50px rgba(0,0,0,.36);
}
::-webkit-scrollbar{ width:0; height:0; }
.section{ padding:62px 0; }
.section.tight{ padding:46px 0; }
.eyebrow{ font-size:9.5px; letter-spacing:.18em; gap:10px; }
.eyebrow::before{ width:20px; }
.sec-head{ padding-bottom:20px; gap:14px; }
.sec-head h2{ font-size:clamp(21px,5.6vw,28px); margin-top:10px; line-height:1.3; }
.sec-head p{ font-size:13.5px; line-height:1.9; }
.page-head{ padding:calc(var(--nav-h) + 30px) 0 24px; }
.page-head h1{ font-size:clamp(26px,7.4vw,40px); margin-top:14px; line-height:1.14; }
.page-head .lede{ margin-top:18px; font-size:13.5px; line-height:1.95; }
.page-head .crumb{ font-size:9.5px; letter-spacing:.2em; margin-bottom:14px; }
.btn{ padding:15px 22px; font-size:11.5px; letter-spacing:.14em; min-height:48px; justify-content:center; }
.btn svg{ width:14px; height:14px; }
.btn:active{ transform:scale(.98); }
.link-arrow{ font-size:11.5px; min-height:44px; }
.link-arrow:active svg{ transform:translate(4px,-4px); }
}
/* ---------- 16.5 Hero ---------- */
@media (max-width:760px){
.hero{
min-height:100svh; justify-content:center;
padding-top:calc(var(--nav-h) + 24px);
padding-bottom:calc(44px + 60px + env(safe-area-inset-bottom,0px));
}
.hero .eyebrow{ margin-bottom:20px; font-size:9.5px; letter-spacing:.14em; line-height:1.9; align-items:flex-start; }
/* 文字可能换行，把短线对齐到第一行而不是整块居中 */
.hero .eyebrow::before{ width:18px; margin-top:8px; }
/* 手机端保持**单行**：折成两行会让每行只剩三个字、右侧空出大片，
反而显得字号虚大、重心偏。改成一行后字号可以收一档（74px → 49px），
同时横向占满约 85% 的行宽，重心稳。两段遮罩仍各自上升，动画不受影响。 */
.hero-title{ font-size:clamp(32px,12.6vw,74px); line-height:1.08; letter-spacing:.01em; }
.hero-title .sep{ width:clamp(6px,1.6vw,16px); }
.hero-title .line-mask:nth-child(2)>span{ transition-delay:.14s; }
.hero-meta{ flex-direction:column; align-items:stretch; gap:0; margin-top:28px; }
.hero-meta .latin{ font-size:9.5px; letter-spacing:.26em; line-height:1.9; }
.hero-desc{ font-size:14px; line-height:1.95; margin-top:16px; max-width:none; }
.hero-actions{ flex-direction:column; gap:10px; margin-top:26px; }
.hero-actions .btn{ width:100%; }
.scroll-cue{ display:none; }
}
/* ---------- 16.6 跑马灯 ---------- */
@media (max-width:760px){
.marquee{ padding:16px 0; }
.marquee-track{ animation-duration:26s; }
.marquee-track span{ font-size:15px; letter-spacing:.1em; padding:0 18px; gap:18px; }
.marquee-track span::after{ width:4px; height:4px; }
}
/* ---------- 16.7 首页：关于 / 服务 / 数据 ---------- */
@media (max-width:760px){
.about-grid{ gap:26px; }
.about-lead{ font-size:clamp(17px,4.4vw,22px); line-height:1.62; margin-top:16px; }
.about-lead br{ display:none; } /* 窄屏交给自然换行，别硬断 */
.about-body{ font-size:14px; line-height:2; }
.about-body p{ margin-bottom:16px; }
.about-sign{ flex-wrap:wrap; gap:6px 12px; margin-top:24px; }
.about-sign b{ font-size:13.5px; letter-spacing:.24em; }
.about-sign i{ display:none; }
.about-sign span{ width:100%; font-size:9.5px; letter-spacing:.12em; }
/* 服务行改为单列，并在右侧留一个持续可见的箭头提示「可点」 */
.svc{ grid-template-columns:1fr; gap:8px; padding:20px 26px 20px 0; }
.svc::after{
content:""; position:absolute; right:5px; top:28px; width:7px; height:7px;
border-top:1px solid var(--line-strong); border-right:1px solid var(--line-strong);
transform:rotate(45deg);
}
.svc .num{ font-size:10px; letter-spacing:.2em; }
.svc h3{ font-size:21px; line-height:1.35; }
.svc h3 small{ font-size:9.5px; letter-spacing:.22em; margin-top:6px; }
.svc p{ font-size:13.5px; line-height:1.9; }
.svc .arrow{ display:none; }
.stats-grid{ grid-template-columns:1fr 1fr; }
.stat{ padding:22px 16px; }
.stat b{ font-size:clamp(26px,7vw,36px); }
.stat p{ margin-top:10px; font-size:9.5px; letter-spacing:.16em; line-height:1.7; }
}
/* ---------- 16.8 案例卡 / 筛选 ---------- */
@media (max-width:760px){
/* 触屏没有 hover，卡片改成「上图下文」：信息始终可读，箭头常驻 */
.works-grid{ gap:12px; margin-top:24px; }
.card{ aspect-ratio:auto; display:flex; flex-direction:column; }
.card .art{ position:relative; inset:auto; width:100%; aspect-ratio:4/3; }
.card .art::after{ background:linear-gradient(180deg,transparent 60%,rgba(20,26,23,.34) 100%); }
.card .meta{
position:relative; left:auto; right:auto; bottom:auto;
padding:14px 16px 16px; color:var(--ink);
}
.card .meta .tag{ font-size:9.5px; letter-spacing:.2em; color:var(--ink-3); }
.card .meta h4{ color:var(--ink); font-size:19px; margin-top:7px; transform:none; opacity:1; }
.card .meta .yr{ position:static; display:block; margin-top:6px; font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); }
.card .go{
top:12px; right:12px; width:38px; height:38px;
background:rgba(255,255,255,.84); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.card .go svg{ width:14px; height:14px; }
/* 筛选条：横向滚动，贴边出血 */
.filters{
flex-wrap:nowrap; overflow-x:auto; gap:8px;
margin:24px calc(var(--pad) * -1) 0; padding:2px var(--pad) 6px;
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.filters::-webkit-scrollbar{ display:none; }
.filters button{ flex:none; min-height:40px; padding:0 18px; font-size:12px; scroll-snap-align:start; }
}
@media (max-width:1000px){
.card .go{ transform:none; } /* 触屏常驻，否则永远看不到 */
}
/* ---------- 16.9 关于页：价值观 / 团队 / 时间线 ---------- */
@media (max-width:760px){
.values{ grid-template-columns:1fr; }
.value{ padding:24px 20px 26px; border-left:1px solid var(--line); }
.value h3{ margin:14px 0 10px; font-size:20px; }
.value p{ font-size:13.5px; line-height:1.9; }
.values.four{ grid-template-columns:1fr 1fr; }
.values.four .value{ padding:18px 16px; }
.values.four .value h3{ font-size:17px; margin:10px 0 8px; }
.values.four .value p{ font-size:12.5px; line-height:1.85; }
.team{ grid-template-columns:1fr 1fr; gap:14px 12px; margin-top:28px; }
.member .ph{ margin-bottom:12px; }
.member h4{ font-size:16.5px; }
.member span{ font-size:9.5px; letter-spacing:.14em; margin-top:5px; }
.timeline{ margin-top:28px; }
.tl{ grid-template-columns:1fr; gap:6px; padding:20px 0; }
.tl .yr{ font-size:16px; letter-spacing:.1em; }
.tl h4{ font-size:16.5px; margin-bottom:6px; }
.tl p{ font-size:13px; line-height:1.9; }
}
/* 四列变体在 2 列时只让左列有左框，避免中间出现双线 */
@media (min-width:381px) and (max-width:760px){
.values.four .value:nth-child(even){ border-left:0; }
}
/* ---------- 16.10 服务页：详情 / 流程 ---------- */
@media (max-width:760px){
.svc-block{ grid-template-columns:1fr; gap:12px; padding:34px 0; }
.svc-block .idx{ font-size:42px; line-height:1; }
.svc-block h3{ font-size:25px; }
.svc-block .en{ font-size:9.5px; letter-spacing:.2em; margin-bottom:16px; }
.svc-block p{ font-size:13.5px; line-height:1.95; margin-bottom:16px; }
.tag-list{ gap:6px; }
.tag-list span{ font-size:10.5px; padding:6px 12px; }
.process{ grid-template-columns:1fr; margin-top:28px; }
.step{ padding:22px 20px; border-left:1px solid var(--line); }
.step .sn{ font-size:10px; }
.step h4{ font-size:17px; margin:12px 0 8px; }
.step p{ font-size:13px; line-height:1.9; }
.step::after{ display:none; }
}
/* ---------- 16.11 CTA ---------- */
@media (max-width:760px){
.cta{ padding:64px 0 68px; }
.cta::before{ width:170%; }
.cta h2{ font-size:clamp(23px,6.4vw,32px); margin-top:16px; line-height:1.24; }
.cta .mail{ font-size:19px; letter-spacing:.04em; margin-top:22px; }
.cta .mail::after{ bottom:-6px; height:1px; }
.cta-row{ flex-direction:column; gap:10px; margin-top:28px; }
.cta-row .btn{ width:100%; }
}
/* ---------- 16.12 页脚 ---------- */
@media (max-width:760px){
/* 底部留出操作条的高度，同时让深色底延伸到操作条之后 */
footer{ padding:46px 0 calc(58px + 60px + env(safe-area-inset-bottom,0px)); }
footer .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 18px; }
footer .foot-brand{ grid-column:1/-1; }
footer .foot-brand b{ font-size:26px; letter-spacing:.2em; }
footer .foot-brand p{ margin-top:14px; font-size:11.5px; letter-spacing:.1em; line-height:2; }
footer .foot-brand .socials{ margin-top:18px; gap:8px; }
footer .foot-brand .socials a{ width:38px; height:38px; font-size:9px; }
footer .foot-col h5{ margin-bottom:12px; font-size:9.5px; letter-spacing:.22em; }
footer .foot-col a, footer .foot-col p{ font-size:12.5px; margin-bottom:9px; line-height:1.75; }
footer .foot-bottom{
margin-top:32px; padding-top:20px; flex-direction:column; gap:6px;
font-size:10px; letter-spacing:.1em;
}
}
/* ---------- 16.13 联系页 / 预约 ---------- */
@media (max-width:760px){
.contact-grid{ gap:30px; }
.info-row{ padding:20px 0; gap:14px; }
.info-row .ic{ width:34px; height:34px; }
.info-row .ic svg{ width:15px; height:15px; }
.info-row h5{ font-size:9.5px; letter-spacing:.2em; margin-bottom:6px; }
.info-row p{ font-size:13.5px; line-height:1.75; }
.info-row small{ font-size:11.5px; margin-top:4px; }
.booking{ padding:20px 16px 22px; box-shadow:var(--shadow-md); }
.booking-head{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:16px; }
.booking-head h3{ font-size:22px; }
.booking-head p{ font-size:11.5px; line-height:1.75; }
.booking-head .bk-code{ font-size:10px; letter-spacing:.14em; }
.bk-body{ gap:24px; margin-top:20px; }
.bk-row{ gap:10px; }
.bk-row>label,.field label{ font-size:9.5px; letter-spacing:.18em; }
.chips{ gap:7px; }
.chips button{ min-height:44px; padding:0 16px; font-size:13px; }
.chips.lg{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.chips.lg button{ min-height:54px; padding:12px 13px; font-size:15px; line-height:1.3; }
/* 日期条：可横滑 + 右侧渐隐提示还有内容 */
.date-strip{
gap:7px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.date-strip button{ width:58px; min-height:64px; padding:9px 0; scroll-snap-align:start; }
.date-strip button em{ font-size:10px; }
.date-strip button b{ font-size:18px; }
/* 时段改成整行可点，带单选圆点；三列挤在一行会读不清 */
.chips.slots{ display:flex; flex-direction:column; gap:7px; }
.chips.slots button{
position:relative; width:100%; min-width:0; min-height:46px; text-align:left;
padding:0 44px 0 16px; font-size:13.5px;
display:flex; align-items:center;
}
.chips.slots button::after{
content:""; position:absolute; right:16px; top:50%; margin-top:-7px;
width:14px; height:14px; border:1px solid var(--line-strong); border-radius:50%;
transition:background .3s var(--ease), border-color .3s var(--ease);
}
.chips.slots button.is-on::after{
background:var(--paper); border-color:var(--paper);
box-shadow:inset 0 0 0 3.5px var(--accent);
}
.bk-two{ grid-template-columns:minmax(0,1fr); gap:16px; }
/* 16px 以下 iOS 会强制放大整页，这里必须守住 */
.field input,.field select,.field textarea{ font-size:16px; padding:14px; }
.field textarea{ min-height:86px; line-height:1.8; }
/* 按钮提到说明之前，拇指先看到动作 */
.bk-submit{ flex-direction:column; align-items:stretch; gap:12px; padding-top:20px; }
.bk-submit .btn{ order:-1; width:100%; }
.bk-tip{ max-width:none; font-size:10.5px; line-height:1.8; text-align:center; }
.success .tick{ width:64px; height:64px; margin-bottom:20px; }
.success .tick svg{ width:26px; height:26px; }
.success h3{ font-size:24px; }
.success p{ font-size:13.5px; line-height:1.9; }
.success .code{ font-size:16px; letter-spacing:.14em; padding:12px 18px; margin-top:18px; }
.success .acts{ flex-direction:column; gap:10px; margin-top:26px; }
.success .acts .btn{ width:100%; }
.faq{ margin-top:28px; }
.qa>button{ padding:18px 0; gap:14px; min-height:60px; }
.qa>button h4{ font-size:15.5px; line-height:1.55; }
.qa>button i{ width:28px; height:28px; }
.qa>button i::before{ width:10px; }
.qa>button i::after{ height:10px; }
.qa .ans p{ font-size:13px; line-height:1.9; margin-bottom:20px; }
/* 地图：竖版比例，否则标牌会顶出画面 */
.map{ aspect-ratio:4/3; margin-top:28px; }
.map::before{ background:
repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 46px),
repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 46px),
radial-gradient(70% 62% at 50% 50%,var(--accent-soft),transparent 72%); }
.map::after{ left:50%; top:50%; }
.map .tag{
left:50%; top:50%; transform:translate(-50%,-50%);
width:max-content; max-width:calc(100% - 36px);
padding:12px 16px; font-size:11.5px; line-height:1.7;
}
.map .tag b{ font-size:14px; }
}
/* ---------- 16.14 小屏兜底（≤380px） ---------- */
@media (max-width:380px){
:root, html[data-theme]{ --pad:16px; }
/* 大字号不再在这里写死 px：上面的 clamp() 已经能覆盖到 320px 宽，
写死反而会在小屏上比大屏还大（曾出现 360px 用 72px、390px 只用 74px 的怪相）。 */
.chips.lg{ grid-template-columns:minmax(0,1fr); }
.chips.slots button{ font-size:12.5px; }
.date-strip button{ width:54px; }
.values.four{ grid-template-columns:1fr; }
.values.four .value{ border-left:1px solid var(--line); }
.team{ grid-template-columns:1fr; }
footer .foot-grid{ grid-template-columns:1fr; }
.tabbar .tb{ font-size:12px; letter-spacing:.06em; }
}
/* ---------- 16.15 横屏手机（矮视口） ---------- */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
.hero{ min-height:auto; padding-top:calc(var(--nav-h) + 30px); padding-bottom:44px; }
.hero-title{ font-size:min(11vw,54px); }
.drawer nav a{ font-size:16px; padding:10px 0; min-height:0; }
.tabbar{ display:none; } /* 横屏垂直空间宝贵，先让位给内容 */
footer{ padding-bottom:36px; }
}