/* MAYKA homepage viewport-scaling layer — 2026-09-06
   Desktop geometry is based on the original 1920px composition and expressed
   in vw so browser zoom keeps the main homepage sections proportional.
*/

@media(min-width:1251px){
  main>section{width:100vw;max-width:100vw}

  .hero,.hero-slide,.hero-slide picture,.hero-slide img{height:34.375vw!important}
  .hero-copy{left:4.6875vw!important;top:4.270833vw!important;width:37.5vw!important}
  .hero h1{font-size:3.90625vw!important;line-height:4.6875vw!important}
  .hero-sub{margin-top:1.25vw!important;font-size:1.875vw!important}
  .hero-text{width:33.854167vw!important;margin-top:1.770833vw!important;font-size:1.09375vw!important;line-height:1.614583vw!important}
  .hero-actions{gap:1.822917vw!important;margin-top:1.875vw!important}
  .hero-actions .btn{min-width:17.447917vw!important;height:2.604167vw!important;padding-left:1.25vw!important;padding-right:1.25vw!important;font-size:.9375vw!important}

  .metrics{height:11.458333vw!important;padding:0!important}
  .metrics-inner{height:11.458333vw!important;margin:0 4.6875vw!important}
  .metric-group{top:1.822917vw!important;width:15.625vw!important;height:7.8125vw!important;grid-template-columns:4.6875vw 10.9375vw!important}
  .metric-group:nth-child(1){left:0!important}.metric-group:nth-child(2){left:18.75vw!important}.metric-group:nth-child(3){left:37.5vw!important}.metric-group:nth-child(4){left:56.25vw!important}.metric-group:nth-child(5){left:75vw!important}
  .metric-icon-block{width:4.6875vw!important;height:7.8125vw!important}
  .metric-icon-block img{height:3.125vw!important;left:2.604167vw!important;top:.78125vw!important}
  .metric-text-block{width:10.9375vw!important;height:7.8125vw!important;padding:.78125vw 0 0 .78125vw!important}
  .metric-text-block strong{font-size:1.614583vw!important}
  .metric-text-block p{font-size:.78125vw!important;line-height:1.09375vw!important;margin-top:.520833vw!important;width:10.15625vw!important}
  .sep{top:2.604167vw!important;width:.104167vw!important;height:6.25vw!important}
  .sep.s1{left:17.1875vw!important}.sep.s2{left:35.9375vw!important}.sep.s3{left:54.6875vw!important}.sep.s4{left:73.4375vw!important}

  .verticals{height:auto!important;padding-top:0!important}
  .verticals .section-head{height:auto!important;padding:5.625vw 0!important}
  .section-head h2{font-size:2.5vw!important}
  .section-head p{font-size:1.25vw!important;margin-top:.260417vw!important}
  .vertical-viewport{height:30.9375vw!important;margin:0 4.6875vw!important}
  .vertical-track,.vertical-card{height:30.9375vw!important}
  .vertical-card{min-width:calc(50% - .78125vw)!important;margin-right:1.5625vw!important}
  .vertical-label{left:1.145833vw!important;bottom:.885417vw!important;font-size:1.875vw!important}
  .vertical-dots{height:6.09375vw!important;gap:.520833vw!important}
  .vertical-dots button{width:.625vw!important;height:.625vw!important}

  .logo-strip{height:10.416667vw!important}
  .logo-inner{height:10.416667vw!important;margin:0 4.6875vw!important;padding-top:1.458333vw!important}
  .logo-title{font-size:.833333vw!important;line-height:.833333vw!important}
  .logo-row{height:1.5625vw!important}
  .logo-row.row-1{margin:1.666667vw 3.125vw 0!important}
  .logo-row.row-2{margin-top:1.666667vw!important}
  .logo-row img{height:1.5625vw!important;max-width:7.291667vw!important}

  .solutions{padding:0 0 3.125vw!important}
  .solutions .section-head{padding:5.625vw 0!important}
  .solutions-grid{margin:0 4.6875vw!important;gap:1.5625vw!important}
  .solution{height:16.145833vw!important}
  .solution-image img{height:16.145833vw!important}
  .solution-copy{padding:1.666667vw 1.5625vw!important}
  .solution-num{font-size:.833333vw!important}
  .solution h3{margin:.416667vw 0 .625vw!important;font-size:1.458333vw!important}
  .solution p{font-size:.9375vw!important;line-height:1.302083vw!important}
  .solution-link{margin-top:.9375vw!important;font-size:.833333vw!important;padding-bottom:.208333vw!important}

  .flow{height:auto!important;padding:0!important}
  .flow .section-head{position:static!important;left:auto!important;right:auto!important;top:auto!important;padding:5.625vw 4.6875vw!important}
  .flow .section-head h2{font-size:2.5vw!important}
  .flow .section-head p{font-size:1.25vw!important;margin-top:.260417vw!important}
  .flow-stage{position:relative!important;left:0!important;top:auto!important;width:100vw!important;height:20.729167vw!important;padding-bottom:5.625vw!important}
  .flow-icon{top:0!important;width:7.8125vw!important;height:7.8125vw!important}
  .flow-icon img{width:6.25vw!important;height:6.25vw!important}
  .flow-arrow{top:3.28125vw!important;width:5.208333vw!important;height:1.25vw!important;font-size:3.020833vw!important}
  .flow-text{top:8.854167vw!important;width:16.666667vw!important;height:6.25vw!important}
  .flow-text h3{margin-bottom:.520833vw!important;font-size:1.458333vw!important}
  .flow-text p{font-size:.833333vw!important;line-height:1.145833vw!important}

  .assessment-panel{width:100vw!important;height:34.375vw!important;min-height:0!important;padding:0!important}
  .assessment-panel.office .assessment-content{left:4.6875vw!important;top:5.833333vw!important;width:36.458333vw!important}
  .assessment-panel.survey .assessment-content{left:57.03125vw!important;top:8.072917vw!important;width:33.59375vw!important}
  .assessment-content h2{font-size:2.5vw!important}
  .assessment-content p{margin-top:1.458333vw!important;font-size:1.145833vw!important}
  .assessment-content p + p{margin-top:.9375vw!important}
  .assessment-cta{height:3.125vw!important;min-width:15.625vw!important;margin-top:1.5625vw!important;padding:0 1.5625vw!important;font-size:1.041667vw!important}
}

/* Mobile hero: show each complete artwork first, then place the copy below it. */
@media(max-width:760px){
  .hero{
    position:relative!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:#0b203e!important;
  }
  .hero-slide{
    position:absolute!important;
    inset:0 auto auto 0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    background:#0b203e!important;
  }
  .hero-slide.active{
    position:relative!important;
    inset:auto!important;
  }
  .hero-slide picture{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  .hero-slide img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center top!important;
    background:#0b203e!important;
  }
  .hero-overlay{display:none!important}
  .hero-copy{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%!important;
    min-height:0!important;
    padding:8vw var(--page-pad) 10vw!important;
    box-sizing:border-box!important;
    background:#0b203e!important;
    color:#fff!important;
  }
  .hero-actions{padding-bottom:0!important}
  .metrics{position:relative!important;z-index:2!important;height:auto!important;padding:7vw 0!important}
  .metrics-inner{height:auto!important;margin:0 var(--page-pad)!important;gap:5vw!important}
  .metric-group{padding:3vw 0!important}
}

/* Responsive section geometry also uses viewport-relative spacing. */
main>section{width:100vw;max-width:100vw}

@media(max-width:1250px){
  .metrics{padding-top:4vw!important;padding-bottom:4vw!important}
  .metrics-inner{gap:3.5vw!important}

  .verticals{padding:0 0 3vw!important}
  .verticals .section-head{padding:8vw var(--page-pad)!important}
  .vertical-viewport{margin-top:0!important}

  .logo-strip{padding:5vw 0 6vw!important}
  .logo-row{margin-top:4vw!important}

  .solutions{padding:0 0 8vw!important}
  .solutions .section-head{padding:8vw var(--page-pad)!important}
  .solutions-grid{margin-top:0!important;gap:3vw!important}

  .flow{padding:0 var(--page-pad) 8vw!important}
  .flow .section-head{padding:8vw 0!important}
  .flow-stage{margin-top:0!important;gap:4vw!important;padding-bottom:0!important}

  .assessment-panel{width:100vw!important;min-height:62vw!important;padding:8vw var(--page-pad)!important}
}

@media(max-width:760px){
  .verticals .section-head,
  .solutions .section-head{padding-top:10vw!important;padding-bottom:10vw!important}
  .vertical-viewport{margin-left:var(--page-pad)!important;margin-right:var(--page-pad)!important}
  .vertical-track,.vertical-card{height:58vw!important}
  .vertical-card{min-width:86vw!important;width:86vw!important;margin-right:4vw!important}
  .vertical-dots{height:16vw!important}

  .logo-strip{padding-top:7vw!important;padding-bottom:8vw!important}
  .logo-row{gap:6vw!important}

  .solutions{padding-bottom:10vw!important}
  .solutions-grid{gap:6vw!important}
  .solution-image img{height:58vw!important}
  .solution-copy{padding:7vw 6vw 8vw!important}

  .flow{padding-bottom:10vw!important}
  .flow .section-head{padding-top:10vw!important;padding-bottom:10vw!important}
  .flow-stage{gap:7vw!important}
  .flow-icon{width:31vw!important;height:31vw!important}
  .flow-icon img{width:24vw!important;height:24vw!important}
  .flow-text{margin-bottom:6vw!important}

  .assessment-panel{min-height:90vw!important;padding-top:10vw!important;padding-bottom:10vw!important}
}