@media (min-width: 1201px) {
  .commercial-hero {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100vh - 102px);
    min-height: 610px;
    padding: clamp(26px, 4vh, 50px) clamp(32px, 3.1vw, 54px) 112px;
    background-position: right bottom;
    background-size: 100% 100%;
  }

  .hero-content {
    max-width: 760px;
    padding-top: 0;
  }

  .hero-eyebrow {font-size:clamp(10px,1.5vh,13px)}

  .hero-content h1 {
    font-size:clamp(41px,7vh,72px);
    line-height:1.1;
    margin:clamp(12px,2.1vh,22px) 0 clamp(11px,1.8vh,19px);
  }

  .hero-content>p {
    font-size:clamp(15px,2.05vh,19px);
    line-height:1.52;
    margin-bottom:clamp(17px,2.7vh,28px);
  }

  .commercial-button {
    min-height:clamp(49px,6.7vh,64px);
    padding:0 clamp(22px,2vw,32px);
    font-size:clamp(14px,1.8vh,16px);
  }

  .hero-benefits {
    position:absolute;
    left:clamp(32px,3.1vw,54px);
    right:365px;
    bottom:86px;
    width:auto;
    margin:0;
    gap:14px;
  }

  .hero-benefits article {
    min-height:clamp(74px,10vh,94px);
    padding:clamp(9px,1.3vh,13px) 15px;
  }

  .benefit-icon {
    flex-basis:clamp(42px,5.5vh,49px);
    height:clamp(42px,5.5vh,49px);
    font-size:clamp(19px,2.5vh,22px);
  }

  .hero-benefits strong {font-size:clamp(12px,1.55vh,14px)}
  .hero-benefits small {font-size:clamp(10px,1.35vh,12px)}

  .hero-card {
    position:absolute;
    right:clamp(24px,2.8vw,48px);
    bottom:16px;
    width:290px;
    padding:clamp(14px,2vh,20px) 22px clamp(12px,1.7vh,17px);
    background:linear-gradient(145deg,rgba(9,178,168,.94),rgba(19,216,196,.94));
    backdrop-filter:blur(5px);
  }

  .hero-card strong {font-size:clamp(18px,2.35vh,21px);margin:9px 0}
  .hero-card p {font-size:clamp(12px,1.55vh,14px);margin:0 0 11px}
  .hero-card a {padding:clamp(10px,1.5vh,13px) 16px}

  .hero-assurance {
    position:absolute;
    left:clamp(32px,3.1vw,54px);
    bottom:16px;
    width:calc(100% - 410px);
    padding:clamp(12px,1.7vh,17px) 18px;
  }

  .hero-rating {top:clamp(6%,9vh,11%)}
}

@media (min-width:1201px) and (max-height:690px) {
  .site-header {height:82px}
  .commercial-hero {height:calc(100vh - 82px);min-height:560px;padding-top:20px}
  .commercial-brand img {max-height:62px}
  .hero-rating {display:block;top:9%;transform:scale(.88);transform-origin:top right}
  .hero-card-icon {width:36px;height:36px;font-size:20px}
}