/* Hepsia case studies */
.hc-meta, .hc-results, .hc-compare, .hc-quote, .hc-cta, .hc-portfolio{
  --hc-indigo:#3E4095; --hc-deep:#24265A; --hc-tint:#EEF0FA; --hc-cyan:#00AFEF; --hc-cyan-deep:#0089BC; --hc-soft:#4A4B66; --hc-line:#D5DAEC;
  font-family:'Inter','Segoe UI',sans-serif; box-sizing:border-box;
}
.hc-meta *, .hc-results *, .hc-compare *, .hc-portfolio *{ box-sizing:border-box; }

.hc-meta{ display:flex; flex-wrap:wrap; border-top:1px solid var(--hc-line); border-bottom:1px solid var(--hc-line); margin:0 0 28px; }
.hc-meta div{ padding:14px 22px 14px 0; margin-right:22px; }
.hc-meta span{ display:block; font-size:.78rem; color:var(--hc-soft); }
.hc-meta strong{ font-weight:600; color:var(--hc-deep); font-size:.95rem; }
.hc-meta a{ color:var(--hc-indigo); }

.hc-results{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2px; background:var(--hc-line); margin:0 0 36px; }
.hc-results div{ background:var(--hc-deep); padding:24px 22px; border-top:5px solid var(--hc-cyan); }
.hc-results div:nth-child(even){ border-top-color:var(--hc-indigo); background:#2D2F6E; }
.hc-results strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:2.2rem; font-weight:600; color:#fff; line-height:1.1; }
.hc-results span{ color:#C9D3EF; font-size:.9rem; }

.hc-story{ max-width:72ch; }

/* before / after */
.hc-compare{ position:relative; margin:40px 0; overflow:hidden; border:1px solid var(--hc-line); user-select:none; }
.hc-compare img{ display:block; width:100%; height:auto; }
.hc-before{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.hc-before img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.hc-handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:4px; margin-left:-2px; background:var(--hc-cyan); pointer-events:none; }
.hc-handle::after{ content:""; position:absolute; top:50%; left:50%; width:40px; height:40px; margin:-20px 0 0 -20px; background:var(--hc-cyan);
  clip-path:polygon(0 50%,30% 20%,30% 40%,70% 40%,70% 20%,100% 50%,70% 80%,70% 60%,30% 60%,30% 80%); }
.hc-compare input[type=range]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; -webkit-appearance:none; appearance:none; }
.hc-compare input[type=range]:focus-visible ~ .hc-handle, .hc-compare:focus-within .hc-handle{ box-shadow:0 0 0 3px #fff; }
.hc-tag{ position:absolute; top:14px; padding:4px 10px; font-size:.78rem; font-weight:600; pointer-events:none; }
.hc-tag--before{ left:14px; background:var(--hc-deep); color:#fff; }
.hc-tag--after{ right:14px; background:var(--hc-cyan); color:#06263A; }

.hc-quote{ margin:40px 0; padding:0 0 0 24px; border-left:5px solid var(--hc-cyan); }
.hc-quote p{ font-family:'Space Grotesk',sans-serif; font-size:1.45rem; line-height:1.4; color:var(--hc-deep); margin:0 0 10px; max-width:60ch; }
.hc-quote cite{ font-style:normal; color:var(--hc-soft); font-size:.92rem; }

.hc-cta{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:28px; background:var(--hc-cyan); margin:40px 0 0; }
.hc-cta h3{ font-family:'Space Grotesk',sans-serif; color:#06263A; margin:0 0 4px; font-size:1.4rem; }
.hc-cta p{ margin:0; color:#06263A; }
.hc-btn{ display:inline-block; padding:14px 26px; background:var(--hc-deep); color:#fff !important; font-weight:600; text-decoration:none; }
.hc-btn:hover{ background:var(--hc-indigo); }

/* portfolio grid */
.hc-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.hc-filter button{ font:inherit; font-size:.9rem; font-weight:500; padding:8px 16px; border:1px solid var(--hc-line); background:#fff; color:var(--hc-deep); cursor:pointer; border-radius:0; }
.hc-filter button.is-active{ background:var(--hc-deep); border-color:var(--hc-deep); color:#fff; }
.hc-filter button:focus-visible{ outline:3px solid var(--hc-cyan); outline-offset:2px; }
.hc-grid{ display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:24px; }
.hc-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--hc-line); }
.hc-card[hidden]{ display:none; }
.hc-card-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--hc-tint); }
.hc-card-img img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .5s ease; }
.hc-card:hover .hc-card-img img{ transform:scale(1.04); }
.hc-card-body{ display:flex; flex-direction:column; gap:4px; padding:18px 20px 20px; border-top:4px solid var(--hc-cyan); }
.hc-card-body small{ color:var(--hc-cyan-deep); font-size:.8rem; font-weight:600; }
.hc-card-body strong{ font-family:'Space Grotesk',sans-serif; font-size:1.2rem; color:var(--hc-deep); font-weight:600; }
.hc-card-body em{ font-style:normal; color:var(--hc-soft); font-size:.93rem; }
.hc-card:focus-visible{ outline:3px solid var(--hc-cyan); outline-offset:2px; }
.hc-empty{ padding:14px 18px; border-left:4px solid #00AFEF; background:#EEF0FA; }

@media (max-width: 900px){ .hc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px){ .hc-grid{ grid-template-columns:1fr; } .hc-results strong{ font-size:1.8rem; } }
@media (prefers-reduced-motion: reduce){ .hc-card-img img{ transition:none; } }

.hc-portfolio [hidden]{ display:none !important; }