/* ==========================================================================
   SIT 独立站 · layout.css
   移动优先（默认 < 768px），≥768 / ≥1024 / ≥1280 渐进到 PC 端
   ========================================================================== */

/* --------------------------------------------------------------------------
   顶部横栏：左侧品牌标识 + 右侧（汉堡菜单 / 语言）—— PC 与移动一致
   主导航统一放在页面底部（见 .bottomnav / .tabbar）
   -------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  background: transparent;
  transition: background-color .22s ease, box-shadow .22s ease;
}
.topbar.is-scrolled {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

/* 品牌：标识块 + 文字。整块可伸缩，但标识块（mark）永不压缩，保证完整显示 */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
/* 品牌标识：官方 S 图形，透明底 PNG，无底板、无边框、无投影。
   尺寸/位置与原红色方块完全一致（32×32），圆角与内边距一并去掉，
   因为没有了方块底色，圆角无处可切、内边距只会让图形变小。 */
.brand__mark {
  flex: 0 0 auto;
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.brand__name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: color .22s ease;
}
.brand__sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--red-soft);
  white-space: nowrap;
}
.topbar.is-scrolled .brand__name { color: var(--ink); }
.topbar.is-scrolled .brand__sub { color: var(--red); }

/* 右侧操作区：固定不压缩，两个图标始终完整显示在右上角 */
.topbar__actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.iconbtn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
}
.iconbtn svg { width: 22px; height: 22px; }
/* 默认深色描边：PC 端顶栏恒为浅色底、抽屉/弹层也是浅色底，始终用深色 */
.iconbtn svg [stroke] { stroke: var(--ink); transition: stroke .22s ease; }

/* 只有移动端「顶栏透明、直接压在 Hero 图上」这一态才转白；
   同时加深色半透明底板 + 投影，保证无论压到画面亮部还是暗部都看得见 */
@media (max-width: 767px) {
  .topbar:not(.is-scrolled) .iconbtn { background: rgba(20, 23, 34, .26); }
  .topbar:not(.is-scrolled) .iconbtn svg [stroke] { stroke: #fff; }
  .topbar:not(.is-scrolled) .iconbtn svg { filter: drop-shadow(0 1px 2px rgba(20, 23, 34, .6)); }
}

/* 语言面板 */
.lang { position: relative; flex: 0 0 auto; }
.lang__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 150px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
  display: none;
  z-index: 70;
}
.lang__panel.is-open { display: block; }
.lang__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  border-radius: 9px;
  font-size: 13px;
  color: var(--body);
  cursor: pointer;
  text-align: left;
}
.lang__opt:hover { background: var(--cream); }
.lang__opt[aria-current="true"] { color: var(--red); font-weight: 600; }
.lang__opt[aria-current="true"]::after { content: "✓"; font-size: 12px; }

/* 抽屉菜单（移动端） */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 23, 34, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(78vw, 320px);
  background: var(--paper);
  padding: 18px 18px calc(18px + var(--tabbar-h));
  transform: translateX(100%);
  transition: transform .24s ease;
  overflow-y: auto;
}
.drawer.is-open .drawer__sheet { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer__title { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--ink); }
.drawer__link {
  display: block;
  padding: 11px 4px;
  font-size: 14px;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}
.drawer__link:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--pad-x) 76px;
  background: var(--ink) center/cover no-repeat;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__mask {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 顶部浅 → 中部透 → 底部压暗，保证文字可读且画面明亮 */
  background: linear-gradient(
    to bottom,
    rgba(20, 23, 34, .42) 0%,
    rgba(20, 23, 34, .07) 20%,
    rgba(20, 23, 34, .42) 36%,
    rgba(20, 23, 34, .50) 58%,
    rgba(20, 23, 34, .92) 100%
  );
}
.hero__inner { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.hero__eyebrow { color: #fff; opacity: .92; }
.hero__sub { color: #f1eae3; font-size: 14px; line-height: 1.7; max-width: 46ch; }
/* 头图四个标签必须并排一行：不换行，字号与内边距随视口收缩。
   （中文「一站式全包在地生活」9 字、西语「Vida local todo incluido」等都靠这套缩放压进一行）
   借两侧各 6px 负边距换回一点可用宽度，避免小屏为挤下标签而把字缩得过小。 */
.hero__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(3px, 1.1vw, 5px);
  margin-inline: -6px;
  max-width: calc(100% + 12px);
}
.hero__tags .chip {
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(7px, 2.15vw, 11px);
  padding: 6px clamp(2.5px, 1vw, 11px);
  letter-spacing: 0;
}
.hero__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

/* --------------------------------------------------------------------------
   通用网格（移动端单列）
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 14px; }
.grid--ways { grid-template-columns: 1fr; }
.grid--stories { grid-template-columns: 1fr; }
.grid--gateways { grid-template-columns: 1fr; }
.grid--service { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--exp { grid-template-columns: 1fr; }
.grid--faq { grid-template-columns: 1fr; }
.grid--form { grid-template-columns: 1fr; }

/* 旅行方式卡 */
.way__media { aspect-ratio: 16 / 9; background: #e7e1d8; overflow: hidden; }
.way__media img { width: 100%; height: 100%; object-fit: cover; }
.way__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.way__head { display: flex; align-items: flex-start; gap: 8px; }
.way__title { flex: 1; min-width: 0; }

/* 故事卡 */
.story { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.story__kicker { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; color: var(--red); }
.story__meta { font-size: 12px; font-weight: 600; color: var(--muted); }
.story__detail { font-size: 12px; color: var(--dim); line-height: 1.7; }

/* 枢纽卡 */
.gw { display: flex; align-items: center; gap: 14px; padding: 16px; }
/* 方位块：四个一律保持原本的 52×52 圆角正方形（不随文字长度变形），
   靠字号分级保证 North / Oeste 这类长词完整落在方块内而不溢出 */
.gw__dir {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  padding: 0 3px;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 15px;          /* 拉丁语系：North / South / Oeste 均为 5 字母，15px 可完整容纳 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
/* 中日为单字方位，放大回原本的方块观感 */
/* 前缀匹配：htmlLang 可能是 zh-CN / zh-Hans，精确 [lang="zh"] 会漏掉 */
[lang^="zh"] .gw__dir, [lang^="ja"] .gw__dir { font-size: 22px; }
.gw__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.gw__city { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--ink); }
.gw__city small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.gw__region { font-size: var(--fs-micro); font-weight: 600; color: var(--red); }
.gw__desc { font-size: 12px; color: var(--body); }
.gw__links { font-size: 11px; font-weight: 500; color: var(--muted); }

/* 服务六宫格：图标在左、标题紧跟其右（标题不换行） */
.svc { display: flex; flex-direction: column; gap: 7px; padding: 14px; }
.svc__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.svc__icon { flex: 0 0 22px; width: 22px; height: 22px; }
.svc__icon svg { width: 100%; height: 100%; }
.svc__title {
  font-family: var(--font-serif);
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.svc__desc { font-size: 11px; line-height: 1.6; color: var(--dim); }

/* 体验卡 */
.exp { display: flex; align-items: center; gap: 0; }
.exp__media { flex: 0 0 104px; width: 104px; height: 104px; background: #e7e1d8; overflow: hidden; }
.exp__media img { width: 100%; height: 100%; object-fit: cover; }
.exp__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-width: 0; flex: 1; }
.exp__city { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; color: var(--red); }
.exp__title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.exp__desc { font-size: 12px; color: var(--dim); }

/* --------------------------------------------------------------------------
   多语言排版兜底：任何语言下卡片内文本都不撑破容器
   -------------------------------------------------------------------------- */
.gw__city, .gw__region, .gw__desc, .gw__links,
.svc__title, .svc__desc, .exp__city, .exp__title, .exp__desc,
.story__kicker, .story__meta, .story__detail,
.card-title { overflow-wrap: anywhere; min-width: 0; }
[lang="es"] .gw__city { font-size: 16px; }
[lang="es"] .gw__region { letter-spacing: .04em; }
[lang="es"] .svc__desc, [lang="es"] .exp__desc { hyphens: auto; }

/* 关于 */
/* 证件图按原始比例完整显示，不做裁切；点击弹出英文翻译件大图 */
.about__media { position: relative; width: 100%; border-radius: var(--r-card); overflow: hidden; background: #f2efe9; outline: 1px solid var(--line); }
.about__zoom { display: block; position: relative; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.about__zoom img { display: block; width: 100%; height: auto; }
.about__zoom-badge {
  position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(20, 23, 34, .6); color: #fff; backdrop-filter: blur(4px);
  transition: background .18s ease;
}
.about__zoom-badge svg { width: 18px; height: 18px; }
.about__zoom:hover .about__zoom-badge,
.about__zoom:focus-visible .about__zoom-badge { background: rgba(20, 23, 34, .85); }
.about__zoom:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cred { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.cred__title { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--ink); }
.cred__item { font-size: 12px; line-height: 1.7; color: var(--body); }

/* --------------------------------------------------------------------------
   询价 + 页脚（深色区）
   -------------------------------------------------------------------------- */
.enquiry { padding: 56px var(--pad-x) 40px; background: var(--ink); }
.enquiry .eyebrow { color: var(--red-soft); }
.enquiry .h1 { color: #fff; }
.enquiry__intro { color: var(--on-dark-body); font-size: 14px; max-width: 52ch; }
.enquiry__form { margin-top: 22px; display: grid; gap: 12px; }
.enquiry__submit { margin-top: 16px; }

/* 底部固定导航的安全空间由 body 统一预留，页脚不再重复加高 */
.footer { background: var(--ink); color: var(--on-dark-muted); padding: 30px var(--pad-x) 28px; }
.footer__brand {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
}
.footer__contact {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.8;
  color: var(--on-dark-muted);
  white-space: pre-line;
}
/* 页脚里的电话 / 邮箱是可点链接：与页脚导航同色，保证在深底上看得见 */
.footer__contact a { color: var(--red-soft); text-decoration: underline; text-underline-offset: 2px; }
.footer__contact a:hover { color: #fff; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.footer__nav a { font-size: 11px; font-weight: 500; color: var(--red-soft); }

/* --------------------------------------------------------------------------
   社交图标：官方 App 图标样式 —— 圆角正方形底 + 白色品牌符号
   四个固定一行（nowrap + flex:0 0 auto），不会因语言或屏宽换行或挤压
   -------------------------------------------------------------------------- */
.footer__social { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin-top: 20px; }
.social__btn {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;          /* ≈ iOS 应用图标圆角（边长 22.5%） */
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.social__btn svg { display: block; width: 62%; height: 62%; }
.social__btn img { display: block; width: 100%; height: 100%; object-fit: cover; }  /* 官方方形 logo 图片通栏铺满 */
.social__btn--facebook { background: #1877f2; }
.social__btn--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social__btn--rednote { background: #d3181a; }   /* 与官方 logo 图片底色一致 */
.social__btn--youtube { background: #ff0000; }
a.social__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
a.social__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.social__btn.is-pending { cursor: default; }
.footer__copy { margin-top: 14px; font-size: 11px; color: #7e7a73; }

/* --------------------------------------------------------------------------
   图片灯箱：ABOUT 许可证缩略图 → 英文翻译件大图
   -------------------------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; }
.lightbox[hidden] { display: none; }
.lightbox__scrim { position: absolute; inset: 0; background: rgba(12, 14, 20, .88); }
.lightbox__panel {
  position: relative;
  margin: 0;
  max-width: min(900px, 96vw);
  max-height: calc(100vh - 84px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  overscroll-behavior: contain;
}
.lightbox__img { display: block; width: 100%; height: auto; }
.lightbox__close {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__close:hover { background: #fff; }
body.is-lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   底部导航：PC 显示完整模块行，移动端显示 4 等分 Tab Bar
   -------------------------------------------------------------------------- */
/* PC 底部导航（≥768px 生效，默认隐藏） */
.bottomnav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  height: var(--bottomnav-h);
  padding: 0 16px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bottomnav::-webkit-scrollbar { display: none; }
/* 内层的 auto 外边距：内容装得下就居中，装不下就左对齐并可横向滑动 */
.bottomnav__inner {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  height: 100%;
}
.bottomnav__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--body);
  white-space: nowrap;
  transition: color .16s ease, background-color .16s ease;
}
.bottomnav__link:hover { color: var(--red); background: var(--cream); }
.bottomnav__link.is-active { color: var(--red); font-weight: 600; background: var(--red-tint); }

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
.tab__bar { width: 20px; height: 3px; border-radius: 2px; background: transparent; }
.tab__icon { width: 21px; height: 21px; line-height: 0; }
.tab__icon svg { width: 100%; height: 100%; }
.tab__label {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab.is-active .tab__label { color: var(--red); font-weight: 600; }
.tab.is-active .tab__bar { background: var(--red); }

/* 回到顶部 */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + 16px);
  z-index: 56;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-float);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fab.is-visible { display: flex; }
.fab { line-height: 0; }              /* 行盒不再撑高，图案按几何中心对齐 */
.fab svg { width: 21px; height: 21px; }

/* 为底部固定导航预留安全空间（PC / 移动都导航在底部），含 iPhone 底部安全区 */
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

/* ==========================================================================
   ≥ 768px：平板 / 小屏 PC
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --pad-x: 40px;
    --sec-y: 72px;
    --fs-body: 15px;
  }

  .topbar { height: 68px; padding: 0 32px; background: rgba(255, 255, 255, .96); box-shadow: 0 1px 0 var(--line); }
  .topbar .brand__name { color: var(--ink); }
  .topbar .brand__sub { color: var(--red); }
  /* ≥768 顶栏恒为浅色底：图标描边保持深色（默认规则），
     不要再写 :not(.is-scrolled) 转白的规则，否则回到顶部时白图标会「消失」在白底上 */
  /* 汉堡菜单在 PC 端同样常驻右上角 */
  .iconbtn--menu { display: inline-flex; }

  /* PC 底部导航：完整模块行 */
  .bottomnav { display: flex; }

  .hero { min-height: 620px; padding: 0 32px 84px; }
  .hero__inner { gap: 16px; }
  .hero__cta { flex-direction: row; align-items: center; gap: 12px; }
  .hero__sub { max-width: 52ch; }

  .section__inner { max-width: var(--maxw); margin: 0 auto; }
  .hero__inner, .topbar { max-width: none; }
  .hero__inner { width: min(720px, 100%); }

  .grid--ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .grid--stories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .grid--gateways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .grid--service { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .grid--exp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .grid--faq { max-width: 820px; }
  .grid--form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .grid--form .field--wide { grid-column: 1 / -1; }

  .exp { flex-direction: column; align-items: stretch; }
  .exp__media { flex: none; width: 100%; height: 168px; }
  .exp__body { padding: 14px 16px 16px; }

  .enquiry__inner, .footer__inner { max-width: var(--maxw); margin: 0 auto; }
  .enquiry__submit { max-width: 320px; }

  /* PC：品牌/联系在左列，右列自上而下是社交图标 → 页脚导航（图标在导航之上） */
  .footer__cols {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      "brand social"
      "brand nav";
    gap: 20px 32px;
    align-items: start;
  }
  .footer__brandcol { grid-area: brand; }
  .footer__social { grid-area: social; align-self: end; margin-top: 0; }
  .footer__nav { grid-area: nav; margin-top: 0; }

  /* PC：隐藏 4 等分 Tab Bar，改用底部完整模块行 */
  .tabbar { display: none; }
  body { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
  .footer { padding-bottom: 32px; }
  .fab { bottom: calc(var(--bottomnav-h) + 18px); }
}

/* ==========================================================================
   ≥ 1024px：桌面
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --pad-x: 48px; --sec-y: 88px; }

  .topbar { padding: 0 40px; }

  /* ---- PC 头图：与移动端同一形态（全幅底图），但换用横版扩图 ----
     背景：竖构原图 hero-beijing.jpg（1400×1976）铺满 100vw 超宽横幅时，
     object-fit:cover 会按宽度放大到 1920px+（≈1.37 倍 → 模糊失真），
     纵向还只截出约 1/4 画面。
     做法：PC 端改加载「横版扩图」hero-beijing-wide.jpg（1920×1180，由原图向右左
     扩展补画面生成）。横幅高度限制在 1180px 以内且视口宽 ≤1920 时，
     cover 缩放系数 = max(vw/1920, heroH/1180) ≤ 1 → **零放大**；
     可见高度占比 ≈ heroH/(1180×缩放) ≈ 70–80%（原来只有 26–35%）。 */
  .hero { min-height: clamp(660px, 78vh, 860px); padding-bottom: 96px; }

  .grid--ways { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--gateways { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 服务项改为「图标 + 标题」横排，1024 下保持 3 列以保证标题不换行 */
  .grid--service { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .drawer__sheet { padding: 18px; }

  .about__split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  /* 证件图保持原始比例整幅显示，不再套 4/3 裁切 */

  .enquiry__split { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
}

/* ==========================================================================
   ≥ 1280px：宽屏
   ========================================================================== */
@media (min-width: 1280px) {
  :root { --maxw: 1160px; }
  /* ≤1920 宽时 cover 缩放系数为 1（零放大）；再宽才轻微放大，视野仍比原来完整得多 */
  .hero { min-height: clamp(700px, 80vh, 900px); }
  /* 宽屏才铺开成六宫格，保证标题有足够横向空间 */
  .grid--service { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ==========================================================================
   ≥ 1920px：超宽屏
   底图宽 1920，视口再宽时 cover 会按宽度轻微放大，纵向可见画面随之变少；
   这里把首屏加高（仍约占视口 78%），把可见画面从 57% 拉回 70% 以上。
   ========================================================================== */
@media (min-width: 1920px) {
  .hero { min-height: clamp(900px, 78vh, 1120px); }
}