/* Keep the desktop composition while giving phones readable type and touch targets. */
.hero-visual-frame{display:contents}
@media(max-width:950px){
  .header{background:#fff}
  .menu-toggle{width:44px;height:44px;flex-shrink:0}
  .header nav{padding:16px 24px 24px;gap:8px;background:#fff;border-bottom:1px solid var(--line);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
  .header nav>a:not(.button){min-height:44px;display:flex;align-items:center;padding:8px 12px;border-radius:6px;font-size:15px}
  .header nav>a[aria-current="page"]:not(.button){background:#fff0f2}
  .header nav>a:not(.button):after{display:none}
  .header nav .button{align-self:stretch;min-height:48px;margin-top:8px;font-size:14px}
  body.menu-open{overflow:hidden}
}
@media(max-width:650px){
  html{scroll-padding-top:88px}
  .container{width:calc(100% - 40px)}
  .header nav{padding:16px 20px 24px;max-height:calc(100dvh - 72px)}
  .hero-grid{padding-top:38px;gap:0;min-height:0}
  .hero-copy h1{font-size:clamp(48px,16.5vw,68px);letter-spacing:-2.8px;line-height:1.08}
  .hero-description{font-size:15px;line-height:1.8;max-width:none}
  .hero-description br{display:none!important}
  .hero-actions{flex-wrap:wrap;gap:10px 18px;align-items:center}
  .hero-actions .button{font-size:13px;min-height:48px;padding:13px 17px;gap:18px}
  .hero-actions .text-link{font-size:12px;min-height:44px;gap:10px}
  .hero-note{font-size:11px;line-height:1.7}
  .hero-visual-frame{display:block;position:relative;width:100%;max-width:570px;aspect-ratio:570/510;margin:32px auto 12px;--visual-scale:.47}
  .hero-visual{position:absolute;left:50%;top:0;width:570px;height:485px;margin:0;transform:translateX(-50%) scale(var(--visual-scale));transform-origin:top center}
  .hero-bottom{margin-top:0;gap:16px;align-items:center}
  .hero-bottom>a{min-height:44px;font-size:11px;text-align:right}
  h1,h2,h3{overflow-wrap:break-word}
  .page-intro h1,.has-service-image .service-intro-copy h1{font-size:clamp(32px,9.3vw,40px);line-height:1.2;letter-spacing:-1.3px}
  .page-intro .container>p:last-child,.service-intro-copy>p{font-size:15px;line-height:1.8}
  .section-heading>p,.project-intro>p,.scope-section .section-heading>p,.service-catalog .section-heading>p{font-size:14px;line-height:1.8}
  .breadcrumbs{font-size:11px;gap:10px;flex-wrap:wrap;align-items:center}
  .breadcrumbs>a{min-height:32px;display:inline-flex;align-items:center}
  .button,.button.small{font-size:14px;min-height:48px;max-width:100%;gap:20px}
  .text-link{font-size:13px;min-height:44px;line-height:1.5}
  .page-cta h2{font-size:29px;line-height:1.3}
  .directory-grid>a>p,.home-example-grid>a p,.service-grid .service p,.catalog-card>p,.scope-grid p,.scenario-layout>div:last-child p,.detail-layout p,.about-description{font-size:14px;line-height:1.8}
  .directory-grid b,.catalog-card-link,.service-grid .service .service-bottom{font-size:12px;min-height:44px}
  .service-grid .service .service-tags span{font-size:11px;padding:5px 8px}
  .catalog-card li,.detail-points li{font-size:13px;line-height:1.8}
  .catalog-card li:before{top:15px}
  .catalog-tools{gap:18px;align-items:stretch}
  .catalog-search{width:100%;min-width:0}
  .catalog-search label,form label{font-size:13px}
  .catalog-search input,input,textarea,select{font-size:16px;min-height:48px;max-width:100%}
  input,textarea,select{width:100%;min-width:0}
  .catalog-filters,.filters{gap:8px;flex-wrap:wrap;justify-content:flex-start}
  .catalog-filters button,.filters button{min-height:44px;font-size:12px;padding:10px 13px;line-height:1.4}
  .catalog-count{font-size:12px}
  .catalog-note,.concept-note,.scenario-layout small,.form-note,#form-status{font-size:12px;line-height:1.75}
  .corporate-ai-grid>div:first-child>p:not(.eyebrow),.ai-privacy-panel ul,.ai-principles p,.data-flow p,.ai-architecture-note,.faq-layout>div:first-child>p:not(.eyebrow),.faq-list details>p,.contact-copy>p:not(.eyebrow){font-size:14px;line-height:1.8}
  .ai-feature-tags span{font-size:11px;padding:6px 9px}
  .ai-privacy-panel .text-link,.solution-panel .text-link,.data-related .text-link{font-size:13px}
  .solution-panel>p,.solution-panel ul{font-size:14px;line-height:1.8}
  .solution-select small{font-size:12px}
  .solution-select button{min-height:64px}
  .flow-diagram{gap:8px;flex-wrap:wrap}
  .flow-diagram>span{font-size:11px;min-width:0}
  .steps{grid-template-columns:1fr;gap:28px}
  .steps li{padding-left:58px;padding-right:0;position:relative;min-height:44px}
  .steps li>span{position:absolute;top:0;left:0;margin:0}
  .steps li:before{display:none}
  .steps h3{font-size:21px}
  .steps p{font-size:14px;line-height:1.8;margin-top:10px}
  .delivery-band ul{font-size:13px;line-height:1.75}
  .faq-list summary{font-size:15px;min-height:56px;line-height:1.5}
  .faq-list summary>span{flex-shrink:0}
  .project-copy p{font-size:14px;line-height:1.8}
  .project-copy h3{font-size:21px;line-height:1.35}
  .project-grid{grid-template-columns:minmax(0,1fr)}
  .project-card,.project-art,.project-copy,.commerce-main{min-width:0}
  .project-copy h3{gap:12px}
  .project-copy h3>span{flex-shrink:0}
  .contact-grid,form,.form-row{min-width:0}
  .form-top{gap:16px}
  .contact-detail p,.contact-detail small{font-size:12px;line-height:1.8}
  .marquee-actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .marquee-actions button{min-width:44px;min-height:44px;font-size:11px;padding:8px 10px}
  .marquee-actions>a{min-height:44px;font-size:11px;line-height:1.5}
  .marquee-header>p{font-size:9px;letter-spacing:1.2px}
  .footer-directory{grid-template-columns:1fr 1fr;gap:24px 18px}
  .footer-directory>div{min-width:0}
  .footer-directory strong{font-size:13px}
  .footer-directory p{font-size:13px;line-height:1.8}
  .footer-directory a{font-size:13px;min-height:44px;display:flex;align-items:center;line-height:1.5;margin:0}
  .footer-top>a:last-child{min-height:44px;font-size:12px}
  .footer-bottom{font-size:11px;line-height:1.7;flex-wrap:wrap;gap:10px 20px}
  .footer-bottom>span:last-child{max-width:none;text-align:left}
}
@media(min-width:360px) and (max-width:650px){.hero-visual-frame{--visual-scale:.55}}
@media(min-width:400px) and (max-width:650px){.hero-visual-frame{--visual-scale:.63}}
@media(min-width:450px) and (max-width:650px){.hero-visual-frame{--visual-scale:.71}}
@media(min-width:500px) and (max-width:650px){.hero-visual-frame{--visual-scale:.80}}
@media(min-width:560px) and (max-width:650px){.hero-visual-frame{--visual-scale:.89}}
@media(min-width:620px) and (max-width:650px){.hero-visual-frame{--visual-scale:.98}}
@media(max-width:360px){
  .hero-actions{align-items:flex-start;flex-direction:column;gap:6px}
  .services-marquee>.marquee-header{align-items:flex-start;gap:12px}
  .marquee-actions{max-width:150px}
  .life-copy strong{font-size:23px}
  .life-phone{width:145px;right:10px}
}