:root{
    --ink:#000012;           /* card text */
    --muted:#d0d6ff;         /* secondary text on dark card */
    --card:#ffffff;          /* card color */
    --radius:20px;

    /* Pile layout */
    --pile-top: 112px;        /* distance from top of viewport */
    --pile-gap: 46px;        /* vertical space between stacked cards */
  }

  *{box-sizing:border-box}
  .stack-wrapper{ position:relative; height:calc(var(--cards, 6) * 100vh) }
  /* CARD: sticky; dynamic top adds spacing in the pile */
  .stack-card{
    position: sticky; 
    top: calc(var(--pile-top) + (var(--i, 0) * var(--pile-gap)) * var(--p, 0));
    width:100%; margin:0 auto; border-radius:var(--radius);
    background: var(--card); color: var(--ink);
    box-shadow: 0 18px 18px rgba(155,155,155,.05);
    overflow:hidden; padding:clamp(16px,2.5vw,22px);
    min-height: 70vh;
    height: 70vh;
    max-height: 70vh; display:flex; flex-direction:column; justify-content:space-between;
    transform: translate3d(0,0,0);
    will-change: transform, box-shadow, top; /* removed opacity */
    --p: 0; /* ScrollTrigger animates this 0→1 */
  }
.stack-card .columns-two {
    display: flex;
    /*grid-template-columns: 35% auto; gap: 2rem;*/
}
.first-column {
  width: 40%; /* Initial width for the first column */
  transition: all 0.3s ease; /* Smooth transition for changes */
}

.second-column {
  width: 60%; /* Initial width for the second column */
  transition: all 0.3s ease; /* Smooth transition for changes */
}

.second-column:hover {
  width: 100%; /* Second column takes full width on hover */
}

.second-column:hover + .first-column { /* Selects the sibling first-column when second-column is hovered */
 /* display: none;*/ /* Hide the first column */
}



  /* Content */

  .stack-card .title{font-size:var(--fs-title-m); font-size:var(--clamp-title-m); line-height:1.12; margin:0 0 10px }
  .stack-card p{ font-size:var(--fs-text-l); font-size:var(--clamp-text-l); line-height:1.6; margin:0 0 12px }
  .stack-card p.kicker{text-transform:uppercase; letter-spacing:.14em; font-weight:600; font-size:.76rem; margin:0 0 8px }
  /* Layering: later cards on top */
  .stack-card{ z-index:0 }

  /* Scroll mapping (no opacity changes):
     At --p=1: scale(.9) and slide right 48px. */
  .stack-card{
    transform: translate3d(calc(48px * var(--p)), 0, 0)
               scale(calc(1 - 0.10 * var(--p)));
    box-shadow: 0 18px 50px rgba(0,0,0, calc(.05 + .25 * var(--p)));
  }

  .spacer{ height:12vh }

  @media (max-width: 700px){
    .stack-card{ min-height:84vh }
  }