/* Mobile and tablet layouts are composed independently from the desktop grid. */
main section[id]{scroll-margin-top:78px}
.mobile-menu[hidden]{display:none!important}
img{max-width:100%}
@media(max-width:1100px){
  .section-heading{grid-template-columns:1fr 2fr;column-gap:5vw}
  .section-heading .section-intro{grid-column:2;max-width:500px}
  .project-meta{align-items:start}
  .project-meta p{max-width:230px}
  .about{gap:6vw}
}
@media(max-width:900px){
  .header{height:70px}.header.scrolled{height:64px}
  .header .nav,.header-contact{display:none}.menu-toggle{display:block;position:relative;z-index:2}
  .mobile-menu{top:64px;padding:14px clamp(22px,5.3vw,100px) 34px;max-height:calc(100dvh - 64px);overflow:auto}
  .mobile-menu a{padding:17px 0;min-height:57px}
  .hero{min-height:700px;height:auto;max-height:none;padding-top:105px;padding-bottom:0}
  .hero-main{margin:100px 0 95px}
  .hero-title{font-size:clamp(58px,9vw,104px)}
  .section-heading{display:block;padding:90px 0 55px}
  .section-heading h2{margin-top:32px;max-width:760px}
  .section-heading .section-intro{margin-top:26px;max-width:620px}
  .projects{grid-template-columns:1fr;gap:74px;padding-bottom:110px}
  .project:nth-child(even){transform:none}
  .project{max-width:760px;margin:0 auto;width:100%}
  .project-visual{height:auto;aspect-ratio:1.27}
  .project-visual img,.project-nivea .project-visual img{object-fit:contain}
  .project-meta{display:flex;align-items:end}
  .project-meta p{margin:0;max-width:260px}
  .services{display:block;padding-top:110px;padding-bottom:120px}
  .services h2{margin-top:36px}.service-list{margin-top:65px}
  .about{grid-template-columns:1fr 1fr;gap:5vw}
  .about h2{font-size:clamp(54px,7vw,90px)}
  .manifesto-layout{display:block;padding:65px 0 100px}
  .manifesto-layout p:not(.eyebrow){max-width:580px;margin-top:35px}
  .process-grid{display:block;max-width:720px}
  .process-grid ol{margin-top:55px}
  .contact-bottom{display:block}
  .contact-actions{margin-top:38px;min-width:0;width:min(560px,100%)}
  .contact-bottom p{max-width:590px}
  .footer{flex-wrap:wrap;padding-top:36px;padding-bottom:36px;min-height:150px}
  .footer>*{width:calc(50% - 20px)}
}
@media(max-width:700px){
  .section-shell{padding-left:clamp(20px,5vw,32px);padding-right:clamp(20px,5vw,32px)}
  .hero{min-height:min(800px,100svh);padding-top:102px}
  .hero-main{margin:clamp(80px,18vh,150px) 0 70px}
  .hero-title{font-size:clamp(43px,10.4vw,73px);line-height:1.1;letter-spacing:-.075em}
  .hero-title .line{max-width:12ch}
  .hero-lower{align-items:center;margin-top:36px}
  .hero-lower p{font-size:17px;max-width:320px}
  .hero-watermark{right:-12vw;bottom:3vh;font-size:90vw}
  .hero-bottom{padding-bottom:28px;max-width:100%}
  .hero-bottom span:first-child{font-size:9px;line-height:1.4}
  .section-heading{padding:76px 0 43px}
  .section-heading h2,.services h2,.experience h2,.process h2{font-size:clamp(37px,8.8vw,57px);line-height:1.12}
  .projects{gap:54px;padding-bottom:80px}
  .project{margin:0}
  .project-visual{aspect-ratio:1.12;height:auto}
  .project-meta{display:block;padding-top:17px;padding-bottom:24px}
  .project-meta h3{font-size:clamp(32px,8vw,46px)}
  .project-meta p{font-size:16px;max-width:440px;margin:14px 0 0}
  .manifesto{padding-top:78px}.manifesto-layout{padding:50px 0 85px}
  .manifesto h2{font-size:clamp(43px,10vw,71px)}
  .manifesto p:not(.eyebrow){font-size:17px}
  .services{padding-top:98px;padding-bottom:105px}
  .service-list{margin-top:52px}
  .service{grid-template-columns:30px minmax(0,1fr) 24px;gap:12px;padding:23px 2px}
  .service h3{font-size:clamp(21px,5.4vw,30px)}
  .experience{padding-top:95px;padding-bottom:100px}
  .experience h2{margin:37px 0 57px;width:auto}
  .metrics{display:block}.metric{padding:26px 0 30px}
  .metric strong{font-size:clamp(72px,17vw,104px)}
  .about{display:block;padding-top:98px;padding-bottom:105px}
  .about-label{gap:26px}.about-photo{max-width:520px;aspect-ratio:4/5;margin:0 0 52px}
  .about-content{margin:0}.about h2{font-size:clamp(62px,13vw,96px);margin-bottom:33px}
  .about-content p{font-size:17px;line-height:1.68}
  .process{padding-top:94px;padding-bottom:105px}.process-grid{display:block;margin-top:45px}
  .process-grid ol{margin-top:60px}.process-grid li{grid-template-columns:108px 1fr}
  .contact{padding-top:100px;padding-bottom:95px}
  .contact h2{font-size:clamp(64px,13vw,115px);margin:50px 0 85px}
  .contact-bottom{display:block}.contact-actions{min-width:0;width:100%;margin-top:35px}
  .contact-actions a{font-size:clamp(15px,4.2vw,19px);gap:12px;overflow-wrap:anywhere}
  .footer{gap:18px}.footer>*{width:100%}
}
@media(max-width:390px){
  .hero-title{font-size:clamp(42px,10vw,52px)}
  .hero-lower{align-items:end}.hero-lower p{font-size:16px}
  .circle-link{height:50px;width:50px}
  .project-visual{aspect-ratio:1}
  .manifesto h2{font-size:clamp(36px,10.6vw,43px)}
  .process-grid li{grid-template-columns:88px 1fr;gap:12px}
  .process-grid li p{font-size:16px}
  .contact h2{font-size:clamp(43px,12vw,58px)}
}
@media(max-width:360px){
  .section-shell{padding-left:18px;padding-right:18px}
  .brand{font-size:28px}.brand-sep{margin:0 10px}.brand-name{font-size:11px}
  .hero-main{margin:75px 0 65px}
  .hero-title{font-size:clamp(40px,11.8vw,44px)}
  .hero-lower{gap:10px}.hero-lower p{font-size:16px;line-height:1.5}
  .hero-bottom span:first-child{font-size:10px;letter-spacing:.04em}
  .section-heading h2,.services h2,.experience h2,.process h2{font-size:36px}
  .project-type{font-size:12px;line-height:1.5;display:block}
  .about h2{font-size:clamp(54px,15vw,62px)}
  .contact h2{font-size:clamp(42px,12vw,48px);letter-spacing:-.075em}
  .contact-actions a{font-size:15px;line-height:1.35}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:550px){
  .hero{min-height:620px}.hero-main{margin:70px 0 55px}
  .hero-title{font-size:clamp(52px,8vw,86px)}
}
@media(prefers-reduced-motion:reduce){.marquee{animation:none}}