.civ-showcase { min-height: 100vh; padding: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(5rem, 10vw, 9rem); background: #09090d; }
.civ-showcase h1, .civ-showcase h2, .civ-showcase h3 { font-family: var(--font-display); letter-spacing: -.055em; }
.civ-showcase h1 { max-width: 15ch; margin: 0; font-size: clamp(3.4rem, 7.8vw, 7.4rem); line-height: .87; }
.civ-showcase h1 em { color: var(--amber); font-style: normal; }
.civ-showcase h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 5rem); line-height: .93; }
.civ-showcase p { color: var(--text-2); }
.civ-showcase-hero > p:not(.showcase-kicker) { max-width: 44rem; margin: 1.4rem 0 0; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.65; }
.civ-showcase-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 730px; margin: 3rem 0 0; overflow: hidden; border: 1px solid rgba(247, 243, 238, .12); border-radius: var(--r-lg); background: rgba(247, 243, 238, .1); }
.civ-showcase-stats div { padding: 1.2rem; background: #121116; }
.civ-showcase-stats dt { color: var(--text-3); font: 700 .63rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.civ-showcase-stats dd { margin: .45rem 0 0; color: var(--amber); font: 700 clamp(1.8rem, 4vw, 2.8rem)/1 var(--font-display); }
.civ-root { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: clamp(2rem, 10vw, 11rem); align-items: center; margin-top: clamp(5rem, 11vw, 10rem); padding-block: clamp(2rem, 6vw, 5rem); border-block: 1px solid rgba(247, 243, 238, .1); }
.civ-root-copy > p:not(.showcase-kicker) { max-width: 40rem; margin: 1.4rem 0 0; line-height: 1.72; }
.civ-root-portrait { display: block; width: min(100%, 430px); justify-self: end; overflow: hidden; border: 1px solid rgba(244, 168, 81, .42); border-radius: var(--r-xl); background: #ece9e2; }
.civ-root-portrait img { width: 100%; transition: transform .5s cubic-bezier(.16,1,.3,1); mix-blend-mode: multiply; }
.civ-root-portrait:hover img { transform: scale(1.04) translateY(-1.5%); }
.civ-branches { margin-top: clamp(5rem, 11vw, 10rem); }
.civ-branch-heading { max-width: 48rem; }
.civ-branch-heading > p:not(.showcase-kicker) { margin: 1.4rem 0 0; line-height: 1.65; }
.civ-expression-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.civ-expression { overflow: hidden; padding-bottom: 1rem; border-bottom: 1px solid rgba(247,243,238,.14); }
.civ-expression figure { aspect-ratio: 1; margin: 0 0 1rem; overflow: hidden; border-radius: var(--r-lg); background: #151419; }
.civ-expression img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.civ-expression:hover img { transform: scale(1.05); }
.civ-expression p, .civ-expression span { margin: 0; color: var(--text-3); font: 700 .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.civ-expression h3 { margin: .4rem 0 .6rem; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1; }
.civ-expression span { color: var(--amber); }
.civ-market-link { display: inline-flex; margin-top: 2.5rem; min-height: 46px; align-items: center; padding: .7rem 1rem; border: 1px solid var(--amber); border-radius: var(--r-sm); color: var(--amber); font-weight: 700; }
.civ-market-link:hover { background: rgba(244,168,81,.12); color: #ffcf95; }
@media (max-width: 800px) { .civ-root { grid-template-columns: 1fr; } .civ-root-portrait { justify-self: start; } .civ-expression-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .civ-showcase { padding-top: calc(var(--nav-h) + 3rem); } .civ-showcase-stats { grid-template-columns: 1fr; } .civ-expression-grid { gap: .75rem; } }
@media (prefers-reduced-motion: reduce) { .civ-root-portrait img, .civ-expression img { transition: none; } }