/* CircleTrust Editorial — Showcase. The selected Vault card BECOMES this:
   the same name/image/tier stays anchored at the top (no generic profile reset).
   Showcase proves; it resolves exactly one connect action. Token-driven. No stars. */

.showcase{max-width:1080px;margin:0 auto;padding:0 24px 110px}

/* identity anchor — same image/name/tier as the Vault card, now large */
.sc-hero{position:relative;border-radius:20px;overflow:hidden;min-height:340px;margin-top:6px;box-shadow:0 14px 34px color-mix(in srgb,var(--ct-ink) 12%,transparent)}
.sc-hero .media{position:absolute;inset:0;background:var(--ct-ink)}
.sc-hero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,color-mix(in srgb,var(--ct-ink) 32%,transparent) 60%,color-mix(in srgb,var(--ct-ink) 84%,transparent));pointer-events:none}
.sc-hero .tag{position:absolute;top:16px;left:16px;z-index:2}
.sc-hero .back{position:absolute;top:15px;right:16px;z-index:2;border:0;background:color-mix(in srgb,#000 32%,transparent);color:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;font-family:var(--ct-font-ui);font-weight:700;font-size:.78rem;backdrop-filter:blur(4px)}
.sc-hero .cluster{position:absolute;left:26px;right:26px;bottom:22px;z-index:2;color:#fff}
.sc-hero .name{font-family:var(--ct-font-display);font-weight:600;letter-spacing:-.02em;line-height:1;font-size:clamp(2.2rem,4vw,3rem);text-shadow:0 1px 14px rgba(0,0,0,.35)}
.sc-hero .role{font-family:var(--ct-font-ui);font-weight:600;color:rgba(255,255,255,.88);margin-top:6px;font-size:.95rem}

.sc-body{display:grid;grid-template-columns:1fr 320px;gap:26px;margin-top:26px;align-items:start}
.sc-main{min-width:0}
.sc-eyebrow{font-family:var(--ct-font-ui);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;color:var(--ct-sub)}
.sc-proof h2{font-family:var(--ct-font-display);font-weight:500;letter-spacing:-.02em;font-size:clamp(1.6rem,2.6vw,2rem);color:var(--ct-ink);margin:8px 0 0}
.sc-pattern{margin:14px 0 0;font-family:var(--ct-font-display);font-style:italic;font-size:1.2rem;line-height:1.45;color:var(--ct-ink);max-width:52ch}
.sc-recos{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.sc-reco{border-left:2px solid var(--ct-line);padding:2px 0 2px 16px}
.sc-reco p{margin:0;font-family:var(--ct-font-ui);font-size:.95rem;line-height:1.55;color:var(--ct-ink)}
.sc-reco .by{margin-top:6px;color:var(--ct-sub);font-weight:700;font-size:.8rem}

.sc-portfolio{margin-top:30px}
.sc-portfolio .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.sc-portfolio .grid figure{margin:0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--ct-line);background:var(--ct-ink)}
.sc-portfolio .grid img{width:100%;height:100%;object-fit:cover;display:block}
.sc-portfolio .note{margin-top:10px;color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.78rem}

/* side: trust facts + the ONE connect action */
.sc-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
.sc-trust{background:var(--ct-paper);border:1px solid var(--ct-line);border-radius:18px;padding:20px}
.sc-trust .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--ct-line)}
.sc-trust .row:last-child{border-bottom:0}
.sc-trust .k{color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.82rem}
.sc-trust .v{color:var(--ct-ink);font-family:var(--ct-font-ui);font-weight:800;font-size:.9rem}
.sc-connect{background:var(--ct-paper);border:1px solid var(--ct-line);border-radius:18px;padding:20px;box-shadow:0 10px 26px color-mix(in srgb,var(--ct-ink) 7%,transparent)}
.sc-connect .primary{width:100%;border:0;cursor:pointer;background:var(--ct-accent);color:var(--ct-accent-contrast);font-family:var(--ct-font-ui);font-weight:800;font-size:.95rem;border-radius:12px;padding:14px 16px}
.sc-connect .context{margin:12px 0 0;color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.82rem;line-height:1.5}
.sc-connect .context b{color:var(--ct-ink)}

@media (max-width:859px){
  .showcase{padding:0 16px 84px}
  .sc-hero{min-height:300px}
  .sc-body{grid-template-columns:1fr;gap:20px}
  .sc-side{position:static}
  .sc-portfolio .grid{grid-template-columns:repeat(3,1fr)}
}

.sc-matte-monogram{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 clamp(5rem,14vw,10rem)/1 var(--ct-font-display);letter-spacing:-.08em;color:rgba(255,255,255,.15);background:linear-gradient(145deg,#4a443d,#181512)}
.sc-connect .secondary{margin-top:9px;width:100%;border:1px solid var(--ct-line);background:var(--ct-paper);color:var(--ct-ink);border-radius:999px;padding:11px 16px;font-weight:800;cursor:pointer}