/* ==========================================================================
   服务分项页：三页三种结构（企业事务 / 印尼行程 / 会务服务）
   --------------------------------------------------------------------------
   为什么要三套：这三个页面的业务性质不同，用同一套卡片网格会互相稀释。
   按 frontend-design 的反同质化原则，各页选各的结构：
     · svc-chapter  企业事务 —— 行政流程有先后，章节式纵向阅读 + 左侧锚点
     · svc-journey   印尼行程 —— 出行有顺序，用时间轴承载前后关系
     · svc-belt      会务服务 —— 能力项多而短，用宽窄交替的横向条带
   圆角按层级分档（xlg/xl/md/pill），不再全站一个值；阴影只在可交互面出现。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 章节式（企业事务）
   -------------------------------------------------------------------------- */
.svc-chapter { grid-column-end: span 12; display: grid; gap: 0; }

@media (min-width: 900px) {
  .svc-chapter { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--space-16); }
}

/* 左侧目录：细线 + 当前位红点，像一份文件目录 */
.svc-chapter__nav {
  display: none;
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  align-self: start;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--line);
}

@media (min-width: 900px) { .svc-chapter__nav { display: flex; } }

.svc-chapter__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}

.svc-chapter__nav a::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background-color: var(--line-2);
  transition: background-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

/* hover / 键盘聚焦时点亮。不再用 aria-current 伪装「你在这里」——
   那需要滚动监听才能跟上，静态标记会指错位置；判断在哪一节
   交给浏览器原生的 :target，不需要脚本。 */
.svc-chapter__nav a:hover,
.svc-chapter__nav a:focus-visible { color: var(--ink); }

.svc-chapter__nav a:hover::before,
.svc-chapter__nav a:focus-visible::before {
  background-color: var(--accent);
  transform: scale(1.5);
}

.svc-chapter__body { display: grid; gap: var(--space-16); }

/* 章节之后的边界说明与 CTA：占满整行，并与章节正文左缘对齐
   （企业事务页有 14rem 目录栏，这里要跟着正文列走，不能顶到最左）。 */
.svc-foot { display: grid; gap: var(--space-4); justify-items: start; }

.svc-foot .sec-head__note { max-width: 40em; }

.svc-foot__cta { margin: 0; }

@media (min-width: 900px) {
  /* 与 .svc-chapter__body 同起点：14rem 目录 + column-gap */
  .svc-foot { padding-inline-start: calc(14rem + var(--space-16)); }
}

/* --------------------------------------------------------------------------
   6. 边界声明（全局）
   --------------------------------------------------------------------------
   服务介绍只说"能做什么"会让客户以为所有个案都适用，所以每页需要一句
   明确的边界说明（不承诺审批/成交/时限）。它不是普通附注，也不是营销文案，
   是全站可识别的「声明」——用一条细线 + 缩进把它从正文里区分出来，
   字号收小、颜色降一档，让它的角色是「说明」而不是「卖点」。

   为什么不做成警示框：声明是常规预期管理，不是错误或警告；
   加底色和图标会把它变成视觉噪音，也会与表单错误样式混淆。
   -------------------------------------------------------------------------- */
.claim {
  display: grid;
  gap: var(--space-2);
  max-width: 44em;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--accent-line);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* 声明里可以带一个短标签，点明这是边界而不是正文 */
.claim__label {
  font-size: var(--fs-foot);
  font-weight: var(--fw-semi);
  color: var(--ink-3);
  letter-spacing: var(--ls-label);
}

/* 章节条目：左缩略图 + 右文字；窄屏改为上下堆叠。
   图是缩略图（10rem ≈ 160px 宽、4:3），作文字的辅助标识。 */
.svc-chapter__item {
  display: grid;
  gap: var(--space-4);
  padding-block-end: var(--space-8);
  border-block-end: 1px solid var(--line);
}

@media (min-width: 640px) {
  .svc-chapter__item {
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: start;
  }
}

.svc-chapter__item:last-child { border-block-end: none; padding-block-end: 0; }

.svc-chapter__text { display: grid; gap: var(--space-2); }

/* 缩略图：4:3（160×120），圆角与卡片层级一致，轻微降饱和不抢标题 */
.svc-chapter__shot {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--bg-mute);
}

.svc-chapter__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
}

.svc-chapter__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

/* 前置图记：细线几何，与标题同处一行、基线对齐。
   只有没配实景图的项目才用到（现在企业事务三项都已配图）。 */
.svc-chapter__mark {
  flex: none;
  align-self: center;
  display: inline-flex;
  color: var(--accent);
  opacity: 0.9;
  margin-inline-end: var(--space-1);
}

.svc-chapter__mark svg {
  width: 2rem;
  height: 2rem;
}

@media (max-width: 639px) {
  .svc-chapter__mark svg { width: 1.5rem; height: 1.5rem; }
}

/* 章节目录的序号：只在内容真的是顺序时使用（这里是行政事项的
   「注册 → 变更/注销 → 资质与财税」推进顺序）。它是文本的一部分而非装饰，
   所以放在标题组里，用主色小字，不做成大号数字标记。 */
.svc-chapter__num {
  font-family: var(--font-display);
  font-size: var(--fs-foot);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}

.svc-chapter__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.svc-chapter__desc {
  max-width: 36em;
  color: var(--ink-2);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* 标签改为一组短横线，不用胶囊底色 —— 减少「满页小圆角盒」的模板感 */
.svc-chapter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.svc-chapter__tags span {
  font-size: var(--fs-foot);
  color: var(--ink-3);
  padding-inline-start: var(--space-4);
  position: relative;
}

.svc-chapter__tags span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 0.5rem;
  height: 1px;
  background-color: var(--accent-line);
}

/* --------------------------------------------------------------------------
   2. 时间轴（印尼行程）
   -------------------------------------------------------------------------- */
.svc-journey { grid-column-end: span 12; position: relative; display: grid; gap: var(--space-10); }

/* 贯穿竖线：行程的时间感由它承担，不是装饰 */
.svc-journey::before {
  content: "";
  position: absolute;
  inset-block: 0.75rem 0.75rem;
  inset-inline-start: 0.4375rem;
  width: 1px;
  background-color: var(--line);
}

@media (min-width: 900px) {
  .svc-journey { padding-inline-start: var(--space-12); }
}

.svc-stop { position: relative; display: grid; gap: var(--space-3); }

.svc-stop::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-12) + 0.1875rem);
  top: 0.6875rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--r-pill);
  background-color: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}

@media (max-width: 899px) {
  .svc-stop { padding-inline-start: var(--space-8); }
  .svc-stop::before { inset-inline-start: 0.0625rem; }
  .svc-journey::before { inset-inline-start: 0.3125rem; }
}

.svc-stop__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.svc-stop__desc {
  max-width: 36em;
  color: var(--ink-2);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.svc-stop__shot {
  position: relative;
  margin: var(--space-2) 0 0;
  aspect-ratio: 3 / 2;
  max-width: 30rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--bg-mute);
}

.svc-stop__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   3. 宽窄交替条带（会务服务）
   -------------------------------------------------------------------------- */
.svc-belt { grid-column-end: span 12; display: grid; gap: var(--space-4); }

/* 12 栅格里每项占 8 列，偶数项从第 3 列起 —— 左右错位的横条，不是宽窄交替。
   打断九宫格「每格一样大」靠的是错位，不是宽度。 */
@media (min-width: 900px) {
  .svc-belt { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .svc-belt__item { grid-column: span 8; }
  .svc-belt__item:nth-child(even) { grid-column: 3 / span 8; }
}

.svc-belt__item {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-6) 0;
  border-block-start: 1px solid var(--line);
}

.svc-belt__label {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
}

.svc-belt__desc {
  max-width: 40em;
  color: var(--ink-2);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. 案例版面（会务）：暗色满幅，白字压图，大图主导
   -------------------------------------------------------------------------- */
.svc-cases { grid-column-end: span 12; display: grid; gap: var(--space-6); }

@media (min-width: 760px) {
  .svc-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}

/* 案例卡：图是容器，文字绝对定位压在图的下缘。
   上一版把标题放在图片下方，白字落在白底上（对比度≈1:1，不可读），
   这里改为真正的「白字压图」：.svc-case__shot 作为定位上下文，
   压暗层与文字都叠在它内部。 */
.svc-case { position: relative; display: block; }

.svc-case__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: #0B0D10;
}

.svc-case__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 底部压暗，保证白字可读；压暗层与文字同属图片容器，不再各在一处 */
.svc-case__shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background-image: linear-gradient(to top,
    rgba(8, 10, 14, 0.92) 0%,
    rgba(8, 10, 14, 0.55) 48%,
    rgba(8, 10, 14, 0) 100%);
  pointer-events: none;
}

.svc-case__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-1);
}

.svc-case__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  color: #FFFFFF;
}

.svc-case__venue {
  font-size: var(--fs-foot);
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}

/* 出行服务页末尾的承接入口：与问答同宽，不抢 CTA 风头 */
.more-faqs { margin-top: var(--space-6); }

.more-faqs a {
  font-size: var(--fs-small);
  color: var(--accent-deep);
  text-underline-offset: 4px;
}

.more-faqs a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   5. 三个页头共用：去掉英文 kicker，标题与导语自己说话
   -------------------------------------------------------------------------- */
.svc-pagehead { position: relative; overflow: hidden; isolation: isolate; }

/* --------------------------------------------------------------------------
   8. 问答登记簿（/faqs/）：guide 的 40 条问答全在这一页
   --------------------------------------------------------------------------
   题材决定版式：这一页讲的全是「来问清楚一件事」的条目 —— 注册、变更、
   资质、商标、财税、签证、预订、资源对接、会展。答案是拿来和问题上对着读的，
   藏起来等于让人多点一次，所以不做「点开才看到答案」，改成一页摊开的登记簿：

     段   = 一行大标题（按「你要办的事」分，4 段）
     主题 = 一条灰底横条（名称在左、条数在右）
     记录 = 问题（左，放大成主栏）+ 答案（右，正常字号），一条细线隔开

   三个刻意的取舍：
     · 放大问题、压低答案 —— 读者是扫问题找自己那条的人，问题才是主语
     · 不编号 —— 段与主题之间没有先后，编号会撒谎；只报「几条」，那是事实
     · 不做入场动效 —— 40 条全部展开，一起淡入只会拖慢扫读；
       动效只留给交互：悬停/聚焦时答案左缘那条线转主色

   两级标题靠「字号 + 有没有底色」分开：段是 fs-h2 且白底，主题是灰底横条。
   与其余页面仍不重合：企业事务正文是章节式带左栏、出行正文是章节式带配图、
   会务是宽窄交替条带、首页问答是浅底折叠。 */
/* 页头的分隔线画在内层列上，和下面登记簿的装订线左缘对齐 */
.faqreg-head { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }

.faqreg-head .col-12 {
  padding-block-end: var(--space-10);
  border-bottom: 1px solid var(--line-2);
}

/* 登记簿接在页头下面，不需要再吃一整段 section 留白 */
.section.faqreg { padding-block-start: var(--space-8); }

.faqreg-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  text-wrap: balance;
}

.faqreg-lead {
  margin-top: var(--space-4);
  max-width: 42em;
  font-size: var(--fs-h4);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* 段内直达：四段，纯文字链。四段不算多，不值得做成一排胶囊。 */
.faqreg-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.faqreg-jump a {
  display: inline-flex;
  align-items: center;
  /* 这四个入口在手机上是指路牌，点不准就白费 —— 给到 --tap-min 的高度 */
  min-height: var(--tap-min);
  padding-inline-end: var(--space-1);
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

.faqreg-jump a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* 装订线：一条连续细线从页头拉到末条记录。
   页面因此有「一本册子」的框，而不是一串卡片 —— 这是本页唯一的装饰。
   线要落在正文列的左缘（.col-12 的内边距之后），画在 section 上会贴到视口边缘。 */
.faqreg-book {
  border-inline-start: 1px solid var(--line-2);
  padding-inline-start: var(--space-8);
}

/* 段：白底大字标题，和下面的灰底主题条靠「有没有底色」分开层级 */
.faqreg-sec { padding-block: var(--space-16) 0; }

.faqreg-sec:first-of-type { padding-block-start: 0; }

.faqreg-sec:last-of-type { padding-block-end: var(--space-10); }

.faqreg-sec__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-hero);
}

.faqreg-sec__count {
  font-size: var(--fs-foot);
  font-weight: var(--fw-regular);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.faqreg-topic { padding-block: var(--space-8) 0; }

/* 每段的第一个主题紧跟段标题，不用再让一截 */
.faqreg-sec > .faqreg-topic:first-of-type { padding-block-start: 0; }

.faqreg-topic__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background-color: var(--bg-soft);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-heading);
}

/* 条数写 --accent-deep 而不是 --accent：主题条底色是 #F7F8FA，
   主色红在这个底上只有 4.49:1，差 0.01 达不到 AA（正文要 4.5:1）。
   --accent-deep 本来就是令牌里标给小字用的深红，在这条灰底上约 7:1。 */
.faqreg-topic__count {
  margin-inline-start: auto;
  font-weight: var(--fw-regular);
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}

/* 一条记录 = 问题 + 答案。默认展开（见文件头说明），折叠只用来收起读过的。 */
.faqreg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}

/* 灰底横条已经分开了主题，条内第一条不必再画一道线 */
.faqreg-topic > .faqreg-row:first-of-type { border-top: none; }

/* 收起时答案不占位，否则会留下一条空的右栏 */
.faqreg-row:not([open]) { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1080px) {
  .faqreg-row {
    /* 问题略窄、答案略宽：问题多为两行，答案多为三到四行 */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: var(--space-10);
  }
}

/* 问题当主语：比答案高一档，行距收紧，让 12 条并排扫读时不松散。
   窄屏也只比正文大一点点 —— 再大就变成标题，压不住 12 条的节奏。
   min-height：折叠按钮的点击区只有文字那一行（约 28px），
   触控上偏小；给到 --tap-min，手机上不必精准点字。 */
.faqreg-row .faq-item__q {
  align-items: flex-start;
  min-height: var(--tap-min);
  padding-block: 0;
  padding-inline-end: 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.42;
}

/* 展开标记：全局那条用 +/×，可这里 12 行全展开，12 个红色 × 排在一起
   只会被读成「删除」。换成细折角 —— 收起时向右、展开时向下，
   说的是「折叠」，不是「关闭」。 */
.faqreg-row .faq-item__q::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.5em;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform var(--dur-base) var(--ease-out);
}

.faqreg-row[open] .faq-item__q::before { transform: rotate(45deg); }

.faqreg-row .faq-item__a {
  padding-block-start: var(--space-3);
  padding-inline-start: 0;
  font-size: var(--fs-body);
}

@media (min-width: 1080px) {
  .faqreg-row .faq-item__a {
    padding-block-start: 0;
    padding-inline-start: var(--space-8);
    border-inline-start: 1px solid var(--line);
    transition: border-color var(--dur-base) var(--ease-out);
  }
}

/* 悬停或键盘聚焦：答案左缘那条线转主色，视线被引到答案上。
   只改颜色，不新增任何色值。 */
@media (hover: hover) {
  .faqreg-row:hover .faq-item__a { border-inline-start-color: var(--accent); }
}

.faqreg-row:focus-within .faq-item__a { border-inline-start-color: var(--accent); }

@media (max-width: 900px) {
  /* 窄屏留不出装订线的余量，收回内距 */
  .faqreg-book { padding-inline-start: var(--space-5); }
  .faqreg-topic__name { padding-inline: var(--space-4); }
}