/* ===== About (强覆盖版) ===== */
.about{                /* 不受全局 section 影响 */
  position:relative;
  padding:72px 20px !important;
  background:#fff;
  text-align:left !important;
  overflow:hidden;
  font-family: inherit;
}
.about *{ box-sizing:border-box; }

/* 容器：手机一列，桌面两列 */
.about__container{
  max-width:1200px; margin:0 auto;
  display: grid !important;
  grid-template-columns:1fr;
  gap:32px;
}
@media (min-width:992px){
  .about__container{
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    grid-template-areas: "about-left about-right";
    gap:48px;
    align-items:start;
  }
  .about__left{
    grid-area: about-left !important;
    float: none !important;          /* 防掉老的 float 干扰 */
    order: 0 !important;             /* 防掉旧的 flex/order 干扰 */
    display: block !important;
  }
  .about__right{
    grid-area: about-right !important;
    float: none !important;
    order: 0 !important;
    display: block !important;
    justify-self: stretch;
  }
}

/* 小标题条 */
.about__eyebrow{
  display:inline-block;
  padding:10px 12px;
  font-weight:800; font-size:13px; letter-spacing:.08em;
  color:#1f63ff;
  border:1px solid rgba(31,99,255,.2);
  border-radius:999px;
  background:rgba(31,99,255,.06);
  margin-bottom:14px;
}

/* 主标题与英文副标题 */
.about__title{
  margin:0 0 16px 0;
  font-size:32px; line-height:1.25; font-weight:800; color:#0b0f19;
  position:relative; padding-left:14px;
}
.about__title::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px;
  border-radius:4px; background:linear-gradient(180deg,#1f63ff,#7aa8ff);
}
.about__title-en{
  display:block !important;     /* 强制换行 */
  margin-top:6px;
  font-size:18px; font-weight:600; color:#6b7280;
}

/* 正文：控制行长与间距，避免一整行太长 */
.about__body{ max-width:66ch; }
.about__body p{
  margin:0 0 12px 0;
  color:#4b5563; line-height:1.85; text-align:justify;
}
.about__body p.en{ color:#5b6470; }

/* 可选分隔线（嫌“丑”可以直接删掉这条和HTML里的 <hr>） */
.about__divider{
  border:none; height:1px; margin:12px 0 16px;
  background:linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,0));
}

/* 右侧视频卡片 */
.about__media{
  position:relative; width:100%;
  aspect-ratio:16/9;
  border-radius:12px; overflow:hidden;
  background:#f3f4f6;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.about__media video, .about__media iframe{
  width:100%; height:100%; display:block; object-fit:cover;
}

.about::before{
  content:"ABOUT"; position:absolute; left:0; bottom:-8px;
  font-weight:800; font-size:18vw; letter-spacing:.06em;
  color:rgba(0,0,0,.03); pointer-events:none; user-select:none;
}


@media (max-width: 992px){
  .nav { gap:16px; }
  .has-dropdown .dropdown { 
    left:0; right:0; transform:translate(0, 6px); width: min(92vw, 320px);
  }
  .has-dropdown .nav-link { padding-right:24px; }
  .has-dropdown .dropdown-toggle { display:block; }
  /* 默认小屏不展示下拉（避免误触） */
  .has-dropdown .dropdown { opacity:0; pointer-events:none; }
  .has-dropdown.open .dropdown { opacity:1; pointer-events:auto; }
}
/* ===== 兜底：桌面端强制左文右视频（Flex 版） ===== */
@media (min-width: 992px){
  .about__container{
    display: flex !important;
    gap: 56px !important;
    align-items: center !important; /* 居中对齐 */
  }

  /* 左：只限制行宽，用 ch 更好读；不再用百分比 */
  .about__left{
    flex: 1 1 0 !important;
    max-width: 66ch !important;  /* 你觉得略窄可改 72ch / 略宽改 60ch */
    min-width: 0 !important;
  }

  /* 右：由视频卡片自己决定宽度，不要再加 max-width:42% 这类限制 */
  .about__right{
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  /* 视频卡片：用 clamp 控宽 + 保持 16:9 */
  .about__media{
    width: clamp(520px, 48vw, 640px) !important;  /* 紧凑版可改 420px,42vw,560px */
    aspect-ratio: 16 / 9;
    max-width: 100%;
  }
}

/* 去掉可能来自全局的奇怪约束 */
.about__container, .about__left, .about__right{
  width: auto !important;
}
/* ========== Office Cards (Apple-like) ========== */
.office{ max-width:1200px; margin:32px auto 64px; padding:0 16px; }
.office__title{ margin:0 0 14px; font-size:28px; font-weight:800; }

.office-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width: 1024px){
  .office-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  .office-grid{ grid-template-columns:1fr; }
}

.office-card{
  position:relative;
  min-height: 360px;                    /* 竖版卡片高度 */
  border-radius:22px;
  overflow:hidden;
  background:#eef2f6;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
  will-change:transform;
}
.office-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.office-card__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}

/* 顶部轻渐变 + 底部深渐变，用于白字可读性 */
.office-card__overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:18px;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.45) 100%);
}

.office-card__eyebrow{
  font-size:14px; opacity:.95; letter-spacing:.5px;
  font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.office-card__title{
  margin:0;
  font-size:22px; line-height:1.25; font-weight:800;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* 右下角的“+”按钮（装饰/可点击放大） */
.office-card__more{
  position:absolute; right:14px; bottom:14px;
  width:38px; height:38px; border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.92);
  color:#111; font-size:22px; line-height:1; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .2s;
}
.office-card__more:hover{ transform:scale(1.05); box-shadow:0 8px 18px rgba(0,0,0,.22); }
.office-card__more:active{ transform:scale(.98); }
/* 让覆盖层不挡按钮点击 */
.office-card__overlay{ pointer-events: none; }
.office-card__more{ pointer-events: auto; z-index: 2; }

/* ========== Lightbox（图片放大预览） ========== */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.lightbox.hidden{ display: none; }

.lightbox__img{
  max-width: 92vw; max-height: 92vh;
  border-radius: 12px; display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.lightbox__close{
  position: absolute; top: 14px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.95);
  font-size: 28px; line-height: 1; font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.lightbox__close:hover{ transform: scale(1.04); }