/* ========== 思源宋体（子集化 woff2） ========== */
/* 由 scripts/subset_fonts.py 从 extras/官网设计文件10.14/字体/SourceHanSerifCN-*.otf
   裁剪生成（仅含站点实际使用字符，三字重合计约 650KB）。
   后台新增案例 / 修改文案后，重跑该脚本即可把新字符纳入子集；
   个别未收录字符会按下列回退链显示为系统宋体。 */
@font-face {
  font-family: 'SourceHanSerifCN';
  src: url('fonts/SourceHanSerifCN-Regular.subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SourceHanSerifCN';
  src: url('fonts/SourceHanSerifCN-SemiBold.subset.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SourceHanSerifCN';
  src: url('fonts/SourceHanSerifCN-Bold.subset.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1a1a1a;
  --sub: #777777;
  --faint: #999999;
  --line: #d1d1d1;
  --bg: #ffffff;
  --soft: #f7f7f7;
  --placeholder: #2e2e2e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'SourceHanSerifCN', 'Songti SC', 'STSong', 'SimSun', serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.8;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1820px; margin: 0 auto; padding: 0 50px; }
.en { font-family: Georgia, "Times New Roman", serif; letter-spacing: .04em; }

/* ---------- top nav ----------
 * 蓝湖评论（首页 · 顶部导航条）：
 *   不需要一直固定在顶部，也不用增加投影效果；
 *   向下滑动鼠标时向上收起，向上滚动鼠标时显现。
 * 因此用 fixed + .nav-hide（translateY(-100%)）实现「随滚动方向显隐」，
 * 并移除 .scrolled 投影。fixed 脱离文档流，由 body.has-nav 补出 72px 占位。
 */
.nav { position: fixed; left: 0; right: 0; top: 0; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); z-index: 40; backdrop-filter: blur(8px); transform: translateY(0); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.nav.nav-hide { transform: translateY(-100%); }
body.has-nav { padding-top: 72px; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.nav-logo img { height: 32px; width: auto; }
.nav-right { display: flex; align-items: center; gap: 40px; }
.nav-link { font-size: 15px; color: #555; padding: 4px 0; transition: color .3s ease; }
.nav-link:hover { color: #a9a9a9; }
.nav-link.active { color: var(--ink); font-weight: 700; }
.burger { width: 26px; height: 18px; position: relative; background: none; border: none; cursor: pointer; padding: 0; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); }
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 16px; }

/* ---------- fullscreen menu ---------- */
/* 开合动效见文末「动效体系」第 7 节：visibility + opacity + 菜单项 stagger */
.menu { position: fixed; inset: 0; background: #0c0c0c; color: #fff; z-index: 100; opacity: 0; visibility: hidden; pointer-events: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.menu-top .nav-logo { color: #fff; }
.menu-close { background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
.menu-list { list-style: none; margin: 60px auto 0; padding: 0; max-width: 640px; text-align: center; }
.menu-list li { border-bottom: 1px solid rgba(255,255,255,.16); }
.menu-list a { display: block; padding: 20px 0; font-size: 34px; color: rgba(255,255,255,.5); }
.menu-list a:hover, .menu-list a.current { color: #fff; }
.menu-social { position: fixed; right: 28px; bottom: 30px; display: flex; gap: 10px; }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.sec-title { font-size: 34px; font-weight: 600; margin: 0 0 8px; line-height: 1.45; }
.sec-sub { color: var(--faint); font-size: 14px; margin: 0 0 48px; }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-img { width: 100%; height: 68vh; min-height: 420px; object-fit: cover; background: var(--placeholder); }
.hero-ph { width: 100%; height: 68vh; min-height: 420px; background: var(--placeholder); }

/* ---------- vision ---------- */
.vision { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; }
.vision h2 { font-size: 26px; font-weight: 600; line-height: 1.7; margin: 0; }
.vision .body { white-space: pre-wrap; color: #444; margin: 0; }

/* ---------- works grid ---------- */
.works-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 80px; margin-bottom: 14px; }
.works-head .en-cap { font-size: 13px; letter-spacing: .2em; color: var(--ink); }
.more-link { font-size: 14px; color: var(--sub); }
.more-link:hover { color: var(--ink); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.work-card { display: block; }
.work-card .card-media { position: relative; overflow: hidden; }
/* 悬停蒙版：#333333，透明度 30%，正片叠底 */
.work-card .card-media::after {
  content: '';
  position: absolute; inset: 0;
  background: #333333;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  pointer-events: none;
}
.work-card:hover .card-media::after { opacity: .3; }
.work-card .cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--placeholder); }
.work-card .cover.empty { display: block; }
.work-card h3 { font-size: 17px; font-weight: 600; margin: 26px 0 10px; transition: transform .3s ease-in-out, color .3s ease-in-out; }
.work-card p { font-size: 14px; color: var(--sub); margin: 0; line-height: 1.7; transition: color .3s ease-in-out; }
/* 悬停：图片下方文字上移 + 变色（深灰 → #999999） */
.work-card:hover h3 { transform: translateY(-4px); color: #999999; }
.work-card:hover p { color: #999999; }
.load-more { text-align: center; margin-top: 72px; }
.load-more a, .load-more button { display: inline-block; padding: 0; border: none; background: none; color: var(--ink); font-size: 14px; letter-spacing: .02em; cursor: pointer; }
.load-more a:hover, .load-more button:hover { opacity: .5; }

/* filter tabs */
.tabs { display: flex; gap: 44px; justify-content: center; border-bottom: 1px solid var(--line); margin: 48px 0 60px; flex-wrap: wrap; }
.tab { background: none; border: none; padding: 0 2px 16px; font-size: 15px; color: var(--sub); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .3s ease; }
.tab:hover { color: #a9a9a9; }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
/* 分类无案例时的空状态提示 */
.works-empty { grid-column: 1 / -1; text-align: center; color: var(--sub); font-size: 14px; padding: 60px 0; margin: 0; }
.more-chev { display: inline-block; margin-left: 8px; transition: transform .3s ease-in-out; }
.load-more.open .more-chev { transform: rotate(180deg); }

/* page headline */
.page-head { text-align: center; padding: 110px 0 0; }
.page-head .en-cap { font-size: 14px; color: var(--faint); margin: 0 0 14px; }
.page-head h1 { font-size: 38px; font-weight: 600; margin: 0; }

/* 案例详情样式见下方「案例详情」段 */
.pager { display: flex; justify-content: center; gap: 40px; padding: 26px 0 70px; border-top: 1px solid var(--line); }
.pager a { font-size: 13.5px; color: var(--sub); }
.pager a:hover { color: var(--ink); }

/* ---------- about ---------- */
.about-top { display: grid; grid-template-columns: auto 1fr; gap: 90px; align-items: start; padding: 110px 0 80px; }
.about-logo { width: 160px; height: 160px; object-fit: contain; }
.about-logo-ph { width: 160px; height: 160px; border-radius: 50%; background: var(--placeholder); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; letter-spacing: .06em; text-align: center; }
.about-intro p { margin: 0 0 20px; color: #333; }
.about-big { width: 100%; height: 56vh; min-height: 360px; object-fit: cover; background: var(--placeholder); }
.split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; padding: 84px 0; border-top: 1px solid var(--line); }
.split h2 { font-size: 22px; font-weight: 600; margin: 0; line-height: 1.6; }
.split .en-cap { display: block; color: var(--faint); font-size: 14px; margin-top: 8px; font-weight: 400; }
.split .body { white-space: pre-wrap; color: #444; margin: 0; font-size: 16px; }
.biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.biz h4 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.biz ul { list-style: none; margin: 0; padding: 0; color: #555; font-size: 14.5px; }
.biz li { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.concept h3 { font-size: 24px; font-weight: 600; margin: 0 0 28px; }
.clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 28px; }
.clients span { font-size: 14.5px; color: #555; padding: 8px 0; border-bottom: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 28px; }
.member .photo { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; background: var(--placeholder); }
.member h4 { font-size: 17px; font-weight: 600; margin: 18px 0 4px; }
.member .role { font-size: 14px; color: var(--sub); margin: 0 0 10px; }
.member .desc { font-size: 14px; color: #555; margin: 0; }

/* ---------- contact ---------- */
.contact-logo { display: flex; align-items: center; gap: 26px; padding: 76px 0 54px; }
.contact-logo img { height: 64px; width: auto; }
.contact-mark { font-size: 56px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.contact-logo .co { color: #333; font-size: 14px; line-height: 2; }
.contact-title { font-size: 22px; font-weight: 600; margin: 0 0 26px; }
.contact-main { padding-bottom: 70px; }
.contact-line { font-size: 15px; margin: 0 0 6px; }
.contact-big { font-size: 21px; font-weight: 600; margin: 2px 0 26px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.contact-big .sep { color: var(--faint); font-weight: 400; }
.contact-note { color: var(--faint); font-size: 12.5px; }
.addr { margin-top: 26px; color: #444; font-size: 14.5px; }
.addr .en { color: var(--sub); font-size: 13px; }
.qrs { display: flex; gap: 36px; justify-content: flex-start; margin-top: 36px; }
.qr-item { text-align: center; }
.qr-item .lab { font-size: 13px; color: var(--sub); margin-bottom: 10px; }
.qr-item img { width: 128px; height: 128px; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.contact-note-sec { border-top: 1px solid var(--line); padding: 44px 0 90px; }
.contact-note-sec p { margin: 0 0 6px; color: #333; max-width: 720px; }
.contact-note-sec .en { color: var(--faint); font-size: 12.5px; margin: 0; }

/* ---------- footer（设计稿：白底，无分割线） ---------- */
footer.site { margin-top: 100px; }
.foot-wrap { max-width: 1820px; margin: 0 auto; padding: 0 50px; }

/* 页脚头部品牌名（设计稿独立分隔行） */
.foot-name { padding: 30px 0 14px; font-size: 16px; color: #333; border-bottom: 1px solid var(--line); }

.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding: 34px 0 70px; flex-wrap: wrap; }
.foot-brand .en { font-size: 14px; color: var(--sub); }
.foot-cats { display: flex; gap: 0; flex-wrap: wrap; font-size: 14px; color: #555; }
.foot-cats a { padding: 0 20px; border-left: 1px solid var(--line); }
.foot-cats a:first-child { padding-left: 0; border-left: none; }
.foot-cats a:hover { color: var(--ink); }

.foot-mid { display: grid; grid-template-columns: auto 1fr auto; gap: 100px; align-items: center; padding: 0 0 70px; }
.foot-mark img { height: 226px; width: auto; }
.foot-biz .cap { font-size: 13px; color: var(--sub); letter-spacing: .08em; }
.foot-biz .tel { display: inline-block; font-size: 28px; font-weight: 700; color: var(--ink); margin: 10px 0 0; }
.foot-biz .tel small { font-size: 13px; color: var(--sub); font-weight: 400; margin-left: 12px; }
.foot-biz .addr { font-size: 15px; color: #555; line-height: 1.9; margin-top: 24px; }
.foot-biz .addr .en { color: var(--sub); font-size: 13.5px; }
.foot-qr { text-align: center; }
.foot-qr .lab { font-size: 13px; color: var(--sub); margin-bottom: 10px; }
.foot-qr img { width: 148px; height: 148px; object-fit: cover; background: #fff; border: 1px solid var(--line); }

.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0 40px; font-size: 13px; color: var(--faint); flex-wrap: wrap; }
.foot-side { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-slogan { font-size: 13px; color: var(--sub); }
.beian-link { color: inherit; text-decoration: none; }
.beian-link:hover { text-decoration: underline; }

/* social icon chips（切好的圆形图标，自身已含底色） */
.socials { display: flex; gap: 14px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; text-decoration: none; }
.socials a:hover { opacity: .82; }
.socials a.soc { background: transparent; padding: 0; }
.socials a.soc:hover { opacity: .82; }
.socials a.soc img { width: 38px; height: 38px; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .vision { grid-template-columns: 1fr; gap: 44px; max-width: none; }
  .vision-right { padding-top: 0; }
  .vision h2 { font-size: 32px; }
  .vision .body { font-size: 18px; }
  .vision-sec { padding: 100px 0; }
  .works-head { padding-bottom: 40px; }
  .foot-mark img { height: 150px; }
  .foot-mid { gap: 50px; }
}
@media (max-width: 860px) {
  .grid3, .team-grid, .biz-grid { grid-template-columns: repeat(2, 1fr); }
  .clients { grid-template-columns: repeat(2, 1fr); }
  .vision, .detail-head, .split { grid-template-columns: 1fr; gap: 28px; }
  .vision-right { padding-top: 0; }
  .about-top { grid-template-columns: 1fr; }
  .foot-mid { grid-template-columns: 1fr; gap: 26px; }
  .qrs { justify-content: flex-start; }
  .nav-link { display: none; }
  .hero-img, .hero-ph { height: 44vh; }
}
@media (max-width: 560px) {
  .grid3 { grid-template-columns: 1fr; }
  .foot-mark { font-size: 52px; }
  .sec-title { font-size: 24px; }
  .page-head h1 { font-size: 24px; }
}

/* ===== 关于/案例/联系 细化（PSD 细化） ===== */

/* 关于：顶部简介两栏 */
.about-top { grid-template-columns: auto 1fr; gap: 90px; align-items: start; padding: 110px 0 80px; }
.about-intro p:first-child { font-size: 17px; color: #333; margin: 0 0 22px; line-height: 1.9; }
.about-intro .en-cap { color: var(--faint); font-size: 14px; line-height: 1.8; }

/* 标题区（为什么设计 / 我们做什么 / 团队）——设计稿：英文衬线大标题在上、中文标题在下，居中，无分隔线 */
.why-head { text-align: center; margin-bottom: 64px; }
.why-head h2 { font-size: 26px; font-weight: 600; margin: 0; color: #333; }
.why-head .en-cap { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 36px; font-weight: 400; color: var(--ink); letter-spacing: .01em; margin: 0 0 14px; }

/* 为什么设计：2×2 图文卡（设计稿两列一行） */
.why-sec { padding: 100px 0; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
.why-card .why-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--placeholder); margin-bottom: 20px; }
.why-card .why-img img, .why-card .why-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; transition: color .3s ease; }
.why-card h3:hover { color: #999999; }
.why-card .en-cap { margin-bottom: 10px; }
.why-card p { font-size: 14.5px; color: #555; margin: 0; line-height: 1.8; }

/* 我们做什么：3 列服务（设计稿每列顶部有图） */
.svc-sec { padding: 100px 0; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.svc-img { overflow: hidden; margin-bottom: 20px; }
.svc-img img, .svc-img video { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--placeholder); display: block; }
.svc-col h3 { font-size: 19px; font-weight: 600; margin: 0; }
.svc-col .en-cap { margin-bottom: 18px; }
.svc-g { font-size: 14px; font-weight: 600; color: var(--ink); margin: 18px 0 8px; }
.svc-col ul { list-style: none; margin: 0 0 4px; padding: 0; }
 /* border-bottom: 1px dashed var(--line);  */
.svc-col li { font-size: 14.5px; color: #555; padding: 6px 0;transition: color .3s ease; cursor: default; }
/* 每一条单独悬停变色（不是一整块） */
.svc-col li:hover { color: var(--ink); }

/* 团队（设计稿：五人一行） */
.team-sec { padding: 100px 0 120px; }
.member .photo { aspect-ratio: 4/5; }

/* 案例列表：居中大标题 */
.works-head-big { text-align: center; padding: 120px 0 10px; }
.works-head-big .en-cap { font-size: 14px; color: var(--faint); margin: 0 0 16px; }
.works-head-big h1 { font-size: 34px; font-weight: 700; margin: 0; }

/* 案例卡标签 */
.tags { margin-top: 8px; }
.tag { display: inline-block; font-size: 12.5px; color: #fff; background: var(--ink); padding: 3px 12px; border-radius: 2px; letter-spacing: .02em; }

/* 案例详情 */
.detail-head { display: grid; grid-template-columns: 1fr 1.8fr; gap: 80px; padding: 100px 0 64px; }
/* 蓝湖评论（案例详情页 · 标题区）：网页端与设计稿有出入 →
   设计稿结构为「英文标题 Georgia 48px / 中文标题 42px / 540px 浅灰线 #e0e0e0 / #标签行 13px #777」，
   无 summary 段落（已删）；间距按设计稿墨迹 y=172/244/313/344 校准，最终偏差 ≤1px */
.detail-meta .d-en { font-family: Georgia, 'Times New Roman', serif; font-size: 48px; font-weight: 400; margin: -6px 0 0; color: var(--ink); letter-spacing: 0; line-height: 1.1; }
.detail-meta h1 { font-size: 42px; font-weight: 600; margin: 19px 0 26px; color: var(--ink); line-height: 1.2; }
.detail-meta .d-meta { font-size: 13px; color: var(--sub); letter-spacing: .1em; line-height: 1.5; }
.detail-meta .d-meta::before { content: ''; display: block; width: 540px; max-width: 100%; height: 1px; background: #e0e0e0; margin: 0 0 26px; }
.detail-meta .d-link { display: inline-block; font-size: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; margin-top: 24px; }
.detail-body .detail-block { margin-bottom: 30px; }
.detail-body .detail-block h4 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.detail-body .detail-block p { font-size: 15.5px; color: #444; margin: 0 0 24px; line-height: 1.9; }
.detail-gallery { padding-bottom: 10px; }
/* 蓝湖评论（案例详情页）：图片最下端带说明文字，不能被裁掉
   → 去掉 object-fit: cover / min-height，按原始比例完整显示 */
.detail-gallery .detail-img { width: 100%; height: auto; margin: 0 0 28px; background: var(--placeholder); display: block; }
.related-sec { padding: 60px 0 110px; }
/* 蓝湖评论（案例详情页）：推荐案例标题上方有一条居中浅灰细线（设计稿 240px 宽） */
.rel-head { text-align: center; margin-bottom: 54px; }
.rel-head::before { content: ''; display: block; width: 240px; height: 1px; background: var(--line); margin: 0 auto 28px; }
.rel-head h2 { font-size: 24px; font-weight: 600; margin: 0; }

/* 联系：极简 */
.contact-sec { padding-bottom: 60px; }
.contact-logo { display: flex; align-items: center; gap: 28px; padding: 90px 0 56px; }
.contact-logo img { height: 50px; width: auto; }
.co-name { font-size: 16px; font-weight: 600; }
.co-en { color: var(--faint); font-size: 13px; letter-spacing: .02em; }
.contact-main { border-top: 1px solid var(--line); padding-top: 44px; padding-bottom: 60px; }
.contact-title { font-size: 20px; font-weight: 600; margin: 0 0 30px; }
.contact-big { font-size: 17px; font-weight: 600; margin: 0 0 28px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.contact-big .sep { color: var(--faint); font-weight: 400; }
.contact-line { font-size: 14px; color: #444; margin: 0 0 6px; }
.addr { margin-top: 24px; color: #444; font-size: 14px; line-height: 1.9; }
.addr .en { color: var(--sub); font-size: 12.5px; }
.qrs { display: flex; gap: 56px; justify-content: flex-start; margin-top: 44px; }
.qr-item .lab { font-size: 12.5px; color: var(--sub); margin-bottom: 12px; }
.qr-item img { width: 148px; height: 148px; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.contact-note-sec { border-top: none; padding: 56px 0 0; }
.contact-note-sec p { margin: 0 0 6px; color: #333; max-width: 900px; font-size: 15.5px; line-height: 1.9; }
.contact-note-sec .en { color: var(--faint); font-size: 13px; margin: 0 0 8px; line-height: 1.8; }
.co-copy { font-size: 12.5px; color: var(--faint); margin-top: 48px; }
.co-copy .beian-link { color: inherit; text-decoration: none; }
.co-copy .beian-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: 1fr; gap: 34px; }
  .detail-head { grid-template-columns: 1fr; gap: 30px; }
  .contact-main { padding-bottom: 40px; }
  .qrs { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
  .contact-big { font-size: 21px; }
}

/* ===== refined home (PSD 细化) ===== */
.hero-img { width: 100%; height: clamp(560px, 52.5vw, 1010px); object-fit: cover; background: var(--placeholder); display: block; }
.hero-ph { width: 100%; height: clamp(560px, 52.5vw, 1010px); background: var(--placeholder); }

.vision-sec { padding: 146px 0 150px; }
.vision { align-items: start; max-width: 1500px; grid-template-columns: 500px 1fr; gap: 100px; }
.vision-left { display: flex; flex-direction: column; }
.vision-left .accent-bar { margin-bottom: 12px; }
.accent-bar { width: 100%; height: 4px; background: var(--ink); display: block; }
.vision h2 { font-size: 38px; font-weight: 700; line-height: 1.6; margin: 0; color: var(--ink); white-space: pre-wrap; }
.vision-title-en { color: var(--sub); font-size: 15px; line-height: 1.7; margin: 16px 0 0; }
/* 右栏首行与左栏标题顶部对齐：跳过装饰条(4px) + 间距(12px) */
.vision-right { padding-top: 26px; }
.vision .body { white-space: pre-wrap; color: #444; margin: 0; font-size: 21px; line-height: 1.55; }
.vision-body-en { color: var(--sub); font-size: 15px; line-height: 1.7; margin: 26px 0 0; }

.works-sec { padding-bottom: 40px; }
.works-head .en-cap { font-size: 16px; letter-spacing: .04em; text-transform: lowercase; color: var(--ink); font-weight: 600; }

/* ============================================================
 * 动效体系（交互参考 HARA DESIGN INSTITUTE 的克制气质）
 * 统一缓动 cubic-bezier(.16,1,.3,1)（expo-out），
 * 悬停一律 300ms ease-out，渐显 700-900ms，禁止弹跳
 * ============================================================ */

/* ============================================================
 * 动效体系（交互参考 HARA DESIGN INSTITUTE 的克制气质）
 * 统一缓动 cubic-bezier(.16,1,.3,1)（expo-out），
 * 悬停一律 300ms ease-out，渐显 700-900ms，禁止弹跳
 * ============================================================ */

/* ---------- 1. 滚动渐显：进入视口时上移渐显 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- 2. 导航滚动态 ----------
 * 蓝湖评论：不要投影效果 → 不再加 box-shadow，仅保留位移过渡
 */
.nav { transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .3s ease; }

/* ---------- 3. hero / 详情封面：自下而上展开 + 轻微缩放 ---------- */
@keyframes heroIn {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  to   { clip-path: inset(0 0 0 0);   transform: scale(1); }
}
.hero-img, .hero-ph {
  animation: heroIn 1.15s cubic-bezier(.16,1,.3,1) both;
}

/* ---------- 4. 页头大标题：加载时上移渐显 ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.page-head h1, .page-head .en-cap,
.works-head-big h1, .works-head-big .en-cap {
  animation: riseIn .8s cubic-bezier(.16,1,.3,1) both;
}
.page-head .en-cap, .works-head-big .en-cap { animation-delay: .06s; }
.page-head h1, .works-head-big h1 { animation-delay: .14s; }

/* ---------- 5. HARA 标志性交互：链接悬停统一淡出至 50% ---------- */
.more-link, .foot-cats a, .pager a, .menu-list a, .load-more button {
  transition: opacity .3s ease-out, color .3s ease-out, background-color .3s ease-out;
}
.more-link:hover, .foot-cats a:hover, .pager a:hover, .menu-list a:hover { opacity: .5; }
.load-more button:hover { opacity: .5; }

/* ---------- 6. 案例卡：封面缓慢放大（HARA 大图缓动） ---------- */
/* 蓝湖评论（关于页）：「这里的图原来是圆角，我全部改成直角了」
   → 全站图片一律直角，显式声明防止后续误加圆角 */
.work-card .card-media .cover,
.work-card .card-media video,
.why-card .why-img img,
.why-card .why-img video,
.svc-img img, .svc-img video,
.member .photo,
.about-logo, .detail-img { border-radius: 0; }

.work-card .card-media .cover,
.work-card .card-media video,
.why-card .why-img img,
.why-card .why-img video,
.member .photo {
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.work-card:hover .card-media .cover,
.work-card:hover .card-media video,
.why-card:hover .why-img img,
.why-card:hover .why-img video,
.member:hover .photo { transform: scale(1.055); }
.why-img { overflow: hidden; }

/* ---------- 7. 全屏菜单：淡入 + 菜单项错峰上移 ---------- */
.menu { transition: opacity .38s ease, visibility .38s; }
.menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-top { transform: translateY(-14px); opacity: 0; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease; }
.menu.open .menu-top { transform: none; opacity: 1; }
.menu-list li a {
  transform: translateY(24px);
  opacity: 0;
  transition:
    transform .55s cubic-bezier(.16,1,.3,1) var(--md, 0ms),
    opacity .55s ease var(--md, 0ms),
    color .3s ease;
}
.menu.open .menu-list li a {
  transform: none;
  opacity: 1;
  --md: calc(var(--i, 0) * 70ms + 90ms);
}
.menu-social { transform: translateY(16px); opacity: 0; transition: transform .5s .42s cubic-bezier(.16,1,.3,1), opacity .4s .42s ease; }
.menu.open .menu-social { transform: none; opacity: 1; }

/* ---------- 8. burger → X 形变 ---------- */
.burger span { transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 9. 愿景区装饰条：自左向右生长 ---------- */
.vision-left .accent-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s .25s cubic-bezier(.16,1,.3,1);
}
.vision-left.in .accent-bar { transform: scaleX(1); }

/* ---------- 10. 详情页图库 / 推荐案例渐显 ---------- */
.detail-img { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--rd, 0ms); }
.detail-img.in { opacity: 1; transform: none; }

/* ---------- 11. 减少动效偏好：全部直出 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal], .detail-img { opacity: 1; transform: none; }
}