/* Layout values reproduced from Tensorr's Method / growth-systems section. */
.cases {
  min-height:auto;
  padding:80px max(4vw,60px);
  overflow:clip;
  border-radius:16px;
  background:#f8f7f7;
  color:#060606;
}

.cases-inner {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:60px;
  width:100%;
  max-width:1440px;
  margin:0 auto;
}

.cases h2 {
  width:100%;
  max-width:700px;
  margin:0 auto;
  font:500 clamp(46px,5vw,76px)/1.04 "Playfair Display","Noto Sans SC",serif;
  letter-spacing:-.06em;
  text-align:center;
}

.case-stack {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  width:100%;
  overflow:visible;
}

.case,.case.reverse {
  --stack-opacity:1;
  --stack-rotate:0deg;
  --stack-y:0px;
  --stack-scale:1;
  position:sticky;
  top:120px;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  height:516px;
  min-height:0;
  margin:0;
  padding:7px;
  overflow:hidden;
  border:1px solid #e6e6e6;
  border-radius:8px;
  background:#e6e6e6;
  opacity:var(--stack-opacity);
  transform:translate3d(0,var(--stack-y),0) rotate(var(--stack-rotate)) scale(var(--stack-scale));
  transform-origin:center;
  box-shadow:none;
  will-change:transform,opacity;
}

.case img,.case.reverse img {
  order:initial;
  width:100%;
  height:100%;
  min-height:0;
  border-radius:6px;
  object-fit:cover;
}

.case-copy,.case.reverse .case-copy {
  order:initial;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:clamp(30px,3vw,44px);
  border-radius:6px;
  background:#fff;
}

.case-copy span { font:500 14px/1.2 "DM Sans","Noto Sans SC",sans-serif; }
.case-copy span b { font-weight:500; }
.case-copy h3 { margin:clamp(46px,7vw,90px) 0 12px; font:400 clamp(23px,2vw,32px)/1.12 "Noto Sans SC",sans-serif; letter-spacing:-.04em; }
.case-copy p { max-width:460px; margin:0; font-size:16px; line-height:1.48; opacity:.6; }
.case-copy ul { margin:auto 0 0; padding:18px 0 0 20px; border-top:1px solid rgba(0,0,0,.1); font-size:14px; line-height:1.65; }

.case-hit-area {
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  cursor:pointer;
}

.case-hit-area:focus-visible {
  outline:3px solid #1685f8;
  outline-offset:-5px;
}

@media (max-width:800px) {
  .cases { padding:64px 20px; overflow:hidden; border-radius:12px; }
  .cases-inner { gap:40px; }
  .case-stack { gap:16px; }
  .case,.case.reverse { position:relative; top:auto; height:auto; min-height:0; opacity:1; transform:none; }
}