/* Homepage composition. The reasons to choose us are a separate chapter. */
html:has(> body.material-page[data-site-page="home"][data-intro="playing"]),
body.material-page[data-site-page="home"][data-intro="playing"] { overflow-anchor:none; }
.material-page[data-site-page="home"] .studio-content {
  padding-top:calc(var(--header) + clamp(28px,3vw,56px));
  padding-bottom:clamp(48px,5vw,80px);
}
.material-page[data-site-page="home"] .studio-opening {
  --hero-space:calc(100svh - var(--header) - clamp(28px,3vw,56px) - 104px);
  display:block;
  position:relative;
  isolation:isolate;
  min-height:max(470px,var(--hero-space));
}
.material-page[data-site-page="home"] .studio-opening .hero-copy { position:relative; z-index:2; width:61%; }
.material-page[data-site-page="home"] .hero-studio h1 { font-size:clamp(58px,5.8vw,112px); line-height:1.02; max-width:16ch; }
.material-page[data-site-page="home"] .hero-kicker { margin-bottom:24px; }
.material-page[data-site-page="home"] .hero-studio .lead { max-width:33ch; margin-top:24px; }
.material-page[data-site-page="home"] .studio-opening .studio-image {
  position:absolute;
  top:10px;
  width:min(71%,calc(max(420px,var(--hero-space)) * 4 / 3));
  left:auto;
  right:-3%;
  z-index:1;
  pointer-events:none;
}
/* The transparent diagonal occupies the space below the copy and rises beside
   it. Keep the complete sculpture visible, with no frame, crop or backdrop. */
.material-page[data-site-page="home"] .studio-image .hero-art {
  height:auto;
  aspect-ratio:4/3;
  margin:0;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
}
.material-page[data-site-page="home"] .studio-image .hero-art picture { display:block; width:100%; height:100%; }
.material-page[data-site-page="home"] .studio-image .hero-art img { display:block; object-fit:contain; object-position:center; }
.material-page[data-site-page="home"] .hero .button { margin-top:26px; }

/* Starts with the completed intro, plays once, and never hides the artwork. */
@media(prefers-reduced-motion:no-preference) {
  .material-page[data-site-page="home"][data-intro="playing"] .hero-growth-art picture {
    transform:translate(-12px,28px);
  }
  .material-page[data-site-page="home"][data-intro="complete"] .hero-growth-art picture {
    animation:hero-team-rise 2.6s cubic-bezier(.2,.65,.25,1) both;
  }
}
@keyframes hero-team-rise {
  from { transform:translate(-12px,28px); }
  to { transform:translate(0,0); }
}

/* Current retention and the default planning estimate are distinct measures. */
.material-page[data-site-page="home"] .placement-proof {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  text-align:center;
  max-width:920px;
  margin:0 auto clamp(48px,6vw,88px);
}
.material-page[data-site-page="home"] .placement-stat {
  min-width:0;
  padding:clamp(24px,4vw,56px) 0;
}
.material-page[data-site-page="home"] .placement-stat:first-of-type { padding-top:0; }
.material-page[data-site-page="home"] .placement-stat + .placement-stat {
  margin-top:clamp(16px,2vw,28px);
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid #686868;
}
.material-page[data-site-page="home"] .placement-stat:last-child {
  padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid #686868;
}
.material-page[data-site-page="home"] .placement-number { margin:0; font:700 clamp(112px,13.5vw,208px)/.95 var(--sans); letter-spacing:-.065em; font-variant-numeric:tabular-nums; }
.material-page[data-site-page="home"] .placement-unit { display:inline-block; font-size:.46em; letter-spacing:-.04em; margin-left:.08em; }
.material-page[data-site-page="home"] [data-placement-timeline] .placement-unit { font-size:.29em; margin-left:.2em; }
.material-page[data-site-page="home"] .placement-caption { max-width:32ch; margin:22px auto 0; font-size:clamp(22px,2.2vw,30px); line-height:1.35; }
@media(min-width:901px) and (max-width:1200px) {
  .material-page[data-site-page="home"] .studio-opening .studio-image { width:58%; top:48px; right:-2%; }
}
@media(max-width:1000px) {
  .material-page[data-site-page="home"] .studio-opening .hero-copy { width:66%; }
  .material-page[data-site-page="home"] .hero-studio h1 { font-size:clamp(48px,6.5vw,66px); }
}
@media(min-width:701px) and (max-width:900px) {
  .material-page[data-site-page="home"] .studio-opening { min-height:0; }
  .material-page[data-site-page="home"] .studio-opening .hero-copy { width:100%; }
  .material-page[data-site-page="home"] .hero-studio h1 { max-width:16ch; }
  .material-page[data-site-page="home"] .studio-opening .studio-image { position:relative; width:76%; top:auto; right:auto; margin:-70px 0 0 auto; }
}
@media(max-width:700px) {
  .material-page[data-site-page="home"] .studio-opening { min-height:0; }
  .material-page[data-site-page="home"] .studio-opening .hero-copy { width:100%; }
  .material-page[data-site-page="home"] .studio-opening .studio-image { position:relative; width:auto; top:auto; left:auto; right:auto; margin:24px 0 0; }
  .material-page[data-site-page="home"] .hero-studio h1 { font-size:clamp(40px,10.8vw,64px); max-width:16ch; }
  .material-page[data-site-page="home"] .hero-kicker { margin-bottom:20px; }
  .material-page[data-site-page="home"] .studio-content .hero-copy > .button { display:none; }
  .material-page[data-site-page="home"] .studio-image .hero-art { height:auto; aspect-ratio:4/3; }
  .material-page[data-site-page="home"] .studio-image .hero-art img { object-fit:contain; object-position:center; }
  .material-page[data-site-page="home"] .placement-number { font-size:clamp(100px,27vw,160px); }
  .material-page[data-site-page="home"] .placement-caption { font-size:clamp(20px,5.4vw,26px); }
}