html,body{width:100%;max-width:100%;overflow-x:clip}
main,section,header,footer{max-width:100%}
img{max-width:100%}

@media(max-width:760px){
  .site-header{isolation:isolate;background:#fff}
  .site-header nav{
    display:flex;
    position:fixed;
    z-index:1;
    top:76px;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(100dvh - 76px);
    max-width:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#fff;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none;
    transition:opacity .25s ease,visibility 0s linear .25s;
  }
  .site-header nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition:opacity .25s ease;
  }
  .menu-toggle{position:relative;z-index:2}
  body.menu-open{height:100dvh;overflow:hidden}
  .hero,.hero-slide,.studio-banner,.catalog,.about,.possibilities,footer{width:100%}
  .product-grid,.section-head,.two-columns,.form-page,.detail,.page-title,.event{min-width:0}
  .hero{height:calc(100dvh - 76px);min-height:620px;max-height:780px}
  .hero-slide{padding:32px 22px calc(28px + env(safe-area-inset-bottom));align-items:center}
  .hero-slide .hero-content{width:100%;max-width:100%;padding:42px 0 150px}
  .hero-slide h1{font-size:clamp(52px,15vw,70px);line-height:.96;letter-spacing:-.045em;overflow-wrap:anywhere;margin-bottom:24px}
  .hero-slide .eyebrow{font-size:9px;line-height:1.5;letter-spacing:.18em;margin-bottom:20px}
  .hero-slide .hero-copy{font-size:16px;line-height:1.45;margin-bottom:24px;max-width:310px}
  .hero-slide .button{width:min(100%,220px);min-width:0;min-height:52px;padding:14px 18px}
  .hero-note{width:98px;height:98px;right:18px;bottom:calc(22px + env(safe-area-inset-bottom))}
  .hero-note span{font-size:22px}.hero-note p{font-size:8px}
  .hero-controls{left:18px;bottom:calc(24px + env(safe-area-inset-bottom));gap:10px}
  .hero-controls button{width:42px;height:42px}.hero-controls span{font-size:10px}
  .studio-banner{padding:58px 22px}.studio-banner h2{font-size:clamp(34px,10vw,46px);line-height:1.08;overflow-wrap:anywhere}.studio-banner>div>p{font-size:14px}
  .section-head h2,.about-copy h2,.possibility-copy h2,.page-title h1,.legal h1{overflow-wrap:anywhere}
  .section-head h2{font-size:clamp(43px,13vw,58px)}
  .product-image{height:auto;aspect-ratio:1/1}.product-card{min-width:0}.product-card dl div{align-items:flex-start}.product-card dt,.product-card dd{max-width:52%}
  .about-copy h2{font-size:clamp(38px,11vw,52px)}.about>img{height:auto;aspect-ratio:4/3}
  .possibility-image{height:auto}.possibility-image img{aspect-ratio:4/5}
  .detail-visual{height:auto;min-height:430px}.detail-visual img{width:100%;height:auto;max-height:390px;object-fit:contain}.detail-copy h1{font-size:clamp(58px,18vw,86px);overflow-wrap:anywhere}
  .table-scroll{width:100%;max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .form-main input,.form-main select,.modal input{min-width:0;font-size:16px}.form-aside h1{font-size:clamp(58px,18vw,82px)}
  footer a{overflow-wrap:anywhere}footer .footer-phone{font-size:clamp(27px,8vw,38px)}
}

@supports not (overflow:clip){html,body{overflow-x:hidden}}