/* case-study.css - 52Launch case study pages (/purrlavator and the pages migrated after it).
   Loads after shared.css and only adds the case-study sections; header, menu, buttons,
   .block-tag, .cbar and the footer all come from shared.css. Same tokens, same rules:
   black on white plus one red, Poppins 300/500/600, pill buttons, 2px black rules
   between sections, one black section per page. */

html{scroll-padding-top:132px}

/* ── hero (split: copy left, photo right) ── */
.cs-hero{border-bottom:2px solid var(--black);padding:0}
.cs-hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.cs-hero-l{padding:56px 60px 52px;border-right:2px solid var(--black)}
.cs-hero-l .hxl{font-size:clamp(36px,5vw,68px);line-height:1.01;max-width:16ch;text-wrap:balance;margin-top:18px}
.cs-hero-l .hxl .mark{position:relative;display:inline-block;color:inherit;animation:markink 1ms steps(1,end) 430ms forwards;z-index:0}
.cs-hero-l .hxl .mark::before{content:"";position:absolute;inset:-2px -8px;background:var(--red);z-index:-1;transform:scaleX(0);transform-origin:left;animation:swipe 700ms var(--ease) 430ms forwards}
.cs-hero-l .sub{font-size:clamp(20px,2.1vw,27px);font-weight:500;line-height:1.25;max-width:30ch;text-wrap:balance;margin-top:22px}
.cs-hero-l .sell{color:var(--ink-60);max-width:58ch;margin-top:18px;font-size:17px}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;align-items:center}
.cs-chips-l{font-weight:600;font-size:10.5px;letter-spacing:.07em;color:var(--red);margin-right:4px}
.cs-chip{border:1px solid var(--black);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;line-height:1.3}
.cs-nums{display:grid;grid-template-columns:repeat(3,auto);gap:44px;margin-top:34px;justify-content:start}
.cs-nums .n{font-weight:600;font-size:clamp(34px,3.6vw,50px);line-height:1}
.cs-nums .n em{font-style:normal;color:var(--red)}
.cs-nums p{font-size:13px;color:var(--ink-60);margin-top:4px;max-width:16ch;line-height:1.6}
.cs-hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;align-items:center}
.cs-hero-cta .near{font-size:13.5px;color:var(--ink-60)}
.cs-hero-r{position:relative;overflow:hidden;background:var(--cloud);min-height:520px}
.cs-hero-r>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 30%;display:block;transition:transform 900ms var(--ease)}
.cs-hero-r:hover>img{transform:scale(1.04)}
.cs-hero-r>img.center{object-position:center}
.cs-badge{display:block;height:34px;width:auto;margin-top:22px}
.cs-hero-r video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:var(--cloud)}
.cs-hero-cap{position:absolute;left:0;bottom:0;background:var(--white);border-top:2px solid var(--black);border-right:2px solid var(--black);padding:13px 19px;max-width:min(72%,420px)}
.cs-hero-cap b{display:block;font-weight:600;font-size:10.5px;letter-spacing:.07em;color:var(--red);margin-bottom:3px}
.cs-hero-cap span{font-size:14px;font-weight:500}
.cs-hero-cap.cs-cap-logo{padding:12px 18px}
.cs-hero-cap.cs-cap-logo img{display:block;height:48px;width:auto}

/* ── generic section ── */
.cs-sec{padding:64px 60px;border-bottom:2px solid var(--black)}
.cs-sec h2{font-size:clamp(26px,3vw,40px);line-height:1.1;max-width:26ch;margin-top:16px}
.cs-sec .lead{color:var(--ink-60);margin-top:16px;max-width:66ch}
.cs-sec .fine{font-size:12.5px;color:var(--ink-60);margin-top:28px;max-width:80ch;line-height:1.6}
.cs-2col{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px;align-items:start;margin-top:36px}

/* ── snapshot (definition rows) ── */
.cs-snap{display:grid;grid-template-columns:150px 1fr;margin-top:34px;max-width:900px;border-top:2px solid var(--black)}
.cs-snap dt,.cs-snap dd{padding:15px 0;border-bottom:1px solid var(--hairline);margin:0}
.cs-snap dt{font-weight:600;font-size:11px;letter-spacing:.07em;color:var(--red);padding-top:19px}
.cs-snap dd{color:var(--ink-70)}

/* ── image + copy row ── */
.cs-stage{border-bottom:2px solid var(--black)}
.cs-stage-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.cs-stage-im{position:relative;overflow:hidden;background:var(--cloud);min-height:420px;border-right:2px solid var(--black)}
.cs-stage-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;transition:transform 800ms var(--ease)}
.cs-stage:hover .cs-stage-im img{transform:scale(1.05)}
.cs-stage-im.contain img{object-fit:contain;object-position:center;padding:44px;box-sizing:border-box}
.cs-stage-im .snum{position:absolute;top:0;left:0;background:var(--black);color:#fff;font-weight:600;font-size:12px;letter-spacing:.06em;padding:9px 15px}
.cs-stage-b{padding:56px 60px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px}
.cs-stage-b h2{font-size:clamp(24px,2.9vw,36px);line-height:1.1;max-width:22ch}
.cs-stage-b p{color:var(--ink-60);max-width:60ch}
.cs-list{display:grid;gap:0;margin-top:10px;width:100%;max-width:560px;border-top:2px solid var(--black)}
.cs-list>div{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.cs-list>div>div{display:block}
.cs-list b{font-weight:600;font-size:11px;letter-spacing:.07em;color:var(--red)}
.cs-list strong{display:block;font-weight:500;font-size:16px}
.cs-list span{display:block;color:var(--ink-60);font-size:14px;margin-top:2px}

/* ── bordered cards (challenge, strategy, takeaways) ── */
.cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 44px;margin-top:36px}
.cs-cards.four{grid-template-columns:repeat(4,1fr);gap:30px 32px}
.cs-cards article{border-top:2px solid var(--black);padding-top:20px}
.cs-cards .cat{display:block;font-weight:600;font-size:10.5px;letter-spacing:.07em;color:var(--red);margin-bottom:7px}
.cs-cards h3{font-size:19px}
.cs-cards p{color:var(--ink-60);font-size:15px;margin-top:8px;line-height:1.75}
.cs-cards.two{grid-template-columns:1fr 1fr;gap:40px 56px;max-width:1100px}
.cs-cards.two h2{font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin-top:0;max-width:none}
.cs-cards.two p{font-size:16px;margin-top:12px;line-height:1.8}
.cs-step{font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1;color:var(--red);margin-bottom:10px}

/* ── stat tiles (light) ── */
.cs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.cs-stat{border:1px solid var(--hairline);padding:26px 24px 24px;transition:border-color 220ms var(--ease),transform 220ms var(--ease)}
.cs-stat:hover{border-color:var(--black);transform:translateY(-4px)}
.cs-stat .n{font-weight:600;font-size:clamp(30px,3.2vw,44px);line-height:1}
.cs-stat .n em{font-style:normal;color:var(--red)}
.cs-stat .n.red{color:var(--red)}
.cs-stat h3{font-size:16px;margin-top:10px}
.cs-stat p{color:var(--ink-60);font-size:13.5px;margin-top:4px;line-height:1.65}
.cs-stat.hi{background:var(--black);color:#fff;border-color:var(--black)}
.cs-stat.hi h3{color:#fff}
.cs-stat.hi p{color:rgba(255,255,255,.72)}
.cs-stat.big .n{font-size:clamp(56px,7vw,96px)}
.cs-stats.tri{margin-top:0}
.cs-stats.tri .n{font-size:clamp(26px,2.4vw,36px)}

/* ── the page's one black section ── */
.cs-black{background:var(--black);color:#fff;padding:66px 60px;border-bottom:2px solid var(--black)}
.cs-black h2{color:#fff;font-size:clamp(25px,3vw,40px);line-height:1.1;max-width:26ch;margin-top:16px}
.cs-black .lead{color:rgba(255,255,255,.75);margin-top:16px;max-width:70ch}
.cs-black .fine{color:rgba(255,255,255,.5);font-size:12.5px;margin-top:28px;max-width:80ch;line-height:1.6}
.cs-black-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18);margin-top:36px}
.cs-black-g div{background:var(--black);padding:28px 26px 26px;transition:background 240ms var(--ease)}
.cs-black-g div:hover{background:#151515}
.cs-black-g .n{font-weight:600;font-size:clamp(32px,3.4vw,48px);line-height:1;color:#fff}
.cs-black-g .n.red{color:var(--red)}
.cs-black-g h3{color:#fff;font-size:16px;margin-top:10px}
.cs-black-g p{color:rgba(255,255,255,.72);font-size:13.5px;margin-top:4px;line-height:1.65}
.cs-black .big{color:#fff;font-size:clamp(17px,1.5vw,20px);line-height:1.6;margin-top:0;max-width:60ch}
.cs-black .big + .lead{margin-top:18px}
.cs-black a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cs-black a:hover{color:var(--red)}
.cs-black-2col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:36px}
.cs-black-2col img{display:block;width:100%;height:auto;max-width:700px;justify-self:end}

/* ── gallery grid ── */
.cs-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:30px}
.cs-gallery figure{grid-column:span 2;margin:0;background:var(--cloud);border:1px solid var(--hairline);aspect-ratio:4/3;overflow:hidden;transition:border-color 220ms var(--ease)}
.cs-gallery figure:hover{border-color:var(--black)}
.cs-gallery img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 800ms var(--ease)}
.cs-gallery figure:hover img{transform:scale(1.04)}
.cs-gallery figure:nth-last-child(2):nth-child(3n+1),.cs-gallery figure:nth-last-child(1):nth-child(3n+2){grid-column:span 3;aspect-ratio:2/1}
.cs-gallery figure:first-child:nth-last-child(4),.cs-gallery figure:first-child:nth-last-child(4)~figure{grid-column:span 3;aspect-ratio:3/2}
.cs-gallery figure:nth-last-child(1):nth-child(3n+1){grid-column:span 6;aspect-ratio:5/2}

/* ── callout ── */
.cs-callout{border-left:4px solid var(--red);padding:4px 0 4px 22px;margin-top:32px;max-width:70ch}
.cs-callout b{display:block;font-weight:600;font-size:11px;letter-spacing:.07em;color:var(--red);margin-bottom:6px}
.cs-callout p{color:var(--ink-70)}

/* ── comparison table ── */
.cs-table{width:100%;border-collapse:collapse;margin-top:0}
.cs-table th,.cs-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hairline);font-size:15px}
.cs-table thead th{background:var(--black);color:#fff;font-weight:500;font-size:13px;letter-spacing:.03em}
.cs-table th:not(:first-child),.cs-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.cs-table tbody tr:last-child td{font-weight:600;border-bottom:2px solid var(--black)}
.cs-table tbody tr:last-child td:not(:first-child){color:var(--red)}

/* ── split bars ── */
.cs-bars{margin-top:8px}
.cs-bars .row{margin-bottom:18px}
.cs-bars .lbl{font-size:12px;font-weight:600;letter-spacing:.07em;color:var(--ink-60);margin-bottom:8px}
.cs-bars .track{display:flex;height:40px;border:1px solid var(--black)}
.cs-bars .seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden}
.cs-bars .seg.k{background:var(--black)}
.cs-bars .seg.r{background:var(--red)}
.cs-bars .key{display:flex;gap:18px;font-size:12.5px;color:var(--ink-60);margin-top:6px}
.cs-bars .key i{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:6px}
.cs-bars .key i.k{background:var(--black)}
.cs-bars .key i.r{background:var(--red)}

/* ── responsive ── */
@media (max-width:1080px){
  .cs-hero-in,.cs-stage-in{grid-template-columns:1fr}
  .cs-hero-l{border-right:0;border-bottom:2px solid var(--black);padding:44px 40px}
  .cs-hero-r{min-height:340px}
  .cs-stage-im{border-right:0;border-bottom:2px solid var(--black);min-height:320px}
  .cs-stage-b{padding:40px}
  .cs-sec,.cs-black{padding-left:40px;padding-right:40px}
  .cs-cards.four{grid-template-columns:1fr 1fr}
  .cs-2col{grid-template-columns:1fr;gap:28px}
  .cs-black-2col{grid-template-columns:1fr;gap:32px}
  .cs-black-2col img{justify-self:start}
}
@media (max-width:768px){
  .cs-hero-l,.cs-sec,.cs-black{padding-left:24px;padding-right:24px}
  .cs-hero-l .hxl{font-size:clamp(29px,8.4vw,40px)}
  .cs-hero-r{min-height:260px}
  .cs-stage-b{padding:32px 24px}
  .cs-sec,.cs-black{padding-top:46px;padding-bottom:46px}
  .cs-nums{grid-template-columns:1fr 1fr;gap:22px 26px}
  .cs-cards,.cs-stats,.cs-stats.tri,.cs-black-g{grid-template-columns:1fr 1fr}
  .cs-cards.two{grid-template-columns:1fr;gap:34px}
  .cs-gallery{grid-template-columns:1fr 1fr;gap:12px}
  .cs-gallery figure,.cs-gallery figure:nth-last-child(2):nth-child(3n+1),.cs-gallery figure:nth-last-child(1):nth-child(3n+2),.cs-gallery figure:first-child:nth-last-child(4),.cs-gallery figure:first-child:nth-last-child(4)~figure,.cs-gallery figure:nth-last-child(1):nth-child(3n+1){grid-column:span 1;aspect-ratio:4/3}
  .cs-stage-im.contain img{padding:28px}
  .cs-snap{grid-template-columns:1fr}
  .cs-snap dt{border-bottom:0;padding-bottom:0}
  .cs-snap dd{padding-top:4px}
  .cs-table th,.cs-table td{padding:11px 10px;font-size:14px}
}
@media (max-width:480px){
  .cs-cards,.cs-cards.four,.cs-stats,.cs-stats.tri,.cs-black-g{grid-template-columns:1fr}
  .cs-hero-cta .cta{width:100%;justify-content:center;box-sizing:border-box}
  .cs-hero-cap{max-width:100%;border-right:0}
  .cs-hero-cap.cs-cap-logo{max-width:none;border-right:2px solid var(--black)}
  .cs-hero-cap.cs-cap-logo img{height:38px}
}