/* hiso-mobile-shell.css — P1 sitewide mobile chrome (≤820 / short landscape)
   CMS leftnav+rightbox shells + shared hamburger for white home/work.
   Desktop (≥821) unchanged. Brand yellow #dfff00. */
:root{
  --hiso-mshell-bp:820px;
  --hiso-mshell-acc:#dfff00;
  --hiso-mshell-fg:#111;
  --hiso-mshell-pad:clamp(16px,4vw,24px);
}

/* ---- Shared hamburger + panel (home / work / CMS) ---- */
/* desktop: hamburger row item hidden; phone media shows it */
header.nav ul li.hiso-mshell-item,
.nav ul li.hiso-mshell-item{
  display:none;
}

.hiso-mshell-tg{
  display:none;
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  padding:10px;
  margin:0;
  cursor:pointer;
  color:var(--hiso-mshell-fg);
  line-height:0;
  min-width:44px;
  min-height:44px;
  align-items:center;
  justify-content:center;
  border-radius:4px;
}
.hiso-mshell-tg:focus-visible{
  outline:2px solid #111;
  outline-offset:2px;
}
.hiso-mshell-tg-bars{
  display:block;
  width:18px;
  height:12px;
  position:relative;
}
.hiso-mshell-tg-bars i{
  display:block;
  position:absolute;
  left:0;right:0;
  height:1.5px;
  background:currentColor;
  border-radius:1px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.hiso-mshell-tg-bars i:nth-child(1){top:0}
.hiso-mshell-tg-bars i:nth-child(2){top:5px}
.hiso-mshell-tg-bars i:nth-child(3){top:10px}
html.hiso-mshell-open .hiso-mshell-tg-bars i:nth-child(1){
  top:5px; transform:rotate(45deg);
}
html.hiso-mshell-open .hiso-mshell-tg-bars i:nth-child(2){
  opacity:0;
}
html.hiso-mshell-open .hiso-mshell-tg-bars i:nth-child(3){
  top:5px; transform:rotate(-45deg);
}

.hiso-mshell-panel{
  display:none;
  position:fixed;
  z-index:80;
  top:72px;
  left:0;right:0;
  bottom:0;
  background:rgba(255,255,255,.98);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  padding:12px var(--hiso-mshell-pad) 32px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.hiso-mshell-panel[hidden]{display:none !important}
html.hiso-mshell-open .hiso-mshell-panel:not([hidden]){
  display:block;
}
.hiso-mshell-panel ul{
  list-style:none;
  margin:0;
  padding:8px 0 24px;
}
.hiso-mshell-panel a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:10px 4px;
  color:#111;
  font-size:18px;
  font-weight:400;
  line-height:1.35;
  text-decoration:none;
  border-bottom:1px solid #eee;
  position:relative;
  isolation:isolate;
}
.hiso-mshell-panel a.on{
  font-weight:700;
}
.hiso-mshell-panel a.on::before,
.hiso-mshell-panel a:focus-visible::before{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:10px;
  height:8px;
  background:var(--hiso-mshell-acc);
  z-index:-1;
  pointer-events:none;
}
@media (hover:hover){
  .hiso-mshell-panel a:hover{font-weight:700}
  .hiso-mshell-panel a:hover::before{
    content:"";
    position:absolute;
    left:4px;right:4px;bottom:10px;height:8px;
    background:var(--hiso-mshell-acc);
    z-index:-1;
  }
}
@media (prefers-reduced-motion:reduce){
  .hiso-mshell-tg-bars i{transition:none}
}

/* CMS-only top CTA markup (kept in DOM; hidden all viewports — white pages use .nav .cta on desktop only) */
.hiso-mshell-cta{
  display:none;
  background:var(--hiso-mshell-acc);
  color:#0a0a0a !important;
  padding:8px 16px;
  border-radius:999px;
  font-weight:500;
  font-size:14px;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}
.hiso-mshell-cta:focus-visible{
  outline:2px solid #111;
  outline-offset:2px;
  background:#111 !important;
  color:#dfff00 !important;
}
@media (hover:hover){
  .hiso-mshell-cta:hover{
    background:#111 !important;
    color:#dfff00 !important;
  }
}

.hiso-mshell-bar{
  display:none;
  position:fixed;
  top:0;
  right:0;
  z-index:70;
  padding:14px var(--hiso-mshell-pad);
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.hiso-mshell-bar > *{pointer-events:auto}

/* ========== ≤820 / short landscape ========== */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
  /* 1) kill forced desktop min-width + clip residual rem overflow */
  html, body{
    overflow-x:hidden;
    max-width:100vw;
  }
  html{
    min-width:0 !important;
  }
  html.hiso-cms-shell,
  html.fz{
    min-width:0 !important;
  }

  /* 2) CMS: hide desktop left columns; keep logo chrome */
  .leftnav.leftnavjs,
  .leftnav.leftnav1{
    display:none !important;
  }
  /* logo stays fixed (cms-align); nudge to mobile home/work size */
  .leftnavlogo .logo{
    top:17px !important;
  }
  .leftnavlogo .logo img{
    width:123px !important;
    height:44px !important;
  }

  /* 3) CMS right column full bleed */
  .rightbox{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    max-width:none !important;
    padding-left:var(--hiso-mshell-pad) !important;
    padding-right:var(--hiso-mshell-pad) !important;
    padding-top:72px !important;
    box-sizing:border-box !important;
    float:none !important;
    overflow-x:hidden !important;
  }

  /* light content-width caps so rem leftovers don't force h-scroll (P2 does deep layout) */
  .rightbox .topleft,
  .rightbox .w86,
  .rightbox .top,
  .rightbox .news,
  .rightbox .listtop,
  .rightbox .banquan,
  .rightbox img,
  .rightbox video,
  .rightbox table{
    max-width:100% !important;
    box-sizing:border-box;
  }
  .rightbox .topleft,
  .rightbox .w86{
    width:100% !important;
    float:none !important;
  }
  .rightbox .top a{
    float:none !important;
    display:inline-block;
    margin-top:12px;
  }

  /* hide desktop right-float phone/wechat on small */
  .side{
    display:none !important;
  }

  /* CMS mobile top bar: hamburger only (CTA hidden ≤820; desktop ≥821 keeps nav .cta on white pages) */
  .hiso-mshell-bar{
    display:flex;
  }
  .hiso-mshell-tg{
    display:inline-flex;
  }
  .hiso-mshell-cta{
    display:none !important;
  }

  /* body scroll lock when menu open */
  html.hiso-mshell-open,
  html.hiso-mshell-open body{
    overflow:hidden !important;
  }
}

/* White home/work: reveal hamburger; hide top-bar .cta on ≤820 (desktop ≥821 keeps it); text links already hidden by k-white */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
  header.nav .hiso-mshell-tg,
  .nav .hiso-mshell-tg{
    display:inline-flex;
    color:#111;
  }
  html.nav-hero header.nav .hiso-mshell-tg,
  html.nav-hero .nav .hiso-mshell-tg{
    color:#fff;
  }
  /* ensure hamburger li visible even when sibling links hidden */
  header.nav ul li.hiso-mshell-item,
  .nav ul li.hiso-mshell-item{
    display:list-item !important;
  }
  /* hide top-bar 「发起项目沟通」 CTA on small screens */
  header.nav ul li:has(>a.cta),
  .nav ul li:has(>a.cta),
  header.nav a.cta,
  .nav a.cta{
    display:none !important;
  }
  header.nav ul,
  .nav ul{
    gap:12px;
  }
  /* mhidefootnav 2026-11-05 — mobile only: hide bottom footer nav link row
     (home footer>nav; case white nav.fm). Keep copyright/ICP/tel in footer>div/.fl.
     Desktop ≥821 unchanged. */
  footer nav,
  footer nav.fm{
    display:none !important;
  }
  /* mhideaddr 2026-11-05 — mobile only: keep © first line; hide address/tel/ICP
     (home footer>div; case white .fl). Clip after first line via max-height
     (no line-clamp ellipsis). Desktop ≥821 unchanged. */
  footer > div:not(.fc),
  footer .fl{
    max-height:1.8em !important; /* matches footer line-height:1.8 → one line */
    overflow:hidden !important;
  }
  /* mnopill 2026-11-05 — mobile only: drop WeChat/phone CTA pill ring; keep text.
     Home .cta-o; case/work footer .o / .fc .o / .fcta .o; about .fc .o.
     Desktop ≥821 unchanged. */
  /* mctaleft 2026-11-05 — mobile only: left-align CTA text with「先聊聊…」.
     Pill padding:10/9px 22px left the glyph edge inset; zero horizontal pad +
     text-align:left so「微信 / 18667150335」左缘对齐 h2/.big. Desktop ≥821 unchanged. */
  .end .cta-o,
  .cta-o,
  footer .o,
  footer .fc .o,
  footer .fcta .o,
  .hiso-about-cta-bottom .fc .o{
    border:none !important;
    box-shadow:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    text-align:left !important;
  }
}

/* ========== Home mobile: kill 190vh sticky theater (blank band + clipped intro)
   2026-11-05 mblank2 — ≤820 / short landscape ONLY. Desktop ≥821 unchanged.
   index.html not modified; overrides beat inline heroDraw scrub via !important. */
/* ========== Home mobile intro type → services lead feel (mtype1 2026-11-05)
   Measure @390 services h3.topleft: 26px/300/#111 + rightbox pad 16px (--hiso-mshell-pad).
   Home gaps: intro sideGap 0 after absolute→relative; .fit/.svc #6e6e69 too light.
   Only this media. No index desktop CSS/JS. */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
  /* cancel sticky 190vh white-band scroll runway */
  #hero.hero{
    height:auto !important;
  }
  #hero .hero-pin{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  /* full-bleed video in document flow (ignore JS --ix/--iy/--vh/--r) */
  #hero .hero-video,
  #hero #hv{
    position:relative !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    height:100svh !important;
    width:100% !important;
    max-width:100% !important;
    border-radius:0 !important;
    will-change:auto !important;
  }
  #hero .hero-title{
    opacity:1;
  }
  /* intro always in flow, never clipped / scrub-faded;
     restore side pad (= services .rightbox --hiso-mshell-pad) */
  #hero #intro,
  #hero .intro{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    max-width:none !important;
    padding:28px var(--hiso-mshell-pad, 16px) 8px !important;
    box-sizing:border-box !important;
    opacity:1 !important;
  }
  /* claim: deeper weight + opener lh + explicit #111 (services lead color) */
  #hero .intro h2{
    color:#111 !important;
    font-weight:400 !important;
    line-height:1.55 !important;
    letter-spacing:normal !important;
  }
  #hero .intro .ln{
    display:block !important;
    overflow:visible !important;
  }
  #hero .intro .ln > span{
    display:inline !important;
    transform:none !important;
    opacity:1 !important;
  }
  /* scenario/.fit: deepen from --grey #6e6e69 → services body #3a3a37; open lh */
  #hero .intro .fit{
    opacity:1 !important;
    transform:none !important;
    color:#3a3a37 !important;
    font-weight:400 !important;
    line-height:1.8 !important;
  }
  #hero .intro .fit .fit-ln{
    display:block !important;
    opacity:1 !important;
    transform:none !important;
  }
  /* mh2hide3 2026-11-05 — mobile only: hide first 3 h2 claim lines; keep 4th + all .fit + .svc.
     Desktop ≥821 unchanged (outside this media query). */
  #hero .intro h2 .ln:nth-child(-n+3){
    display:none !important;
  }
  #hero .intro .svc{
    color:#3a3a37 !important;
    font-weight:400 !important;
  }
  /* kill JS --mpt white pad; keep case cards tight under intro;
     use same mshell pad as intro/services for even gutters */
  #work.work{
    display:block !important;
    padding:16px var(--hiso-mshell-pad, 16px) 0 !important;
  }
  /* mhidecases 2026-11-05 — mobile only: hide 「精选案例」 label (.m-label);
     case cards (.case) kept. Desktop ≥821 uses .w-title (outside this media; unchanged). */
  #work .m-label{
    display:none !important;
  }
  /* msvcul 2026-11-05 — mobile only: brand yellow underline under each .svc word
     (品牌营销 / 品牌设计 / 空间设计). Dots「·」stay plain text (no underline).
     Words wrapped by hiso-mobile-shell.js → span.svc-w when matchMedia phone.
     Desktop ≥821 unchanged (.svc already display:none outside this media). */
  #hero .intro .svc .svc-w{
    border-bottom:2px solid #dfff00;
    padding-bottom:1px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
}


/* ========== mdarkhome 2026-11-05 — mobile: black PAGE only on homepage
   ≤820 / short landscape. Desktop ≥821 unchanged.
   html.hiso-mshell-mdark is set by JS only on `/` (+ index.html/php).
   Non-home pages keep white/light shell; menu panel stays black sitewide
   (see panel block below + mmenu1). Brand yellow #dfff00. */

/* menu panel black + light links — sitewide on phone (open menu), not home-only */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
  .hiso-mshell-panel{
    background:rgba(0,0,0,.98) !important;
  }
  .hiso-mshell-panel a{
    color:#f2f2ee !important;
    border-bottom-color:#262626 !important;
  }
  /* clean focus: no yellow box on hamburger/X (sitewide) */
  .hiso-mshell-tg:focus,
  .hiso-mshell-tg:active{
    outline:none;
  }
  .hiso-mshell-tg:focus-visible{
    outline:1px solid rgba(242,242,238,.35);
    outline-offset:2px;
  }
}

/* page / chrome black — HOME ONLY via html.hiso-mshell-mdark */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
  html.hiso-mshell-mdark{
    --bg:#000;
    --fg:#f2f2ee;
    --grey:#8a8a85;
    --dim:#8a8a85;
    --body:#cfcfca;
    --line:#262626;
    --panel:#111;
    --hiso-mshell-fg:#f2f2ee;
  }
  html.hiso-mshell-mdark,
  html.hiso-mshell-mdark body{
    background:#000 !important;
    color:#f2f2ee !important;
  }

  /* top bar / hamburger — light on black (home closed state) */
  html.hiso-mshell-mdark header.nav .hiso-mshell-tg,
  html.hiso-mshell-mdark .nav .hiso-mshell-tg,
  html.hiso-mshell-mdark .hiso-mshell-tg{
    color:#f2f2ee !important;
  }
  html.hiso-mshell-mdark.nav-hero header.nav .hiso-mshell-tg,
  html.hiso-mshell-mdark.nav-hero .nav .hiso-mshell-tg{
    color:#fff !important;
  }

  /* logo: white on black (same invert as logo-hero over video) */
  html.hiso-mshell-mdark .logo,
  html.hiso-mshell-mdark .logo img{
    mix-blend-mode:normal !important;
  }
  html.hiso-mshell-mdark .logo{
    filter:none !important;
  }
  html.hiso-mshell-mdark .logo img{
    filter:brightness(0) invert(1) !important;
  }
  html.hiso-mshell-mdark.logo-hero .logo{
    filter:drop-shadow(0 0 1px rgba(0,0,0,.18)) drop-shadow(0 1px 3px rgba(0,0,0,.22)) !important;
  }
  html.hiso-mshell-mdark.logo-hero .logo img{
    filter:brightness(0) invert(1) !important;
  }

  /* safe gradient over black */
  html.hiso-mshell-mdark .safe{
    background:linear-gradient(#000 78%,rgba(0,0,0,0)) !important;
  }

  /* home intro — titles/body light; svc yellow underline kept */
  html.hiso-mshell-mdark #hero .intro h2{
    color:#f2f2ee !important;
  }
  html.hiso-mshell-mdark #hero .intro .fit,
  html.hiso-mshell-mdark #hero .intro .svc{
    color:#cfcfca !important;
  }
  html.hiso-mshell-mdark #hero .intro .svc .svc-w{
    border-bottom:2px solid #dfff00 !important;
  }

  /* case cards: gutters black; media plate near-black; images themselves unchanged */
  html.hiso-mshell-mdark #work.work,
  html.hiso-mshell-mdark .work{
    background:transparent !important;
  }
  html.hiso-mshell-mdark .c-media{
    background:#161616 !important;
  }
  html.hiso-mshell-mdark .c-text h2,
  html.hiso-mshell-mdark .c-text .c-head h2{
    color:#f2f2ee !important;
  }
  html.hiso-mshell-mdark .c-text h3,
  html.hiso-mshell-mdark .c-text .c-meta,
  html.hiso-mshell-mdark .c-meta{
    color:#8a8a85 !important;
  }
  html.hiso-mshell-mdark .c-desc{
    color:#bdbdb8 !important;
  }
  html.hiso-mshell-mdark .all{
    background:#161616 !important;
    color:#f2f2ee !important;
  }
  html.hiso-mshell-mdark .m-label,
  html.hiso-mshell-mdark .w-title>span{
    color:#f2f2ee !important;
  }

  /* HOW / methodology */
  html.hiso-mshell-mdark .how>div:first-child h2,
  html.hiso-mshell-mdark .how h3,
  html.hiso-mshell-mdark .how h3 a{
    color:#f2f2ee !important;
  }
  html.hiso-mshell-mdark .how ul,
  html.hiso-mshell-mdark .how li a,
  html.hiso-mshell-mdark .label{
    color:#bdbdb8 !important;
  }
  html.hiso-mshell-mdark .how h3 a::before{
    background:#dfff00 !important;
  }

  /* CTA 「先聊聊…」+ phone */
  html.hiso-mshell-mdark .end{
    background:#000 !important;
    border-top-color:#262626 !important;
  }
  html.hiso-mshell-mdark .end h2{
    color:#f2f2ee !important;
  }
  html.hiso-mshell-mdark .end .cta-o,
  html.hiso-mshell-mdark .cta-o,
  html.hiso-mshell-mdark footer .o,
  html.hiso-mshell-mdark footer .fc .o,
  html.hiso-mshell-mdark footer .fcta .o,
  html.hiso-mshell-mdark .hiso-about-cta-bottom .fc .o{
    background:#000 !important;
    color:#f2f2ee !important;
    border:none !important;
    box-shadow:none !important;
  }

  /* footer copyright */
  html.hiso-mshell-mdark footer,
  html.hiso-mshell-mdark footer > div,
  html.hiso-mshell-mdark footer > div:not(.fc),
  html.hiso-mshell-mdark footer .fl,
  html.hiso-mshell-mdark footer a{
    color:#8a8a85 !important;
    background:transparent !important;
  }
  html.hiso-mshell-mdark footer{
    background:#000 !important;
  }

  /* white-override hard-coded greys → light (home-only; other pages stay white) */
  html.hiso-mshell-mdark .sec .v p,
  html.hiso-mshell-mdark .lead,
  html.hiso-mshell-mdark .sec{
    border-top-color:#262626 !important;
  }
  html.hiso-mshell-mdark .sec .v p{
    color:#cfcfca !important;
  }
  html.hiso-mshell-mdark .k .no,
  html.hiso-mshell-mdark .relh{
    color:#8a8a85 !important;
  }

  /* about / contact shared chrome — gated so non-home stays white */
  html.hiso-mshell-mdark .hiso-about-cta-bottom,
  html.hiso-mshell-mdark .hiso-about-cta-bottom .fc .big{
    color:#f2f2ee !important;
    background:transparent !important;
  }
}


/* ========== mctatight 2026-11-05 — mobile only: pull「先聊聊…」closer to content above
   ≤820 / short landscape. Shrink .end padding-top (was clamp(60px,10vh,120px) ≈60–84px
   on phones) + keep margin-top 0 after .scene-mask. Desktop ≥821 unchanged
   (index inline desktop media still owns calc(...-33px)). */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
  .end{
    padding-top:28px !important;
    margin-top:0 !important;
  }
}


/* ========== mmenu1 2026-11-05 — mobile only: full-bleed panel + clean current + white X
   ≤820 / short landscape. Desktop ≥821 unchanged.
   1) panel top:0 (covers header gap); header/logo/X float above panel
   2) no yellow tg outline (sitewide panel block); open-state bars stay white/#f2f2ee
   3) drop 8px yellow ::before underline; current = weight + 2px left bar */
@media (max-width:820px),(max-width:1023px) and (max-height:560px){
  /* full-bleed black panel to screen top */
  .hiso-mshell-panel{
    top:0 !important;
    padding-top:80px !important;
    z-index:90;
  }

  /* keep logo + hamburger/X above the panel so close stays usable */
  html.hiso-mshell-open header.nav,
  html.hiso-mshell-open .nav{
    z-index:100;
  }
  html.hiso-mshell-open .logo,
  html.hiso-mshell-open .leftnavlogo .logo{
    z-index:101;
  }
  html.hiso-mshell-open .hiso-mshell-bar{
    z-index:100;
  }
  html.hiso-mshell-open .hiso-mshell-tg{
    position:relative;
    z-index:102;
    color:#f2f2ee !important;
  }
  html.hiso-mshell-open header.nav .hiso-mshell-tg,
  html.hiso-mshell-open .nav .hiso-mshell-tg{
    color:#f2f2ee !important;
  }

  /* kill thick yellow underline (on / hover / focus-visible) */
  .hiso-mshell-panel a.on::before,
  .hiso-mshell-panel a:focus-visible::before,
  .hiso-mshell-panel a:hover::before{
    content:none !important;
    display:none !important;
    background:transparent !important;
    height:0 !important;
  }

  /* cleaner current: weight + thin left accent */
  .hiso-mshell-panel a.on{
    font-weight:700;
    color:#fff !important;
  }
  .hiso-mshell-panel a.on::after{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:2px;
    background:#dfff00;
    border-radius:1px;
    pointer-events:none;
  }

  @media (hover:hover){
    .hiso-mshell-panel a:hover{
      font-weight:700;
    }
  }
}