/* ==========================================================================
   arkular.css — Cubicore × Arkular Design System
   黑白极简"建筑事务所"姿态 · 超细字重大标题 · 全幅摄影 · 大留白 · 锐边
   覆盖层：在 bootstrap.css / style.css 之后加载
   品牌融合：Cubicore 品牌红 #E34234 仅作唯一限量强调
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */

/* 品牌展示字体（v6）：Swis721 Blk BT 已随项目分发至 fonts/，
   服务器访客需通过 @font-face 从项目下载渲染（不能依赖本机安装） */
@font-face {
  font-family: 'Swis721 Blk BT';
  src: url('../fonts/swis721-blk-bt.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lato 正文（v7 本地化）：由 Google Fonts 外链改为项目内 woff2，
   避免国内/离线环境外链加载失败；font-display: swap 保证加载期先用回退字体 */
@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* 中性色板（Arkular 基准） */
  --paper: #F9F8F7;            /* 暖纸底 */
  --surface: #FFFFFF;          /* 白面 */
  --ink: #1B1B1B;              /* 近黑正文 */
  --ink-2: #6F6E6C;            /* 次级文字 */
  --black: #0A0A0A;            /* 深面板（避免纯 #000 死黑） */
  --black-2: #181818;          /* 深面板次级 */
  --white: #FFFFFF;
  --white-50: rgba(255,255,255,0.5);   /* 次级反白 */
  --white-70: rgba(255,255,255,0.72);
  --hairline: rgba(27,27,27,0.14);     /* 浅色分隔线 */
  --hairline-w: rgba(255,255,255,0.16);/* 深底分隔线 */

  /* 品牌强调（唯一，限量） */
  --accent: #E34234;

  /* 字体 */
  --font-display: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-brand: 'Swis721 Blk BT', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;

  /* 字阶（Arkular 式超细大标题） */
  --h1: clamp(44px, 8.2vw, 110px);
  --h2: clamp(30px, 4.6vw, 58px);
  --h3: clamp(22px, 2.9vw, 36px);
  --h4: clamp(16px, 1.6vw, 21px);
  --body: 16px;
  --small: 13px;
  --micro: 11px;

  /* 间距节奏 */
  --section-y: clamp(72px, 10vw, 136px);
  --gutter: clamp(20px, 4vw, 48px);

  /* 组件 */
  --radius-btn: 5px;
  --border-btn: 2px;
  --nav-size: 13px;
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 100;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-wrap: balance; /* v3：避免"第二行单单词"吊尾断行 */
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); font-weight: 300; }

p { color: var(--ink-2); font-weight: 300; line-height: 1.75; }
a { color: var(--ink); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--accent); }

img { max-width: 100%; }

.container { max-width: 1320px; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ---------- 3. Typography Helpers ---------- */
.eyebrow {
  font-size: var(--micro);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 18px;
  display: block;
}
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ink); vertical-align: middle; margin-right: 12px; }

.lead { font-size: clamp(17px, 1.8vw, 21px); line-height: 1.65; color: var(--ink-2); max-width: 64ch; }

.hairline-top { border-top: 1px solid var(--hairline); }
.hairline-bot { border-bottom: 1px solid var(--hairline); }

/* 区块大间距 */
section, .section, .sec {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* ---------- 4. Buttons ---------- */
.btn-ark,
.hvr-outline-out,
.submit-btn,
.resp-tabs-container input[type="submit"] {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--micro);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--black);
  border: var(--border-btn) solid var(--black);
  border-radius: var(--radius-btn);
  padding: 15px 34px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  text-decoration: none;
}
.btn-ark:hover, .hvr-outline-out:hover,
.submit-btn:hover, .resp-tabs-container input[type="submit"]:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--ink);
  transform: none;
  box-shadow: none;
}
.btn-ark.btn-light {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.btn-ark.btn-light:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-ark.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ark.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-ark.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-ark.btn-outline-light:hover { background: var(--white); color: var(--ink); }

/* 句子式链接（Arkular "Explore our …"） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--body);
  font-weight: 300;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.link-arrow .arr { transition: transform 0.25s ease; }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow:hover .arr { transform: translateX(6px); }
.on-black .link-arrow { color: var(--white); border-color: var(--white); }
.on-black .link-arrow:hover { color: var(--white); border-color: var(--white); opacity: 0.7; }

/* ---------- 5. Header / Navigation ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  padding: 26px 0;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
.header .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
.header.scrolled {
  background: var(--paper);
  padding: 12px 0;
  box-shadow: 0 1px 0 var(--hairline);
}
.header.scrolled .logo img { height: 48px !important; }

/* Logo（v3：品牌视觉层级 > 导航，放大 58→84px） */
.logo { position: static; text-align: left; margin: 0; }
/* v6.2：模板 .logo a{padding-top:22px} 导致 LOGO 低于导航文字顶部，清零 */
.logo h1 { margin: 0; line-height: 1; font-size: 0; }
.logo a { padding: 0; display: block; }
.logo img { height: 56px !important; width: auto; display: block !important; transition: height 0.35s ease; } /* v6.2：横版 LOGO 56px；display:block!important 强制脱离 line box */
.header-left { margin: 0; }

/* 导航（Arkular：13px / 300 / 大写 / 字距） */
.navbar-default {
  background: transparent !important;
  border: none !important;
}
.navbar {
  margin: 0;
  min-height: 0;
}
.navbar-nav { margin: 0 !important; }
.navbar-nav > li { float: left; }
.navbar-nav > li > a {
  font-family: var(--font-body);
  font-size: var(--nav-size);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 22px !important;
  line-height: 1.4;
  background: none !important;
  border-bottom: 1px solid transparent;
  position: relative;
  transition: color 0.25s ease;
}
.on-hero .navbar-nav > li > a { color: var(--white); }
.on-hero .navbar-nav > li > a:hover,
.on-hero .navbar-nav > li > a:focus { color: var(--white); opacity: 0.72; }
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus { color: var(--accent); background: none !important; }
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus {
  color: var(--accent) !important;
  background: none !important;
  border-bottom-color: var(--accent);
}
.on-hero .navbar-nav > li.active > a { color: var(--accent) !important; }

/* 滚动态导航强制 ink（v2 修复：滚动后非当前项文字消失）
   必须位于 .on-hero 规则之后，确保 scrolled / 非 hero 态始终深色 */
.header.scrolled .navbar-nav > li > a,
.header:not(.on-hero) .navbar-nav > li > a {
  color: var(--ink) !important;
}
.header.scrolled .navbar-nav > li > a:hover,
.header.scrolled .navbar-nav > li > a:focus {
  color: var(--accent) !important;
}
.header.scrolled .navbar-nav > li.active > a,
.header.scrolled .navbar-nav > li.active > a:hover,
.header.scrolled .navbar-nav > li.active > a:focus {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}
.header.scrolled .navbar-toggle .icon-bar { background: var(--ink) !important; }

/* 隐藏模板遗留 hover 特效的干扰 */
.hvr-bounce-to-bottom::before { display: none !important; }

/* 汉堡按钮 */
.navbar-toggle {
  border: none !important;
  margin-top: 6px;
}
.navbar-toggle .icon-bar {
  background: var(--ink) !important;
  width: 26px;
  height: 2px;
  border-radius: 0;
}
.on-hero .navbar-toggle .icon-bar { background: var(--white) !important; }

/* ---------- 6. (v2 移除) ENQUIRE 固定侧栏 — 用户判定无需保留 ---------- */

/* ---------- 7. Hero / Banner ---------- */
.banner {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
  padding: 0;
}
.banner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.55) 42%, rgba(10,10,10,0.18) 100%);
  z-index: 1;
}
.banner .container {
  position: relative;
  z-index: 2;
  padding-top: 80px;
}
.banner-info { margin: 0; }
.banner-left {
  padding: 0;
  float: none;
}
.banner-left h3 {
  color: var(--white);
  font-family: var(--font-brand);
  font-size: clamp(46px, 9vw, 118px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  line-height: 1.04;
  margin: 0 0 18px !important;
}
.banner-left h3.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.5vw, 17px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--white-70);
  margin-bottom: 38px !important;
  /* v6：大版面下一行完整展示（去掉 34ch 限宽导致的换行） */
  white-space: nowrap;
  max-width: none;
}
.banner-left .btn-ark { margin-top: 6px; }

/* 内页 hero（page_head） */
.banner.page_head {
  min-height: 0 !important;
  background: transparent;
  padding: clamp(120px, 18vw, 190px) 0 clamp(40px, 6vw, 64px);
  display: block;
}
.banner.page_head::after { display: none; }
.banner.page_head .container { padding-top: 0; }
.banner.page_head h1, .page-hero h1 {
  color: var(--ink);
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 100;
  letter-spacing: 0.02em;
  margin: 0;
}
.banner.page_head .lead, .page-hero .lead { margin-top: 18px; }

/* ---------- 8. Black statement panels（Arkular 黑底白字陈述） ---------- */
.on-black {
  background: var(--black);
  color: var(--white);
}
.on-black h1, .on-black h2, .on-black h3, .on-black h4 { color: var(--white); }
.on-black p, .on-black .lead { color: var(--white-70); }
.on-black .eyebrow { color: var(--white-50); }
.on-black .eyebrow::before { background: var(--white); }

/* ---------- 9. Split / photography sections ---------- */
.split {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.split > .split-txt { flex: 0 1 50%; }
.split > .split-img { flex: 0 1 50%; }
.split .split-img img { width: 100%; height: auto; display: block; }
/* v10.3：What We Offer 右图高度对齐 h2 顶 ~ Everything Modular 底 */
.offer-sec .split { align-items: flex-start; }
.offer-sec .split-img { align-self: stretch; }
.offer-sec .split-img img {
  height: calc(100% - 36px);
  margin-top: 36px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .offer-sec .split-img img { height: auto; margin-top: 0; }
}
.split-rev { flex-direction: row-reverse; }

/* 数字编号列表（01 02 03…） */
.num-list { list-style: none; margin: 0; padding: 0; }
.num-list li {
  display: flex;
  gap: 26px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.num-list li:first-child { border-top: 1px solid var(--hairline); }
.num-list .num {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: var(--h4);
  color: var(--ink);
  min-width: 44px;
}
.num-list h4 { margin: 0 0 6px; font-weight: 300; font-size: clamp(17px, 1.9vw, 24px); }
.num-list p { margin: 0; }

/* ---------- 10. Card & tile system（无阴影、锐边） ---------- */
.tile-grid { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.tile {
  width: 33.3333%;
  padding: 12px;
  box-sizing: border-box;
}
.tile a { display: block; }
.tile .tile-media {
  position: relative;
  overflow: hidden;
  background: #EDEBE9;
}
.tile .tile-media img {
  width: 100%;
  display: block;
  transition: transform 1.4s ease, opacity 0.4s ease;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.tile:hover .tile-media img { transform: scale(1.05); }
.tile .tile-cap {
  margin-top: 14px;
  font-size: var(--small);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* 行业图标块（v4：绕过 Bootstrap .row clearfix 伪元素 BUG）
   根因：Bootstrap 3 .row 自带 ::before/::after { display:table }，在 grid/flex 布局下
   伪元素会成为布局项（grid 下占轨道）导致错位；改用自有容器 .offer-row 并显式隐藏伪元素。
   布局：flex 两列等高 + 每列内块 flex:1 均分高度 → 四条底线完全共线 */
.offer-row {
  display: flex;
  margin: 0;
}
.offer-row::before,
.offer-row::after { display: none !important; }
.offer-row > .col-sm-6 {
  display: flex;
  flex-direction: column;
  float: none;
  width: 50%;
  padding: 0;
}
.offer-row > .col-sm-6:first-child { padding-right: 18px; }
.offer-row > .col-sm-6:last-child { padding-left: 18px; }
.offer-row .icon-block { flex: 1; min-height: 0; }
.icon-block {
  text-align: left;
  padding: 30px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}
.icon-block .ib-icon {
  height: 46px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
}
.icon-block .ib-icon img { height: 44px; width: auto; }
.icon-block h4 {
  margin: 0 0 8px;
  font-weight: 400;
  letter-spacing: 0.12em;
  font-size: clamp(15px, 1.4vw, 18px);
  min-height: 2.4em;
  display: flex;
  align-items: center;
}
.icon-block p { margin: 0; font-size: 15px; }

/* ---------- 11. Why Choose（v2：黑面板静态编号列表，替代手风琴） ---------- */
.on-black .num-list li {
  border-bottom-color: var(--hairline-w);
  gap: 28px;
  align-items: flex-start;
  padding: 26px 0;
}
.on-black .num-list li:first-child { border-top: 1px solid var(--hairline-w); }
.on-black .num-list .num {
  color: var(--white);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
}
.on-black .num-list h4 { color: var(--white); font-size: clamp(17px, 1.9vw, 23px); }
.on-black .num-list p { color: var(--white-70); max-width: 46ch; }

/* ---------- 12. Video（v3：左文右视平衡布局，tab 条横排于视频下方） ---------- */
.video-section .row { display: flex; align-items: center; }
.video-stage {
  position: relative;
  background: #000;
  border: 1px solid var(--hairline-w);
}
.video-stage iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  background: #000;
}
.video-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline-w);
  margin-top: 0;
}
.video-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 18px 22px;
  border-right: 1px solid var(--hairline-w);
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.25s ease;
}
.video-tab:last-child { border-right: none; }
.video-tab .vt-num {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(22px, 2vw, 30px);
  color: var(--white-50);
  line-height: 1;
  transition: color 0.25s ease;
}
.video-tab .vt-title {
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-70);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.video-tab:hover { background: var(--black-2); }
.video-tab.active { background: var(--black-2); }
.video-tab.active .vt-num { color: var(--accent); }
.video-tab.active .vt-title { color: var(--white); }

/* ---------- 13. Steps / timeline ---------- */
.step-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.step-num {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(44px, 5.6vw, 76px);
  color: var(--paper);
  -webkit-text-stroke: 1px var(--ink);
  line-height: 1;
  margin-bottom: 16px;
}
.on-black .step-num { color: var(--black); -webkit-text-stroke: 1px var(--white); }

/* ---------- 14. Gallery（Arkular 方形照片瓦片 + hover 灰边框） ---------- */
.gallery { padding-top: var(--section-y); }
.gallery .tile .tile-media { outline: 1px solid transparent; outline-offset: -1px; transition: outline-color 0.3s ease; }
.gallery .tile:hover .tile-media { outline: 1px solid var(--ink); }
.cbc-card {
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
  cursor: pointer;
}
.cbc-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: 75% !important;
  overflow: hidden !important;
  background: #EDEBE9 !important;
}
.cbc-img-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 1.4s ease !important;
}
.cbc-card:hover .cbc-img-wrap img { transform: scale(1.05) !important; }
.cbc-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10,10,10,0.55) !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cbc-card:hover .cbc-overlay { opacity: 1 !important; }
.cbc-overlay h4 {
  color: var(--white) !important;
  font-size: var(--h4) !important;
  font-weight: 300 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center !important;
  padding: 0 12px !important;
  margin: 0 !important;
}

/* ---------- 15. Process timeline（黑白重构） ---------- */
.process-timeline { max-width: 940px; margin: 0 auto; position: relative; }
.process-timeline::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--ink);
  transform: translateX(-50%);
  z-index: 0;
}
.pt-step { display: flex; align-items: flex-start; margin-bottom: 26px; position: relative; }
.pt-content {
  width: 44%;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 30px 0 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}
.pt-step.pt-left .pt-content:first-child { padding: 0 0 0 30px !important; }
.pt-content h4 {
  color: var(--accent) !important;
  font-size: var(--micro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}
.pt-content h3 {
  color: var(--ink) !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 100 !important;
  margin-bottom: 14px !important;
}
.pt-content p {
  color: var(--ink-2) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}
.pt-spacer { width: 12%; display: flex; justify-content: center; padding-top: 6px; z-index: 2; }
.pt-badge {
  background: var(--ink) !important;
  color: var(--white) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  border: 1px solid var(--ink);
}
.pt-step.pt-left { flex-direction: row-reverse; }

/* ---------- 16. FAQ（黑白细线） ---------- */
.faq-section { padding-top: var(--section-y); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-question {
  display: block;
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 300;
  padding: 24px 0;
  color: var(--ink);
  cursor: pointer;
  position: relative;
}
.faq-question::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
  transition: transform 0.3s ease;
}
.faq-item.open .faq-question::after { transform: translateY(-52%) rotate(45deg); }
.faq-answer { display: none; padding: 0 0 26px; color: var(--ink-2); max-width: 68ch; }
.faq-answer.show { display: block; }
.faq-answer p { margin: 0; color: var(--ink-2); }
.on-black .faq-item { border-bottom-color: var(--hairline-w); }
.on-black .faq-question { color: var(--white); }
.on-black .faq-question::after { color: var(--white); }
.on-black .faq-answer, .on-black .faq-answer p { color: var(--white-70); }

/* ---------- 17. Contact / forms ---------- */
.contact h3 { margin-bottom: 40px; }
.contact-list { list-style: none; margin: 0 0 44px; padding: 0; }
.contact-list li {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 300;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 18px;
}
.contact-list li .glyphicon { color: var(--ink); font-size: 18px; }
.contact-list a { color: var(--ink); border-bottom: 1px solid transparent; }
.contact-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Tabs（contact 页） */
.tab-contact-wrapper {
  display: flex;
  border: 1px solid var(--ink);
  margin-bottom: 30px;
}
.resp-tabs-list { border: none !important; background: var(--paper); }
.resp-tabs-list li {
  background: var(--paper) !important;
  border: none !important;
  border-right: 1px solid var(--ink) !important;
  font-family: var(--font-body);
  color: var(--ink) !important;
  min-width: 120px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.resp-tabs-list li:hover { background: var(--ink) !important; }
.resp-tabs-list li:hover .glyphicon { color: var(--white) !important; }
.resp-tabs-list li.resp-tab-active { background: var(--ink) !important; }
.resp-tabs-list li.resp-tab-active .glyphicon { color: var(--white) !important; }
.resp-tabs-list li .glyphicon { color: var(--ink) !important; font-size: 20px !important; }
.contact-info-inline {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 20px 30px !important;
  background: var(--paper) !important;
  gap: 34px !important;
  border-left: 1px solid var(--ink);
}
.contact-info-inline-item { display: flex; align-items: center; gap: 12px; }
.contact-info-inline-item .glyphicon { color: var(--ink) !important; font-size: 18px; }
.contact-info-inline-item a, .contact-info-inline-item span {
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
.contact-info-inline-item a:hover { color: var(--accent) !important; text-decoration: none !important; }
.resp-tabs-container {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 40px !important;
  margin: 0 !important;
}

/* 表单输入 */
.form-group { margin-bottom: 26px; }

/* v2：表单分区规划（Get In Touch / Contact 共用） */
.form-section { margin-bottom: 52px; }
.form-section:last-child { margin-bottom: 0; }
.form-sec-title {
  font-size: var(--micro);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
  margin-bottom: 30px;
}
.on-black .form-sec-title { color: var(--white-50); border-bottom-color: var(--hairline-w); }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}
.form-grid .form-field { margin-bottom: 26px; }
.form-field-full { grid-column: 1 / -1; }
.checkbox-grid label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 16px;
  cursor: pointer;
  color: var(--ink);
}
.checkbox-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--ink);
}
.on-black .checkbox-grid label { color: var(--white); }
.on-black .checkbox-grid input[type="checkbox"] { accent-color: var(--white); }
/* v3：Get In Touch 表单居中 + 深底文字显色（修复左对齐与文字遮盖） */
.git-form { max-width: 760px; margin: 0 auto; }
.on-black .git-form label,
.on-black label { color: var(--white-70) !important; }
.on-black .git-form input::placeholder,
.on-black .git-form textarea::placeholder { color: var(--white-50); opacity: 1; }
.on-black .git-form .form-sec-title { color: var(--white); border-bottom-color: var(--hairline-w); }
.on-black .git-form small { color: var(--white-50); }
.on-black .git-form input[type="text"],
.on-black .git-form input[type="email"],
.on-black .git-form input[type="tel"],
.on-black .git-form textarea {
  background: var(--black-2);
  border-color: var(--hairline-w);
  color: var(--white);
}
.on-black .git-form input:focus,
.on-black .git-form textarea:focus {
  border-color: var(--white);
  box-shadow: 0 0 0 1px var(--white);
  background: var(--black-2);
}
@media (max-width: 767px) {
  .form-grid { grid-template-columns: 1fr; }
  .video-section .row { display: block; }
  /* v4：offer-row 移动端单列堆叠 */
  .offer-row { display: block; }
  .offer-row > .col-sm-6 { width: 100%; padding: 0; }
  .offer-row > .col-sm-6:first-child,
  .offer-row > .col-sm-6:last-child { padding: 0; }
}
label { display: block; margin-bottom: 10px; font-weight: 400; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select {
  width: 100%;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
  background: var(--surface);
}
textarea { resize: vertical; min-height: 130px; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: 0.6; }

/* 错误/成功消息（保留语义，改黑白） */
.error-message { color: var(--accent); font-size: 12px; margin-top: 6px; display: none; }
.success-message {
  color: var(--ink);
  font-size: 14px;
  margin-top: 18px;
  padding: 14px 20px;
  background: var(--surface);
  border-left: 3px solid var(--ink);
  display: none;
}
.loading-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 0.9s linear infinite;
  margin-right: 10px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 18. Footer（黑底） ---------- */
.footer {
  background: var(--black);
  color: var(--white);
  padding: var(--section-y) 0 40px;
}
.footer h2 {
  color: var(--white);
  font-size: clamp(36px, 5.6vw, 72px);
  font-weight: 100;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  text-align: center; /* v4：Get In Touch 标题居中 */
}
.footer .para { color: var(--white-70); max-width: 60ch; margin: 0 auto 48px; text-align: center; }
.footer .foo-right h4 { color: var(--white); font-size: var(--small); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 16px; }
.footer .foo-right p { color: var(--white-50); font-size: 14px; line-height: 1.7; }
.footer .foo-left { text-align: left !important; }
.footer .foo-left .glyphicon { color: var(--white); font-size: 20px; opacity: 0.8; }
.footer .col-sm-2 { width: auto; padding: 0 0 0 0; margin-right: 18px; float: left; }
.footer .col-sm-10 { float: none; overflow: hidden; padding: 0; }
.footer form { margin-top: 18px; }
.footer input[type="text"], .footer input[type="email"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-w);
  border-radius: 0;
  color: var(--white);
  padding: 12px 0;
  margin-bottom: 16px;
}
.footer input:focus { border-color: var(--white); box-shadow: none; }
.footer input::placeholder { color: var(--white-50); }
.footer .copy-right {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-w);
  color: var(--white-50);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.footer a { color: var(--white); }
.footer a:hover { color: var(--white); opacity: 0.72; }

/* 社交图标（改用文字标签，稳） */
.fb_icons { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.fb_icons li a {
  display: inline-block;
  width: 34px; height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid var(--hairline-w);
  border-radius: 50%;
  font-size: 0;
  position: relative;
  transition: border-color 0.25s ease, background 0.25s ease;
}
/* v8：默认只显示背景 logo（模板 sprite），文字隐藏避免重叠；hover 时白底 + 文字显现 */
.fb_icons li a::after { opacity: 0; transition: opacity 0.25s ease, color 0.25s ease; }
.fb_icons li a:hover { border-color: var(--white); background: var(--white); }
.fb_icons li a.fb::after { content: "f"; font-size: 15px; color: var(--white); font-weight: 400; }
.fb_icons li a.twit::after { content: "ig"; font-size: 12px; color: var(--white); font-weight: 400; letter-spacing: -0.5px; }
.fb_icons li a.goog::after { content: "yt"; font-size: 12px; color: var(--white); font-weight: 400; }
.fb_icons li a.pin::after { content: "wa"; font-size: 12px; color: var(--white); font-weight: 400; }
.fb_icons li a.drib::after { content: "pt"; font-size: 12px; color: var(--white); font-weight: 400; }
.fb_icons li a:hover::after { opacity: 1; color: var(--ink); }

/* ---------- 19. Motion（克制 fadeInUp） ---------- */
.wow { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .wow { visibility: visible !important; animation: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
.fadeInUp, .wow.fadeInUp {
  animation-name: ckFadeUp;
  animation-duration: 0.9s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ckFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 20. Responsive ---------- */
@media (max-width: 991px) {
  .header .container { padding: 0 15px; }
  .split { flex-direction: column; }
  .tile { width: 50%; }
  .step-row { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .header { padding: 14px 0; }
  .header.scrolled { padding: 8px 0; }
  .logo img { height: 40px !important; }
  .banner-left h3.hero-sub { white-space: normal; }
  .navbar-collapse {
    background: var(--paper);
    margin: 14px -15px 0;
    padding: 12px 20px;
    border-top: 1px solid var(--hairline);
  }
  .navbar-nav { margin: 0 !important; }
  .navbar-nav > li { float: none; }
  .navbar-nav > li > a { padding: 12px 0 !important; border-bottom: 1px solid var(--hairline); }
  .tile { width: 100%; }
  .process-timeline::before { left: 20px; }
  .pt-step, .pt-step.pt-left { flex-direction: row !important; }
  .pt-content { width: calc(100% - 62px) !important; padding: 0 0 0 20px !important; }
  .pt-spacer { width: 42px; padding-top: 4px; }
  .tab-contact-wrapper { flex-direction: column; }
  .contact-info-inline { flex-direction: column; align-items: flex-start; gap: 12px !important; border-left: none; border-top: 1px solid var(--ink); }
  .footer .col-sm-2 { margin-bottom: 10px; }
}

/* ---------- 21. 兼容：iframe 翻页书页（mining/capability） ---------- */
.capability-wrapper { padding-top: 60px; background: var(--paper); }
.iframe-container { width: 100%; }
.iframe-container iframe {
  width: 100%;
  height: 82vh;
  min-height: 560px;
  border: none;
  display: block;
}

/* ---------- 21b. About 价值观滑块（v3：去框居中，与左右摄影图三联等高） ---------- */
#about { text-align: center; }
#about .step-row { text-align: left; }
#about .eyebrow { text-align: center; }
#about .eyebrow::before { display: none; }
#about h2 { text-align: center; }
#about .para1 { max-width: 62ch; margin-left: auto; margin-right: auto; }
#about .row { display: flex; }
#about .row > [class*="col-"] {
  float: none;
  display: flex;
  width: 33.3333%;
}
#about .row > [class*="col-"] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.callbacks_container {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#slider3 {
  height: 280px !important;
  overflow: hidden;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
#slider3 li {
  height: 280px;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#slider3 h4 {
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 auto 16px;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 24ch;
}
#slider3 p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 40ch;
}
.callbacks_tabs {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.callbacks_tabs li { float: none; }
.callbacks_tabs li a {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--hairline);
  text-indent: -9999px;
  overflow: hidden;
  transition: background 0.25s ease;
}
.callbacks_tabs li.callbacks_here a { background: var(--ink); }
.callbacks_nav { display: none; }

/* ---------- 22. 覆盖模板残留 ---------- */
.banner-bottom { padding-top: var(--section-y); padding-bottom: var(--section-y); background: var(--paper); }
.banner-bottom h3 { margin-bottom: 26px; }
.banner-bottom .para1 { color: var(--ink-2); max-width: 72ch; margin-bottom: 44px; }
.main_ser { padding-top: var(--section-y); padding-bottom: var(--section-y); background: var(--surface); }
.main_ser h3 { margin-bottom: 10px; }
.main_ser h4 { font-weight: 300; color: var(--ink); }
.main_ser p { color: var(--ink-2); }
.treatments { padding-top: var(--section-y); padding-bottom: var(--section-y); background: var(--paper); }
.treatments > h3 { text-align: left; margin-bottom: 12px; }
.treatmentsP1 { color: var(--ink-2); max-width: 64ch; margin-bottom: 56px; }
.treat-grids.grid figure { margin: 0; }
.treat-grids img { width: 100%; height: 100% !important; object-fit: cover; }
.treat-pad, .treat-head { height: auto !important; min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.treat-pad p, .treat-head p { color: var(--ink-2); }

/* services 页旧结构 */
.services { padding-top: var(--section-y); padding-bottom: var(--section-y); background: var(--surface); }
.services h3 { margin-bottom: 10px; }
.services .ser-left-grid h4 { font-size: clamp(20px, 2.4vw, 30px); font-weight: 100; margin-bottom: 14px; }
.btm-clr4 { border: none !important; padding: 0 !important; }
.wel-grid { border: none !important; padding: 0 !important; }

/* gallery 网格（JS 渲染的 col-md-4 gal-left） */
.gallery .gal-left { margin-bottom: 24px; }

/* codes 页旧 inline 清理（背景保留纸色） */
body { background: var(--paper); }

/* ---------- 23. toTop 回顶（模板蓝色默认覆盖为黑白） ---------- */
#toTop {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 50%;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
  opacity: 0.85;
  transition: background 0.25s ease, color 0.25s ease;
}
#toTop::before {
  content: "\2191";
  display: block;
  line-height: 38px;
  font-size: 16px;
}
#toTop:hover { background: var(--ink); color: var(--paper); }
#toTopHover { display: none !important; }

/* ---------- 24. Designs 页面：系列图（v5） ---------- */
.designs-list {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 104px);
}
.design-series-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 18px;
}
.design-series-head h2 {
  margin: 0;
  font-weight: 100;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.design-series-head .ds-count {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: var(--h4);
  color: var(--ink-2);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.design-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.design-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #EDEBE9;
}
.design-card .ds-model {
  margin-top: 14px;
  font-size: var(--small);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.design-card .ds-desc {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 300;
}
@media (max-width: 767px) {
  .design-grid { grid-template-columns: 1fr; }
  .design-series-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- 25. Events 页面：展会记录展示（v8：三屏竖排，每屏一图 + 图下 2 行文字） ---------- */
/* v8.3：首图上方留白收窄（默认 sec 顶部 128px，此处减半为 64px）；
   手动调间距：改此值（如 0.75 = 96px / 1 = 128px），或改 --section-y 全局 token */
.events-sec { padding-top: calc(var(--section-y) * 0.5); }
.event-list {
  display: flex;
  flex-direction: column;
  gap: clamp(88px, 12vw, 160px);
}
.event-panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.event-media {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;      /* v8.1：固定 16:9 容器，主推素材按此规格出图 */
  background: var(--black-2);
  overflow: hidden;
}
.event-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 16:9 图完美贴合；其他比例（如 4:3）自动放大裁剪遮盖，杜绝左右黑边 */
  display: block;
}
/* 序号角标（v8.2 用户要求注释隐藏；样式保留，HTML 中还原 span 即可恢复显示） */
.event-num {
  position: absolute;
  top: 16px;
  left: 18px;
  font-size: var(--small);
  letter-spacing: 0.14em;
  color: var(--white-70);
  background: rgba(10, 10, 10, 0.72);
  padding: 6px 12px;
  border-radius: 3px;
  z-index: 2;
}
.event-meta {
  text-align: center;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  max-width: 720px;
  margin: 0 auto;
}
.event-meta h3 {
  font-weight: 100;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--ink);
  margin: 0 0 6px;
  text-wrap: balance;
}
.event-meta p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 300;
}
@media (max-width: 767px) {
  .event-media { max-width: 100%; }   /* 移动端全宽，比例仍为 16:9 */
}

/* ---------- 26. Designs 横滑（v7）：数据驱动 + 左右箭头，PC 3 图/视 ---------- */
.design-track-wrap { position: relative; }
.design-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) rgba(27, 27, 27, 0.18);
  padding: 4px 2px 16px;
  -webkit-overflow-scrolling: touch;
}
.design-track::-webkit-scrollbar { height: 5px; }
.design-track::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 3px; }
.design-track::-webkit-scrollbar-track { background: var(--hairline); }
.design-track .design-card {
  flex: 0 0 calc((100% - 44px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
.design-track .design-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #EDEBE9;
}
.design-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 0 0 4px rgba(249, 248, 247, 0.85);
}
.design-arrow:hover { background: var(--ink); color: var(--paper); }
.design-arrow.prev { left: 0; }
.design-arrow.next { right: 0; }
.design-arrow:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 991px) {
  .design-track .design-card { flex: 0 0 calc((100% - 22px) / 2); }
}
@media (max-width: 767px) {
  .design-track .design-card { flex: 0 0 calc(100% - 48px); }
  .design-arrow { display: none; }
}

/* ---------- 25. v9：How We Build 5 并列 values + About 双图 + Service 9:16 ---------- */
.hwb-list {
  margin-bottom: clamp(32px, 4vw, 48px);
}
.hwb-list > div {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  padding: 9px 0;
}
.value-num {
  flex: 0 0 auto;
  min-width: 52px;
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--accent);
  line-height: 1.1;
  margin: 0;
}
.hwb-list h4 {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--ink);
}
.hwb-list p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
  max-width: 68ch;
}
.about-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.about-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Service 面板 9:16 竖图（v9.1：高度不超过 What we do 文字区） */
.services .split-img {
  aspect-ratio: 9 / 16;
  max-height: 740px;
  overflow: hidden;
}
.services .split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .hwb-list > div { gap: 16px; }
  .about-imgs { grid-template-columns: 1fr; }
  .about-imgs > div + div { margin-top: 0; }
  .services .split-img { max-height: 640px; }
}

/* ---------- 26. v9.1：Contact 头部双列 + 品牌行去粗体 ---------- */
.contact-head-inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: flex-start;
}
.brand-line {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--ink);
  text-transform: none;
  margin: 0 0 10px;
}
.contact-head-img img {
  aspect-ratio: 9 / 16;
  height: 560px;
  width: auto;
  max-width: 100%;
  margin: 37px auto 0;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .contact-head-img img { margin: 0 auto; height: auto; width: 100%; max-height: 480px; }
}
@media (max-width: 767px) {
  .contact-head-inner { grid-template-columns: 1fr; }
  .contact-head-img { order: -1; }
}

/* ---------- 27. v10：导航下拉（DESIGNS 3 子系列）+ 导航 hover 明度反馈 ---------- */
.navbar-nav > li.dropdown {
  position: relative;
  padding-bottom: 13px;
  margin-bottom: -13px;
}
.navbar-nav > li.dropdown > a { padding-right: 26px !important; }
.navbar-nav > li.dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 330px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 10px 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  z-index: 1000;
}
.navbar-nav > li.dropdown:hover > .dropdown-menu,
.navbar-nav > li.dropdown:focus-within > .dropdown-menu { display: block; }
.dropdown-menu > li > a {
  display: block;
  padding: 12px 28px;
  font-size: 13.5px;
  font-weight: 300;
  letter-spacing: .05em;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
  text-align: left;
  background: none;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li.active > a { color: var(--accent); background: rgba(0,0,0,.035); }
.dropdown-menu > li + li { border-top: 1px solid var(--hairline); }

/* 导航 hover 明度反馈（替代原 hover 变 accent）：
   默认 ink / hero 白字，hover 时透明度降低（变浅），保留 active 的 accent 下划线 */
.navbar-nav > li > a { transition: color 0.25s ease, opacity 0.25s ease; }
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus { color: var(--ink); opacity: 0.55; background: none !important; }
.on-hero .navbar-nav > li > a:hover,
.on-hero .navbar-nav > li > a:focus { color: var(--white); opacity: 0.55; }
.header.scrolled .navbar-nav > li > a:hover,
.header.scrolled .navbar-nav > li > a:focus { color: var(--ink) !important; opacity: 0.55; }
.navbar-nav > li.dropdown:hover > a,
.navbar-nav > li.dropdown:hover > a:focus { opacity: 1; color: var(--ink); }
.on-hero .navbar-nav > li.dropdown:hover > a { color: var(--white); opacity: 1; }
.header.scrolled .navbar-nav > li.dropdown:hover > a { color: var(--ink) !important; opacity: 1; }

/* 移动端（汉堡展开）：下拉静态平铺，无需 hover */
@media (max-width: 767px) {
  .navbar-nav > li.dropdown { position: static; padding-bottom: 0; margin-bottom: 0; }
  .navbar-nav > li.dropdown > a { padding-right: 0 !important; }
  .navbar-nav > li.dropdown > .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 1px solid var(--hairline);
    margin: 2px 0 10px 16px;
    padding: 0 0 0 16px;
    min-width: 0;
    display: none;
  }
  .navbar-collapse.in .navbar-nav > li.dropdown > .dropdown-menu { display: block; }
  .dropdown-menu > li + li { border-top: none; }
  .dropdown-menu > li > a { padding: 10px 0; }
}