/* Adapt the composition to both width and available height. */
.site-header .theme-toggle{width:44px;height:44px;min-height:44px}
.site-header .nav-contact{min-height:44px}
.menu-button{min-height:44px}
.filters button{min-height:44px}
.showcase .device-scene{max-width:100%}
@media(min-width:761px) and (max-width:1100px){
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .section-heading{align-items:start;gap:30px}
 .section-heading h2{font-size:clamp(38px,4.8vw,54px)}
 .section-heading p{max-width:260px}
 .about-grid{gap:6%}
 .detail-hero{gap:5%}
 .detail-copy h1{font-size:clamp(46px,6vw,65px)}
 .detail-art{min-height:400px}
 .detail-art .object-screen>span{font-size:36px}
 .detail-features{gap:25px}
}
@media(max-width:960px){
 html{scroll-padding-top:86px}
 .site-header{height:74px;padding:0 5vw;gap:14px}
 .site-header>.brand{font-size:26px}
 .menu-button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px 0;font-size:12px;color:var(--ink);margin-left:auto}
 .menu-button span{font-size:19px}
 .site-header nav{display:none;position:absolute;top:74px;left:0;right:0;margin:0;padding:20px 5vw;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 15px 20px #1228200d;font-size:18px;gap:4px;max-height:calc(100dvh - 74px);overflow-y:auto}
 .site-header nav.is-open{display:flex;flex-direction:column;align-items:stretch}
 .site-header nav a{padding:13px 0;min-height:48px}
 .theme-toggle .theme-label{display:none}
 .showcase{margin-top:-74px}
 .contact-grid{grid-template-columns:1fr;gap:40px}
 .contact-grid>div>p{max-width:480px}
 .contact form{max-width:none}
 .form-bottom{flex-direction:row;align-items:center}
 .story-sticky{grid-template-columns:1fr}
 .story-visual{position:relative;top:0;height:480px;min-height:0;border-right:0;border-bottom:1px solid #c3e99520}
 .story-visual>img{width:65%;left:17.5%;height:85%;top:-5%;transform:none}
 .story-readout{left:6%;right:6%;bottom:7%}
 .story-readout strong{font-size:44px;margin:10px 0}
 .story-progress{display:none}
 .story-chapters{padding:0 6%}
 .story-chapter{min-height:0;padding:45px 0;opacity:1;border-bottom:1px solid #c3e99520}
 .story-chapter:last-child{border-bottom:0}
 .story-chapter p{max-width:550px}
}
/* Natural document flow on tablets, phones and short landscape windows. */
@media(max-width:1024px),(max-height:700px){
 .showcase{height:auto;min-height:0}
 .showcase-pin{position:relative;top:0;height:auto;min-height:0;padding:120px 5vw 25px;overflow:visible}
 .showcase-copy{transform:none;opacity:1;width:100%}
 .showcase h1{font-size:clamp(35px,5.8vw,60px);margin:18px 0}
 .showcase-copy p{font-size:14px;line-height:1.65}
 .showcase .device-scene{width:min(850px,100%);height:auto;aspect-ratio:2.55;margin-top:38px;transform:none}
 .showcase .hero-foot{margin-top:30px;gap:25px;font-size:8px}
 .showcase .hero-orbit{max-width:85%;max-height:75%;top:25%}
 .showcase .device-lid{transform:none}
 .showcase .speaker-device{transform:rotate(-10deg)}
 .showcase .router-device{transform:rotate(12deg)}
 .showcase .label-left{left:0}
 .showcase .label-right{right:0}
}
@media(max-width:760px){
 .showcase-pin{padding:106px 5vw 23px}
 .showcase h1{font-size:clamp(35px,8.3vw,56px);line-height:1.08;letter-spacing:-.06em}
 .showcase-copy p{font-size:13px;max-width:450px;margin:0 auto}
 .showcase .actions{gap:16px;margin-top:22px}
 .showcase .pill{min-height:44px;align-items:center;padding:11px 15px;font-size:11px;gap:13px}
 .showcase .text-link{min-height:44px;display:inline-flex;align-items:center;padding:0;font-size:11px}
 .showcase .device-scene{width:100%;aspect-ratio:1.65;margin-top:45px}
 .showcase .workstation{width:80%;left:10%}
 .showcase .device-lid{padding:7px}
 .showcase .screen-title{font-size:clamp(23px,6vw,38px)}
 .showcase .speaker-device{height:31%;bottom:7%;left:1%;width:17%;gap:6px;padding:10px 6px}
 .showcase .router-device{bottom:9%;right:1%;width:17%}
 .showcase .floating-label{font-size:6px;padding:8px}
 .showcase .label-left{top:-21px;left:0}
 .showcase .label-right{bottom:-5px;right:0}
 .showcase .hero-foot{margin-top:28px;font-size:6px;letter-spacing:.04em;gap:20px}
 .story-visual{height:380px}
 .story-visual>img{width:80%;left:10%;height:85%}
 .form-bottom{flex-direction:column;align-items:stretch}
 .collection-card:hover .object-headset{transform:rotate(5deg) scale(.8)}
 .capability-strip{gap:15px;padding:18px 5vw;font-size:8px}
 .contact input,.contact select,.contact textarea{min-height:44px}
}
@media(max-width:360px){
 .site-header{gap:10px}
 .site-header>.brand{font-size:24px}
 .nav-contact{padding:8px 10px;font-size:10px;gap:8px}
 .menu-button{font-size:11px;gap:7px}
 .showcase .actions{gap:12px}
 .showcase .pill{padding:11px 12px;font-size:10px;gap:10px}
 .showcase .text-link{font-size:10px}
 .showcase .eyeline{font-size:9px}
 .showcase h1{font-size:34px}
 .showcase .screen-top,.showcase .screen-bottom{font-size:4px}
 .showcase .speaker-device>span{font-size:5px}
}
@media(max-height:700px) and (min-width:761px){
 .showcase-pin{padding-top:110px}
 .showcase .device-scene{width:min(660px,90%);aspect-ratio:2.55}
 .showcase h1{font-size:clamp(38px,5vw,56px)}
 .story-visual{position:relative;top:0;height:580px;min-height:0}
 .story-chapter{min-height:0;opacity:1;padding:55px 0}
}
@media(prefers-reduced-motion:reduce){.showcase-copy{transform:none;opacity:1}}
.arrow-icon{display:inline-block;width:1em;height:1em;min-width:1em;vertical-align:-.12em;overflow:visible;flex-shrink:0}
.breadcrumb>.arrow-icon{margin-right:.45em}
.star-icon{display:inline-block;width:1em;height:1em;vertical-align:middle}
.partner-mark .star-icon{display:block;width:100%;height:auto;max-width:480px}
/* Original narrative: the artwork pins; every chapter remains in document flow. */
@media(prefers-reduced-motion:no-preference){
 .system-story{height:auto}
 .story-sticky{display:grid;grid-template-columns:1fr 1fr;position:relative;height:auto;overflow:visible}
 .story-visual{position:sticky;top:88px;height:calc(100svh - 88px);min-height:0;z-index:2;background-color:var(--dark)}
 .story-visual>img{width:90%;left:5%;height:80%;top:1%}
 .story-chapters{position:relative;padding:0 12%}
 .story-chapter{position:relative;inset:auto;min-height:85svh;padding:70px 0;opacity:.55;visibility:visible;transform:none;border:0}
 .story-chapter.active{opacity:1}
 .story-readout{left:10%;right:10%;bottom:7%}
 .story-progress{display:block}
 @media(max-width:960px){
  .story-visual{top:74px;height:calc(100svh - 74px)}
  .story-chapters{padding:0 8%}
  .story-chapter h2{font-size:clamp(27px,4.5vw,40px)}
  .story-readout strong{font-size:clamp(28px,5vw,44px)}
 }
 @media(max-width:599px){
  .story-sticky{display:block}
  .story-visual{height:35svh;border-bottom:1px solid #c3e99520}
  .story-visual>img{width:65%;height:110%;left:32%;top:-12%}
  .story-readout{left:6%;right:6%;bottom:7%}
  .story-readout strong{font-size:31px;margin:8px 0 14px}
  .story-chapters{padding:0 6%}
  .story-chapter{min-height:calc(65svh - 74px);padding:30px 0;opacity:.65}
  .story-chapter h2{font-size:32px;margin-bottom:18px}
  .story-chapter p{font-size:13px;line-height:1.65}
  .story-chapter .eyebrow{margin-bottom:18px}
  .story-chapter .underlink{margin-top:22px}
 }
}

@media(max-width:1024px),(max-height:700px){
 @media(prefers-reduced-motion:no-preference){
  .showcase-copy{transform:translate3d(0,calc(var(--hero-progress,0) * -24px),0);opacity:1}
  .showcase .device-scene{transform:translate3d(0,calc(var(--hero-progress,0) * 24px),0) scale(calc(1 + var(--hero-progress,0) * .045));transform-origin:center center}
  .showcase .device-lid{transform:rotateX(calc(var(--hero-progress,0) * 9deg))}
  .showcase .speaker-device{transform:rotate(-10deg) translateY(calc(var(--hero-progress,0) * -32px))}
  .showcase .router-device{transform:rotate(12deg) translateY(calc(var(--hero-progress,0) * 20px))}
  .story-visual>img{transform:translate3d(0,var(--story-y,0px),0) rotate(var(--story-rotate,0deg))}
 }
}

/* Give the network illustration breathing room below the mobile header. */
@media(max-width:599px){.story-visual>img{top:0%;height:100%}}