html{
  -webkit-text-size-adjust:100%;
}

@media (max-width: 900px){
  .main-nav{
    width:min(calc(100vw - 28px), 320px);
    max-height:min(70vh, 420px);
    overflow:auto;
    overscroll-behavior:contain;
  }

  .main-nav a{
    font-size:16px;
  }

  .hero-center{
    max-width:640px;
    padding:30px 22px 22px;
  }

  .studio-visual blockquote{
    transform:none;
    text-align:left;
  }

  .reviews-shell{
    grid-template-columns:1fr;
  }

  .reviews-window{
    width:100%;
  }

  .review-card p{
    min-height:auto;
  }

  .contact-list a,
  .case-contact .contact-list a,
  .detail-contact .contact-list a{
    width:100%;
  }
}

@media (max-width: 640px){
  .site-header{
    top:12px;
    left:12px;
    right:12px;
    min-height:74px;
    padding:12px 14px;
    border-radius:24px;
  }

  .brand img{
    width:68px;
  }

  .brand span{
    font-size:17px;
  }

  .main-nav{
    top:calc(100% + 10px);
    left:auto;
    right:0;
    padding:14px;
    border-radius:18px;
  }

  .panel{
    padding:calc(var(--header-h) + 18px) 12px 22px;
  }

  .hero{
    min-height:auto;
    padding-top:calc(var(--header-h) + 18px);
    padding-bottom:26px;
  }

  .hero-collage{
    inset:calc(var(--header-h) + 54px) 4px 132px;
    opacity:.76;
  }

  .shot-2,
  .shot-5{
    display:none;
  }

  .shot-1{
    width:46vw;
    left:0;
    top:4%;
  }

  .shot-3{
    width:54vw;
    left:-2%;
    bottom:18%;
  }

  .shot-4{
    width:56vw;
    left:auto;
    right:0;
    bottom:6%;
  }

  .hero-center{
    padding:24px 18px 18px;
    border-radius:28px;
  }

  .hero-mark{
    width:132px;
  }

  .hero-copy{
    margin-bottom:20px;
  }

  .scroll-hint{
    display:none;
  }

  .hero-actions,
  .showcase-actions,
  .project-library-actions,
  .case-actions,
  .mini-cta{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .hero-actions > *,
  .showcase-actions > *,
  .project-library-actions > *,
  .case-actions > *,
  .mini-cta > *{
    width:100%;
  }

  .studio-copy{
    padding:22px 18px;
  }

  .studio-lead{
    font-size:18px;
  }

  .portrait-card{
    padding:16px;
    border-radius:28px;
  }

  .portrait-photo{
    width:100%;
    margin:8px 0 0;
    transform:none;
  }

  .portrait-note{
    position:static;
    margin-top:14px;
  }

  .studio-visual blockquote{
    max-width:none;
    padding:0 2px;
    font-size:32px;
  }

  .showcase-stage{
    min-height:560px;
    border-radius:28px;
  }

  .bg-card{
    width:54vw;
    padding:7px;
    border-radius:18px;
  }

  .showcase-card{
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    padding:18px;
    border-radius:22px;
  }

  .project-library-card{
    padding:14px;
    border-radius:22px;
  }

  .project-library-cover{
    border-radius:18px;
  }

  .project-library-toggle{
    width:100%;
  }

  .map-pills{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .map-pill{
    width:100%;
    justify-content:center;
    padding:0 10px;
    text-align:center;
  }

  .map-shell{
    min-height:auto;
    padding:14px;
    border-radius:22px;
  }

  .map-gridlines{
    inset:12px;
  }

  .map-svg{
    min-height:280px;
  }

  .map-card{
    max-width:128px;
    padding:10px;
    border-radius:16px;
  }

  .map-card span{
    font-size:10px;
  }

  .map-card strong{
    font-size:14px;
  }

  .map-card-a{
    left:10px;
    top:10px;
  }

  .map-card-b{
    right:10px;
    top:58px;
  }

  .map-card-c{
    right:10px;
    bottom:12px;
  }

  .map-orbits{
    position:static;
    inset:auto;
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    pointer-events:auto;
  }

  .map-orbit{
    position:static;
    transform:none;
    width:100%;
    min-height:40px;
    justify-content:center;
    font-size:11px;
  }

  .process-steps{
    padding:20px 16px;
  }

  .process-step{
    grid-template-columns:1fr;
    gap:12px;
  }

  .process-icon{
    width:52px;
    height:52px;
  }

  .process-line{
    display:none;
  }

  .reviews-side,
  .reviews-right,
  .contact-copy,
  .contact-form{
    padding:20px 18px;
    border-radius:24px;
  }

  .review-card{
    min-height:auto;
    padding:20px;
  }

  .review-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .review-meta{
    gap:12px;
  }

  .review-dots{
    justify-content:flex-start;
  }

  .contact-form button,
  .review-form button,
  .case-contact .contact-form button,
  .detail-contact .contact-form button{
    width:100%;
    justify-self:stretch;
  }

  .site-footer{
    min-height:auto;
    padding:14px 16px;
    text-align:center;
  }

  .contact-panel{
    padding-bottom:104px;
  }

  .sticky-cta{
    left:12px;
    right:12px;
    bottom:max(12px, env(safe-area-inset-bottom));
    min-height:50px;
    padding:0 16px;
    border-radius:18px;
  }

  .toast{
    left:12px;
    right:12px;
    bottom:74px;
    text-align:center;
  }

  .lightbox{
    padding:14px 10px 76px;
  }

  .lightbox-close{
    top:12px;
    right:12px;
  }

  .lightbox-counter{
    bottom:18px;
  }

  .inner-page{
    padding:118px 12px 104px;
  }

  .case-shell,
  .inner-shell{
    gap:18px;
  }

  .case-hero,
  .case-panel,
  .case-gallery,
  .viewer-shell,
  .case-contact .contact-copy,
  .case-contact .contact-form,
  .detail-copy,
  .detail-visual,
  .detail-block,
  .detail-strip,
  .detail-gallery,
  .detail-contact .contact-copy,
  .detail-contact .contact-form{
    padding:18px;
    border-radius:22px;
  }

  .case-copy h1,
  .detail-copy h1{
    font-size:clamp(34px, 10vw, 48px);
  }

  .case-copy p,
  .case-panel p,
  .case-gallery p,
  .viewer-copy p,
  .case-contact .contact-copy p,
  .detail-copy p,
  .detail-strip p,
  .detail-block p,
  .detail-contact .contact-copy p{
    font-size:15px;
    line-height:1.65;
  }

  .case-stat,
  .stat-card,
  .strip-item{
    padding:16px 18px;
  }

  .case-stat strong,
  .stat-card strong{
    font-size:16px;
  }

  .case-media-main,
  .case-media-stack img{
    aspect-ratio:1.04;
    height:auto;
  }

  .viewer-frame{
    padding:12px;
    border-radius:20px;
  }

  .viewer-badge{
    position:static;
    margin-bottom:10px;
  }

  .viewer-frame img{
    min-height:240px;
    border-radius:16px;
  }

  .viewer-slider{
    padding:14px;
  }

  .viewer-thumbs{
    grid-template-columns:1fr;
  }

  .viewer-thumb{
    grid-template-columns:96px 1fr;
    align-items:center;
  }

  .viewer-thumb img{
    aspect-ratio:1;
  }

  .viewer-caption,
  .viewer-meta{
    gap:10px;
  }

  .case-photo img{
    min-height:200px;
  }

  .detail-visual{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .detail-visual img{
    position:static !important;
    width:100% !important;
    aspect-ratio:1.04;
    height:auto;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    border-radius:18px;
  }

  .detail-contact .contact-list a{
    justify-content:flex-start;
  }
}

@media (max-width: 480px){
  h2{
    font-size:36px;
  }

  h3{
    font-size:30px;
  }

  .section-kicker::before{
    width:24px;
  }

  .hero-collage{
    inset:calc(var(--header-h) + 58px) 0 150px;
  }

  .shot-1{
    width:48vw;
  }

  .shot-3{
    width:58vw;
    bottom:20%;
  }

  .shot-4{
    width:58vw;
  }

  .showcase-stage{
    min-height:520px;
  }

  .showcase-card{
    left:10px;
    right:10px;
    bottom:10px;
    padding:16px;
  }

  .map-pills,
  .map-orbits{
    grid-template-columns:1fr;
  }

  .map-svg{
    min-height:220px;
  }

  .map-card{
    position:static;
    max-width:none;
    width:100%;
  }

  .map-card-a,
  .map-card-b,
  .map-card-c{
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
  }

  .map-shell{
    display:grid;
    gap:8px;
  }

  .viewer-thumb{
    grid-template-columns:84px 1fr;
  }

  .viewer-frame img{
    min-height:220px;
  }
}