/* A topic should finish within a screen or a short, intentional scroll. */
.hero-grid{min-height:0}
.hero-copy{padding:clamp(30px,3.2vw,48px) clamp(28px,3.5vw,56px) 25px}
.hero h1{font-size:clamp(50px,4.6vw,74px);margin:clamp(30px,3.2vw,54px) 0 0}
.hero-lead{font-size:clamp(14px,1.1vw,17px);line-height:1.55;margin-top:21px}
.hero-actions{margin-top:25px}
.hero-note{padding-top:23px}
.hero-image{height:100%;min-height:clamp(480px,65svh,560px)}
.hero-image>img{height:calc(100% - 52px);min-height:0}

.manifesto{padding:clamp(72px,7vw,110px) 0}
.study{padding-top:clamp(70px,6vw,100px)}
.study-intro{padding-bottom:40px}
.study-run{height:210svh}
.study-sticky{height:calc(100svh - 78px);min-height:0}
.stage-content h3{font-size:clamp(38px,3.5vw,60px)}
.deliverables{padding:clamp(78px,7vw,115px) 0}
.deliverables-intro{margin-bottom:42px}
.deliverable-tab{min-height:150px}
.pane-art{height:clamp(310px,30vw,450px)}
.method,.person,.start,.contact{padding:clamp(75px,7vw,120px) 0}
.person-signature{min-height:500px}

@media(max-width:900px){
  .hero-copy{min-height:0;padding:35px 30px 28px}
  .hero h1{font-size:clamp(50px,6.6vw,66px);margin-top:35px}
  .hero-image{height:clamp(310px,48svh,440px);min-height:0}
  .hero-image>img{height:calc(100% - 52px);min-height:0}
  .study-run{height:auto}
  .study-sticky{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column}
  .study-visual{height:clamp(310px,45svh,420px);flex:none}
  .study-copy{min-height:330px}
  .stage-content h3{font-size:clamp(35px,5vw,55px)}
}

@media(max-width:680px){
  .hero-copy{min-height:0;padding:28px 0 20px}
  .hero h1{font-size:clamp(44px,10vw,63px);margin-top:27px}
  .hero-lead{font-size:13px;line-height:1.5;margin-top:16px}
  .hero-actions{margin-top:19px;gap:13px}
  .hero-actions .button{min-height:48px;padding:11px 15px}
  .hero-note{margin-top:16px;padding-top:0}
  .hero-image{height:clamp(230px,35svh,310px);min-height:0}
  .hero-image>img{height:calc(100% - 48px);min-height:0}
  .manifesto,.deliverables,.method,.person,.start,.contact{padding:70px 0}
  .study{padding-top:70px}
  .study-intro{padding-bottom:27px}
  .study-visual{height:clamp(230px,35svh,300px)}
  .study-copy{min-height:340px}
  .deliverables-intro{margin-bottom:30px}
  .deliverable-tab{min-height:105px}
  .pane-art{height:280px}
}

@media(max-width:390px){
  .hero h1{font-size:44px}
  .hero-actions .button{font-size:11px}
  .study-visual{height:230px}
  .study-copy{min-height:350px}
  .pane-art{height:270px}
}