/* Homepage tablet/iPad hard fix.
   iPad landscape can use desktop-class viewport widths around 1366–1376px.
   Do not rely on hover/pointer media features; Safari may report them differently
   depending on keyboard/trackpad state. */

@media (min-width:901px) and (max-width:1400px){
  .hero{
    height:720px !important;
    min-height:720px !important;
    overflow:hidden !important;
  }
  .hero .container{
    height:720px !important;
    min-height:720px !important;
    align-items:stretch !important;
  }
  .hero-copy{
    height:720px !important;
    min-height:720px !important;
    padding-top:44px !important;
    padding-bottom:70px !important;
    justify-content:center !important;
  }
  .hero-visual{
    height:720px !important;
    min-height:720px !important;
  }
  .metrics{
    margin-top:28px !important;
    margin-bottom:0 !important;
  }
  .triad{
    position:relative !important;
    z-index:3 !important;
    clear:both !important;
    margin-top:0 !important;
  }
}

/* Medium-width tablets: use two rows of metrics for extra room. */
@media (min-width:700px) and (max-width:1180px){
  .hero{
    height:760px !important;
    min-height:760px !important;
  }
  .hero .container,
  .hero-copy,
  .hero-visual{
    height:760px !important;
    min-height:760px !important;
  }
  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 24px !important;
    max-width:620px !important;
  }
  .metric{grid-template-columns:33px 1fr !important}
}

/* Portrait tablets. */
@media (min-width:700px) and (max-width:900px){
  .hero{
    height:auto !important;
    min-height:800px !important;
  }
  .hero .container{
    height:auto !important;
    min-height:800px !important;
    grid-template-columns:60% 40% !important;
  }
  .hero-copy{
    height:auto !important;
    min-height:800px !important;
    padding-right:18px !important;
    padding-bottom:74px !important;
  }
  .hero-visual{
    width:45% !important;
    height:100% !important;
    min-height:800px !important;
  }
  .hero-title{font-size:50px !important}
  .metrics{max-width:540px !important}
}