/* Shared mobile art direction: retain the desktop visual language at smaller sizes. */
@media (max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  img,video,svg{max-width:100%}
  .shell,.section-inner{width:min(100% - 36px,1180px)!important;margin-left:auto!important;margin-right:auto!important}
  .header{height:70px!important;padding-top:max(0px,env(safe-area-inset-top));background:rgba(5,5,6,.86)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
  .header-inner{width:calc(100% - 32px)!important;gap:12px!important}
  .header .brand,.header .logo{position:relative!important;width:126px!important;height:48px!important;flex:0 0 126px!important;z-index:82!important}
  .header .brand img{width:142px!important;height:142px!important;transform:translate(-8px,-49px)!important}
  .header .logo img{position:absolute!important;width:142px!important;height:142px!important;max-width:none!important;max-height:none!important;left:0!important;top:-52px!important;object-fit:contain!important}
  .header-actions{gap:9px!important;margin-left:auto!important}
  .header-actions .header-cta,.header-cta{height:38px!important;padding:0 13px!important;border-radius:7px!important;font-size:12px!important}
  .header-actions .back-home,.header-actions .back,.header-actions .lang-toggle{font-size:12px!important}
  .nav{font-size:15px}
  main{overflow:clip}
  .hero{min-height:auto!important;padding-top:112px!important;padding-bottom:68px!important}
  .hero-grid{grid-template-columns:1fr!important;gap:42px!important}
  .hero h1,.hero-copy h1{font-size:clamp(42px,11.4vw,62px)!important;line-height:1.04!important;letter-spacing:-.052em!important}
  .hero-copy p,.hero .lede{max-width:100%!important;font-size:15px!important;line-height:1.75!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;margin-top:28px!important}
  .hero-actions .btn{width:100%!important;min-width:0!important;padding:0 12px!important}
  .hero-visual,.team-collage,.casting-board{width:100%!important;margin:0 auto!important}
  .section{padding:80px 0!important}
  .section h2,.section-inner>h2,.about-head h2,.contact-wrap h2{font-size:clamp(34px,9.2vw,48px)!important;line-height:1.1!important;letter-spacing:-.043em!important}
  .section-lede,.section-intro,.lede{font-size:15px!important;line-height:1.75!important}
  .service-grid,.values-grid,.features,.feature-grid,.media-grid,.case-grid,.cards,.scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .service-card,.service,.value,.feature-card,.media-card{min-width:0!important;min-height:230px!important;padding:24px!important;border-radius:15px!important}
  .metrics,.case-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1px!important}
  .metric{padding:25px 18px!important}
  .metric strong{font-size:28px!important}
  .method-flow,.process-grid,.journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .method-step,.process-step,.journey-step{min-height:210px!important;padding:25px!important}
  .case-layout,.about-layout,.contact-wrap,.product-layout,.system-demo-layout{grid-template-columns:1fr!important;gap:38px!important}
  .case-image{height:400px!important}
  .footer{padding:58px 20px max(32px,env(safe-area-inset-bottom))!important}
  .footer .shell{width:100%!important}
  .footer-grid{grid-template-columns:1.35fr 1fr!important;gap:34px 24px!important}
  .footer-col:first-child{grid-column:1/-1!important}
  .footer-brand-logo{width:150px!important;height:68px!important}
  .footer-tagline{max-width:320px!important;font-size:14px!important}
  .footer-col h4{font-size:16px!important}.footer-col a,.footer-col p{font-size:13px!important}
  .copyright{flex-direction:column!important;gap:8px!important;margin-top:38px!important}
  .doc{width:min(100% - 36px,880px)!important;margin:44px auto 80px!important}
  .doc h1{font-size:clamp(42px,12vw,62px)!important}

  /* Keep every mobile page readable instead of shrinking the desktop canvas. */
  .hero,.section,.capabilities,.site-footer{min-height:0!important}
  .hero-grid,.feature-grid,.product-grid{align-items:center!important}
  .hero-visual{min-height:340px!important}
  .reveal{filter:none!important}
}

@media (max-width:560px){
  .shell,.section-inner{width:calc(100% - 30px)!important}
  .header-inner{width:calc(100% - 26px)!important}
  .header .brand,.header .logo{width:112px!important;flex-basis:112px!important}
  .header .brand img{width:128px!important;height:128px!important;transform:translate(-8px,-42px)!important}
  .header .logo img{width:124px!important;height:124px!important;max-width:none!important;left:-4px!important;top:-44px!important}
  .header-actions .header-cta,.header-cta{height:36px!important;padding:0 11px!important;font-size:11px!important}
  .header-actions .back-home,.header-actions .back{display:none!important}
  .hero{padding-top:102px!important;padding-bottom:60px!important}
  .hero h1,.hero-copy h1{font-size:clamp(39px,11.2vw,49px)!important}
  .hero-actions{grid-template-columns:1fr!important}
  .section{padding:68px 0!important}
  .section h2,.section-inner>h2,.about-head h2,.contact-wrap h2{font-size:clamp(31px,9vw,40px)!important}
  .service-grid,.values-grid,.features,.feature-grid,.media-grid,.case-grid,.cards,.scenario-grid{grid-template-columns:1fr!important}
  .service-card,.service,.value,.feature-card,.media-card{min-height:220px!important}
  .metrics,.case-stats{grid-template-columns:1fr!important}
  .method-flow,.process-grid,.journey-grid{grid-template-columns:1fr!important}
  .method-step,.process-step,.journey-step{min-height:180px!important}
  .case-image{height:320px!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:30px 18px!important}
  .footer-col:first-child,.footer-col:last-child{grid-column:1/-1!important}
  .footer .qr{width:132px!important;height:132px!important}
  .doc{width:calc(100% - 30px)!important}
}

/* Main single-page site keeps its immersive visual layers on mobile. */
@media (max-width:900px){
  .main-site .header,body:has(.page) .header{height:74px!important;padding-left:16px!important;padding-right:16px!important;grid-template-columns:minmax(112px,1fr) auto!important;gap:10px!important}
  .main-site .header .logo,body:has(.page) .header .logo{width:132px!important;height:48px!important;min-width:132px!important}
  .main-site .header .logo img,body:has(.page) .header .logo img{width:142px!important;height:142px!important;left:-5px!important;top:-51px!important}
  .main-site .header-actions,body:has(.page) .header-actions{display:flex!important;align-items:center!important;gap:8px!important}
  .main-site .header-actions .header-cta,body:has(.page) .header-actions .header-cta{display:none!important}
  .main-site .lang-toggle,body:has(.page) .lang-toggle{height:40px!important;padding:0 10px!important;font-size:12px!important}
  .main-site .burger,body:has(.page) .burger{display:grid!important;position:relative!important;width:40px!important;height:40px!important;flex:0 0 40px!important;visibility:visible!important;opacity:1!important}
  .main-site .nav,body:has(.page) .nav{display:flex!important;background:rgba(4,4,5,.7)!important}
  .main-site.menu-open .nav,body:has(.page).menu-open .nav{visibility:visible!important;opacity:1!important}
  body:has(.page) .hero{padding-top:116px!important}
  body:has(.page) #services .solution-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  body:has(.page) #services .solution-card{min-height:300px!important}
  body:has(.page) #about .about-map-card{min-height:420px!important}
  body:has(.page) #about .world-map-source{display:none!important}
  body:has(.page) #about .world-map{left:0!important;right:0!important;top:84px!important;bottom:10px!important}
  body:has(.page) #about .world-map svg{width:100%!important;height:100%!important}
  body:has(.page) #contact .contact-wrap{grid-template-columns:1fr!important}
}
@media (max-width:560px){
  body:has(.page) #services .solution-grid{grid-template-columns:1fr!important}
  body:has(.page) #about .about-map-card{min-height:330px!important}
}

/* Careers keeps the layered desktop collage and numbered job rhythm. */
@media (max-width:900px){
  body:has(.team-collage) .team-collage{min-height:470px!important}
  body:has(.team-collage) .team-photo-a{inset:18px 78px 68px 0!important}
  body:has(.team-collage) .team-photo-b{right:0!important;top:0!important;width:205px!important;height:245px!important}
  body:has(.team-collage) .team-photo-c{right:12px!important;bottom:0!important;width:235px!important;height:180px!important}
  body:has(.team-collage) .team-note{left:12px!important;bottom:38px!important}
  body:has(.job-list) .job{grid-template-columns:48px minmax(0,1fr) auto!important;gap:18px!important;padding:26px 0!important}
  body:has(.job-list) .job-desc{grid-column:2/-1!important}
  body:has(.job-list) .job-link{grid-column:3!important;grid-row:1!important}
}
@media (max-width:560px){
  body:has(.team-collage) .team-collage{min-height:390px!important}
  body:has(.team-collage) .team-photo-a{inset:16px 54px 58px 0!important}
  body:has(.team-collage) .team-photo-b{width:142px!important;height:176px!important}
  body:has(.team-collage) .team-photo-c{width:176px!important;height:132px!important}
  body:has(.team-collage) .team-note{left:8px!important;bottom:26px!important;max-width:230px!important}
  body:has(.job-list) .job{grid-template-columns:38px minmax(0,1fr)!important;gap:12px!important}
  body:has(.job-list) .job-desc,body:has(.job-list) .job-link{grid-column:2!important}
  body:has(.job-list) .job-link{grid-row:auto!important}
}