/* Mobile and tablet refinements; desktop artwork and motion stay in place. */
@media (max-width:1000px) and (min-width:701px){
  .intro{grid-template-columns:1fr;height:auto}.intro h1{border-right:0;border-bottom:1px solid var(--line);font-size:clamp(32px,4.4vw,44px)}
  .intro-bottom{grid-template-columns:1fr 220px}.intro-bottom>p{font-size:16px;line-height:1.45;padding:20px}.actions .button,.actions .text-link{font-size:14px;min-height:48px}
  .contact{gap:24px;padding:48px 24px}.contact>*{min-width:0}.contact h2{font-size:32px}.contact form{padding:20px}
}
@media (max-width:700px){
  #toggle-installations,.drawing #hotspots,.drawing #callouts,.drawing #selected-installation,.drawing .technical-overlay{display:none}
  .drawing .drawing-top{display:none}
  html{scroll-padding-top:76px}body{margin:5px}
  header{height:60px;grid-template-columns:minmax(0,1fr) auto}header.header-away{transform:none}
  header .brand{min-width:0}header .brand img{width:156px;height:52px}
  .menu-toggle{font-size:14px;min-width:92px;padding:0 16px;min-height:44px}
  header nav{top:58px;max-height:calc(100dvh - 76px);overflow-y:auto}
  nav a{font-size:14px;min-height:60px;padding:20px 16px}
  main>section,section>div,article,.connection-detail>div{min-width:0}
  h1,h2,h3{overflow-wrap:break-word}
  .drawing{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding:18px 0 20px;overflow:clip}
  .drawing-top{position:relative;inset:auto;width:100%;padding:0 15px;gap:12px;align-items:center}
  .drawing-top>span{font-size:12px;max-width:120px;line-height:1.5}
  .drawing-top button{font-size:12px;min-height:46px;padding:12px;flex-shrink:0}
  .drawing .drawing-stage{width:90%;margin:8px auto;aspect-ratio:1.5;max-width:90%}
  .drawing-bottom{position:relative;inset:auto;padding:0 16px;gap:8px;font-size:12px;line-height:1.5;width:100%}
  .drawing-bottom>span:last-child{font-size:12px}
  .selected-installation{position:relative;inset:auto;max-width:calc(100% - 32px);width:100%;margin:16px 16px 0;padding:16px;font-size:16px;line-height:1.5}
  .selected-installation strong{font-size:14px}
  .installation-list{position:relative;inset:auto;margin-top:16px;grid-template-columns:1fr;border-left:0;border-right:0;width:100%}
  .installation-list article{border-right:0;padding:18px}.installation-list article:last-child{border-bottom:0}
  .installation-list h3{font-size:18px}.installation-list h3 span{font-size:12px}.installation-list p{font-size:16px;line-height:1.5}
  .intro h1{font-size:clamp(30px,7.7vw,48px);line-height:1.06;padding:24px 18px;letter-spacing:-.045em}
  .intro-bottom{display:flex;flex-direction:column}.intro-bottom>p{font-size:16px;line-height:1.5;padding:20px 18px}
  .actions{border-left:0;border-top:1px solid var(--line)}
  .actions .button,.actions .text-link{font-size:14px;min-height:54px;padding:17px 18px;align-items:center}
  .actions .button span{align-self:center}.hero-ticker{min-height:36px;font-size:12px}
  .position-art{height:110vw;min-height:0;max-height:570px}.portrait-illustration{width:100%;height:100%;aspect-ratio:auto}
  .position-statement{padding:32px 22px 0}.position-statement h2{font-size:clamp(26px,6.6vw,36px);line-height:1.12}
  .position-bottom{position:relative;inset:auto;align-self:stretch;margin:30px -22px 0}
  .position-bottom>span{font-size:12px;padding:16px 22px}.position-bottom>small{font-size:12px;line-height:1.5;padding:14px 22px}
  .discipline-marquee{height:64px}.image-tag{font-size:12px;gap:10px;max-width:calc(100% - 30px);line-height:1.4;flex-wrap:wrap}
  .section-heading{padding:32px 20px;gap:18px}.section-heading h2,.about h2,.contact h2{font-size:clamp(28px,7.3vw,40px);line-height:1.08}
  .section-heading>p,.benefit-grid-technical p,.project-caption p,.connection-detail p,.services .section-heading>p,.service-body p{font-size:16px;line-height:1.5}
  .eyebrow,.contact .eyebrow{font-size:12px;line-height:1.5}
  .benefit-grid-technical{grid-template-columns:1fr}
  .benefit-grid-technical .technical-card{border-right:0;border-bottom:1px solid var(--line)}.benefit-grid-technical .technical-card:last-child{border-bottom:0}
  .technical-label{height:44px;padding:0 20px;font-size:12px}.technical-visual{aspect-ratio:1.6;max-height:320px}.technical-visual img{padding:8px 20px}
  .technical-copy{padding:22px 20px 28px}.benefit-grid-technical h3{font-size:26px;min-height:0;margin:0 0 14px;line-height:1.1}.benefit-grid-technical p{max-width:none}
  /* The complete plan and its explanation flow naturally on a narrow screen. */
  .scroll-story{height:auto;min-height:0}.story-sticky{position:relative;top:auto;height:auto;min-height:0;overflow:hidden}
  .story-title{display:none}.plan-canvas{position:relative;inset:auto;display:flex;padding:20px 8px;width:100%!important;height:auto!important;opacity:1!important;transform:none!important}
  .installation-plan{width:100%;height:auto;max-height:480px}.plan-walls,.plan-cable{stroke-dashoffset:0!important}.plan-furniture,.plan-points,.plan-labels{opacity:1!important}
  .story-note{display:none}.story-aside{position:relative;inset:auto;width:100%;height:auto;transform:none!important}
  .story-aside>div{display:block;height:auto;padding:26px 20px 0}.story-aside>div h2{font-size:32px;line-height:1.08}.story-aside>div>p{font-size:16px;line-height:1.5;margin:18px 0 24px}
  .story-aside li{font-size:14px;line-height:1.5;padding:14px 0}.story-aside li span{font-size:12px}
  .story-aside .text-link{display:flex;margin:12px -20px 0;width:calc(100% + 40px);padding:18px 20px}
  .work-film{height:600px;min-height:0}.film-top{align-items:start;gap:12px;flex-wrap:wrap}.film-top>span{font-size:12px;line-height:1.5;max-width:150px}.film-top>a{font-size:12px;min-height:44px;padding:12px}
  .film-copy{padding:125px 18px}.film-copy h2{font-size:clamp(34px,9vw,60px);line-height:1.05}.film-copy>p{font-size:12px;line-height:1.5}
  .film-bottom{align-items:start;flex-direction:column;gap:16px}.film-bottom p{font-size:12px;max-width:none}.film-bottom button{font-size:14px;min-height:46px}
  .connection-flow button{gap:12px;padding:16px;min-height:76px}.connection-flow button span{width:102px;font-size:12px;line-height:1.5}.connection-flow button strong{font-size:clamp(18px,5.2vw,24px);padding-right:18px;overflow-wrap:anywhere}.connection-flow button i{right:12px}
  .connection-detail{min-height:0;padding:24px 18px}.connection-detail h3{font-size:24px;line-height:1.1}
  .workflow li{min-height:0;padding:26px 20px}.workflow li>span{font-size:12px}.workflow li h3{font-size:28px;line-height:1.1}.workflow li>p{line-height:1.5}.step-diagram{height:170px;width:85%;margin:20px auto 0}
  .project-image{min-height:0;padding:22px 0 50px}.project-caption{padding:30px 20px;min-height:0}.project-caption h3{line-height:1.1}.future-projects{margin-top:24px}.future-projects>span{font-size:12px}
  .about-mark{min-height:0;padding:50px 20px}.about-mark img{width:85%}.about>div:last-child{padding:32px 20px}.about p:not(.eyebrow){line-height:1.5}.about-values{font-size:12px}
  .services summary{grid-template-columns:24px minmax(0,1fr) 20px;gap:10px;padding:22px 0}.services h3{font-size:22px;line-height:1.15}.service-number{font-size:12px}.service-body{overflow-wrap:anywhere}
  .contact{padding:36px 16px;gap:26px}.contact form{padding:20px 16px;min-width:0}.contact form h3{line-height:1.15}.contact label{font-size:14px}.contact select,.contact textarea{font-size:16px;line-height:1.5;min-height:48px}.contact form .button{font-size:14px;min-height:52px}.form-note{font-size:14px;line-height:1.5}#contact-details{overflow-wrap:anywhere}.prepared-note pre{font-size:14px}
  .text-link,.prepared-note .text-link{font-size:14px;min-height:48px;max-width:100%;line-height:1.4}.text-link span{flex-shrink:0}.text-link .motion-label{min-width:0;flex-shrink:1}
  footer{grid-template-columns:1fr}footer>.brand{min-height:82px;border-right:0;justify-content:center}footer>p{font-size:20px;max-width:none;text-align:center;padding:0 20px 24px}footer>.back-top{font-size:14px;min-height:52px}.footer-bottom{font-size:12px;line-height:1.5;gap:12px}.footer-wordmark{font-size:10vw;padding:24px 6px}
}
@media (hover:none){a:hover .motion-label>span,button:hover .motion-label>span{transform:none}.technical-card:hover .technical-visual img{transform:none}}
@media(max-width:700px){.position-art{width:100%;aspect-ratio:auto}.position-art .portrait-illustration{inset:0;width:100%;height:100%;transform:none}}

/* Keep the redesigned story and project imagery compatible with natural mobile flow. */
@media(max-width:700px){
 .system-story .story-sticky{height:auto;min-height:0;position:relative}
 .system-layout{grid-template-rows:auto auto}.system-drawing{height:300px;min-height:0}
 .system-explanation>p{font-size:16px;line-height:1.45}.system-navigation button{min-height:62px}
 .connection-detail{padding:0}.connection-flow button span{width:auto;font-size:11px}
 .connection-flow button strong{overflow-wrap:normal;padding-right:0}
 .project-image{padding:0}.project-image img{min-height:340px}
 .about-mark{padding:0}.about-mark>img{width:100%}
}

/* The mobile installation story advances through the same five scroll steps. */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .system-story{height:460svh;min-height:0}
 .system-story .story-sticky{position:sticky;top:66px;height:calc(100svh - 72px);min-height:0;padding:12px 10px 8px;grid-template-rows:auto minmax(0,1fr) auto 3px}
 .system-story .system-heading{padding-bottom:9px}
 .system-story .system-heading h2{font-size:clamp(22px,6vw,28px)}
 .system-story .system-layout{min-height:0;grid-template-rows:minmax(100px,1fr) auto}
 .system-story .system-drawing{height:auto;min-height:0;padding:0 0 22px}
 .system-story .system-drawing svg{max-height:100%;min-height:0}
 .system-story .system-explanation{padding:12px 4px}
 .system-story .system-explanation h3{font-size:21px;margin-bottom:7px}
 .system-story .system-explanation>p{font-size:16px;line-height:1.35}
 .system-story .system-navigation button{min-height:52px;padding:7px 2px;gap:5px}
}
@media(max-width:700px) and (max-height:650px) and (prefers-reduced-motion:no-preference){
 .system-story .system-explanation{padding:8px 4px;max-height:155px;overflow-y:auto}
 .system-story .system-heading h2{font-size:21px}
}