/* Social portfolio: real published work, open composition and quiet audience context. */
.soc-showcase a:focus-visible {outline:2px solid var(--ink);outline-offset:6px}
.soc-showcase [hidden] {display:none!important}
.soc-showcase .soc-example {margin-top:clamp(28px,4vw,46px)}
.soc-showcase .soc-example+.soc-example {margin-top:clamp(48px,7vw,88px)}
.soc-showcase .soc-post-gallery .carousel-heading {justify-content:space-between;align-items:center;gap:20px;margin-bottom:19px}
.soc-showcase .carousel-heading h3 {margin:0}

/* The photographs lead; account context sits below them. */
.soc-showcase .soc-story {text-align:center;max-width:750px;margin:30px auto 0}
.soc-showcase .soc-story h4 {font-size:clamp(25px,2.6vw,36px);font-weight:400;letter-spacing:-.03em;line-height:1.25;margin:0 0 12px}
.soc-showcase .soc-story p {max-width:60ch;margin:0 auto;font-size:clamp(17px,1.45vw,19px);line-height:1.65;color:var(--muted);text-wrap:pretty}
@media(max-width:760px) {
  .soc-showcase .soc-story {margin-top:24px}
}

/* Three full-frame published posts: same 4:5 row as the creative portfolio. */
.soc-showcase .soc-post-gallery {margin-top:0}
.soc-showcase .soc-post-image {display:block;aspect-ratio:4/5;background:var(--wash)}
.soc-showcase .soc-post-image img {display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:contain}
.soc-showcase .soc-post-image:focus-visible {outline-offset:-3px}

/* Five seasons use the shared carousel sizing, with full frames and no individual captions. */
.soc-showcase .egor-season-image {display:block;aspect-ratio:4/5;background:var(--wash)}
.soc-showcase .egor-season-image:focus-visible {outline-offset:-3px}
.soc-showcase .egor-season-image img {display:block;width:100%;height:100%;object-fit:contain}

/* Let the social gallery flow into Client Intelligence without a divider. */
#social-media-management + #client-intelligence {border-top:0}

/* Keep each stage and audience milestone together in reading order. */
.soc-showcase .soc-focus {display:flex;justify-content:center;align-items:center;list-style:none;padding:0;margin:0;font-size:clamp(14px,1.6vw,20px);line-height:1.6;color:var(--muted)}
.soc-showcase .soc-focus li+li {display:flex;align-items:center}
.soc-showcase .soc-focus li+li::before {content:"";border-inline-start:1px solid #73736d;height:.9em;margin-inline:clamp(10px,1.4vw,18px)}
.soc-showcase .soc-progression {--progress-gap:clamp(24px,3vw,42px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--progress-gap);list-style:none;padding:0;max-width:600px;margin:28px auto 0}
.soc-showcase .soc-progression li {position:relative;min-width:0}
.soc-showcase .soc-stage {display:block;font-size:clamp(14px,1.4vw,18px);line-height:1.5;color:var(--muted);white-space:nowrap}
.soc-showcase .soc-progression strong {display:block;font-size:clamp(24px,2.6vw,34px);line-height:1.25;font-weight:400;letter-spacing:-.025em;margin-top:6px}
.soc-showcase .soc-progress-arrow {position:absolute;left:calc(var(--progress-gap) / -2);top:50%;transform:translate(-50%,-50%);font-size:22px;line-height:1;color:var(--muted)}
.soc-showcase .soc-story .soc-milestone-label {font-size:13px;line-height:1.5;margin-top:12px}

.soc-showcase .soc-egor-story { max-width: 840px; }
.soc-showcase .soc-story .soc-career { margin-top: 16px; font-size: 18px; color: var(--ink); }
.soc-showcase .soc-career span { margin-inline: 10px; color: var(--muted); }
.soc-showcase .soc-story .soc-strategy { margin: 22px auto 0; max-width: 60ch; font-size: 17px; line-height: 1.65; }
.soc-combined { display: grid; gap: 7px; margin-top: 25px; }
.soc-combined strong { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.2; font-weight: 400; letter-spacing: -.03em; }
.soc-combined span { color: var(--muted); font-size: 14px; line-height: 1.5; }