/* ════════════════════════════════════════════
       STACK BOX — scroll budget
    ════════════════════════════════════════════ */
    @font-face {
      font-family: HelveticaL;
      src: url('./assets/fonts/helvetica-neue-5/HelveticaNeueLight.otf');
    }

    .stack-box {
      position: relative;
      z-index: 1;
      height: 300vh;
      /* 3 slides × 100vh */
    }

    .stack-box-contain {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
    }

    .stack-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      will-change: clip-path;
      clip-path: inset(0 0 0 0);
    }



    /* Full-viewport slide canvas */
    .slide-inner {
      position: absolute;
      inset: 0;
      height: 100vh;
      padding: 80px 20px 20px;
      background: #1b1b1e;
      display: flex;
      align-items: stretch;
    }


    .saya-navbar--hidden ~ .stack-box .slide-inner {
      padding: 20px 20px 20px;
    }

    /* sv-influence-box style: lime border left/top/bottom, blue right */
    .slide-box {
      display: flex;
      align-items: stretch;
      width: 100%;
      border-top: 14px solid #addc55;
      border-left: 14px solid #addc55;
      border-bottom: 14px solid #addc55;
      border-right: 14px solid #addc55;
      background: #addc55;
      overflow: hidden;
      position: relative;
    }

    /* Left dark panel */
    .slide-left {
      position: relative;
      flex: 0 0 50%;
      background: #1b1b1e;
      padding: 80px 56px 70px 70px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-top: 6px solid #addc55;
      border-left: 6px solid #addc55;
      border-bottom: 6px solid #addc55;
      border-right: 10px solid #addc55;
    }

    #slide-0 .slide-ghost-num {
      left: 48.8%;
    }

    /* Ghost number */
    .slide-ghost-num {
      position: absolute;
      top: 14%;
      left: 50.5%;
      transform: translate(-50%, -50%);
      font-family: 'Cal Sans', sans-serif;
      font-size: 170px;
      line-height: 1;
      color: #fff;
      opacity: 0.18;
      white-space: nowrap;
      pointer-events: none;
      z-index: 5;
      user-select: none;
    }

    /* Logo row */
    .slide-logo-row {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 32px;
      opacity: 0;
      transform: translateY(28px);
      line-height: 3.4rem;
    }

    .slide-logo-img {
      height: auto;
      width: 204px;
      margin-bottom: -1.2rem;
    }

    .slide-service-name {
      font-family: 'Cal Sans', sans-serif;
      font-size: 56px;
      /* line-height: 1; */
      color: #addc55;
      white-space: nowrap;
    }

    /* Body text */
    .slide-p1,
    .slide-p2 {
      position: relative;
      z-index: 1;
      font-family: HelveticaL, 'Helvetica Neue', sans-serif;
      font-size: 18px;
      color: #d8d5c7;
      opacity: 0;
      transform: translateY(22px);
    }

    .slide-p1 {
      line-height: 35px;
      margin-bottom: 28px;
    }

    .slide-p2 {
      line-height: 39px;
      margin-bottom: 48px;
    }

    /* Learn More link — matches sv-learn-more style */
    .slide-learn {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
      color: #fff;
      width: 200px;
    }

    .slide-learn__text {
      position: relative;
    }

    /* .slide-learn__text::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #fff;
    } */

    .slide-learn__arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* width: 36px; */
      /* height: 36px; */
      flex-shrink: 0;
    }

    .slide-learn__arrow img {
      width: 16px;
      height: 16px;
    }

    /* .slide-learn:hover .slide-learn__arrow {
      border-color: #addc55;
      background: rgba(173, 220, 85, 0.12);
    } */

    /* Right photo panel */
    .slide-right {
      flex: 1;
      overflow: hidden;
      position: relative;
      border-top: 6px solid #addc55;
      border-left: 10px solid #addc55;
      border-bottom: 6px solid #addc55;
      border-right: 6px solid #addc55;
    }

    .slide-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      transform: scale(1.06);
    }

    /* Progress dots — hidden by default, shown only while stack-box is active */
    .stack-nav {
      position: fixed;
      right: 28px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .stack-nav.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .stack-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(173, 220, 85, 0.25);
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }

    .stack-dot.active {
      background: #addc55;
      transform: scale(1.6);
    }

    /* Mobile — flat flow, no stacking */
    @media (max-width: 1023px) {
      .stack-box {
        height: auto;
      }

      .stack-box-contain {
        position: relative;
        height: auto;
        overflow: visible;
        min-width: 330px;
      }

      .stack-item {
        position: relative !important;
        height: auto !important;
        clip-path: none !important;
        overflow: visible !important;
      }

      .slide-inner {
        position: relative;
        height: auto;
        padding: 12px 12px;
      }

      .slide-box {
        flex-direction: column;
        border-width: 8px;
      }

      .slide-left {
        flex: none;
        padding: 50px 22px 34px;
        order: 2;
      }

      .slide-right {
        height: 420px;
        order: 1;
      }

      .slide-ghost-num {
        font-size: 110px;
        top: 40%;
      }

      #slide-0 .slide-ghost-num {
        left: 50%;
      }

      .slide-service-name {
        font-size: 38px;
        line-height: 1;
      }

      .slide-p1,
      .slide-p2 {
        font-size: 16px;
        line-height: 24px;
      }

      .slide-p1 {
        margin-bottom: 16px;
      }

      .slide-p2 {
        margin-bottom: 20px;
      }

      .slide-logo-row,
      .slide-p1,
      .slide-p2,
      .slide-learn {
        opacity: 1 !important;
        transform: none !important;
      }

      .slide-logo-row {
        margin-bottom: 12px;
      }

      .slide-learn {
        width: 170px;
      }

      .slide-logo-img {
        height: auto;
        width: 130px;
        margin-bottom: -0.7rem;
      }

      .slide-learn__arrow img {
        width: 12px;
        height: 12px;
      }

      .slide-right img {
        transform: none !important;
      }

      .stack-nav {
        display: none;
      }
    }

    @media (max-width: 428px) {
      .slide-logo-row {
        flex-wrap: wrap;
      }

      .slide-ghost-num {
        top: 65vw;
      }
    }

    @media (max-width: 1200px) and (min-width: 1024px) {
      .slide-left {
        padding: 70px 40px 60px 48px;
      }

      .slide-service-name {
        font-size: 52px;
      }

      .slide-ghost-num {
        font-size: 130px;
      }
    }