/* =========================================================
   ReRanDE hero laptop viewport fix
   Loaded after section CSS from base.html.
   Keeps the 32-inch desktop composition, but compresses the
   first-fold hero when usable viewport height is limited.
   ========================================================= */

@media (min-width: 1181px) and (max-height: 980px) {
  #intro.section-intro.rerande-hero-clean {
    height: calc(100svh - var(--header-height));
    min-height: 0;
  }

  #intro.section-intro .hero-clean-copy {
    top: 49%;
    left: clamp(46px, 6.4vw, 112px);
    width: min(620px, 37vw);
  }

  #intro.section-intro .hero-clean-copy .hero-label {
    margin-bottom: 12px;
    font-size: clamp(0.68rem, 0.64vw, 0.82rem);
    letter-spacing: 0.075em;
  }

  #intro.section-intro .hero-clean-title {
    font-size: clamp(3.45rem, 4.65vw, 5.65rem);
    line-height: 0.9;
    letter-spacing: -0.066em;
    max-width: 11.5ch;
  }

  #intro.section-intro .hero-clean-title span:nth-child(3),
  #intro.section-intro .hero-clean-title span:nth-child(4) {
    display: inline;
  }

  #intro.section-intro .hero-clean-title span:nth-child(3)::after {
    content: " ";
  }

  #intro.section-intro .hero-clean-statement {
    max-width: 570px;
    margin-top: 18px;
  }

  #intro.section-intro .hero-clean-statement p {
    font-size: clamp(1.02rem, 1.06vw, 1.32rem);
    line-height: 1.2;
  }

  #intro.section-intro .hero-clean-statement p + p {
    margin-top: 3px;
  }

  #intro.section-intro .hero-workflow-panel {
    top: 53%;
    right: clamp(16px, 2.3vw, 42px);
    left: clamp(650px, 43vw, 850px);
    transform: translateY(-50%) scale(0.9);
    transform-origin: center right;
  }

  #intro.section-intro .hero-orchestration-copy {
    margin-bottom: 12px;
  }

  #intro.section-intro .hero-orchestration-copy h2 {
    max-width: 680px;
    font-size: clamp(1.35rem, 1.7vw, 2.05rem);
    line-height: 1;
  }

  #intro.section-intro .hero-workflow-panel .rr-diagram__board {
    height: min(590px, 64vh);
    border-radius: 26px;
  }

  #intro.section-intro .hero-workflow-panel .rr-diagram__col {
    width: clamp(178px, 13vw, 235px);
  }

  #intro.section-intro .hero-workflow-panel .rr-diagram__col--left {
    left: clamp(20px, 1.8vw, 32px);
    top: clamp(18px, 2vh, 30px);
  }

  #intro.section-intro .hero-workflow-panel .rr-diagram__col--right {
    right: clamp(20px, 1.8vw, 32px);
    top: clamp(44px, 4.8vh, 62px);
  }

  #intro.section-intro .hero-workflow-panel .rr-node-list--left {
    gap: clamp(5px, 0.72vh, 8px);
  }

  #intro.section-intro .hero-workflow-panel .rr-node-list--right {
    gap: clamp(6px, 0.9vh, 10px);
  }

  #intro.section-intro .hero-workflow-panel .rr-node {
    min-height: clamp(36px, 4.45vh, 48px);
    border-radius: 14px;
    padding-inline: 12px;
  }

  #intro.section-intro .hero-workflow-panel .rr-node span {
    font-size: clamp(0.72rem, 0.68vw, 0.86rem);
  }

  #intro.section-intro .hero-workflow-panel .rr-diagram__core-wrap {
    width: clamp(230px, 16vw, 290px);
  }

  #intro.section-intro .hero-workflow-panel .rr-core__title {
    font-size: clamp(1.55rem, 1.7vw, 2rem);
  }

  #intro.section-intro .hero-workflow-panel .rr-core__tagline {
    font-size: clamp(0.78rem, 0.8vw, 0.95rem);
  }
}

@media (min-width: 1181px) and (max-height: 860px) {
  #intro.section-intro .hero-clean-copy {
    top: 50%;
    width: min(570px, 35vw);
  }

  #intro.section-intro .hero-clean-title {
    font-size: clamp(3.1rem, 4.2vw, 5.1rem);
  }

  #intro.section-intro .hero-clean-statement p {
    font-size: clamp(0.98rem, 0.96vw, 1.18rem);
  }

  #intro.section-intro .hero-workflow-panel {
    transform: translateY(-50%) scale(0.84);
  }

  #intro.section-intro .hero-workflow-panel .rr-diagram__board {
    height: min(540px, 62vh);
  }
}

/* Laptop-width fallback: covers 1366/1440/1536 CSS-pixel layouts. */
@media (min-width: 1181px) and (max-width: 1560px) {
  #intro.section-intro.rerande-hero-clean {
    height: auto;
    min-height: calc(100svh - var(--header-height));
  }

  #intro.section-intro .hero-clean-stage {
    height: auto;
    padding: 56px 0 84px;
  }

  #intro.section-intro .hero-clean-copy,
  #intro.section-intro .hero-workflow-panel {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
  }

  #intro.section-intro .hero-clean-copy {
    width: min(900px, calc(100% - 48px));
    max-width: 900px;
    margin: 0 auto;
  }

  #intro.section-intro .hero-clean-title {
    max-width: 12.5ch;
    font-size: clamp(3.8rem, 7.4vw, 6.2rem);
  }

  #intro.section-intro .hero-clean-title span:nth-child(3),
  #intro.section-intro .hero-clean-title span:nth-child(4) {
    display: inline;
  }

  #intro.section-intro .hero-clean-title span:nth-child(3)::after {
    content: " ";
  }

  #intro.section-intro .hero-workflow-panel {
    width: min(1080px, calc(100% - 48px));
    margin: 42px auto 0;
  }

  #intro.section-intro .hero-orchestration-copy h2 {
    text-align: left;
    margin-left: 0;
  }

  #intro.section-intro .hero-workflow-panel .rr-diagram__board {
    height: auto;
    min-height: 0;
  }
}