/* Homepage Case Studies strip — equal 3-card row + slim quote/CTA band */

.hp-cs{padding:100px 0 90px}
.hp-cs .sect-head{margin-bottom:48px}
.hp-cs .sect-head h2{font-size:clamp(36px,4.8vw,64px);max-width:18ch}

.hp-cs-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
@media(max-width:980px){.hp-cs-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hp-cs-grid{grid-template-columns:1fr}}

.fthumb-browser{
  display:block;width:100%;
  background:#111119;
  overflow:hidden;
  border-radius:10px;
  border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  flex:0 0 auto;
}
.fthumb-browser .chrome{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;
  background:#16161f;
  border-bottom:1px solid var(--line);
}
.fthumb-browser .chrome .dot{
  width:7px;height:7px;border-radius:50%;background:#3a3a48;display:inline-block;flex:0 0 auto;
}
.fthumb-browser .chrome .dot:nth-child(1){background:#ff5f57}
.fthumb-browser .chrome .dot:nth-child(2){background:#febc2e}
.fthumb-browser .chrome .dot:nth-child(3){background:#28c840}
.fthumb-shot{
  display:block;width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0a0a0f;
  line-height:0;
}
.fthumb-shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}

.hp-cs-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  min-height:0;
  background:#111119;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px 18px;
  text-decoration:none;color:inherit;
  transition:border-color .2s, background .2s, transform .2s;
  box-sizing:border-box;
}
.hp-cs-card:hover{border-color:var(--line-2);background:#13131c;transform:translateY(-2px)}
.hp-cs-card .fmeta{
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.12em;text-transform:uppercase;
  margin:0;padding:0 4px;
}
.hp-cs-card .fmeta span+span::before{content:"·";margin:0 .55em;opacity:.6}
.hp-cs-card h3{
  margin:0;padding:0 4px;
  font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.15;
  min-height:2.3em;
}
.hp-cs-card h3 .ital{font-family:var(--serif);font-style:italic;color:var(--accent-2)}
.hp-cs-card .tag-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.tag-pill{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:4px 9px;
}
.hp-cs-card .blurb{
  margin:0;padding:0 4px;
  color:var(--ink-dim);font-size:14px;line-height:1.55;
}
.hp-cs-card .hp-metrics{
  margin-top:auto;
  margin-bottom:0;
  flex:0 0 auto;
  gap:8px;
}
.hp-cs-card .hp-m{border-radius:12px;padding:12px 10px}
.hp-cs-card .hp-m b{font-size:22px;line-height:1.15}
.hp-cs-card .hp-m span{font-size:11px;line-height:1.3}
.hp-cs-foot{
  margin-top:auto;
  padding:0 4px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);
}
.hp-cs-card:hover .hp-cs-foot{color:var(--ink)}

.hp-cs-band{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:28px;
  align-items:center;
  margin-top:22px;
  padding:28px 32px;
  background:#111119;
  border:1px solid var(--line);
  border-radius:18px;
}
@media(max-width:900px){
  .hp-cs-band{grid-template-columns:1fr;gap:20px;padding:24px}
}
.hp-cs-band-quote{min-width:0}
.hp-cs-band .hp-quote{margin:0 0 10px;font-size:clamp(18px,2vw,22px)}
.hp-cs-attr{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);margin:0;
}
.hp-cs-band-cta{
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
  min-width:0;
}
@media(min-width:901px){
  .hp-cs-band-cta{
    border-left:1px solid var(--line);
    padding-left:28px;
  }
}
.hp-cs-band-note{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.5}
.hp-cs-band-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
}
.hp-cs-more-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
}
.hp-cs-more-link:hover{color:var(--ink)}