/* Dedicated mobile photographs; desktop banners keep their existing composition. */
.hero-art{display:contents}.about-mobile-art{display:none}
@media(max-width:760px){
 body .hero{height:auto;min-height:0;display:block;padding:90px 0 38px}
 body .hero-art{display:block;width:100%;overflow:hidden}
 body .hero .hero-bg{position:static;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;object-position:center;transform-origin:center;z-index:auto}
 body .hero .hero-inner{position:relative;margin-top:0;padding:28px 0 0;width:calc(100% - 40px)}
 body .hero h1{font-size:clamp(30px,8.3vw,40px);line-height:1.15;max-width:none;letter-spacing:-1px}
 body .hero .hero-description{font-size:17px;line-height:1.6;margin:22px 0 25px;max-width:none}
 body .hero .button{max-width:100%;font-size:15px;padding:16px 23px;gap:16px}
 body .about.section{display:block;padding:0 0 48px;min-height:0;background-image:none;background-color:#102d36}
 body.hero-dark-version .about.section{background-image:none;background-color:#f4f8f9}
 body .about:before,body.hero-dark-version .about:before{display:none}
 body .about-mobile-art{display:block;width:100%;overflow:hidden}
 body .about-mobile-art img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
 body .about .about-grid{width:calc(100% - 40px);padding-top:30px}
 body .about .about-copy{max-width:none}
 body .about .about-copy h2{font-size:32px;line-height:1.18}
 body .about .about-copy .standfirst{font-size:21px!important;line-height:1.4!important}
 body .about .about-copy>p{font-size:17px;line-height:1.65}
 body .credential-card{min-width:0}
 body .about .credential-card h3{font-size:clamp(16px,4.5vw,19px);overflow-wrap:normal}
 body .project-ribbon .ribbon-viewport{padding:22px 0 28px;perspective:none}
 body .project-ribbon .ribbon-group{gap:14px;padding-right:14px;align-items:center}
 body .project-ribbon .ribbon-project,body .project-ribbon .ribbon-project:nth-child(even){width:clamp(230px,74vw,340px);height:auto;aspect-ratio:4/5;flex-shrink:0;transform:none!important;translate:none;scale:1;will-change:auto;border-radius:22px}
 body .project-ribbon .ribbon-project img{height:100%;width:100%;object-fit:cover;transform:none}
 body .project-ribbon .ribbon-project:focus-visible{translate:none;scale:1}
}
@media(max-width:760px) and (hover:none){body .project-ribbon:hover .ribbon-track{animation-play-state:running}body .project-ribbon.ribbon-paused .ribbon-track{animation-play-state:paused}}