/* V2: responsive frame and composition-first image treatment. */
body{background:#151515}
header,main,footer{width:min(100%,864px);max-width:864px}

@media(min-width:701px){
  header{height:54px;padding:0 22px}
  section{padding:0}

  .hero{height:390px;display:grid;grid-template-columns:39% 45% 16%;position:relative}
  .hero>div:first-child{position:static;width:auto;padding:28px 18px 20px 22px}
  .hero h1{font-size:68px;line-height:.82;margin:0 0 18px;max-width:none}
  .hero p{font-size:8px;line-height:1.45;width:220px}.hero a{font-size:7px;margin-top:25px}
  .hero-scene{position:static;width:auto;height:auto;background-size:contain;background-position:center;background-color:#f3f2ef}
  .hero aside{position:static;width:auto;height:auto;padding:120px 12px 0 16px;font-size:7px;line-height:2.35}

  .lab{height:315px;display:grid;grid-template-columns:31% 69%;gap:0;padding:0}
  .lab>div:first-child{position:static;width:auto;padding:22px}
  .lab h2{font-size:43px;line-height:.86;margin:14px 0}.lab p{font-size:7px;line-height:1.4}
  .lab-scene{position:static;width:auto;height:auto;border:0;background-size:contain;background-position:center;background-color:#101010}

  .cases{height:405px;padding:22px 22px 0}
  .case-grid{grid-template-columns:repeat(3,minmax(0,1fr));height:365px}
  .case-grid article{display:grid;grid-template-rows:auto auto 35px 26px 190px;min-width:0}
  .case-grid h3{font-size:31px;line-height:.88}.case-grid p{height:auto}.cases a{align-self:center}
  .crop{height:190px;align-self:end;background-repeat:no-repeat;background-color:#0b0b0b}
  .crop.a{background-size:cover;background-position:center 55%}
  .crop.b{background-size:cover;background-position:center 58%}
  .crop.c{background-size:cover;background-position:center 53%}

  .system{height:250px;padding:22px;grid-template-columns:31% 69%}.system h2{font-size:35px}

  .process{height:255px;padding:22px;grid-template-columns:27% 73%}
  .process ol{padding:40px 0 105px}.process::after{left:27%;right:22px;height:105px;background-size:contain;background-position:center bottom}

  .proof{height:225px;padding:22px 22px 100px;grid-template-columns:1.2fr repeat(4,1fr)}
  .proof::after{left:24%;right:22px;height:96px;background-size:cover;background-position:center}
  .proof h2{font-size:34px}.proof strong{font-size:30px}

  .cta{height:180px;padding:22px;grid-template-columns:38% 27% 35%}
  .cta h2{font-size:43px}.footer-scene{height:136px;background-size:contain;background-color:#f3f2ef}
  footer{height:38px}
}

@media(min-width:701px) and (max-width:863px){
  .hero h1{font-size:clamp(54px,7.8vw,68px)}
  .hero p{width:auto}.lab h2{font-size:clamp(34px,5vw,43px)}
  .case-grid h3{font-size:clamp(25px,3.6vw,31px)}
  .process::after{background-size:cover}
}