/* Device-independent icons and touch layouts. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.icon{display:inline-block;width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.circle-icon,.round-arrow,.teaser-arrow,.disclosure-icon,.close-dialog{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.teaser-arrow .icon,.round-arrow .icon{width:24px;height:24px}
.text-button{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;text-align:left}
.text-button span{margin-left:0}
.dialog-close-bar{position:sticky;top:0;height:0;z-index:5}
.close-dialog{width:44px;height:44px}
.work-meta>span:last-child,footer>a:last-child{display:inline-flex;align-items:center;gap:8px}
.reveal-word{max-width:100%;overflow-wrap:anywhere}

/* Tablet navigation needs the same roomy menu as phones. */
@media(min-width:701px) and (max-width:1000px){
  .nav-links{display:none}
  .nav-contact{margin-left:auto;margin-right:16px;min-height:44px}
  .menu-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;background:none}
  .menu-button span{height:1px;width:23px;background:white}
  .mobile-nav{max-width:1600px;margin:8px auto 0;padding:14px 24px;border-radius:18px;background-color:#32463ef5;color:white}
  .mobile-nav a,.mobile-nav button{display:flex;align-items:center;gap:16px;padding:14px 0;min-height:48px;background:none;color:inherit;font-size:1rem}
  .studio{grid-template-columns:1fr 3fr}
  .studio-bottom{gap:24px}
  .material-grid{gap:20px}
  .material-caption h3{font-size:1.6rem}
}

@media(max-width:700px){
  html{scroll-padding-top:24px}
  :root{--mobile-gutter:clamp(20px,6vw,32px)}
  .nav-wrap{top:max(14px,env(safe-area-inset-top));left:16px;right:16px}
  .nav{height:64px;padding:0 12px 0 19px;border-radius:19px}
  .nav .wordmark{font-size:2rem}
  .nav-contact{min-height:44px;padding:10px 15px;gap:12px;margin-right:5px;font-size:13px}
  .nav-contact .icon{width:18px;height:18px}
  .menu-button{width:44px;height:44px;padding:10px;align-items:center;flex-shrink:0}
  .menu-button span{width:22px}
  .mobile-nav{padding:12px 22px;background-color:#32463ef5;max-height:calc(100svh - 105px);overflow-y:auto}
  .mobile-nav a,.mobile-nav button{min-height:48px;width:100%}
  .mobile-nav button{display:flex;align-items:center;gap:15px}
  .hero{display:flex;flex-direction:column;height:auto;min-height:100svh;max-height:none}
  .hero-content{width:100%;margin:0;padding:clamp(126px,18svh,166px) var(--mobile-gutter) 38px}
  .hero-content .eyebrow{font-size:9px;letter-spacing:.09em;gap:8px;white-space:nowrap}
  .small-line{width:16px;flex-shrink:0}
  h1{font-size:clamp(2.85rem,11.5vw,4.6rem);line-height:1.08;margin:24px 0}
  .hero-description{font-size:15px;line-height:1.7;margin-bottom:26px}
  .hero-image{object-position:61% center}
  .hero-shade{background:linear-gradient(90deg,#142c2b78,#142c2b12),linear-gradient(0deg,#152e2b85,transparent 55%)}
  .hero-bottom{position:relative;inset:auto;margin-top:auto;padding:0 var(--mobile-gutter) 57px;gap:0}
  .project-teaser{min-height:96px;padding:10px 14px 10px 10px;gap:13px;border-radius:17px}
  .teaser-thumbnail{width:66px;height:72px}
  .teaser-copy{min-width:0;gap:5px}
  .teaser-copy .eyebrow{font-size:9px;letter-spacing:.08em}
  .teaser-copy strong{font-size:1.25rem}
  .teaser-copy>span:last-child{font-size:10px;line-height:1.5}
  .teaser-arrow .icon{width:20px;height:20px}
  .pill{min-height:54px;font-size:14px;gap:22px}
  .section{padding:72px var(--mobile-gutter)}
  .opening-sequence .studio{min-height:0;padding:64px var(--mobile-gutter) 72px;border-radius:25px 25px 0 0}
  .section-label{margin-bottom:25px}
  .studio-body h2,.work h2,.interior-copy h2,.materials-heading h2,.approach h2,.process h2,.contact h2{font-size:clamp(2rem,8.5vw,3.2rem);line-height:1.15}
  .studio-bottom{margin-top:26px;gap:18px}
  .studio-bottom p,.interior-copy>p:not(.eyebrow),.approach-intro>p:last-child{font-size:15px;line-height:1.8}
  /* Keep the film immersive without forcing a desktop minimum height. */
  .cinematic{height:165svh;background:#25352e}
  .cinematic-stage{height:100svh;min-height:0;display:flex;align-items:center}
  .cinematic-poster,#drone-film{height:100%;object-fit:cover;object-position:62% center}
  .work-header{margin-bottom:28px}
  .work-header .eyebrow{margin-bottom:18px}
  .featured-work{border-radius:16px}
  .featured-work>img{aspect-ratio:4/5;object-position:62% center}
  .project-tag{top:14px;left:14px;padding:9px 13px;font-size:10px}
  .work-caption{padding:17px 15px;gap:10px}
  .work-caption strong{font-size:1.6rem}
  .work-caption span span{font-size:11px;max-width:180px}
  .round-arrow{width:40px;height:40px}
  .work-meta{font-size:10px;gap:12px;line-height:1.6}
  .work-meta>span:last-child{display:none}
  .interiors{padding-top:0;gap:33px}
  .interior-photo{height:auto;aspect-ratio:4/5;border-radius:16px}
  .interior-photo img{position:absolute;inset:0;object-position:47% center}
  .interior-caption{left:12px;right:12px;bottom:12px;padding:15px;font-size:11px}
  .interior-copy h2{margin:20px 0 25px}
  .interior-copy .text-button{margin-top:4px;font-size:14px}
  .materials-heading h2{margin:20px 0}
  .materials-heading>p:last-child{font-size:14px}
  .material-grid{gap:32px;margin-top:32px}
  .material-image{height:auto;aspect-ratio:3/2}
  .material-caption{padding:17px 0 10px;gap:14px}
  .material-caption h3{font-size:1.5rem}
  .material-caption span{font-size:11px}
  .material-card>p{font-size:14px;line-height:1.75}
  .approach h2{margin:20px 0}
  .principles{margin-top:30px}
  .principles article{padding:25px 0}
  .principles h3{font-size:1.2rem}
  .principles p{font-size:14px;line-height:1.8}
  .process-list{margin-top:26px}
  .process summary{min-height:72px;gap:16px;padding:22px 0}
  .process h3{font-size:1.05rem}
  .disclosure-icon{width:28px;height:28px}
  .process-content p{font-size:14px;line-height:1.8}
  .process-content>span{font-size:10px;line-height:1.7}
  .contact{padding:24px 16px}
  .contact-inner{padding:36px 22px 38px}
  .contact-inner .eyebrow{font-size:9px;letter-spacing:.12em;max-width:220px}
  .contact h2{margin:22px 0 28px;font-size:clamp(1.95rem,8.3vw,3rem)}
  .contact .pill{font-size:12px;gap:12px;padding-left:17px;max-width:100%;width:100%}
  footer{display:grid;grid-template-columns:1fr auto;gap:18px 12px;padding:34px var(--mobile-gutter) max(30px,env(safe-area-inset-bottom))}
  footer p{font-size:11px;text-align:right}
  footer>span{font-size:10px;line-height:1.6}
  footer>a:last-child{font-size:10px;min-height:44px;justify-content:flex-end}
  footer .icon{width:16px;height:16px}
  dialog{width:100%;max-width:100%;max-height:92svh;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .dialog-copy{padding:30px var(--mobile-gutter)}
  .dialog-copy h2{font-size:2.5rem}
  .detail-dialog>img{height:auto;aspect-ratio:4/3}
  .dialog-copy>p:not(.eyebrow){font-size:15px}
  .dialog-copy .text-button{font-size:14px}
  .contact-dialog .dialog-copy{padding-top:58px}
  .close-dialog{top:14px;right:14px}
  .project-specs{gap:24px 16px}
  dd{font-size:13px;line-height:1.5}
  input,textarea{font-size:16px;min-height:48px}
}

@media(max-width:700px) and (max-height:650px){
  .hero-content{padding-top:112px;padding-bottom:22px}
  h1{margin:18px 0}
  .hero-description{margin-bottom:18px}
  .hero-bottom{padding-bottom:44px}
}
@media(max-width:1000px) and (max-height:550px){
  .opening-sequence .hero{position:relative;height:auto;min-height:620px}
  .hero-content{padding-top:115px}
  h1{font-size:3.2rem;line-height:1.08}
  .cinematic-stage{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .cinematic{height:100svh}
}