*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f5f2;color:#111;font-family:Arial,"Microsoft YaHei",sans-serif}a{color:inherit;text-decoration:none}.site-header{height:82px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;position:sticky;top:0;background:rgba(245,245,242,.92);backdrop-filter:blur(12px);z-index:10}.logo{font-weight:900;letter-spacing:-1px;font-size:21px}.logo span:first-child{display:inline-grid;place-items:center;width:29px;height:29px;background:#111;color:#f5f5f2;margin-right:8px}.dot{color:#d83a2e}.site-header nav{display:flex;gap:38px;font-size:13px}.site-header nav a:hover{opacity:.55}.hero{min-height:calc(100vh - 82px);padding:7vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#777;margin:0 0 24px}.hero h1{font-size:clamp(64px,8vw,142px);line-height:.88;letter-spacing:-7px;margin:0 0 40px}.hero h1 em,.contact h2 em{font-style:normal;color:#d83a2e}.hero-desc{max-width:430px;font-size:16px;line-height:1.9;color:#555}.line-link{display:inline-flex;gap:18px;align-items:center;margin-top:30px;font-size:12px;letter-spacing:1px;border-bottom:1px solid #111;padding-bottom:9px}.hero-art{width:min(100%,700px);aspect-ratio:16/9;justify-self:end;position:relative;overflow:hidden;background:#181818}.hero-slides{height:100%;display:flex;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.hero-slide{min-width:100%;height:100%;background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center}.hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.12),rgba(0,0,0,.5))}.hero-fallback{position:relative;z-index:2;color:#fff;font-size:clamp(42px,5vw,72px);font-weight:900;line-height:.82;letter-spacing:-3px}.slide-prev,.slide-next{position:absolute;z-index:4;bottom:20px;width:38px;height:38px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.25);color:#fff;font-size:22px;cursor:pointer}.slide-prev{left:18px}.slide-next{left:64px}.hero-dots{position:absolute;z-index:4;right:20px;bottom:36px;display:flex;gap:7px}.hero-dot{width:5px;height:5px;background:#777}.hero-dot.active{background:#fff;width:22px}.section{padding:110px 5vw}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:55px}.section h2{font-size:clamp(42px,5vw,76px);letter-spacing:-4px;line-height:.95;margin:0}.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.case-card{cursor:pointer}.case-img{aspect-ratio:1.18;background:#222 center/cover no-repeat;position:relative;overflow:hidden;transition:transform .35s}.case-card:hover .case-img{transform:translateY(-6px)}.case-img:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(0,0,0,.25))}.case-fallback{position:absolute;inset:15%;border:1px solid #d83a2e;transform:rotate(20deg)}.num{position:absolute;z-index:2;top:14px;left:14px;color:#fff;font-size:10px;letter-spacing:2px}.case-info{padding:15px 0 25px}.case-title{font-weight:700;font-size:15px}.case-type{font-size:10px;color:#777;margin-top:7px}.studio-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:300px 300px;gap:20px}.visual{position:relative;overflow:hidden;padding:22px;color:#fff;background:#222}.visual:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(216,58,46,.8),transparent 35%),linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12) 40%)}.visual span,.visual b{position:relative;z-index:2}.visual span{font-size:10px;letter-spacing:2px}.visual b{position:absolute;bottom:22px;left:22px;font-size:27px}.visual-1{grid-row:1/3;background:#161616}.visual-2{background:#555}.visual-3{background:#d83a2e}.about{display:grid;grid-template-columns:1fr 1fr;gap:10vw;background:#111;color:#fff}.about-copy{max-width:600px}.about-copy>p{font-size:18px;line-height:1.9;color:#ccc}.stats{display:flex;gap:60px;margin-top:65px}.stats strong{display:block;font-size:42px}.stats span{display:block;font-size:11px;color:#999;margin-top:5px}.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid #111;border-bottom:1px solid #111;padding:22px 0;font-size:13px;letter-spacing:4px}.marquee div{display:inline-block;animation:move 20s linear infinite}@keyframes move{to{transform:translateX(-50%)}}.contact{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.contact h2{font-size:clamp(52px,7vw,105px);letter-spacing:-6px;line-height:.9;margin:0}.contact-info{align-self:end;font-size:15px;line-height:2;color:#555}.button{display:inline-block;background:#111;color:#fff;padding:15px 25px;margin-top:20px;font-size:12px}footer{padding:30px 5vw;border-top:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#777}.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:50;padding:5vh 5vw;align-items:center;justify-content:center}.modal.open{display:flex}.modal-box{width:min(1200px,96vw);max-height:90vh;background:#f5f5f2;display:grid;grid-template-columns:1.35fr .65fr;position:relative;overflow:hidden}.modal-visual{min-height:620px;background:#111 center/contain no-repeat}.modal-copy{padding:55px 45px;display:flex;flex-direction:column}.modal-copy h3{font-size:38px;letter-spacing:-2px;line-height:1;margin:0 0 25px}.modal-copy>p:not(.eyebrow){font-size:14px;line-height:2;color:#555}.modal-controls{margin-top:auto;border-top:1px solid #ccc;padding-top:18px;display:flex;justify-content:space-between;align-items:center;font-size:11px}.modal-controls button{border:0;background:none;cursor:pointer;font-size:11px}.modal-close{position:absolute;right:15px;top:12px;z-index:5;border:0;background:transparent;font-size:32px;cursor:pointer}@media(max-width:900px){.site-header nav{display:none}.hero,.about,.contact{grid-template-columns:1fr}.hero-art{justify-self:start}.case-grid{grid-template-columns:repeat(2,1fr)}.studio-grid{grid-template-columns:1fr;grid-template-rows:300px 220px 220px}.visual-1{grid-row:auto}.modal-box{grid-template-columns:1fr}.modal-visual{min-height:50vh}.modal-copy{padding:30px}.section{padding:75px 6vw}}@media(max-width:520px){.case-grid{grid-template-columns:1fr}.modal{padding:0}.modal-box{width:100%;height:100%;max-height:100vh;overflow:auto}.modal-visual{min-height:45vh}}

.contact-button{border:0;cursor:pointer;font-family:inherit}
.contact-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:80;align-items:center;justify-content:center;padding:24px}
.contact-modal.open{display:flex}
.contact-modal-box{width:min(430px,92vw);background:#f5f5f2;padding:44px;text-align:center;position:relative}
.contact-modal-box h3{font-size:38px;letter-spacing:-2px;margin:0 0 12px}
.contact-modal-box>p:not(.eyebrow){font-size:13px;color:#666;line-height:1.8;margin-bottom:24px}
.contact-modal-box img{display:block;width:min(270px,70vw);aspect-ratio:1/1;object-fit:contain;margin:0 auto 22px;background:#fff;padding:10px}
.contact-modal-box small{font-size:11px;line-height:1.8;color:#777}
.contact-modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:30px;cursor:pointer}
@media(max-width:900px){.hero-art{width:min(100%,700px);justify-self:start}}

.hero-art{width:min(100%,760px)}
.capability-card{cursor:pointer;background-position:center;background-size:cover}
.capability-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.58));z-index:1}
.capability-card i{position:absolute;z-index:3;right:18px;bottom:18px;font-style:normal;font-size:10px;letter-spacing:1px;color:#ddd}
.modal-visual{position:relative;overflow:hidden}
.image-hit{position:absolute;top:0;bottom:0;width:28%;z-index:6;border:0;background:transparent;cursor:pointer}
.image-hit-left{left:0;cursor:pointer}.image-hit-right{right:0;cursor:pointer}
.image-hit-left:hover{background:linear-gradient(90deg,rgba(0,0,0,.18),transparent)}
.image-hit-right:hover{background:linear-gradient(-90deg,rgba(0,0,0,.18),transparent)}
.modal-video{display:none;width:100%;height:100%;object-fit:contain;background:#111;position:absolute;inset:0;z-index:5}
.capability-modal-box .modal-visual{background-size:contain}
@media(max-width:900px){.hero-art{width:100%}}

/* V6.1 BUGFIX: 图片左右翻页热区不显示系统焦点竖线或缩放光标 */
.image-hit{
  cursor:pointer !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
  appearance:none;
  -webkit-appearance:none;
}
.image-hit:focus,
.image-hit:focus-visible,
.image-hit:active{
  outline:none !important;
  box-shadow:none !important;
  border:none !important;
}
.modal-close:focus,
.modal-close:focus-visible,
.modal-controls button:focus,
.modal-controls button:focus-visible{
  outline:none;
  box-shadow:none;
}


/* =========================================================
   V6.2 RESPONSIVE SYSTEM
   ========================================================= */
:root{
  --page-x:clamp(22px,5vw,84px);
  --header-h:82px;
  --content-max:1680px;
}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,video{max-width:100%}
.site-header{
  padding-left:var(--page-x);
  padding-right:var(--page-x);
}
.hero{
  width:min(100%,var(--content-max));
  margin:0 auto;
  min-height:calc(100svh - var(--header-h));
  padding:clamp(64px,7vw,118px) var(--page-x);
  grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);
  gap:clamp(38px,5vw,92px);
}
.hero-copy{min-width:0;max-width:690px}
.hero h1{
  font-size:clamp(60px,6.5vw,118px);
  letter-spacing:clamp(-7px,-.45vw,-4px);
}
.hero-desc{font-size:clamp(14px,1.05vw,17px)}
.hero-art{
  width:100%;
  max-width:920px;
  justify-self:stretch;
  align-self:center;
}
.section{
  width:100%;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
}
.section-head,.case-grid,.studio-grid,.about>*,.contact>*{
  min-width:0;
}
.cases .case-grid,.studio .studio-grid{
  max-width:var(--content-max);
  margin-left:auto;
  margin-right:auto;
}
.section-head{
  max-width:var(--content-max);
  margin-left:auto;
  margin-right:auto;
}
.about,.contact{
  padding-left:max(var(--page-x),calc((100vw - var(--content-max))/2 + var(--page-x)));
  padding-right:max(var(--page-x),calc((100vw - var(--content-max))/2 + var(--page-x)));
}
footer{
  padding-left:var(--page-x);
  padding-right:var(--page-x);
}
.mobile-menu-toggle{display:none}

/* Tablet / smaller desktop */
@media(max-width:1180px){
  .hero{
    grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
    gap:clamp(30px,4vw,54px);
  }
  .hero h1{font-size:clamp(54px,6.7vw,84px)}
  .case-grid{grid-template-columns:repeat(3,1fr)}
  .studio-grid{grid-template-columns:1.45fr 1fr}
}

/* Tablet portrait */
@media(max-width:900px){
  :root{--header-h:72px;--page-x:clamp(20px,5vw,42px)}
  .site-header{height:var(--header-h)}
  .site-header nav{gap:22px}
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
    gap:42px;
    padding-top:70px;
    padding-bottom:72px;
  }
  .hero-copy{max-width:720px}
  .hero h1{font-size:clamp(58px,10vw,88px);margin-bottom:28px}
  .hero-desc{max-width:560px}
  .hero-art{max-width:none;width:100%;justify-self:stretch}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .studio-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
  }
  .visual-1{grid-column:1/-1;grid-row:auto;aspect-ratio:16/8.6}
  .visual-2,.visual-3{aspect-ratio:4/3}
  .about,.contact{grid-template-columns:1fr;gap:48px}
  .about-copy{max-width:760px}
  .stats{margin-top:42px}
  .modal{padding:0}
  .modal-box{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,58dvh) minmax(0,42dvh);
    overflow:hidden;
  }
  .modal-visual{min-height:0;height:100%;width:100%}
  .modal-copy{padding:28px 30px;overflow:auto}
  .modal-copy h3{font-size:32px;margin-bottom:18px}
  .modal-controls{margin-top:25px;padding-bottom:max(4px,env(safe-area-inset-bottom))}
  .modal-close{
    position:fixed;
    right:16px;
    top:max(12px,env(safe-area-inset-top));
    width:42px;height:42px;border-radius:50%;
    background:rgba(245,245,242,.92);
    line-height:38px;
  }
  .contact-modal{padding:18px}
}

/* Mobile */
@media(max-width:640px){
  :root{--header-h:64px;--page-x:20px}
  .site-header{
    height:var(--header-h);
    padding-left:20px;
    padding-right:14px;
  }
  .logo{font-size:17px}
  .logo span:first-child{width:26px;height:26px;margin-right:7px}
  .site-header nav{
    display:none;
    position:absolute;
    top:calc(100% + 1px);
    left:0;right:0;
    padding:14px 20px 20px;
    background:rgba(245,245,242,.98);
    border-bottom:1px solid #ddd;
    flex-direction:column;
    gap:0;
    box-shadow:0 12px 24px rgba(0,0,0,.06);
  }
  .site-header nav.mobile-open{display:flex}
  .site-header nav a{padding:13px 2px;border-bottom:1px solid #e4e4e1;font-size:13px}
  .mobile-menu-toggle{
    display:flex;
    width:42px;height:42px;
    border:0;background:transparent;
    align-items:center;justify-content:center;
    flex-direction:column;gap:5px;cursor:pointer;
  }
  .mobile-menu-toggle span{display:block;width:20px;height:1px;background:#111;transition:.25s}
  .mobile-menu-toggle.active span:first-child{transform:translateY(3px) rotate(45deg)}
  .mobile-menu-toggle.active span:last-child{transform:translateY(-3px) rotate(-45deg)}

  .hero{
    padding:50px 20px 56px;
    gap:34px;
  }
  .hero .eyebrow{margin-bottom:16px}
  .hero h1{
    font-size:clamp(48px,15.8vw,68px);
    line-height:.91;
    letter-spacing:-4px;
    margin-bottom:24px;
  }
  .hero-desc{font-size:14px;line-height:1.75}
  .line-link{margin-top:22px}
  .hero-art{aspect-ratio:16/9;border-radius:0}
  .slide-prev,.slide-next{
    width:34px;height:34px;bottom:14px;font-size:19px;
  }
  .slide-prev{left:14px}.slide-next{left:54px}
  .hero-dots{right:14px;bottom:29px}

  .section{padding:68px 20px}
  .section-head{margin-bottom:34px;align-items:flex-end;gap:20px}
  .section h2{font-size:clamp(40px,12vw,56px);letter-spacing:-3px}
  .section-head .line-link{white-space:nowrap;margin-top:0;font-size:10px}
  .case-grid{grid-template-columns:1fr;gap:8px}
  .case-card{margin-bottom:20px}
  .case-img{aspect-ratio:4/3}
  .case-info{padding:12px 0 18px}
  .case-title{font-size:15px}
  .studio-grid{display:grid;grid-template-columns:1fr;grid-template-rows:none;gap:12px}
  .visual-1,.visual-2,.visual-3{grid-column:auto;grid-row:auto;aspect-ratio:16/10}
  .visual{padding:18px}
  .visual b{left:18px;bottom:18px;font-size:23px}
  .capability-card i{right:16px;bottom:18px}
  .about,.contact{padding:68px 20px;gap:36px}
  .about .section, .contact .section{padding-left:0;padding-right:0}
  .about-copy>p{font-size:15px;line-height:1.85}
  .stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:34px;
  }
  .stats strong{font-size:30px}
  .stats span{font-size:9px}
  .contact h2{font-size:clamp(48px,14vw,66px);letter-spacing:-4px}
  .contact-info{font-size:13px}
  .contact .button{width:100%;text-align:center}
  .marquee{font-size:10px;letter-spacing:3px;padding:17px 0}
  footer{
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
    flex-direction:column;align-items:flex-start;gap:14px;
  }

  .modal-box{
    grid-template-rows:minmax(0,52dvh) minmax(0,48dvh);
  }
  .modal-copy{padding:24px 20px calc(20px + env(safe-area-inset-bottom))}
  .modal-copy .eyebrow{margin-bottom:13px}
  .modal-copy h3{font-size:27px;letter-spacing:-1.5px}
  .modal-copy>p:not(.eyebrow){font-size:13px;line-height:1.7}
  .modal-controls{
    position:sticky;
    bottom:0;
    background:#f5f5f2;
    margin-left:-2px;margin-right:-2px;
    padding-top:15px;padding-bottom:8px;
  }
  .modal-controls button{padding:8px 0}
  .image-hit{width:32%}
  .image-hit-left:hover,.image-hit-right:hover{background:transparent}
  .contact-modal-box{padding:38px 24px 28px}
  .contact-modal-box h3{font-size:32px}
  .contact-modal-box img{width:min(250px,72vw)}

  /* touch devices: no desktop hover lift */
  .case-card:hover .case-img{transform:none}
}


/* =========================================================
   V6.3 HOME LARGE-SCREEN CALIBRATION
   Only affects homepage. Case center/admin keep V6.2 behavior.
   Large monitors grow outer whitespace instead of endlessly
   enlarging content, typography and spacing.
   ========================================================= */
.home-page{
  --home-max:1480px;
  --home-edge:clamp(28px,3.2vw,56px);
  --home-side:max(var(--home-edge),calc((100vw - var(--home-max))/2));
}
.home-page .site-header{
  padding:0;
}
.home-page .home-header-inner{
  width:min(calc(100% - 2 * var(--home-edge)),var(--home-max));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

/* Stable first-screen composition from 1366 to 4K */
.home-page .hero{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:var(--home-side);
  padding-right:var(--home-side);
  padding-top:clamp(62px,6.5vh,92px);
  padding-bottom:clamp(62px,6.5vh,92px);
  min-height:clamp(720px,calc(100svh - 82px),980px);
  grid-template-columns:minmax(430px,.78fr) minmax(0,1.22fr);
  gap:clamp(52px,4vw,82px);
  align-items:center;
}
.home-page .hero-copy{
  max-width:560px;
  align-self:center;
}
.home-page .hero h1{
  font-size:clamp(62px,5.15vw,96px);
  line-height:.9;
  letter-spacing:clamp(-6px,-.32vw,-4px);
  margin-bottom:30px;
}
.home-page .hero-desc{
  max-width:440px;
  font-size:15px;
  line-height:1.85;
}
.home-page .hero-art{
  width:100%;
  max-width:860px;
  aspect-ratio:16/9;
  justify-self:end;
}

/* Homepage sections share the same visual width as the hero */
.home-page .cases,
.home-page .studio{
  padding-left:var(--home-side);
  padding-right:var(--home-side);
}
.home-page .cases .section-head,
.home-page .cases .case-grid,
.home-page .studio .section-head,
.home-page .studio .studio-grid{
  width:100%;
  max-width:none;
}
.home-page .section h2{
  font-size:clamp(46px,4vw,68px);
}
.home-page .case-grid{
  gap:22px;
}
.home-page .studio-grid{
  grid-template-rows:280px 280px;
}
.home-page .about,
.home-page .contact{
  padding-left:var(--home-side);
  padding-right:var(--home-side);
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:clamp(70px,7vw,120px);
}
.home-page .about-copy{
  max-width:620px;
}
.home-page .contact h2{
  font-size:clamp(58px,5vw,88px);
}
.home-page footer{
  padding-left:var(--home-side);
  padding-right:var(--home-side);
}

/* 27-inch / common 1440–1600px desktop: preserve balance */
@media (min-width:1101px) and (max-width:1600px){
  .home-page{
    --home-edge:clamp(28px,3vw,46px);
  }
  .home-page .hero{
    grid-template-columns:minmax(390px,.8fr) minmax(0,1.2fr);
    gap:clamp(42px,3.5vw,58px);
  }
  .home-page .hero h1{
    font-size:clamp(60px,5.6vw,86px);
  }
  .home-page .hero-art{
    max-width:790px;
  }
}

/* Switch earlier than before so medium-width screens never get squeezed */
@media (max-width:1100px){
  .home-page{
    --home-edge:clamp(24px,5vw,44px);
    --home-side:var(--home-edge);
  }
  .home-page .home-header-inner{
    width:calc(100% - 2 * var(--home-edge));
  }
  .home-page .hero{
    min-height:auto;
    grid-template-columns:1fr;
    gap:42px;
    padding-top:68px;
    padding-bottom:72px;
  }
  .home-page .hero-copy{
    max-width:720px;
  }
  .home-page .hero h1{
    font-size:clamp(58px,8vw,86px);
  }
  .home-page .hero-art{
    max-width:900px;
    justify-self:start;
  }
  .home-page .about,
  .home-page .contact{
    grid-template-columns:1fr;
    gap:48px;
  }
}

@media (max-width:640px){
  .home-page{
    --home-edge:20px;
    --home-side:20px;
  }
  .home-page .site-header{
    padding:0 14px 0 20px;
  }
  .home-page .home-header-inner{
    width:100%;
    margin:0;
    gap:12px;
  }
  .home-page .site-header nav{
    left:0;
    right:0;
  }
  .home-page .hero{
    padding:50px 20px 56px;
    gap:34px;
  }
  .home-page .hero h1{
    font-size:clamp(48px,15.8vw,68px);
  }
  .home-page .hero-art{
    max-width:none;
  }
  .home-page .cases,
  .home-page .studio,
  .home-page .about,
  .home-page .contact{
    padding-left:20px;
    padding-right:20px;
  }
  .home-page .studio-grid{
    grid-template-rows:none;
  }
  .home-page .contact h2{
    font-size:clamp(48px,14vw,66px);
  }
  .home-page footer{
    padding-left:20px;
    padding-right:20px;
  }
}


/* =========================================================
   V6.4 HOME TRUE PROPORTIONAL SCALING
   Desktop homepage uses a 1920px design canvas.
   JS applies one uniform zoom factor = viewportWidth / 1920.
   Everything on the homepage scales together.
   Cases page / admin are not affected.
   ========================================================= */
@media(min-width:1280px){
  html:has(body.home-page){
    overflow-x:hidden;
    background:#f5f5f2;
  }

  body.home-page{
    width:1920px !important;
    min-width:1920px !important;
    max-width:1920px !important;
    margin:0 !important;
    overflow-x:hidden !important;
    transform-origin:0 0;
  }

  .home-page .site-header{
    width:1920px !important;
    height:82px !important;
    padding:0 96px !important;
    margin:0 !important;
  }

  .home-page .site-header .logo{
    font-size:21px !important;
  }

  .home-page .site-header nav{
    display:flex !important;
    gap:38px !important;
    position:static !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    flex-direction:row !important;
  }

  .home-page .mobile-menu-toggle{
    display:none !important;
  }

  .home-page main{
    width:1920px !important;
    max-width:none !important;
  }

  .home-page .hero{
    width:1920px !important;
    max-width:none !important;
    min-height:998px !important;
    margin:0 !important;
    padding:108px 96px !important;
    display:grid !important;
    grid-template-columns:650px 1078px !important;
    gap:0 !important;
    align-items:center !important;
  }

  .home-page .hero-copy{
    width:590px !important;
    max-width:590px !important;
    padding-right:0 !important;
  }

  .home-page .hero .eyebrow{
    font-size:10px !important;
    letter-spacing:2.5px !important;
    margin:0 0 24px !important;
  }

  .home-page .hero h1{
    font-size:104px !important;
    line-height:.88 !important;
    letter-spacing:-7px !important;
    margin:0 0 40px !important;
  }

  .home-page .hero-desc{
    width:430px !important;
    max-width:430px !important;
    font-size:16px !important;
    line-height:1.9 !important;
  }

  .home-page .hero .line-link{
    margin-top:30px !important;
    font-size:12px !important;
  }

  .home-page .hero-art{
    width:1078px !important;
    max-width:1078px !important;
    aspect-ratio:16/9 !important;
    justify-self:end !important;
  }

  .home-page .section{
    width:1920px !important;
    max-width:none !important;
    padding:120px 96px !important;
  }

  .home-page .section-head{
    width:1728px !important;
    max-width:1728px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:55px !important;
  }

  .home-page .section h2{
    font-size:76px !important;
    letter-spacing:-4px !important;
  }

  .home-page .cases .case-grid{
    width:1728px !important;
    max-width:1728px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:24px !important;
  }

  .home-page .case-img{
    aspect-ratio:1.18 !important;
  }

  .home-page .case-title{
    font-size:15px !important;
  }

  .home-page .studio .studio-grid{
    width:1728px !important;
    max-width:1728px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:grid !important;
    grid-template-columns:1152px 556px !important;
    grid-template-rows:300px 300px !important;
    gap:20px !important;
  }

  .home-page .studio .visual-1{
    grid-column:auto !important;
    grid-row:1/3 !important;
    aspect-ratio:auto !important;
  }

  .home-page .studio .visual-2,
  .home-page .studio .visual-3{
    aspect-ratio:auto !important;
  }

  .home-page .about{
    width:1920px !important;
    max-width:none !important;
    padding:120px 96px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:150px !important;
  }

  .home-page .about>div:first-child{
    padding-left:0 !important;
  }

  .home-page .about-copy{
    width:600px !important;
    max-width:600px !important;
  }

  .home-page .about-copy>p{
    font-size:18px !important;
    line-height:1.9 !important;
  }

  .home-page .stats{
    display:flex !important;
    grid-template-columns:none !important;
    gap:60px !important;
    margin-top:65px !important;
  }

  .home-page .stats strong{
    font-size:42px !important;
  }

  .home-page .contact{
    width:1920px !important;
    max-width:none !important;
    padding:120px 96px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:150px !important;
  }

  .home-page .contact h2{
    font-size:105px !important;
    line-height:.9 !important;
    letter-spacing:-6px !important;
  }

  .home-page .contact-info{
    font-size:15px !important;
  }

  .home-page .marquee{
    width:1920px !important;
    font-size:13px !important;
    letter-spacing:4px !important;
    padding:22px 0 !important;
  }

  .home-page footer{
    width:1920px !important;
    padding:30px 96px !important;
    flex-direction:row !important;
    align-items:center !important;
  }

  /* Keep modal sized to the design canvas; it is uniformly zoomed too. */
  .home-page .modal,
  .home-page .contact-modal{
    width:1920px !important;
  }
}


/* =========================================================
   V6.5 MOBILE MODAL CLOSE FIX
   Close buttons must always sit above image navigation zones.
   ========================================================= */
.modal-close{
  z-index:60 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation;
}
.contact-modal-close{
  z-index:60 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation;
}
.image-hit{
  z-index:6 !important;
}
@media(max-width:640px){
  .modal-close{
    position:fixed !important;
    top:max(12px,env(safe-area-inset-top)) !important;
    right:12px !important;
    width:48px !important;
    height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(245,245,242,.96) !important;
    color:#111 !important;
    font-size:32px !important;
    line-height:1 !important;
    box-shadow:0 3px 16px rgba(0,0,0,.16) !important;
    -webkit-tap-highlight-color:transparent;
  }
  .contact-modal-close{
    width:44px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:#111 !important;
    color:#fff !important;
    -webkit-tap-highlight-color:transparent;
  }
  /* leave the close-button corner completely free of page-turn interception */
  .modal-visual .image-hit-right{
    clip-path:polygon(0 0, calc(100% - 66px) 0, calc(100% - 66px) 70px, 100% 70px, 100% 100%, 0 100%);
  }
}


/* =========================================================
   V6.6 DESKTOP HOME LOGO ALIGNMENT
   Align homepage logo with the 1920 design-canvas left guide.
   ========================================================= */
@media(min-width:1280px){
  .home-page .site-header{
    padding:0 96px !important;
  }

  /* Remove the previous centered 1480px inner wrapper offset. */
  .home-page .home-header-inner{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:38px !important;
  }

  /* Larger desktop brand mark, still scaled together by V6.4 zoom. */
  .home-page .site-header .logo{
    font-size:26px !important;
    line-height:1 !important;
    letter-spacing:-1.2px !important;
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
  }

  .home-page .site-header .logo span:first-child{
    width:36px !important;
    height:36px !important;
    margin-right:10px !important;
    font-size:20px !important;
  }

  .home-page .site-header .logo .dot{
    margin-left:1px !important;
  }
}


/* Website registration links */
footer.beian-footer{flex-wrap:wrap}
footer.beian-footer .site-beian-records{
  flex:0 0 100%;width:100%;min-width:0;margin-top:10px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px 20px;text-align:center;font-size:12px;line-height:1.8;color:#666;
}
footer.beian-footer .site-beian-records a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  max-width:100%;color:inherit;text-decoration:none;
}
footer.beian-footer .site-beian-records a:hover{color:#111;text-decoration:underline}
footer.beian-footer .site-beian-records img{
  display:block;flex-shrink:0;width:20px;height:20px;object-fit:contain;
}
@media(max-width:600px){
  footer.beian-footer .site-beian-records{
    flex:0 0 auto;flex-direction:column;gap:8px;
  }
}