@charset "utf-8";

/* =========================
   <= 900px
   - Fullscreen menu (fade in)
   - About stack
========================= */
@media (max-width: 900px) {

  /* show hamburger */
  .menu-btn {
    display: flex;
    z-index: 1200;
  }

  /* =========================
     Fullscreen Menu (Overlay)
     IMPORTANT:
     - do NOT use display:none/block for animation
     - keep it fixed full screen
  ========================= */

  /* Force #nav to become overlay on mobile */
  #nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: 1100;

    /* keep it block so we can animate */
    display: block !important;

    background: linear-gradient(
      180deg,
      #dbe9ed 0%,
      #a7c1c9 55%,
      #cfe0e5 100%
    );

    /* hidden by default (animatable) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .45s ease, visibility .45s ease;
  }

  /* open state */
  #nav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* close button */
  #nav .nav-close {
    position: absolute;
    top: 18px;
    right: 36px;
    z-index: 2000;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    background: transparent;
    border: 0;
    cursor: pointer;

    color: rgba(20, 40, 46, 0.9);

    /* fade in */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .35s ease, transform .35s ease;
  }

  #nav.active .nav-close {
    opacity: 1;
    transform: translateY(0);
  }

  #nav .nav-close-x {
    font-size: 38px;
    line-height: 1;
    transform: scaleY(0.6); /* X 扁一点 */
  }

  #nav .nav-close-text {
    font-size: 11px;
    letter-spacing: .12em;
    line-height: 1;
    transform: translateY(-4px);
  }

  /* menu panel centered */
  #nav .nav-panel {
    width: 100%;
    min-height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 26px;

    /* give space for close button */
    padding: 110px 24px 48px;
    text-align: center;

    /* fade up */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease;
  }

  #nav.active .nav-panel {
    opacity: 1;
    transform: translateY(0);
  }

  /* IMPORTANT: override desktop nav link styles */
  #nav .nav-panel a {
    display: block;

    /* kill desktop margin-left */
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    font-size: 16px;
    font-weight: 700;
    color: rgba(20, 40, 46, 0.9);
    text-decoration: none;
    letter-spacing: .08em;
    text-align: center;

    opacity: 1 !important;
    text-shadow: none !important;
  }

  #nav .nav-panel a:hover {
    opacity: .75 !important;
  }

  #nav .nav-panel a.is-active::after {
    content: "";
    display: block;
    width: 46px;
    margin: 10px auto 0;
    border-bottom: 3px dotted rgba(20, 40, 46, 0.55);
  }
    .menu-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

  /* lock scroll when menu open */
  body.menu-open {
    overflow: hidden;
  }

  /* =========================
     About: stack on mobile
  ========================= */
  .about-inner {
    flex-direction: column;
    gap: 40px;
    padding: 0 clamp(20px, 6vw, 40px);
  }

  .about-text {
    padding-left: 6px;
    font-size: clamp(12px, 2.5vw, 14px);
    line-height: 1.9;
  }

  .about-image-wrap img {
    width: 100%;
    max-width: 380px;
  }

  /* background block offset stays */
  .about-image-wrap .bg-block {
    max-width: 380px;
    top: -20px;
    right: -20px;
  }
}


/* =========================
   <= 600px
========================= */
@media (max-width: 600px) {
  .about-image-wrap img,
  .about-image-wrap .bg-block {
    max-width: 240px;
  }
}


/* =========================
   <= 420px
========================= */
@media (max-width: 420px) {
  .about-image-wrap img,
  .about-image-wrap .bg-block {
    max-width: 280px;
  }
}


@media (max-width: 900px) {
  .company-inner {
    grid-template-columns: 1fr;
    padding: 0 clamp(20px, 6vw, 40px);
  }

  .company-title{
    padding-bottom: 24px;
  }

  .company-image-wrap {
    max-width: 240px;
  }

  .company-bg-block {
    transform: translate(-20px, -20px);
  }

  .company-row {
    grid-template-columns: 140px 1fr;
    padding: 16px 0;
  }
}

@media (max-width: 420px) {
  .company-row {
    grid-template-columns: 94px 1fr;
  }

  .company-image-wrap {
    max-width: 320px;
  }
}



@media (max-width: 900px) {

  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 0;
  }

  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-item img {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 600px) {

  .works-grid {
    grid-template-columns: -1fr;
    gap: 40px 0;
  }

  .partners-grid {
    grid-template-columns: -1fr;
  }

    .work-item img {
    width: 130px;
    height: 130px;
  }
}


@media (max-width: 900px){
  .partners-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .partners-grid img{ max-width: 120px; max-height: 58px; }
}

@media (max-width: 520px){
  .partners-grid{ grid-template-columns: -1fr; gap: 14px 0; }
}



/* =========================
   Mobile-recuit
========================= */

@media (max-width:980px){

  .recruit-card{
    flex-direction:column;
    gap:40px;
  }

  .recruit-media{
    max-width:380px;
  }

  .recruit-media__bg{
    top:-20px;
    right:-20px;
  }

  .recruit-media--right .recruit-media__bg{
    left:-20px;
    top:20px;
  }

  .recruit-grid{
    grid-template-columns:1fr;
  }

  .recruit-list{
    grid-template-columns:1fr;
  }

  .recruit__car{
    left:-94px;
    width:39vw;
    opacity:.9;
    bottom: -150px;
  }
}


@media (max-width:600px){

  .recruit-media{
    max-width:240px;
  }

  .recruit-media__bg{
    max-width:320px;
  }

    .recruit__car{
    left:-94px;
    width:39vw;
    opacity:.9;
    bottom: -135px;
  }

}


@media (max-width:420px){

  .recruit-media{
    max-width:280px;
  }

  .recruit-media__bg{
    max-width:280px;
  }

      .recruit__car{
    left:-94px;
    width:39vw;
    opacity:.9;
    bottom: -120px;
  }

}




/* =========================
   Mobile-contact（修正版）
   - 960px: 仍保持左右布局，只缩小
   - 680px: 才换成上下两行
========================= */

@media (max-width: 960px){

  /* ✅ 不要在这里改成 column！保持左右 */
  .contact-row{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
  }

  /* 左边允许缩小并省略 */
  .contact-left{ min-width: 0; }
  .contact-label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 右侧 pill 跟着缩小，但两条长度一致 */
  .contact-pill{
    width: clamp(240px, 34vw, 300px);
  }

  /* access 还是可以在 960px 变一列 */
  .access{
    grid-template-columns: 1fr;
  }
  .access-map iframe{
    height: 240px;
  }
}

/* ✅ 真的太窄才换行 */
@media (max-width: 680px){
  .contact-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
  }

  .contact-label{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .contact-pill{
    width: 100%;
    text-align: center;
  }
}

/* 更小屏幕微调 */
@media (max-width: 520px){
  .contact-card{
    border-radius: 26px;
    padding: 28px 18px;
  }

  .contact-icon{
    width: 38px;
    height: 38px;
  }

  .access-map iframe{
    height: 220px;
  }
}