/* Final layout guardrails: responsive by width, input method and text zoom. */
html,body{max-inline-size:100%;overflow-x:clip}
img,svg,iframe,video,canvas{max-inline-size:100%}
button,input,select,textarea{max-inline-size:100%}
.wrap,.card,.project-copy,.form-panel,.detail-side{min-inline-size:0}
.card,.process-panel,.detail-side,.form-panel,.content-main,.content-aside{overflow-wrap:anywhere}

/* Tablet navigation switches before links begin to squeeze. */
@media(max-width:1100px){
  .header{position:relative;z-index:20}
  .header .nav{min-height:76px;padding-inline:24px}
  .menu{display:inline-flex!important}
  .navlinks{display:none;position:absolute;top:76px;inset-inline:0;max-height:calc(100dvh - 76px);overflow-y:auto;padding:18px 24px!important;flex-direction:column;align-items:stretch;gap:6px!important;background:#fafaf9;border-bottom:1px solid #dedbe3;box-shadow:0 12px 24px #25202d0b}
  .navlinks.open{display:flex!important}
  .navlinks a{display:flex;align-items:center;width:100%;min-height:46px;font-size:16px}
  .nav .btn{display:none}
  .hero.wrap{width:calc(100% - 32px)}
  .stack-heading{align-items:flex-start}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr;gap:26px}
}

/* Medium tablets retain a two-column reading rhythm but never force narrow cards. */
@media(min-width:701px) and (max-width:1100px){
  .wrap{padding-inline:28px}
  .section{padding-block:78px}
  .hero.wrap{grid-template-columns:1fr 1fr;gap:20px}
  .stack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iot-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iot-pipeline li:after{display:none}
  .learning-banner{grid-template-columns:1fr;align-items:start}
  .learning-banner img{max-width:min(100%,620px);margin-inline:auto}
  .cta{gap:28px;padding:42px 34px;align-items:flex-start}
  .cta .btn{margin-top:0}
  .footer-top>div:first-child{grid-column:1/-1}
}

/* Phone layouts favour readable controls. The technology and footer grids have
   intentional mobile compositions, so they must not inherit the generic stack. */
@media(max-width:700px){
  .wrap{padding-inline:20px}
  .header .nav{padding-inline:20px}
  .hero.wrap{width:calc(100% - 20px);border-radius:20px}
  .hero .actions,.form-actions{align-items:stretch}
  .hero .actions .btn:not(.text),.form-actions .btn{justify-content:center}
  .stack-heading,.stack-footnote{display:block}
  .stack-heading>p{margin-top:16px}
  .stack-grid,.iot-pipeline{grid-template-columns:1fr}
  .stack-card{min-height:0}
  .iot-intro,.stack-footnote{gap:12px}
  .iot-link{margin-left:0}
  .iot-pipeline li{min-height:0}
  .learning-banner{grid-template-columns:1fr;padding:26px 20px}
  .learning-banner img{width:100%;max-width:480px;margin-inline:auto}
  .process-scroll,.process-experience{grid-template-columns:1fr}
  .process-index{position:static}
  .filters{align-items:stretch}
  .filters{flex-wrap:wrap}
  .filters .search{width:100%;flex-basis:100%}
  .form-panel,.detail-side{padding:22px 18px}
  .hero-caption{flex-wrap:wrap;justify-content:flex-start}
  .hero-caption>a{min-height:44px}
  .filters .filter{min-height:44px}
  .process-nav>a:last-child{grid-column:1/-1}
  .map+iframe{min-height:260px;height:58vw;max-height:360px}
  .content-nav small{display:none}
  .footer-top>div:first-child{grid-column:auto}
  .footer-bottom{gap:14px}
}

/* Preserve the deliberate compact footer composition against the tablet grid
   declared above: brand, two navigation columns, then the full-width CTA group. */
@media(max-width:700px){
  .footer-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'brand brand' 'explore company' 'build build';gap:24px 18px}
  .footer-top .footer-build{border-top:1px solid #dedbe3;padding-top:22px}
}

/* Small phones and 200% text zoom: protect tap targets and line breaks. */
@media(max-width:390px){
  .wrap{padding-inline:16px}
  .hero.wrap{width:calc(100% - 16px);padding-inline:18px}
  .hero .actions{gap:10px}
  .hero .actions .btn{font-size:12px;padding-inline:15px}
  .header .nav{gap:10px;padding-inline:16px}
  .header .logo{font-size:14px;letter-spacing:.15px}
  .header .logo small{font-size:6px;letter-spacing:1.4px}
  .header .logo svg{width:34px;height:24px}
  .menu{padding:9px}
  .hero-caption{font-size:6.5px}
  .process-step{font-size:15px;padding:13px 11px}
  .page-head h1{font-size:clamp(38px,12vw,47px)}
  .section-top h2,.split h2,.learning-banner h2{font-size:clamp(32px,10vw,38px)}
  .project.card .project-copy h3{font-size:25px}
  .stack-card,.iot-panel{padding-inline:16px}
}
.wide-visual img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover;border-radius:22px;border:1px solid #ded8e3}
@media(max-width:760px){.wide-visual img{border-radius:14px}}