/* Let content shrink inside grid/flex tracks instead of widening the page. */
html,body{max-width:100%;overflow-x:hidden}
@supports(overflow:clip){html,body{overflow-x:clip}}
main,header,footer{min-width:0;max-width:100%}
.wrap{min-width:0}
:is(.hero-grid,.about-grid,.approach,.contact-grid,.projects,.capabilities,.stats-grid,.three-grid,.trust-grid,.story-grid,.proof-band,.case-story,.case-features,.case-meta,.journey,.fields,.timeline)>*{min-width:0}
:is(h1,h2,h3,p,.eyebrow,.tag,.list li,.stat,.terminal-body,.portrait-label,.footer-inner){overflow-wrap:anywhere}
img{max-width:100%}
.btn{flex-shrink:0;max-width:100%;white-space:normal;text-align:center}
.btn span,.dot,.brand img,.chrome i,.cursor{flex-shrink:0}
.cta .btn{white-space:normal}
.text-link{white-space:normal;overflow-wrap:anywhere}
.socials,.shot-chrome{flex-wrap:wrap}
.shot-chrome>*,.brand>div,.contact-row>a{min-width:0;overflow-wrap:anywhere}
.project-links .text-link{min-width:0}
.terminal,.panel,.project,.form-card,.case-browser{min-width:0;max-width:100%}
.chrome span{min-width:0;overflow-wrap:anywhere;text-align:right}
.terminal-foot{flex-wrap:wrap}
fieldset{min-width:0}
input,textarea,select{min-width:0;max-width:100%}
@media(min-width:761px) and (max-width:1000px){
 .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cta,.form-bottom{flex-wrap:wrap}
 .cta>div{flex:1 1 350px}
}
@media(max-width:900px){
 .hero-grid,.about-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
 .hero-grid .terminal{width:100%;max-width:580px;transform:none;animation:none;justify-self:center}
 .about-grid .about-copy{order:-1}
 .contact-aside{order:2}.form-card{order:1}
}
@media(max-width:760px){
 .hero-grid,.about-grid,.approach,.contact-grid,.projects,.three-grid,.trust-grid,.story-grid,.proof-band,.case-story,.case-features,.journey{grid-template-columns:minmax(0,1fr)}
 .header{column-gap:12px;row-gap:10px;padding-block:12px}
 .brand{flex:1 1 0;min-width:0;gap:9px}
 .brand small{display:block;font-size:.58rem;line-height:1.6}
 .menu{flex:none;min-height:44px}
 .nav{order:3;gap:8px;flex-wrap:wrap}
 .nav a{padding:6px 0}
 .hero .actions .btn{flex:1 1 140px}
 .badge{max-width:100%;line-height:1.6}
 .hero-note{align-items:flex-start}
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .proof-band h2,.trust-feature h3{font-size:clamp(1.65rem,6vw,2.3rem)}
 .page-hero h1,.case-intro h1{font-size:clamp(2rem,8.5vw,2.8rem)}
 .case-browser .shot-chrome{row-gap:8px}
 .case-browser .shot-chrome>a{flex-basis:100%;margin-left:0}
 .contact-aside .socials{gap:12px}
 input,textarea,select{font-size:1rem}
 .form-bottom{flex-direction:column;align-items:stretch}
 .empty{padding:30px 20px}
}
@media(max-width:360px){
 .wrap{width:calc(100% - 32px)}
 .brand img{width:34px;height:34px}
 .brand strong{font-size:.93rem}
 .brand small{font-size:.5rem}
 .menu{padding:8px 10px;font-size:.8rem}
 h1{font-size:2.25rem}
 .terminal-body{padding:18px 14px}
 .chrome{padding:12px;gap:5px}
 .chrome span{font-size:.62rem}
 .code-line{padding-left:8px}
 .panel,.trust-feature,.proof-band,.cta,.form-card{padding:22px}
 .stat strong{font-size:1.6rem}
 .stats-grid{gap:22px 14px}
 .project-body{padding-inline:3px}
}