/* ═══════════════════════════════════════════
   Portfolio — Archive cards + Case single
   ═══════════════════════════════════════════ */

/* ── Archive cards ─────────────────────────── */

.portfolio-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px -16px rgba(0,0,0,.12);
    border-color: var(--acid-green);
}

.portfolio-img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-secondary);
}
.portfolio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.portfolio-card:hover .portfolio-img img { transform: scale(1.04); }
.portfolio-img--empty {
    background: linear-gradient(135deg, var(--bg-secondary), var(--border-color));
}

.portfolio-info { padding: 24px; }
.portfolio-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted);
}
.portfolio-info h3 { margin-bottom: 8px; }
.portfolio-info h3 a:hover { color: var(--acid-green); }
.portfolio-info p {
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.6;
    margin-bottom: 16px;
}
.card-more {
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .25s ease;
}
.card-more:hover { gap: 12px; }


/* ── Case Hero ─────────────────────────────── */

.case-hero {
    padding: 32px 0 56px;
    position: relative;
    overflow: hidden;
    margin: 0 24px 48px;
    border-radius: 24px;
    background: var(--bg-hero);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
}
.case-hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.case-hero__content {
    max-width: 600px;
    flex-shrink: 0;
}
.case-hero__content .portfolio-tags { margin-bottom: 16px; }
.case-hero__content h1 {
    margin-bottom: 16px;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.case-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: .92rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.case-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.case-hero__meta i { color: var(--accent-ink); }
.case-hero__desc {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}
.case-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.case-hero__media {
    flex-shrink: 0;
    width: 420px;
    max-width: 40%;
}
.case-hero__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-main);
    box-shadow: var(--shadow-md);
}

@media (max-width: 1024px) {
    .case-hero .container { flex-direction: column; }
    .case-hero__media { width: 100%; max-width: 480px; }
}
@media (max-width: 768px) {
    .case-hero {
        padding: 20px 0 32px;
        margin: 0 12px 32px;
        border-radius: 16px;
    }
}


/* ── Task / Challenge ──────────────────────── */

.case-task__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.case-task__grid--single {
    grid-template-columns: 1fr;
}
.case-task__block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    padding: 32px;
}
.case-task__block--dark {
    background: #0c0c0e;
    border-color: rgba(255,255,255,.06);
    color: #fff;
}
.case-task__block--dark h3 { color: #fff; }
.case-task__block--dark .prose p,
.case-task__block--dark .prose li { color: rgba(255,255,255,.55); }
.case-task__icon {
    font-size: 1.6rem;
    color: var(--acid-green);
    margin-bottom: 14px;
}
.case-task__block:not(.case-task__block--dark) .case-task__icon { color: var(--accent-ink); }
.case-task__block h3 { margin-bottom: 10px; }

@media (max-width: 768px) {
    .case-task__grid { grid-template-columns: 1fr; }
}


/* ── Approach steps ────────────────────────── */

.case-steps {
    display: flex;
    flex-direction: column;
    max-width: 720px;
    margin: 0 auto;
}
.case-step {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
}
.case-step:last-child { border-bottom: none; }
.case-step__num {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-ink);
    line-height: 1;
    flex-shrink: 0;
    width: 44px;
}
.case-step__body h3 { margin-bottom: 6px; }
.case-step__body p {
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.7;
}


/* ── Gallery ───────────────────────────────── */

.case-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.case-gallery__item {
    border-radius: var(--radius-main);
    overflow: hidden;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
}
.case-gallery__item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .4s ease;
}
.case-gallery__item:hover img { transform: scale(1.03); }

@media (max-width: 768px) {
    .case-gallery { grid-template-columns: 1fr; }
}


/* ── Results ───────────────────────────────── */

.case-results__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.case-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    padding: 24px;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.case-result-card:hover {
    border-color: var(--acid-green);
    box-shadow: 0 8px 28px rgba(204,255,0,.1);
}
.case-result-card__metric {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-color);
}
.case-result-card__before { margin-bottom: 16px; }
.case-result-card__label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}
.case-result-card__before .case-result-card__value {
    font-size: .9rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-decoration: line-through;
    text-decoration-color: rgba(0,0,0,.15);
}
.case-result-card__after .case-result-card__value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .case-results__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .case-results__grid { grid-template-columns: 1fr; }
}


/* ── Tech stack ────────────────────────────── */

.case-tech__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.case-tech__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    font-size: .88rem;
    font-weight: 500;
    transition: border-color .25s ease, transform .25s ease;
}
.case-tech__item:hover {
    border-color: var(--acid-green);
    transform: translateY(-2px);
}
.case-tech__icon {
    font-size: 1.15rem;
    color: var(--accent-ink);
}


/* ── Timeline ──────────────────────────────── */

.case-timeline__list {
    position: relative;
    padding-left: 32px;
}
.case-timeline__list::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border-color);
}
.case-timeline__item {
    position: relative;
    padding: 0 0 28px;
}
.case-timeline__item:last-child { padding-bottom: 0; }
.case-timeline__dot {
    position: absolute;
    left: -32px;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 3px solid var(--acid-green);
    z-index: 1;
}
.case-timeline__period {
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent-ink);
    margin-bottom: 4px;
}
.case-timeline__body h3 {
    margin-bottom: 4px;
    font-size: 1.02rem;
}
.case-timeline__body p {
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.6;
}


/* ── Similar cases ─────────────────────────── */

.case-similar .grid-3 > .portfolio-card {
    background: var(--bg-card);
    color: var(--text-main);
}

/* ══ Visual case story ═══════════════════════ */
.case-story{overflow:clip}.case-story .case-hero{padding:clamp(42px,6vw,84px) 0;margin:0 24px 0}.case-story .case-hero .container{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(36px,6vw,88px)}
.case-story .case-hero__content{max-width:none}.case-story .case-hero h1{font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:.98;letter-spacing:-.045em;overflow-wrap:anywhere}.case-hero__facts{display:flex;gap:28px;margin:0 0 28px}.case-hero__facts div{display:grid;gap:3px}.case-hero__facts dt,.case-section-intro>span,.case-related-cta .container>div>span{color:var(--accent-ink);font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.case-hero__facts dd{margin:0;font-weight:600}
.case-browser{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:clamp(14px,2vw,24px);background:#111;box-shadow:0 28px 70px rgba(0,0,0,.18)}.case-browser__bar{display:flex;gap:7px;align-items:center;height:38px;padding:0 15px;background:#151517;border-bottom:1px solid rgba(255,255,255,.1)}.case-browser__bar i{width:8px;height:8px;border-radius:50%;background:#777780}.case-browser img,.case-visual__image,.case-compare img,.case-phone img{display:block;width:100%;height:auto}.case-browser--hero{width:100%;max-width:none;transform:rotate(1deg)}
.case-impact{padding:clamp(38px,5vw,64px) 0;background:#0d0d0f;color:#fff}.case-impact .case-section-intro{margin-bottom:30px}.case-section-intro{display:grid;grid-template-columns:minmax(170px,.34fr) 1fr;gap:24px;align-items:end;margin-bottom:clamp(32px,5vw,64px)}.case-section-intro h2{margin:0;font-size:clamp(2rem,4vw,3.8rem);line-height:1;letter-spacing:-.035em}.case-impact__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.17);border-bottom:1px solid rgba(255,255,255,.17)}.case-impact__item{padding:24px 24px 28px 0;border-right:1px solid rgba(255,255,255,.17)}.case-impact__item:not(:first-child){padding-left:24px}.case-impact__item:last-child{border-right:0}.case-impact__item p{min-height:2.6em;margin:0 0 20px;color:rgba(255,255,255,.6);font-size:.82rem}.case-impact__item div{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.case-impact__item s{color:rgba(255,255,255,.45)}.case-impact__item strong{color:var(--acid-green);font-size:clamp(1.35rem,2.4vw,2.2rem)}
.case-context__body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.65fr);gap:clamp(40px,8vw,120px)}.case-context__lead{font-size:clamp(1.15rem,2vw,1.55rem)}.case-context aside{align-self:start;padding:28px;border-radius:var(--radius-main);background:var(--bg-secondary)}.case-context aside h3{font-size:1rem;margin-bottom:14px}
.case-visual-story{background:var(--bg-secondary)}.case-visuals{display:grid;gap:clamp(64px,10vw,140px)}.case-visual{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.32fr);gap:clamp(28px,5vw,68px);align-items:center;margin:0}.case-visual--reverse .case-visual__stage{order:2}.case-visual__stage{position:relative;min-width:0}.case-visual figcaption b{display:block;margin-bottom:10px;font-size:clamp(1.25rem,2vw,1.75rem)}.case-visual figcaption p{margin:0;color:var(--text-muted);line-height:1.65}.case-visual__image{border-radius:var(--radius-main);box-shadow:0 28px 80px rgba(0,0,0,.12)}.case-visual--analytics .case-visual__stage,.case-visual--scheme .case-visual__stage{padding:clamp(20px,4vw,52px);border-radius:var(--radius-main);background:#fff;border:1px solid var(--border-color)}
.case-phone{position:absolute;right:-3%;bottom:-8%;width:24%;padding:8px;border:2px solid #1a1a1c;border-radius:24px;background:#111;box-shadow:0 24px 55px rgba(0,0,0,.28)}.case-phone span{display:block;width:34%;height:4px;margin:0 auto 7px;border-radius:9px;background:#454549}.case-phone img{border-radius:14px}.case-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.case-compare>div{position:relative;overflow:hidden;border-radius:var(--radius-main);background:#fff;border:1px solid var(--border-color)}.case-compare span{position:absolute;z-index:2;top:14px;left:14px;padding:7px 12px;border-radius:999px;background:#111;color:#fff;font-size:.72rem;font-weight:700}.case-compare>div:last-child span{background:var(--acid-green);color:#111}
.case-work__solution{max-width:840px;margin:0 0 clamp(50px,8vw,100px);font-size:1.05rem}.case-work__solution h3{margin-top:1.8em;font-size:clamp(1.45rem,2.5vw,2.1rem)}.case-work__steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-color)}.case-work__steps li{display:grid;grid-template-columns:minmax(90px,.25fr) minmax(0,1fr);gap:24px;padding:28px 0;border-bottom:1px solid var(--border-color)}.case-work__steps>li>span{color:var(--accent-ink);font-weight:700}.case-work__steps h3{margin:0 0 8px;font-size:clamp(1.2rem,2vw,1.65rem)}.case-work__steps p{max-width:760px;margin:0;color:var(--text-muted);line-height:1.65}
.case-quote{background:var(--bg-secondary)}.case-details .container{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,120px)}.case-details h2{margin-bottom:24px;font-size:clamp(1.7rem,3vw,2.6rem)}.case-details .case-tech__grid{justify-content:flex-start}.case-detail-timeline{list-style:none;margin:0;padding:0}.case-detail-timeline li{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:0 0 22px}.case-detail-timeline li>span{color:var(--accent-ink);font-size:.8rem;font-weight:700}.case-detail-timeline b{display:block;margin-bottom:5px}.case-detail-timeline p{margin:0;color:var(--text-muted);font-size:.9rem;line-height:1.55}
.case-related-cta{padding:0 24px 72px}.case-related-cta .container{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:clamp(30px,5vw,58px);border-radius:var(--radius-main);background:#0d0d0f;color:#fff}.case-related-cta h2{margin:7px 0;font-size:clamp(1.7rem,3vw,2.7rem)}.case-related-cta p{margin:0;color:rgba(255,255,255,.62)}
@media(max-width:1024px){.case-story .case-hero .container{grid-template-columns:1fr}.case-browser--hero{max-width:780px}.case-impact__grid{grid-template-columns:repeat(2,1fr)}.case-impact__item:nth-child(2){border-right:0}.case-impact__item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.17)}.case-visual{grid-template-columns:minmax(0,1fr) minmax(210px,.38fr)}}
@media(max-width:768px){.case-story .case-hero{margin:0 12px;padding:32px 0}.case-story .case-hero h1{font-size:clamp(2rem,10vw,3rem)}.case-hero__facts{gap:18px}.case-section-intro{grid-template-columns:1fr;gap:10px}.case-context__body,.case-visual,.case-details .container{grid-template-columns:1fr}.case-visual--reverse .case-visual__stage{order:0}.case-visual figcaption{padding:0 4px}.case-phone{right:2%;bottom:-24px;width:29%;padding:5px;border-radius:16px}.case-phone img{border-radius:10px}.case-compare{gap:8px}.case-related-cta{padding:0 12px 48px}.case-related-cta .container{align-items:flex-start;flex-direction:column}.case-related-cta .btn{width:100%}}
@media(max-width:520px){.case-impact__grid{grid-template-columns:1fr}.case-impact__item,.case-impact__item:not(:first-child){padding:20px 0;border-right:0;border-top:1px solid rgba(255,255,255,.17)}.case-impact__item:first-child{border-top:0}.case-impact__item p{min-height:0;margin-bottom:10px}.case-compare{grid-template-columns:1fr}.case-work__steps li{grid-template-columns:48px 1fr}.case-browser__bar{height:30px}.case-browser__bar i{width:6px;height:6px}}