.assessment-hero{margin:0;min-width:0;width:100%;align-self:center}
.assessment-snapshot>img{display:block;width:100%;height:auto;border-radius:0;background:transparent;box-shadow:none}
/* A complete first-screen composition at desktop and landscape-tablet widths. The 80px header it assumes is shared by every page in styles.css. */
@media(min-width:800px){
  .hero{grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);grid-template-rows:1fr;column-gap:4%;row-gap:0;min-height:calc(100svh - 80px);padding-top:24px;padding-bottom:18px;align-items:center}
  .hero-copy{max-width:none;padding:0}
  .hero .eyebrow{margin-bottom:18px}
  .hero-description{max-width:430px;margin-top:20px}
  .hero-actions{gap:18px;margin-top:24px;flex-wrap:wrap}
  .hero-actions .button{padding:13px 18px}
  .assessment-hero{width:100%;max-width:none;padding:0;align-self:center}
}
@media(min-width:800px) and (max-width:1050px){
  .hero{column-gap:3%;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .hero .eyebrow{max-width:330px;margin-bottom:14px}
  .hero-description{margin-top:17px}
  .hero-actions{gap:12px;margin-top:19px}
  .hero-actions .button{padding:12px 14px}
}
@media(min-width:800px) and (max-height:680px){
  .hero{min-height:calc(100svh - 72px);padding-block:16px}
  .hero .eyebrow{margin-bottom:12px}
  .hero-description{margin-top:14px}
  .hero-actions{margin-top:17px}
}
@media(max-width:799px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:30px;row-gap:26px}
  .hero-copy,.assessment-hero{padding-bottom:0}
  .hero-copy{max-width:650px}
  .hero .eyebrow{margin-bottom:17px}
  .hero-description{margin-top:19px;max-width:550px}
  .hero-actions{margin-top:22px;gap:18px;flex-wrap:wrap}
  .assessment-hero{max-width:650px}
  /* The unwrapped first headline line is ~8.55em wide; shrink only when it would pass the column. */
  .home-page .hero h1{font-size:min(clamp(42px,8.8vw,62px),11cqw);line-height:1.05;letter-spacing:-.06em}
}

/* Give the canvas the dominant share of the first screen. */
@media(min-width:800px){
  .home-page .hero{grid-template-columns:minmax(290px,26vw) minmax(0,1fr);column-gap:2.5%;padding-inline:4%;padding-block:clamp(24px,4svh,44px);min-height:min(720px,calc(100svh - 116px))}
  .home-page .hero-copy{max-width:460px}
  .home-page .hero h1{font-size:clamp(30px,10.4cqw,48px);line-height:1.05;letter-spacing:-.06em}
  .home-page .assessment-hero{width:100%;max-width:none;margin:0;justify-self:stretch}
}
@media(min-width:1600px){
  .home-page .hero{grid-template-columns:minmax(360px,460px) minmax(0,1fr);padding-inline:4%;column-gap:3%}
}
@media(min-width:800px) and (max-height:680px){
  .home-page .hero{min-height:0;padding-block:20px}
}
@media(max-width:799px){
  .home-page .assessment-hero{width:calc(100% + 6vw);max-width:none;margin-inline:-3vw}
}