/* Atypisch mobile layer — loaded last on every page */
html,body{overflow-x:clip}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,svg{max-width:100%}
a,button{-webkit-tap-highlight-color:rgba(45,212,191,.18)}

@media (max-width:899px){
  :root{--s2-pad:20px}
  /* header */
  .s2-nav{padding:calc(10px + env(safe-area-inset-top)) 0 10px}
  .s2-nav.is-scrolled,.s2-nav.is-open{padding:calc(6px + env(safe-area-inset-top)) 0 6px}
  .s2-nav__brand img{height:20px}
  .s2-nav__cta{min-height:40px;padding:0 14px;font-size:.85rem}
  .s2-drawer{padding-top:calc(84px + env(safe-area-inset-top))}
  .s2-drawer__nav a{padding:12px 0;font-size:clamp(1.7rem,8.5vw,2.4rem)}

  /* type + rhythm */
  .section{padding:64px 0}
  .section--tight{padding:40px 0!important}
  .section__head{margin-bottom:32px}
  .section__title{font-size:clamp(1.8rem,8vw,2.4rem)!important}
  .page-hero,.dark-hero,.work-hero{padding:calc(110px + env(safe-area-inset-top)) 0 56px!important}
  .case-stage{padding-top:calc(110px + env(safe-area-inset-top))!important}
  .page-hero h1,.dark-hero h1,.work-hero h1,.case-stage h1{font-size:clamp(2.3rem,10.5vw,3.2rem)!important;line-height:1.02!important}
  .page-hero__lead,.dark-hero__lead,.work-hero__lead,.case-stage__tag,.section__sub{font-size:1rem!important;line-height:1.55}
  .dark-hero__inner,.page-hero__inner{gap:28px!important}
  .dark-hero__specstrip{display:flex;flex-wrap:wrap;gap:8px 16px}
  .dark-hero__specstrip span{white-space:normal}
  .statement{font-size:clamp(1.5rem,7vw,2rem)!important}
  p,li{text-wrap:pretty}

  /* buttons + tap targets */
  .pill,.s2-btn,.skb-btn,.v2-pill{min-height:48px}
  .s2-foot__grid a{padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
  .s2-foot__grid ul{gap:0}
  .s2-foot__grid{gap:28px;grid-template-columns:1fr 1fr!important}
  .s2-foot__grid>div:first-child{grid-column:1/-1}
  .s2-foot__cta{padding:72px var(--s2-pad) 48px}
  .s2-foot__big{font-size:clamp(2.2rem,10vw,3rem)}
  .s2-foot__row{flex-direction:column;align-items:stretch}
  .s2-foot__row .s2-btn{justify-content:center}
  .s2-foot__bottom{flex-direction:column;gap:6px}

  /* forms: 16px prevents iOS zoom */
  input,select,textarea{font-size:16px!important}
  .field input,.field select,.field textarea{min-height:48px}

  /* devices / scenes */
  .dv-rig{max-width:100%!important}
  .scene{padding:12px 12px 28px!important}
  .feat-row{grid-template-columns:1fr!important;gap:6px!important}
  .case-grid{grid-template-columns:1fr!important}
  .case-grid__side,.stick,.post-rail{position:relative!important;top:auto!important}
  .chap-nav{display:none}
  .split-chap{grid-template-columns:1fr!important}
  .shot-pair{grid-template-columns:1fr!important}
  .cm-slider__arrow{width:44px;height:44px}
  .next-case__name{font-size:clamp(2rem,10vw,3rem)!important}

  /* Soriku */
  .skb-band{padding:64px 0 48px}
  .skb-band__title{font-size:clamp(2rem,9vw,2.6rem)!important}
  .skb-band__head{gap:20px;margin-bottom:28px}
  .skx{gap:16px}
  .skx__demo{max-width:none!important;margin:0 -8px!important;width:calc(100% + 16px)}
  .skb-row{padding:22px var(--s2-pad);border-right:0}
  .skb-shots{gap:16px}
  .sp-hero2{padding-top:calc(110px + env(safe-area-inset-top))}
  .sp-hero2__t{font-size:clamp(2.3rem,10.5vw,3.2rem)!important}

  /* products overview */
  .po-group{padding:64px var(--s2-pad) 24px}
  .po-stack{padding:0 8px 40px}
  .po-card{padding:22px 18px 26px;border-radius:20px;gap:24px;margin-bottom:12px}
  .po-card h3{font-size:clamp(2.2rem,11vw,3rem)}
  .po-card__pitch{font-size:1.05rem}
  .po-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-facts div:nth-child(3){grid-column:1/-1}
  .po-scene{order:-1;padding:0 26px 18px 0}
  .po-phone{width:26%;border-radius:16px;padding:4px}
  .po-phone>div{border-radius:12px}
  .po-updates{padding:64px 0}
  .po-tl{grid-auto-columns:82%}
  .po-tl a{min-height:190px}
  .po-index a{min-width:42vw;padding:16px 16px}
  .po-index a:first-child{padding-left:var(--s2-pad)}
}

@media (max-width:420px){
  .s2-foot__grid{grid-template-columns:1fr 1fr!important}
  .po-term{font-size:.74rem}
  .skx__step b{font-size:.9rem}
}

@media (hover:none){
  .po-win{transform:none!important}
  [data-parallax]{transform:none!important}
}