/* User-supplied desktop and mobile layouts, with original photographic assets. */
#transformation{background:#51062A;color:#fff;overflow:hidden;}
.transformation-layout{position:relative;max-width:1440px;height:clamp(650px,56.945vw,820px);margin:0 auto;}
#transformation h2{position:absolute;top:14.5%;left:6.95%;margin:0;font:400 clamp(64px,6.945vw,100px)/.95 var(--display);letter-spacing:0;text-transform:uppercase;}
#transformation h2 em{display:block;margin:0 0 0 14%;font:400 clamp(39px,4.167vw,60px)/.9 var(--classic);text-transform:none;letter-spacing:0;}
.transformation-intro{position:absolute;top:38%;left:65.3%;width:28%;}
#transformation h3{margin:0 0 16px;font:400 clamp(25px,2.431vw,35px)/1.05 var(--display);letter-spacing:0;text-transform:uppercase;}
.transformation-intro p{margin:0;font:400 clamp(19px,1.806vw,26px)/.9 var(--classic);}
.transformation-photos{position:absolute;left:6.95%;top:44.7%;width:34%;height:34%;}
.transformation-photos img{position:absolute;display:block;object-fit:contain;height:auto;border:0;border-radius:0;box-shadow:none;}
.transformation-before{width:31.2%;left:1.8%;top:2%;transform:rotate(-5deg);}
.transformation-after{width:42%;left:54%;top:0;transform:rotate(6deg);}
.transformation-arrow{position:absolute;left:37%;top:26%;width:13.5%;height:auto;color:#fff;}
.transformation-board{position:absolute;display:block;left:37.6%;top:69.8%;width:23.4%;height:auto;border:0;border-radius:0;box-shadow:none;}
#transformation .transformation-statement{position:absolute;left:65.3%;top:77.4%;margin:0;font:400 clamp(25px,2.431vw,35px)/1.03 var(--display);text-transform:uppercase;letter-spacing:0;}
#results{display:block;min-height:700px;padding:90px max(40px,7vw) 110px;background:#F3EEDC;color:#51062A;}
#results h2{font-size:100px;line-height:.95;}
#results h2 em{font-size:75px;line-height:1.05;margin-left:8%;text-wrap:initial;}
#results .results-layout{display:block;margin:100px 0 0;}
#results .result-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5%;list-style:none;margin:0;padding:0;}
#results .result-list li{display:block;border:0;border-top:2px solid #51062A;padding:15px 0 0;margin:0;}
#results .result-list li::before,#results .result-list li::after{display:none;}
#results .result-list h3{margin:0;font:400 35px/1.08 var(--display);letter-spacing:0;}
#results .result-list p{margin:10px 0 0;font:400 20px/1.2 var(--classic);color:inherit;}
@media(min-width:761px) and (max-width:1100px){
  #transformation h2{font-size:clamp(55px,6.9vw,76px);}
  #transformation h2 em{font-size:clamp(35px,4.16vw,46px);line-height:1;}
  .transformation-intro{left:63%;width:32%;}
  .transformation-intro p{line-height:1.08;}
  #transformation .transformation-statement{left:63%;font-size:25px;}
  #results h2{font-size:75px;}#results h2 em{font-size:55px;}
  #results .result-list{gap:4%;}#results .result-list h3{font-size:30px;}
}
@media(max-width:760px){
  .transformation-layout{height:auto;max-width:480px;padding:56px 27px 64px;}
  #transformation h2{position:static;font-size:clamp(34px,10.7vw,52px);line-height:1;white-space:nowrap;}
  #transformation h2 em{margin:18px 0 0 6px;font-size:clamp(27px,8.14vw,39px);line-height:.88;white-space:normal;}
  .transformation-intro{position:static;width:auto;margin:58px 6px 0;border-top:2px solid #fff;padding-top:10px;}
  #transformation h3{font-size:clamp(23px,7.13vw,34px);line-height:1;margin:0 0 8px;white-space:nowrap;}
  .transformation-intro p{font-size:clamp(16px,4.07vw,19px);line-height:.92;}
  .transformation-photos{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:339/180;margin:28px 0 0;}
  .transformation-before{width:25%;left:8.4%;top:16%;}
  .transformation-after{width:33%;left:54.8%;top:4%;}
  .transformation-arrow{left:37%;top:40%;width:15%;}
  .transformation-board{position:static;width:65%;margin:30px auto 0;}
  #transformation .transformation-statement{position:static;margin:35px 0 0;font-size:clamp(25px,7.64vw,36px);line-height:1.01;}
  #results{min-height:0;padding:56px 27px 120px;}
  #results h2{max-width:426px;margin:0 auto;font-size:clamp(34px,10.7vw,52px);line-height:1;}
  #results h2 em{font-size:clamp(27px,8.14vw,39px);line-height:1;margin-left:19%;white-space:nowrap;}
  #results .results-layout{margin:97px auto 0;max-width:414px;}
  #results .result-list{display:block;padding:0 6px;}
  #results .result-list li{padding-top:12px;margin:0 0 74px;border-top:2px solid #51062A;}
  #results .result-list li:last-child{margin-bottom:0;}
  #results .result-list h3{font-size:clamp(23px,7.13vw,34px);line-height:1;white-space:nowrap;}
  #results .result-list p{margin-top:8px;font-size:clamp(16px,4.07vw,19px);line-height:.95;}
}
@media(max-width:360px){
  .transformation-layout{padding-left:20px;padding-right:20px;}
  #transformation h2 em{font-size:25px;}
  #transformation h3{font-size:22px;}
  #results{padding-left:20px;padding-right:20px;}
  #results h2 em{margin-left:0;text-align:right;font-size:26px;}
  #results .result-list h3{white-space:normal;}
}
