/* ============================================================
   ABOUT 页面 sections(2026-07-15:灰底 + 绿字 + 重构对应新 NJK)
   覆盖范围:about-main / brand-statement / our-team / people-behind / the-wayon-method / client-reviews / seen-on-journey / contact / submit-request
   ============================================================ */

/* 1. ABOUT MAIN(2026-07-15 改:白底;title "ABOUT" + 橙线;"ENTER CHINA" 橙色;desc/tagline 绿字大字号) */
.about-main{
  position:relative; width:100%;
  background:#fff; color:var(--color-dark);
  /* 2026-07-24 改:section padding 0 → clamp(48px, 6vw, 96px) var(--page-gutter) ——
     与所有其他 about section (.about-brand / .about-team-intro / .about-people /
     .about-reviews / .about-seen / .about-contact / .about-submit) 完全同款。
     之前 padding:0 是为了让 .about-main-img-frame 贴 viewport 右边,但实际 frame 是
     absolute 相对 .about-main 定位,section 自身 padding 不影响 frame 位置
     (frame 的 right:0 / top:0 是 viewport 坐标而非 content area 坐标)。
     改后左对齐公式与所有 about section 统一,实测 1920 下 eyebrow x=220,
     与 .about-brand-title x=220 严格同 x 轴;1440 / 768 同理。
     2026-07-24 再改:padding-top 保持原样;padding-bottom 单独缩到 clamp(8px, 1vw, 16px) ——
     用户报"section1 和 section2 之间间距过大"。
     main.pb 96 + brand.pt 96 = 192px 间距对 hero 后的过渡过松。
     只改 main.pb 缩到 ~12,brand.pt 保持 96(给 brand 标题留呼吸),
     总间距 192 → ~108,缩 84px(44%),只影响 main↔brand,其他 section 间距不动。 */
  padding:clamp(48px, 6vw, 96px) var(--page-gutter) 0;
  box-sizing:border-box;
  aspect-ratio:auto;
  min-height:0;
  max-height:none; height:auto; overflow:visible;
}
.about-main-inner{
  display:grid;
  /* 2026-07-24 改:grid-template-columns 1fr 1fr(右列宽度受 max-width 1480px 限制) → minmax(0, 1fr) minmax(0, 1fr)
     左 1fr 放 ENTER CHINA title,右 1fr 放 图片 + 文字。
     max-width 仍然存在,但通过 .about-main-img-frame 突破 max-width 限制:
       .about-main-inner max-width 1480px,左右 margin:auto
       .about-main-media 在右列里,自己的 img-frame 宽度 = viewport 50vw + margin-left 自动,
       这样 img-frame 一路贴到 viewport 右边缘,不被 inner max-width 限制 */
  /* 2026-07-24 再改:margin:0 auto → margin:0,让 inner 左对齐 viewport,这样:
       - .about-main-text 左边缘 = var(--page-gutter)(与其他 section 一致)
       - .about-main-media(右列) 起点靠左,但 img-frame 改用 absolute 定位
       - max-width 仍 1480px,在 viewport > 1480 时 inner 不会无限向右扩展 */
  /* 2026-07-24 再改:padding-left 从 var(--page-gutter) → calc((100vw - max(1480px, 77.083vw)) / 2 + var(--page-gutter))
     让左文本起点在 viewport > 1480 时偏移到 (vw-1480)/2 + gutter 处,
     与 .about-brand / .about-team-intro / .about-people / .about-reviews / .about-contact 等
     margin:auto 居中 section 严格同 x 轴(实测 1920 下从 144 → 220)
     2026-07-24 再改:padding-left 偏移会让 inner 自身 width 受 box-sizing 影响,
     导致 eyebrow bbox.x 变成 -364(被截到 0);改用 margin-left 偏移 inner 整体位置 —
     inner margin-left:(vw-1480)/2,inner width:max(1480,77.083vw),
     inner padding 仍 var(--page-gutter) —— 视觉上 inner 从 (vw-1480)/2 处开始,
     eyebrow x = (vw-1480)/2 + 144 = 220 @1920,与 .about-brand x=220 一致 */
  grid-template-columns:1fr 1.6fr;
  gap:clamp(24px, 4vw, 80px);
  align-items:start;
  max-width:max(1480px, 77.083vw);
  /* 2026-07-24 再改:margin-left calc(...) 偏移在 vw<1480 时退化为负值,
     与 .about-brand 等 margin:auto section 在 1440 等视口下 x 不一致(88 vs 108)。
     改回 margin:0 auto —— 与所有其他 about section 完全相同的居中公式;
     视觉上左列起点 = (vw - max(1480,77.083vw))/2 + var(--page-gutter),
     1920 下 = 220,与 .about-brand x=220 严格同 x 轴;
     1440 下 = 108,与 .about-brand x=108 严格同 x 轴;
     768 下 = 18,与 .about-brand x=18 严格同 x 轴。
     图片仍然能贴 viewport 右(因 .about-main-img-frame 是 absolute 相对 .about-main section,
     不依赖 inner 的位置)。
     2026-07-24 再改:padding-left var(--page-gutter) 会让 eyebrow x = inner-x + 144,
     在 1920 下 = 364(实测),与 brand x=220 不一致。
     去掉 padding-left/padding-right,只保留 padding-top 控上下间距;
     左文本对齐由 .about-main-text 自身 padding-left:0 + .about-main 的 section padding-left var(--page-gutter) 控制。
     实际让 .about-main section 也用 var(--page-gutter)(与所有其他 about section 完全一致)。 */
  margin:0 auto;
  min-height:inherit;
  padding:0;
}
.about-main-text{
  min-width:0;
  /* 2026-07-24 改:padding-top 从 clamp(60px, 4vw, 88px) → 0
     section 整体 padding 归零,header 留白改由 .about-main-inner padding-top 提供,
     左右两列共享同一 padding-top,布局整齐 */
  /* 2026-07-24 再改:padding 0 var(--page-gutter) 0 var(--page-gutter) → 0
     gutter 从 inner 提供,这里冗余 */
  padding:0;
  display:flex; flex-direction:column; justify-content:flex-start;
}
@media (max-width:768px){
  .about-main-inner{ grid-template-columns:1fr; gap:24px; padding-top:clamp(24px, 4vw, 48px); }
  .about-main-text{ padding:0; }
  .about-main-title{font-size:clamp(1.75rem, 8.5vw, 2.25rem)}
  .about-main{ min-height:0; }
}
/* 旧的圈 pill 隐藏 */
.about-main-pill{ display:none; }
.about-main-eyebrow{
  font-family:var(--font-display);
  font-size:max(1.6rem, 2.6vw);
  font-weight:800;
  color:var(--color-accent-mint);
  text-transform:uppercase;
  letter-spacing:0.005em;
  margin:0 0 clamp(18px, 2vw, 32px);
  position:relative;
  display:inline-block;
}
.about-main-eyebrow::after{
  content:"";
  display:block;
  width:clamp(80px, 6vw, 128px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);     /* 橙线 */
  margin-top:clamp(6px, 0.8vw, 10px);
}
.about-main-title{
  font-family:var(--font-display);
  font-size:max(2rem, 3.2vw);
  font-weight:950;
  -webkit-text-stroke:0.35px currentColor;
  /* 2026-07-24 保留:三行布局,加大的行间距 */
  line-height:1.45;
  margin:clamp(18px, 2.4vw, 42px) 0 0;
  color:var(--color-brand);         /* 橙色 */
  text-transform:uppercase;
  letter-spacing:0.005em;
}
.about-main-title .title-line{ display:block; white-space:nowrap; }
/* 2026-07-24 改:desc + tagline 移至图片下方 ——
     颜色仍为绿字,字号保持 max(1.2rem, 1.5vw)。
     因为现在两者在右列内自然堆叠(在 img-frame 之后),不再需要 absolute/relative z-index 技巧
     2026-07-24 再改:margin-top 从 clamp(24px, 2.6vw, 40px) → 0,
     让 desc 紧邻 .about-main-media 的 padding-top 底部(即图片底部)无缝隙 */
.about-main-desc{
  font-family:var(--font-serif);
  font-size:max(1.2rem, 1.5vw);
  font-weight:500;
  color:var(--color-accent-mint);
  line-height:1.55;
  margin:0 0 clamp(16px, 1.8vw, 28px);
  max-width:62ch;
}
.about-main-tagline{
  font-family:var(--font-display);
  font-size:max(1.2rem, 1.5vw);
  font-weight:500;
  color:var(--color-accent-mint);
  font-style:normal;
  margin:0;
  /* 2026-07-24 改:删 padding-bottom clamp(48, 6vw, 96) ——
     之前加底白是为了让 "Beyond arrival..." 与下方 section 之间留呼吸,
     但叠加 .about-main.pb 96 + .about-brand.pt 96 后总间距 ~192px 过大。
     删后:tagline 文本紧接 main.pb 96 + brand.pt 96 = 192px(对比原来 96+96+96=288,
     节省 96px ≈ 1/3),视觉上 main → brand 间距从 384 减到 288 */
}
.about-main-media{
  min-width:0;
  /* 2026-07-24 改:删除 position:relative ——
     之前的目的是为 absolute 图片帧做包含块。
     现在图片帧仍然是 absolute,但其包含块需要是 .about-main(整个 section),
     才能让 right:0 + left:calc(...) 正确铺到 viewport 右边。
     .about-main 已经是 position:relative,所以只要 .about-main-media 不再
     position,absolute 后代就会找上层的 .about-main 当包含块。 */
  display:flex; flex-direction:column;
  gap:0;
  /* 2026-07-24 改:右列容器不再 padding-top 也无 min-height ——
     图框 + 文字都由 viewport 50vw 宽度控制(从 viewport 中线到右边)。 */
  padding:0;
  min-height:0;
  /* 2026-07-24 改:overflow:visible —— 允许图片框突破 .about-main-inner 的 max-width 1480px 边界 */
  overflow:visible;
  /* 2026-07-24 再改:margin-left 负值让右列向左溢出 ——
     用户报"people-led 内容也需要往左延伸一定空间",让 .about-main-media(包含 desc + tagline)
     与 .about-main-img-frame 同步向左移,与 img-frame left 的 -0.6*gap 偏移保持一致 */
  margin-left:0;
}
@media (max-width:768px){
  .about-main-media{margin-top:0; height:auto; margin-right:0}
}
/* 2026-07-24 改:加 .about-main-img-frame 容器 ——
     让图片"顶部贴 viewport 顶部、右边贴 viewport 右边、左边缘对齐 .about-main-text 左缘"
     - 容器 absolute 相对 .about-main(section)定位
     - top:0 = viewport 顶部
     - right:0 = viewport 右边缘
     - left = .about-main-text 左缘(相对 .about-main 的 padding edge)——
       .about-main 是 box-sizing:border-box + padding-left:var(--page-gutter),padding edge = section 左;
       .about-main-text 在 padding edge 之内的 content area 起点,content area 起点距 padding edge = (100vw-max(1480,77.083vw))/2
       (因为 inner max-width:max(1480,77.083vw) + margin:auto 居中,inner 在 content area 内居中偏移);
       所以 img-frame left 应该是 (vw-1480)/2,而不是 (vw-1480)/2 + page-gutter
       1920: (1920-1480)/2 = 220,与 text x=220 严格对齐
       1440: 0(因为 max(1480,77.083vw)=1480 > vw=1440,inner 退化为 vw 宽,居中偏移 = 0)
       768:  0(同理)
     - 高度 clamp(360px, 40vw, 600px)(2026-07-24 改:原 clamp(290,33vw,500) → 调高一档,
       用户报"图片高度调高一点",1920 下从 500 → 600(+20%);1440 下 576 vs 475(+22%))
     - overflow:hidden 让 object-fit:cover 生效 */
.about-main-img-frame{
  position:absolute;
  top:0;
  right:0;
  /* 2026-07-24 改:left 重写为"与 .about-main-media(grid 第二格)同 x 轴"——
     让 img-frame 左缘 ≈ .about-main-desc / .about-main-tagline / .about-brand-desc 的左缘。
     img-frame 是 absolute 相对 .about-main section(因为 section position:relative),
     section box-sizing:border-box,viewport 边缘就是定位参考点;section padding-left
     不影响 absolute 子元素定位,只需要算 main-media 的 x(viewport 坐标)即可。
     main-media.x = page-gutter + inner.margin-left + (inner.w - gap) / 2.6 + gap
       = page-gutter + max(0, (100vw - 2*page-gutter - inner.w) / 2)
         + (inner.w - clamp(24, 4vw, 80)) / 2.6
         + clamp(24, 4vw, 80)
       其中 inner.w = min(100vw - 2*page-gutter, max(1480, 77.083vw))。
     实测 1920 → 829;1440 → 608;768 → 318(均与 .about-brand-desc.x 精确一致)。 */
  left:calc(var(--page-gutter) + max(0px, (100vw - 2 * var(--page-gutter) - min(100vw - 2 * var(--page-gutter), max(1480px, 77.083vw))) / 2) + (min(100vw - 2 * var(--page-gutter), max(1480px, 77.083vw)) - clamp(24px, 4vw, 80px)) / 2.6 + clamp(24px, 4vw, 80px));
  height:clamp(320px, 36vw, 520px);
  min-height:clamp(320px, 36vw, 520px);
  overflow:hidden;
  background:#ECECE6;
  z-index:0;
}
/* 2026-07-24 改:.about-main-media 加 padding-top = img-frame 高度,
     把 desc + tagline 推到图片下方(因为 img-frame 改 absolute 后不占流)
     2026-07-24 再改:padding-top = img-frame 高度 - .about-main-inner 的 padding-top,
     因为 media 起点在 inner content 顶部(即有 clamp(48px, 6vw, 96px) 的 offset),
     不减的话 desc 会比图片底部低 clamp(48px, 6vw, 96px) ≈ 96px,
     出现"图片底部和文本之间有空一截"的现象
     2026-08-16:图片与首段间距收紧为 clamp(4px, 0.5vw, 8px),
     让 People-led 文案上移并紧邻图片底部。 */
.about-main-media{
  padding-top:calc(clamp(320px, 36vw, 520px) - clamp(48px, 6vw, 96px) + clamp(4px, 0.5vw, 8px));
}
@media (min-width:1921px){
  body .about-main-media{
    padding-top:calc(27.083vw + clamp(4px, 0.5vw, 8px));
  }
}
.about-main-img{
  /* 2026-07-24 改:不再是 absolute;改回普通 block,撑满 img-frame */
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  min-height:0;
  object-fit:cover;
  object-position:right center;
  display:block;
  z-index:0;
}
@media (max-width:768px){
  .about-main-img-frame{
    left:0;
    width:100vw;
    height:auto;
    min-height:0;
    aspect-ratio:4/3;
  }
  .about-main-media{ padding-top:calc(75vw - clamp(24px, 4vw, 48px)); }
}
.about-main-media-caption{
  font-family:var(--font-serif);
  font-size:max(0.85rem, 1vw);
  color:var(--color-accent-mint);
  line-height:1.55;
  margin:0;
}

/* 2. ABOUT BRAND STATEMENT(灰底;WAYON 单词放大;绿字) */
.about-brand{
  --about-brand-rule-shift:clamp(16px, 1.4vw, 26px);
  position:relative; width:100%;
  background:#fff; color:var(--color-accent-mint);
  padding:clamp(48px, 6vw, 96px) var(--page-gutter);
  box-sizing:border-box;
}
/* 上下细线保留与页面一致的左右边距;上线上移改为内移,下线则越过 section 底边继续下移。 */
.about-brand::before,
.about-brand::after{
  content:"";
  position:absolute;
  z-index:1;
  left:var(--page-gutter);
  right:var(--page-gutter);
  height:2px;
  background:var(--color-accent-mint);
  pointer-events:none;
}
.about-brand::before{ top:var(--about-brand-rule-shift); }
.about-brand::after{ bottom:calc(-1 * var(--about-brand-rule-shift)); }
/* 上边线左端箭头:绿色粗线,方向从右上指向左下。 */
.about-brand-top-arrow{
  position:absolute;
  z-index:2;
  left:var(--page-gutter);
  top:var(--about-brand-rule-shift);
  width:clamp(60px, 5.2vw, 100px);
  height:auto;
  overflow:visible;
  transform:translateY(calc(-100% - clamp(14px, 1vw, 22px)));
  fill:none;
  stroke:var(--color-accent-mint);
  stroke-width:clamp(5px, 0.36vw, 7px);
  stroke-linecap:square;
  stroke-linejoin:miter;
  pointer-events:none;
}
.about-brand-inner{
  display:grid; grid-template-columns:1fr 1.6fr;
  gap:clamp(24px, 4vw, 80px); align-items:start;
  max-width:max(1480px, 77.083vw); margin:0 auto;
}
.about-brand-head{ display:flex; flex-direction:column; gap:clamp(8px, 1vw, 14px); }
.about-brand-title{
  font-family:var(--font-display);
  font-size:max(1.6rem, 2.4vw);
  font-weight:800; color:var(--color-accent-mint);
  text-transform:uppercase; margin:0; line-height:1.05; letter-spacing:0.005em;
}
.about-brand-title b,
.about-brand-title strong{ font-size:1.4em; font-weight:900; color:var(--color-brand); }
.about-brand-title em{ font-style:normal; font-size:1.4em; font-weight:900; color:var(--color-brand); }
.about-brand-divider{
  width:clamp(80px, 6vw, 128px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
}
.about-brand-body{ min-width:0; display:flex; flex-direction:column; gap:clamp(12px, 1.6vw, 22px); }
.about-brand-desc{
  font-family:var(--font-serif);
  font-size:max(0.95rem, 1.1vw);
  color:var(--color-accent-mint); line-height:1.7; margin:0; font-weight:400;
}
.about-brand-quote{
  font-family:var(--font-display);
  font-size:max(1.05rem, 1.3vw);
  color:var(--color-accent-mint); font-weight:400;   /* 2026-07-15 改:不加粗 */
  line-height:1.5;
  white-space:pre-line; margin:0;
}
@media (max-width:768px){
  .about-brand-inner{ grid-template-columns:1fr; gap:24px; }
}

/* 3. ABOUT TEAM INTRO(灰底;WAYON 单词放大;绿字) */
.about-team-intro{
  position:relative; width:100%;
  background:#fff; color:var(--color-accent-mint);
  padding:clamp(32px, 4vw, 64px) var(--page-gutter) clamp(48px, 6vw, 96px);
  box-sizing:border-box;
}
.about-team-intro-inner{
  display:grid; grid-template-columns:1fr 1.6fr;
  gap:clamp(24px, 4vw, 80px); align-items:start;
  max-width:max(1480px, 77.083vw); margin:0 auto;
}
.about-team-intro-head{ display:flex; flex-direction:column; gap:clamp(8px, 1vw, 14px); }
.about-team-intro-title{
  font-family:var(--font-display);
  font-size:max(1.6rem, 2.4vw);
  font-weight:800; color:var(--color-accent-mint);
  text-transform:none; margin:0; line-height:1.05;
}
.about-team-intro-title b,
.about-team-intro-title strong{ font-size:1.4em; font-weight:900; color:var(--color-brand); }
.about-team-intro-title em{ font-style:normal; font-size:1.4em; font-weight:900; color:var(--color-brand); }
.about-team-intro-divider{
  width:clamp(80px, 6vw, 128px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
}
.about-team-intro-body{ min-width:0; display:flex; flex-direction:column; gap:clamp(12px, 1.6vw, 22px); }
.about-team-intro-desc{
  font-family:var(--font-serif);
  font-size:max(0.95rem, 1.1vw);
  color:var(--color-accent-mint); line-height:1.7; margin:0;
}
@media (max-width:768px){
  .about-team-intro-inner{ grid-template-columns:1fr; gap:24px; }
}

/* 4. ABOUT PEOPLE BEHIND(灰底;图文左右两栏;图左→图右→图左交替;绿字) */
.about-people{
  position:relative; width:100%;
  background:#fff; color:var(--color-accent-mint);
  padding:clamp(48px, 6vw, 96px) var(--page-gutter);
}
.about-people-inner{ width:100%; max-width:max(1480px, 77.083vw); margin:0 auto; padding:0; }
.about-people-header{ margin-bottom:clamp(44px, 5.5vw, 88px); text-align:left; }
.about-people-title{
  font-family:var(--font-display); font-weight:800;
  color:var(--color-accent-mint);
  font-size:max(1.6rem, 2.6vw);
  margin:0 0 clamp(10px, 1vw, 14px);
  letter-spacing:0.005em; text-align:left;
}
.about-people-divider{
  width:clamp(80px, 6vw, 128px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
  margin:0;     /* 左对齐 */
}
/* 2026-09-06 改:横向拉宽给 bio 描述区更多空间,容器从 1180px 提到 1440px */
.about-people-list{ display:flex; flex-direction:column; gap:clamp(24px, 2.6vw, 48px); max-width:1440px; width:100%; margin-left:auto; margin-right:auto; }
.about-person{
  display:grid;
  /* 2026-09-06 改:文字列略微放宽,人物图向两侧错开 */
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr);
  column-gap:clamp(16px, 2vw, 32px);
  align-items:center;
}
.about-person--right{ grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr); }
.about-person-portrait{
  position:relative;
  width:min(100%, 380px);
  max-width:100%;
  aspect-ratio:380/540; background:#fff; overflow:hidden;
  border-radius:0;
  order:1;
}
.about-person-body{
  order:2;
  min-width:0;
  display:flex; flex-direction:column;
  gap:clamp(4px, 0.5vw, 8px);
  text-align:left;
}
/* 人物图与正文依靠共享网格自然对齐，不再用 viewport 位移补偿。 */
.about-person--left .about-person-portrait{ justify-self:end; left:clamp(-32px, -2vw, -16px); }
.about-person--right .about-person-portrait{ order:2; justify-self:start; left:clamp(16px, 2vw, 32px); }
.about-person--left .about-person-body{ justify-self:end; }
.about-person--right .about-person-body{ justify-self:start; }
.about-person--right .about-person-body{ order:1; }
.about-person-portrait-placeholder{ display:block; width:100%; height:100%; background:#fff; }
/* 2026-09-06 改:所有人物图统一裁切为 380 × 540 的肖像比例。 */
.about-person-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; background:#fff; }
.about-person-img--rotate-right{
  position:absolute;
  left:50%;
  top:50%;
  width:133.334%;
  height:auto;
  max-width:none;
  object-fit:contain;
  transform:translate(-50%, -50%) rotate(90deg);
  transform-origin:center;
}
.about-person-name{
  font-family:var(--font-display); font-weight:700;
  color:var(--color-accent-mint);
  font-size:max(1.425rem, 1.65vw);
  margin:0; line-height:1.2;
}
/* 2026-07-15 改:role + bio 也用主题绿字(用户要求"people beyond wayon也用主题绿色的文本") */
.about-person-role{
  font-family:var(--font-display); font-weight:500;
  color:var(--color-accent-mint);
  font-size:max(1.425rem, 1.65vw);
  margin:0 0 clamp(4px, 0.6vw, 8px); line-height:1.3;
}
/* 2026-09-06 改:bio 容器本身不限制宽度(由网格 1fr 控制),多 <p> 之间保留 0.9em 段距 */
.about-person-bio{
  font-family:var(--font-serif);
  color:var(--color-accent-mint);
  font-size:max(0.95rem, 1.1vw);
  line-height:1.7; margin:0; font-weight:400;
  display:flex; flex-direction:column; gap:0.9em;
  max-width:none;
}
.about-person-bio[data-bio-lang="zh"]{ display:none; }
body.lang-zh .about-person-bio[data-bio-lang="en"]{ display:none; }
body.lang-zh .about-person-bio[data-bio-lang="zh"]{ display:flex; }
.about-person-bio p{ margin:0; }
@media (max-width:768px){
  .about-people-list{ gap:clamp(16px, 4vw, 28px); }
  .about-person,
  .about-person--right{ grid-template-columns:1fr; gap:18px; }
  .about-person-portrait,
  .about-person--left .about-person-portrait,
  .about-person--right .about-person-portrait{
    order:1;
    justify-self:start;
    width:min(100%, 320px);
  }
  .about-person-body,
  .about-person--left .about-person-body,
  .about-person--right .about-person-body{ order:2; }
}

/* 5. ABOUT THE WAYON METHOD(绿底;只展示 method 图片) */
.about-method{
  position:relative; width:100%;
  background:var(--color-accent-mint);
  color:#0F1B16;
  padding:0;
  box-sizing:border-box;
}
.about-method-inner{
  width:100%; max-width:none; margin:0;
  display:flex;
  justify-content:center;
}
.about-method-image{
  width:100%;
  height:auto;
  display:block;
}

/* 6. ABOUT CLIENT REVIEWS(灰底;绿字;卡片保留评论人图片位置) */
.about-reviews{
  position:relative; width:100%;
  background:#fff; color:var(--color-accent-mint);
  padding:clamp(48px, 6vw, 96px) var(--page-gutter);
  box-sizing:border-box;
}
.about-reviews-inner{ width:100%; max-width:max(1480px, 77.083vw); margin:0 auto; }
.about-reviews-title{
  font-family:var(--font-display); font-weight:800;
  color:var(--color-accent-mint);
  font-size:max(1.6rem, 2.6vw);
  margin:0 0 clamp(8px, 1vw, 14px);
  letter-spacing:0.005em;
}
.about-reviews-divider{
  width:clamp(80px, 6vw, 128px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
  margin-bottom:clamp(20px, 2.4vw, 36px);
}
.about-reviews-grid{
  display:grid; gap:clamp(20px, 2.4vw, 36px);
  grid-template-columns:1fr;
}
@media (min-width:960px){
  .about-reviews-grid{ grid-template-columns:repeat(2, 1fr); }
}
.about-review{
  display:grid;
  /* 2026-07-24 再改:头像列宽 clamp(11em, 13.5vw, 15em) → clamp(9em, 11vw, 12em) ——
     用户最新要求"保持缩放比例的情况下调整小一点" —— 保留 em 缩放公式,
     1920 视口从 240px(15em)缩到 192px(12em),整体缩小 ~20%;
     1280 视口从 176px 缩到 144px(9em min);
     头像:文本比例仍稳定在 9.5-12.6 倍 */
  grid-template-columns:clamp(9em, 11vw, 12em) 1fr;
  gap:clamp(20px, 2.8vw, 36px);
  align-items:start;
  padding:clamp(20px, 2.4vw, 32px);
  background:#fff;
  border:2px solid var(--color-accent-mint);
  border-radius:16px;
}
.about-review-portrait{
  width:100%;
  aspect-ratio:1;
  border:1px solid rgba(17, 91, 70, 0.45);
  background:#ECECE6;
  overflow:hidden;
}
.about-review-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.about-review-portrait-placeholder{
  display:block;
  width:100%;
  height:100%;
  background:
    linear-gradient(135deg, transparent 49%, rgba(17, 91, 70, 0.28) 50%, transparent 51%),
    linear-gradient(45deg, transparent 49%, rgba(17, 91, 70, 0.28) 50%, transparent 51%),
    #f6f4ed;
}
.about-review-body{ display:flex; flex-direction:column; gap:clamp(10px, 1.2vw, 16px); }
.about-review-head{ display:flex; flex-direction:column; gap:4px; }
.about-review-tag{
  font-family:var(--font-display); font-weight:700;
  color:var(--color-accent-mint); font-size:max(0.85rem, 1vw);
  letter-spacing:0.04em;
}
.about-review-quote{
  font-family:var(--font-serif);
  color:var(--color-accent-mint); font-weight:400;
  font-size:max(0.95rem, 1.1vw);
  line-height:1.65; margin:0;
}
.about-review-author{
  font-family:var(--font-display); font-weight:500;
  color:var(--color-accent-mint);
  font-size:max(0.85rem, 1vw);
  margin:0;
  align-self:flex-end;
}
@media (max-width:560px){
  .about-review{ grid-template-columns:72px 1fr; }
}

/* 7. ABOUT SEEN ON THE JOURNEY(白底;绿字)
   2026-09-05 重做:前 5 张(slot 1-5)海报 3:5 竖构图一行,
   "Explore More" 按钮展开后 3 张(slot 6-8)5:3 横构图一行。
   卡片统一为链接跳转:海报图 + 居中播放按钮,整卡 <a target="_blank">。
   注意:行容器 --landscape/--portrait 只表示列数布局(5 列/3 列),
   卡片宽高比由 .about-seen-tile 默认 5:3 与 --portrait 3:5 控制。 */
.about-seen{
  position:relative; width:100%;
  background:#fff; color:var(--color-accent-mint);
  padding:clamp(48px, 6vw, 96px) var(--page-gutter);
  box-sizing:border-box;
}
.about-seen-inner{
  width:100%; max-width:max(1480px, 77.083vw); margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(28px, 4vw, 56px);
}
.about-seen-header{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:clamp(8px, 1vw, 14px);
}
.about-seen-title{
  font-family:var(--font-display); font-weight:800;
  color:var(--color-accent-mint);
  font-size:max(1.6rem, 2.6vw);
  margin:0; letter-spacing:0.005em;
}
.about-seen-divider{
  width:clamp(80px, 6vw, 128px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
}
.about-seen-lead{
  font-family:var(--font-serif);
  /* 2026-07-24 改:color 从 var(--color-text)(深色) → var(--color-accent-mint)(主题绿) ——
     用户要求"Seen on the Journey 的文本用主题绿色" */
  color:var(--color-accent-mint);
  font-size:max(0.85rem, 1vw);
  line-height:1.6; margin:0; max-width:62ch; text-align:center;
}
/* 行容器:与页面其它 section 同宽(吃满内容框,左右留 --page-gutter 侧边距),
   随视口等比缩放 */
.about-seen-rows{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(24px, 3vw, 44px);
}
.about-seen-row{
  display:grid;
  width:100%;
  gap:clamp(16px, 1.8vw, 32px);
}
/* slot 1-5 一行 5 列(卡片 3:5 竖版,见 .about-seen-tile--portrait) */
.about-seen-row--landscape{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
/* slot 6-8 一行 3 列(卡片 5:3 横版,.about-seen-tile 默认比例) */
.about-seen-row--portrait{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.about-seen-row[hidden]{ display:none; }
.about-seen-row--portrait.is-open{ animation:about-seen-reveal .55s ease both; }
@keyframes about-seen-reveal{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.about-seen-tile{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:5/3;         /* 默认横构图 */
  background:#1a1a1a; overflow:hidden; cursor:pointer;
  min-height:0;
  text-decoration:none;
}
.about-seen-tile--portrait{ aspect-ratio:3/5; }
.about-seen-tile--link{ display:block; }
.about-seen-tile--no-link{ cursor:default; }
.about-seen-tile--no-link:hover .about-seen-tile-photo{ transform:none; }
.about-seen-tile-photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .55s ease;
}
.about-seen-tile:hover .about-seen-tile-photo{ transform:scale(1.05) }
.about-seen-tile-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(40px, 4.5vw, 68px); height:clamp(40px, 4.5vw, 68px);
  border:0; background:transparent; cursor:pointer; z-index:3;
  transition:transform .25s ease; color:#0F1B16;
}
.about-seen-tile-play svg{ width:100%; height:100%; display:block; }
.about-seen-tile-play:hover{ transform:translate(-50%,-50%) scale(1.12) }
.about-seen-cta{
  display:inline-block;
  appearance:none; -webkit-appearance:none;
  background:transparent;
  font-family:var(--font-display); font-weight:700;
  color:var(--color-accent-mint);
  font-size:max(1rem, 1.4vw);
  line-height:1.4;
  text-decoration:none; letter-spacing:0.06em;
  border:0.18vw solid var(--color-accent-mint);
  border-radius:999px;
  padding:clamp(10px, 1vw, 14px) clamp(28px, 3vw, 44px);
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.about-seen-cta:hover{ background:var(--color-accent-mint); color:#0F1B16; }
@media (max-width:1024px){
  .about-seen-row--landscape{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .about-seen-row--portrait{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .about-seen-row--landscape{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .about-seen-row--portrait{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .about-seen-row--landscape{ grid-template-columns:1fr; }
}

/* 8. ABOUT CONTACT WAYON(2026-07-15 改:灰底;绿字;橙线;顶部 title+lead 左右布局;左侧无边框;地图底部对齐左列底部) */
.about-contact{
  position:relative; width:100%;
  background:#ECECE6; color:var(--color-accent-mint);
  padding:clamp(48px, 6vw, 96px) var(--page-gutter);
  box-sizing:border-box;
}
.about-contact-inner{ width:100%; max-width:max(1480px, 77.083vw); margin:0 auto; }
.about-contact-head{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(28px, 4vw, 60px);
  align-items:start;
  margin-bottom:clamp(28px, 4vw, 56px);
}
.about-contact-title{
  font-family:var(--font-display);
  font-weight:800;
  color:var(--color-accent-mint);
  font-size:max(1.6rem, 2.6vw);
  margin:0;
  letter-spacing:0.005em;
  line-height:1.1;
}
.about-contact-title-divider{
  width:clamp(80px, 6vw, 128px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
  margin-top:clamp(8px, 1vw, 14px);
}
.about-contact-head-right{
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 0.8vw, 12px);
  padding-top:clamp(4px, 0.4vw, 8px);
}
.about-contact-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(8px, 0.9vw, 14px);
}
.about-contact-logo{
  display:block;
  width:clamp(220px, 20vw, 360px);
  max-width:100%;
  height:auto;
  margin:0 auto;
  align-self:center;
}
.about-contact-tagline{
  margin:0;
  color:var(--color-accent-mint);
  font-family:var(--font-display);
  font-size:max(1rem, 1.25vw);
  font-weight:600;
  line-height:1.35;
  font-style:normal;
}
.about-contact-brand-divider{
  width:100%;
  height:2px;
  background:var(--color-accent-mint);
  margin-top:clamp(2px, 0.3vw, 6px);
}
.about-contact-intro{
  display:flex;
  flex-direction:column;
  gap:clamp(8px, 0.8vw, 12px);
}
.about-contact-lead{
  font-family:var(--font-display);
  color:var(--color-accent-mint); font-weight:600;
  font-size:max(1.05rem, 1.3vw);
  line-height:1.4; margin:0; max-width:80ch;
}
.about-contact-sub{
  font-family:var(--font-serif);
  color:var(--color-accent-mint); font-weight:400;
  font-size:max(0.95rem, 1.1vw);
  line-height:1.6; margin:0; max-width:80ch;
}
.about-contact-grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:0;
  align-items:stretch;
}
.about-contact-left{
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 1.4vw, 20px);
  padding:0 clamp(28px, 4vw, 60px) 0 0;
  border:none;
  background:transparent;
}
.about-contact-right{
  display:flex;
  flex-direction:column;
  gap:clamp(12px, 1.4vw, 22px);
  flex:1;
  padding-left:clamp(28px, 4vw, 60px);
  border-left:2px solid var(--color-accent-mint);
}
@media (max-width:768px){
  .about-contact-head{grid-template-columns:1fr;gap:18px;margin-bottom:28px}
  .about-contact-grid{grid-template-columns:1fr;gap:28px}
  .about-contact-left{padding-right:0}
  .about-contact-right{
    padding:28px 0 0;
    border-left:0;
    border-top:2px solid var(--color-accent-mint);
  }
}
/* 2026-07-15 改:加 brand statement 在左侧 */
.about-contact-statement{
  font-family:var(--font-serif);
  color:var(--color-accent-mint);
  font-size:max(0.95rem, 1.1vw);
  line-height:1.7; font-weight:400;
  margin:0 0 clamp(6px, 0.6vw, 10px);
  max-width:62ch;
}
.about-contact-info{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:clamp(6px, 0.6vw, 10px);
  font-family:var(--font-display); font-weight:400;
  color:var(--color-accent-mint); font-size:max(0.9rem, 1.05vw); line-height:1.5;
}
.about-contact-info strong{ color:var(--color-accent-mint); font-weight:700; margin-right:0.4vw; }
.about-contact-info a{ color:var(--color-accent-mint); text-decoration:none; border-bottom:0.06vw solid rgba(54,109,86,0.4); }
.about-contact-info a:hover{ color:var(--color-accent-mint); border-bottom-color:var(--color-accent-mint); }
/* 2026-07-15 改:复用 footer-qr-row,4 张图横排
   2026-07-22 改:加 justify-content:space-between —— 用户要求"4 个二维码平均放在左侧内容,而不是左对齐依次放";
   4 个 item 之间等距分布,首尾贴 container 左右边界 */
.about-contact-social{ display:flex; flex-wrap:wrap; gap:clamp(12px, 1.4vw, 22px); align-items:flex-start; justify-content:space-between; margin-top:clamp(10px, 1.2vw, 16px); }
.about-contact-social-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; color:var(--color-accent-mint);
  font-family:var(--font-display); font-size:max(0.7rem, 0.8vw); font-weight:500;
}
.about-contact-social-label{ color:var(--color-accent-mint); }
.about-contact-social-item img{
  width:clamp(56px, 5vw, 72px); height:clamp(56px, 5vw, 72px);
  object-fit:cover; border-radius:4px; background:#fff;
}
.about-contact-social-item .social-qr-img{
  object-fit:contain;
}
.about-contact-h3{
  font-family:var(--font-display); font-weight:700;
  color:var(--color-accent-mint);
  font-size:max(1.4rem, 2vw);
  margin:0; line-height:1.2;
}
.about-contact-h3-sub{
  font-family:var(--font-display); color:var(--color-accent-mint); font-weight:400;
  font-size:max(0.85rem, 1vw); margin:0;
}
/* 2026-07-15 改:地图高度自适应(底部对齐左列内容),用 flex:1 撑满 */
.about-contact-map{ position:relative; width:100%; flex:1; min-height:380px; background:#1B2A21; overflow:hidden; }
.about-contact-map iframe{ position:absolute; inset:0; width:100%; height:100%; display:block; border:0; }
.about-contact-map-card{
  position:absolute; right:clamp(12px, 1.6vw, 24px); bottom:clamp(12px, 1.6vw, 24px);
  background:#fff; padding:clamp(14px, 1.6vw, 22px);
  border-radius:2px; min-width:clamp(180px, 18vw, 240px);
  box-shadow:0 4px 18px rgba(0,0,0,0.18);
  display:flex; flex-direction:column; gap:clamp(4px, 0.5vw, 8px);
}
.about-contact-map-card-title{
  font-family:var(--font-display); font-weight:700;
  color:var(--color-accent-mint);
  font-size:max(0.95rem, 1.1vw);
}
.about-contact-map-card-city{
  font-family:var(--font-display); color:var(--color-accent-mint);
  font-size:max(0.8rem, 0.95vw);
}
.about-contact-map-card-divider{
  width:clamp(20px, 2vw, 36px);
  height:max(2px, 0.16vw);
  /* 2026-07-15 改:橙→绿(用户要求所有分割线改绿) */
  background:var(--color-accent-mint);
  margin:clamp(4px, 0.5vw, 6px) 0;
}
.about-contact-map-card-booking{
  font-family:var(--font-display); color:var(--color-accent-mint);
  font-size:max(0.7rem, 0.82vw);
}

/* 9. ABOUT SUBMIT A REQUEST(白底;绿字;表单) */
.about-submit{
  position:relative; width:100%;
  background:#fff; color:var(--color-accent-mint);
  padding:clamp(28px, 3.6vw, 56px) var(--page-gutter);
  box-sizing:border-box;
}
.about-submit-inner{
  width:100%; max-width:max(1480px, 77.083vw); margin:0 auto;
  padding:clamp(20px, 2.4vw, 36px);
  /* 2026-07-24 改:border 从 1.5px solid var(--color-brand)(橙) → 3px solid var(--color-accent-mint)(绿) ——
     用户要求"submit a request 边框应该是绿色并加粗";
     加粗到 3px(原 1.5px × 2),颜色从橙 #bd4b16 改主题绿 #33B481
     2026-08-02 改:加 border-radius 与 modal 一致的圆角,让外框与 modal 视觉统一
     2026-08-02 再改:压缩 padding,使表单在 1080 viewport 下能同屏完整呈现 */
  border:3px solid var(--color-accent-mint);
  border-radius:max(14px, 1.4vw);
  background:rgba(255,255,255,0.6);
}
.about-submit-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(20px, 2.6vw, 40px);
  align-items:start;
  position:relative;
}
/* 首页弹窗关闭钮:由 .about-submit-content 共享,弹窗上下文强制显示(见 style.css),
   About 页本区块无弹窗,保持隐藏 */
.about-submit-head .subscribe-popup__close{ display:none; }
.subscribe-popup.show .about-submit-head .subscribe-popup__close{ display:flex; }
/* <=768 About head stacks single column and title/lead fill the whole line;
   keep the corner close hidden there - dismiss via backdrop click / Esc */
@media (max-width:768px){
  .subscribe-popup.show .about-submit-head .subscribe-popup__close{ display:none; }
}

@media (max-width:768px){
  .about-submit-head{grid-template-columns:1fr;gap:8px; align-items:start}
  .about-submit-head-left{display:flex; flex-direction:column; gap:0; align-self:start}
  .about-submit-head-right{display:flex; flex-direction:column; padding-top:0; align-self:start; margin-top:-32px}
}
@media (min-width:768px){
  .about-submit-head-left{display:flex; flex-direction:column; gap:0; align-self:start}
  .about-submit-head-right{display:flex; flex-direction:column; padding-top:clamp(8px, 0.6vw, 14px); align-self:start}
}
.about-submit-left{width:100%}
.about-submit-title{
  font-family:var(--font-display); font-weight:400;
  color:var(--color-accent-mint);
  font-size:max(1.5rem, 2.2vw);
  margin:0 0 clamp(6px, 0.8vw, 10px); letter-spacing:0.005em;
}
.about-submit-divider{
  width:clamp(72px, 5vw, 112px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
  margin-bottom:clamp(12px, 1.4vw, 20px);
  display:block;
}
/* 2026-07-22 加:.about-submit-head-rule —— head 顶部独立橙线,
   跟 .about-submit-divider 凑成 2 条,宽度全宽(max-width:1480px)拉满 inner 容器,
   让 2 条橙线在视觉上明显区分(head 顶部 1 条 + title 下 1 条)*/
.about-submit-head-rule{
  width:100%;
  height:max(4px, 0.36vw);
  background:var(--color-brand);
  margin:0 0 clamp(20px, 2.6vw, 36px);
  display:block;
}
.about-submit-section-head{
  display:flex;
  align-items:center;
  gap:clamp(10px, 1.2vw, 18px);
  margin:clamp(8px, 1vw, 14px) 0 clamp(10px, 1.2vw, 16px);
}
.about-submit-section-label{
  display:block; font-family:var(--font-display); font-weight:800;
  color:var(--color-brand);
  font-size:max(1.2rem, 1.6vw);
  letter-spacing:0.005em;
  white-space:nowrap;
}
.about-submit-section-rule{
  flex:1 1 auto;
  height:2px;
  background:var(--color-brand);
}
.about-submit-form{ display:flex; flex-direction:column; gap:clamp(10px, 1vw, 16px); }
.about-submit-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(8px, 0.9vw, 12px); }
@media (max-width:768px){ .about-submit-row{ grid-template-columns:1fr; } }
.about-submit-field{ display:flex; flex-direction:column; gap:0; min-width:0; }
.about-submit-field--labeled{ gap:clamp(6px, 0.6vw, 10px); }
.about-submit-field-label{
  font-family:var(--font-display);
  font-size:max(0.85rem, 1vw);
  font-weight:600;
  color:var(--color-accent-mint);
  text-align:center;
  letter-spacing:0.02em;
}
.about-submit-field--full{ grid-column:1 / -1; }
.about-submit-field input,
.about-submit-field textarea{
  width:100%; padding:clamp(8px, 0.8vw, 12px);
  background:transparent;
  border:2px solid #e3e3e3;
  border-radius:4px;
  color:var(--color-dark);
  font-family:var(--font-display); font-size:max(0.85rem, 0.95vw);
  box-sizing:border-box;
  text-align:center;
}
.about-submit-field input::placeholder,
.about-submit-field textarea::placeholder{ color:#d8d8d8; opacity:1 }
.about-submit-field input:focus,
.about-submit-field textarea:focus{ outline:none; border-color:#bfbfbf; }
.about-submit-field textarea{ resize:vertical; min-height:clamp(72px, 6vw, 100px); }
/* 2026-07-24 改:Message* + \n + placeholder 两行内容在 textarea 视觉居中 —
   之前 text-align:center 只水平居中,placeholder 第一行紧贴 textarea 顶。
   textarea 自带 padding-top clamp(40px, 4vw, 56px)(留出 ~ 50% 高度作上方空白)
   + padding-bottom 等量(保持高度),placeholder 两行(textContent 含 \n)就视觉居中
   注:padding-top 加在 textarea 自身,不是 ::placeholder(::placeholder 不能控制位置)
   2026-08-02 改:整体压缩 padding-top/bottom,让表单在 1080 viewport 下能同屏完整呈现 */
.about-submit-field textarea[name="message"]{
  padding-top:clamp(22px, 2.2vw, 32px);
  padding-bottom:clamp(22px, 2.2vw, 32px);
}
.about-submit-action-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:clamp(14px, 2vw, 28px);
  margin-top:clamp(2px, 0.4vw, 6px);
}
.about-submit-action-rule{
  height:2px;
  background:var(--color-brand);
}
.about-submit-btn{
  align-self:center;
  display:inline-block; background:var(--color-brand); color:#fff;
  border:1.5px solid var(--color-brand); padding:clamp(8px, 0.8vw, 12px) clamp(28px, 2.8vw, 48px);
  font-family:var(--font-display); font-weight:700;
  font-size:max(0.85rem, 0.95vw);
  letter-spacing:0.01em; text-transform:none;
  border-radius:999px; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.about-submit-btn:hover{ background:var(--color-brand-dark); color:#fff; border-color:var(--color-brand-dark); }
.about-submit-privacy{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:6px;
  font-family:var(--font-display); font-weight:400;
  color:#b5b5b5; font-size:max(0.7rem, 0.8vw);
  margin:clamp(6px, 0.8vw, 10px) 0 0; line-height:1.5; text-align:center;
}
.about-submit-privacy input{
  margin-top:.25em;
  accent-color:var(--color-brand);
}
.about-submit-error{ font-family:var(--font-display); padding:clamp(8px, 1vw, 14px) 0; margin:0; color:var(--color-accent-mint); }
.about-submit-lead{
  font-family:var(--font-serif);
  color:var(--color-accent-mint);
  font-size:max(0.95rem, 1.15vw);
  font-weight:700;
  line-height:1.7; margin:0;
  white-space:pre-line;
}
.about-submit-head-right{
  display:flex; flex-direction:column;
  padding-top:0;
  align-self:start;
}
@media (max-width:768px){
  .about-submit-head-right{ padding-top:0; }
}

/* ===== Submit a Request 成功 modal(2026-08-02 新增) =====
   复用了 travelogue-reader / keepers-reader 的 fixed + backdrop + panel + close 模式,
   但关闭按钮缩小、内嵌绿色圆形勾 + 品牌印章背景图,呈现截图样式。
   2026-08-02 改:panel 圆角、整体放大,确保品牌印花完整可见;圆形勾保持绿底白勾。 */
.about-submit-success-modal{
  position:fixed; inset:0; z-index:9990;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8px, 1.4vw, 18px);
  box-sizing:border-box;
}
.about-submit-success-modal[hidden]{display:none}
.about-submit-success-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  border:0; cursor:pointer; padding:0; margin:0;
}
.about-submit-success-modal-panel{
  position:relative;
  width:min(100%, 1040px);
  min-height:clamp(560px, 72vh, 780px);
  background:#fff;
  border:3px solid var(--color-accent-mint);
  border-radius:max(14px, 1.4vw);
  padding:clamp(64px, 7vw, 104px) clamp(56px, 6vw, 88px);
  box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(28px, 3.4vw, 44px);
  font-family:var(--font-display); text-align:center; color:var(--color-accent-mint);
  overflow:hidden;
}
.about-submit-success-modal-close{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(51,180,129,.4);
  background:rgba(51,180,129,.08);
  color:var(--color-accent-mint); font-size:22px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.about-submit-success-modal-stamp{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(70%, 720px);
  height:auto;
  opacity:.35;
  pointer-events:none;
  margin:0;
  z-index:1;
}
.about-submit-success-modal-mark{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:clamp(84px, 7.6vw, 124px); height:clamp(84px, 7.6vw, 124px);
  border-radius:50%; background:var(--color-accent-mint); color:#fff;
  z-index:3;
  box-shadow:0 6px 24px rgba(51,180,129,.25);
}
.about-submit-success-modal-mark svg{ width:62%; height:62%; display:block }
.about-submit-success-modal-body{
  position:relative; z-index:3; text-align:center;
  font-family:var(--font-display); color:var(--color-accent-mint);
  font-size:clamp(1.05rem, 1.3vw, 1.5rem);
  font-weight:700; line-height:1.55; margin:0 auto; white-space:pre-line;
  max-width:720px;
}
.about-submit-success-modal-divider{
  position:relative; z-index:2;
  width:100%; height:1px; background:var(--color-accent-mint);
  opacity:.6;
}
body.about-submit-success-modal-open{ overflow:hidden }


/* ==========================================================================
   HOME SUBSCRIBE POPUP FORM (2026-09-06 new)
   Styles for the shared minimal subscription form inside the centered
   subscribe popup (partials/subscribe-form.njk): mint title + orange
   divider + 2-column inputs + orange pill button. Mirrors the about-submit
   visual language so the popup stays consistent with the site.
   ========================================================================== */

.home-subscribe-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(8px, 0.8vw, 12px);
  position:relative;
}

.home-subscribe-title{
  font-family:var(--font-display); font-weight:400;
  color:var(--color-accent-mint);
  font-size:max(1.5rem, 2.2vw);
  line-height:1.15;
  margin:0;
  text-align:left;
}
.home-subscribe-divider{
  width:clamp(72px, 5vw, 112px);
  height:max(4px, 0.36vw);
  background:var(--color-brand);
  margin-top:clamp(6px, 0.4vw, 10px);
}
.home-subscribe-form{
  display:flex; flex-direction:column; gap:clamp(14px, 1.2vw, 20px);
}
.home-subscribe-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 1.1vw, 20px);
}
.home-subscribe-field{
  display:flex; flex-direction:column; gap:clamp(6px, 0.6vw, 10px);
  min-width:0;
}
.home-subscribe-field-label{
  font-family:var(--font-display);
  font-size:max(0.85rem, 1vw);
  font-weight:600;
  color:var(--color-accent-mint);
}
.home-subscribe-field input{
  width:100%; padding:clamp(8px, 0.8vw, 12px);
  font-family:var(--font-body);
  font-size:max(0.95rem, 1.1vw);
  color:var(--color-text);
  background:#fff;
  border:1px solid #d4d4d4; border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.home-subscribe-field input::placeholder{ color:#d8d8d8; opacity:1 }
.home-subscribe-field input:focus{ outline:none; border-color:#bfbfbf; }
.home-subscribe-field input:invalid{ border-color:#c84a4a; }

.home-subscribe-action{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(12px, 1.2vw, 18px);
  margin-top:clamp(6px, 0.6vw, 10px);
}
.home-subscribe-action-rule{
  height:2px; background:var(--color-brand);
  align-self:center;
}
.home-subscribe-btn{
  align-self:center;
  display:inline-block; background:var(--color-brand); color:#fff;
  border:1.5px solid var(--color-brand); padding:clamp(8px, 0.8vw, 12px) clamp(28px, 2.8vw, 48px);
  font-family:var(--font-display); font-weight:700;
  font-size:max(0.85rem, 0.95vw);
  letter-spacing:0.01em; text-transform:none;
  border-radius:999px; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.home-subscribe-btn:hover{ background:var(--color-brand-dark); color:#fff; border-color:var(--color-brand-dark); }
.home-subscribe-btn[disabled]{ opacity:.6; cursor:not-allowed; }

.home-subscribe-note{
  font-family:var(--font-body);
  font-size:max(0.8rem, 0.95vw);
  color:var(--color-text-soft, #7a7a7a);
  text-align:center;
  margin:0;
}

.home-subscribe-success,
.home-subscribe-error{
  font-family:var(--font-body);
  font-size:max(0.85rem, 1vw);
  text-align:center;
  margin:0;
  padding:clamp(8px, 0.8vw, 12px) 0;
}
.home-subscribe-success{ color:var(--color-accent-mint); }
.home-subscribe-error{ color:#c84a4a; }

/* Stacked layout on small screens */
@media (max-width:768px){
  .home-subscribe-row{ grid-template-columns:1fr; }
  .home-subscribe-action{ grid-template-columns:1fr; }
  .home-subscribe-action-rule{ display:none; }
}


/* Subscribe popup card (2026-09-06 new): hosts the shared minimal
   home-subscribe form. Compact centered width; reserve room for the
   absolute close button in the head row. */
.subscribe-popup__card--subscribe{
  width:min(680px, 100%);
}
.subscribe-popup__card--subscribe .home-subscribe-head{
  padding-right:clamp(44px, 5vw, 76px);
}
.subscribe-popup__card--subscribe .home-subscribe-form{
  margin-top:clamp(18px, 2vw, 30px);
}

/* ---- Home subscribe: post-submit success state (2026-09-07) ----
   提交成功后加 .is-sent 类:收起 Name/Email/Button/Note,
   只留 title + 居中的成功文案。 */
.home-subscribe-form.is-sent .home-subscribe-row,
.home-subscribe-form.is-sent .home-subscribe-action,
.home-subscribe-form.is-sent .home-subscribe-note{
  display:none;
}
.home-subscribe-form.is-sent .home-subscribe-success{
  display:block;
  text-align:center;
  font-size:max(1rem, 1.15vw);
  color:var(--color-accent-mint);
  padding:clamp(20px, 2.4vw, 36px) clamp(16px, 2vw, 28px);
  margin:0 auto;
  max-width:560px;
}
/* Error 状态:同样收起表单只留错误文案 (沿用 success 的居中样式) */
.home-subscribe-form.is-error .home-subscribe-row,
.home-subscribe-form.is-error .home-subscribe-action,
.home-subscribe-form.is-error .home-subscribe-note{
  display:none;
}
.home-subscribe-form.is-error .home-subscribe-error{
  display:block;
  text-align:center;
  font-size:max(0.95rem, 1.1vw);
  color:#c84a4a;
  padding:clamp(20px, 2.4vw, 36px) clamp(16px, 2vw, 28px);
  margin:0 auto;
  max-width:560px;
}