.wrap {
  width: 100%;
  height: 100%;
  margin: 0;
}

.page-shell {
  width: min(1500px, calc(100vw - 1.6rem));
  margin: 0.18rem auto 0.55rem;
}

.page-section {
  animation: rise-in 0.36s ease both;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 980px) {
  html,
  body {
    min-height: 100%;
    overflow: auto;
  }

  .page-shell {
    height: calc(100dvh - 84px - 1.68rem);
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    grid-template-rows: 0.58fr 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "service flow"
      "contact flow";
    gap: 0.72rem;
  }

  .page-shell.contact-hidden {
    grid-template-rows: 0.58fr 1fr;
    grid-template-areas:
      "hero hero"
      "service flow";
  }

  #hero-slot {
    grid-area: hero;
  }

  #service-slot {
    grid-area: service;
  }

  #flow-slot {
    grid-area: flow;
  }

  #contact-slot {
    grid-area: contact;
  }

  .page-section {
    min-height: 0;
    height: 100%;
    margin: 0;
  }

  .page-section .wrap {
    min-height: 0;
    height: 100%;
  }

  .hero,
  .service-selector,
  .flow-panel,
  .contact-hub {
    min-height: 0;
    height: 100%;
    overflow: auto;
    padding-top: 1.08rem;
  }
}

@media (max-height: 860px) and (min-width: 980px) {
  .page-shell {
    height: calc(100dvh - 76px - 0.82rem);
    grid-template-rows: 0.5fr 1fr 1fr;
    gap: 0.56rem;
  }

  .page-shell.contact-hidden {
    grid-template-rows: 0.5fr 1fr;
  }

  .page-section {
    animation-duration: 0.24s;
  }
}

@media (max-width: 979px) {
  .page-shell {
    width: min(1100px, calc(100vw - 1rem));
    margin-bottom: 1rem;
  }

  .page-section {
    margin-top: 0.75rem;
  }
}