/* Mobile reading order and spacing; desktop artwork remains unchanged. */
@media (max-width:650px){
 html{scroll-padding-top:88px}
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
 header{padding:11px 20px;gap:12px}
 .brand{gap:10px}.brand img{width:29px;height:36px}.brand>span{font-size:21px;white-space:nowrap}
 .menu{min-height:44px;padding:8px 12px;font-size:14px}
 #navigation{margin-top:10px;padding:8px 0;max-width:100%}
 #navigation.open{max-height:calc(100svh - 160px)}
 #navigation a{padding:12px 10px;border-bottom:1px solid #e1e5e8}
 #navigation .nav-cta{margin-top:8px;border:1px solid #b48836;justify-content:center}
 .section{padding:46px 20px}
 .section h2,.profile-title h2,.contact h2{font-size:clamp(34px,9vw,44px);line-height:1.16}
 .eyebrow{font-size:11px;letter-spacing:.09em;margin-bottom:16px}
 .section-intro{margin-bottom:24px;padding-bottom:20px}
 .section-hint{margin-top:16px;font-size:14px;line-height:1.6}
 .profile,.questions,.contact{gap:28px}
 .hero{padding:28px 20px 26px}
 .hero-rule{margin-bottom:16px}.hero .eyebrow{margin-bottom:15px}
 .hero h1.brand-tagline{font-size:clamp(32px,8.6vw,44px);line-height:1.16}
 .hero .lead{font-size:15px;line-height:1.6;margin:20px 0 22px}
 .hero-actions{gap:8px}.hero-actions .button{min-height:50px;font-size:14px;padding:12px 14px}
 .hero-actions .text-link{min-height:44px}
 .hero-note{font-size:12px;gap:10px;margin-top:12px}
 .hero-note span+span{padding-left:10px}
 .hero .hero-backdrop{width:auto;max-width:100%;height:min(112vw,440px);aspect-ratio:864/1536;margin:14px auto 0;align-self:center;object-fit:contain;object-position:center;mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 82%,transparent 100%)}
 .hero .hero-signature{margin-top:-8px;padding-left:14px;width:100%}
 .portrait-caption strong{font-size:24px}.portrait-caption span{font-size:13px}
 .hero .motion-toggle{font-size:12px;margin-top:16px;min-height:44px}
 .about-portrait{width:100%;max-width:285px;margin:24px auto 0;padding:0 0 10px 10px}
 .experience-photo>span{font-size:12px;line-height:1.6;padding-top:12px;text-align:center}
 .profile-copy{padding-top:0}.profile-copy .about-intro h3{font-size:28px;line-height:1.2}
 .profile-copy p{font-size:15px;line-height:1.75}
 .about-intro .about-values{padding:15px 16px;font-size:15px}
 .chapter-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:24px}
 .chapter-card summary,.chapter-card:last-child summary{min-height:138px;padding:20px 22px 49px!important}
 .chapter-card .chapter-brand,.chapter-card .chapter-kicker,.chapter-card .chapter-note{display:none}
 .chapter-card .chapter-heading{font-size:29px;line-height:1.15;max-width:85%}
 .chapter-card summary:before{width:45px;height:62px}
 .chapter-card .chapter-foot{min-height:36px;padding:8px 20px;font-size:11px}
 .chapter-card .profile-expanded{padding:20px 22px}.chapter-card .profile-expanded p{font-size:15px}
 .practice-strip{padding:23px 20px;gap:10px;font-size:16px}
 .service-grid{grid-template-columns:minmax(0,1fr);gap:18px}
 .specialty-grid{margin-bottom:26px}.service-group-label{margin-bottom:18px}
 .service-cover .area-brand{padding:13px 18px;font-size:18px}.area-brand img{width:24px;height:29px}
 .service-cover .service-index{padding:16px 18px 0;font-size:10px}
 .service-cover h3,.service-specialty .service-cover h3{font-size:32px;line-height:1.12;padding:8px 18px 20px}
 .service-cover .service-action{padding:13px 58px 13px 18px;min-height:48px;font-size:13px}
 .service-cover .card-toggle{right:16px;bottom:10px}
 .service-body{padding:22px 18px}
 .editorial-pair{max-width:360px;margin:26px auto 0;gap:20px}
 .editorial-link{font-size:13px;padding:12px 16px}
 .consultation-points li{font-size:clamp(10px,3vw,13px)}
 .process .steps{margin-top:28px;gap:12px}.steps article{padding:18px}
 .step-details summary h3{font-size:24px}
 .faq-list details{padding:16px 0}.faq-list summary{font-size:16px}
 .contact>div>p:not(.eyebrow){font-size:15px;line-height:1.7}
 .contact-list>a{gap:14px;padding:16px 0}.contact-list>a>span:last-child{min-width:0;overflow-wrap:anywhere;font-size:14px}
 .booking-panel{padding:22px 16px;gap:24px;scroll-margin-top:88px}
 .booking-art{max-width:250px;margin:0 auto 24px}
 .booking-intro h3{font-size:30px;margin-bottom:16px}
 .form-fields{grid-template-columns:minmax(0,1fr);gap:16px}
 .form-fields label{font-size:13px}.form-fields input,.form-fields select{min-height:50px}
 .contact .booking-submit{font-size:14px;padding:12px 10px}
 .testimonial-grid{grid-template-columns:minmax(0,1fr);gap:24px;max-width:380px;margin:0 auto}
 .testimonial-poster{padding:0;margin:0}
 .mobile-contact-bar{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
 .mobile-contact-bar a{min-height:48px;font-size:13px;padding:8px 5px}
 .mobile-contact-bar .wa-icon{width:18px;height:18px}
 footer{padding:30px 20px;gap:18px;font-size:13px}
 .motion-ready .reveal{opacity:1;transform:none!important;transition:none}
}
@media (max-width:370px){
 header{padding-left:16px;padding-right:16px}.brand>span{font-size:19px}
 .section{padding-left:16px;padding-right:16px}.hero{padding-left:16px;padding-right:16px}
 .hero-note{font-size:11px}.mobile-contact-bar a{font-size:12px}
 .chapter-card .chapter-heading{font-size:27px}
}