@media(min-width:768px){
  .DevelopmentPage .dev-options__heading{display:block;max-width:980px}
  .DevelopmentPage .dev-options__heading>p{margin-bottom:20px}
  .DevelopmentPage .dev-options h2{text-align:left}
  .DevelopmentPage .dev-options__grid>a{display:grid;grid-template-rows:auto 122px 92px auto;align-items:start}
  .DevelopmentPage .dev-options__grid h3{align-self:end;margin:0 0 18px}
  .DevelopmentPage .dev-options__grid p{margin:0}
  .DevelopmentPage .dev-options__grid b{align-self:end;margin:0;padding-top:24px}
  .DevelopmentPage .dev-contact__inner{align-items:center}
  .DevelopmentPage .dev-contact__action{width:100%;max-width:460px;justify-self:end}
}

@media(min-width:768px) and (max-width:1279px){
  .DevelopmentPage .dev-options__grid>a{grid-template-rows:auto 106px 78px auto}
  .DevelopmentPage .dev-options__grid>a:last-child{grid-template-rows:auto 82px 58px auto}
}

@media(max-width:767px){
  .DevelopmentPage .dev-options__heading,.DevelopmentPage .dev-contact__action{width:100%;max-width:none}
  .DevelopmentPage .dev-options__grid>a{display:flex;min-height:270px}
  .DevelopmentPage .dev-options__grid h3{margin:48px 0 16px}
  .DevelopmentPage .dev-options__grid p{margin:0}
}

/* Keep the complete hero message inside the first viewport. */
.DevelopmentPage .dev-hero{
  min-height:max(680px,100svh);
  align-items:flex-start;
}
.DevelopmentPage .dev-hero__content{
  padding-top:clamp(36px,5.5vh,58px);
  padding-bottom:42px;
}
.DevelopmentPage .dev-status{margin-bottom:22px}
.DevelopmentPage .dev-hero__lead{margin-top:24px}
.DevelopmentPage .dev-hero__actions{margin-top:28px}
.DevelopmentPage .dev-progress{margin-top:30px}

@media(max-width:767px){
  .DevelopmentPage .dev-hero{
    min-height:max(620px,100svh);
    align-items:flex-start;
  }
  .DevelopmentPage .dev-hero__content{
    padding-top:28px;
    padding-bottom:max(28px,env(safe-area-inset-bottom));
  }
  .DevelopmentPage .dev-status{margin-bottom:18px}
  .DevelopmentPage .dev-hero__lead{margin-top:18px;line-height:1.45}
  .DevelopmentPage .dev-hero__actions{margin-top:22px;gap:10px}
  .DevelopmentPage .dev-hero__actions .btn,
  .DevelopmentPage .dev-btn-secondary{min-height:50px}
  .DevelopmentPage .dev-progress{margin-top:24px;gap:10px}
}

@media(max-width:380px) and (max-height:700px){
  .DevelopmentPage .dev-hero h1{font-size:36px}
  .DevelopmentPage .dev-hero__lead{font-size:13px}
  .DevelopmentPage .dev-progress{font-size:9px}
}

/* Match the mobile content edges to the header logo and burger button. */
@media(max-width:767px){
  .DevelopmentPage .container{
    width:100%;
    max-width:none;
    margin-inline:0;
    padding-left:var(--container-px);
    padding-right:var(--container-px);
  }
  .DevelopmentPage .dev-hero__content{
    width:100%;
    max-width:none;
  }
  .DevelopmentPage .dev-hero h1{
    width:100%;
    max-width:100%;
    font-size:31px;
    line-height:.96;
    letter-spacing:-1.25px;
    overflow-wrap:normal;
  }
  .DevelopmentPage .dev-hero__lead,
  .DevelopmentPage .dev-hero__actions,
  .DevelopmentPage .dev-progress{
    width:100%;
    max-width:100%;
  }
  .DevelopmentPage .dev-hero__lead{font-size:14px}
}

@media(max-width:380px){
  .DevelopmentPage .dev-hero h1{font-size:29px}
}