/* Shared editorial structure for project case studies. */
.cs-breadcrumb { display:inline-block; color:var(--text-muted); text-decoration:none; font-size:0.78rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:28px; }
.cs-breadcrumb:hover { color:var(--text); }
.cs-hero { position:relative; z-index:10; padding:130px 0 24px; }
.cs-hero h1 { font-size:clamp(2.3rem,5.6vw,3.6rem); font-weight:400; color:var(--text); line-height:1.1; margin:0 0 6px; letter-spacing:-0.015em; }
.cs-tagline { font-size:clamp(1.45rem,3.4vw,2.15rem); font-weight:300; color:var(--text-muted); line-height:1.25; margin:0 0 34px; }
.cs-tagline span { background:linear-gradient(120deg,var(--primary),#7ab8ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cs-hero .bio-lead { font-size:1.02rem; color:var(--text-muted); line-height:1.75; max-width:660px; margin:0; padding-top:26px; border-top:1px solid var(--border); }

.cs-demo { display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding:14px 24px; border:1px solid var(--border-hover); border-radius:4px; color:var(--text); text-decoration:none; font-size:0.78rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; transition:transform 0.18s ease-out, border-color 0.18s ease-out, background 0.18s ease-out; }
.cs-demo::after { content:"↗"; font-size:0.95rem; letter-spacing:0; }
.cs-demo:hover { transform:translateY(-2px); border-color:var(--primary); background:rgba(60,130,255,0.08); }
.cs-demo:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
.cs-chips { display:flex; flex-wrap:wrap; gap:2px 20px; list-style:none; padding:0; margin:22px 0 0; font-size:0.8rem; color:var(--text-muted); letter-spacing:0.06em; }
.cs-chip { position:relative; }
.cs-chip + .cs-chip::before { content:"·"; position:absolute; left:-12px; opacity:0.45; }

.cs-frame { border:1px dashed var(--border-hover); background:rgba(15,21,37,0.45); border-radius:8px; padding:24px; text-align:center; color:var(--text-muted); font-size:0.78rem; letter-spacing:1px; margin:36px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cs-frame strong { display:block; color:var(--primary); font-weight:500; margin-bottom:6px; letter-spacing:2px; text-transform:uppercase; }
.cs-visual { display:block; margin:36px 0 0; }
.cs-visual img { display:block; width:100%; height:auto; }
.cs-split { display:grid; grid-template-columns:1fr 430px; gap:56px; align-items:start; }
.cs-split .cs-frame { margin:0; aspect-ratio:3/4; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cs-split .cs-visual { width:100%; max-width:430px; margin:0; align-self:center; justify-self:center; }
.cs-tech-accent { color:var(--primary-light); font-weight:600; }

.cs-table { width:100%; border-collapse:collapse; margin-top:32px; font-size:0.9rem; }
.cs-table th { text-align:left; color:var(--primary); font-weight:500; font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; padding:0 16px 12px 0; }
.cs-table td { color:var(--text-muted); line-height:1.65; padding:16px 16px 16px 0; border-bottom:1px solid var(--border); vertical-align:top; }
.cs-table tbody tr:last-child td { border-bottom:0; }
.cs-table td:first-child { color:var(--text); width:34%; }
.cs-table-wrap { overflow-x:auto; }

.cs-results { margin-top:42px; }
.cs-result { display:grid; grid-template-columns:56px minmax(190px,0.72fr) minmax(0,1.28fr); gap:20px; align-items:center; padding:28px 0; border-bottom:1px solid var(--border); }
.cs-result:last-child { border-bottom:0; }
.cs-result-index { color:var(--primary); font-size:0.72rem; font-weight:600; font-variant-numeric:tabular-nums; }
.cs-result-label { display:block; margin-bottom:7px; color:var(--text-muted); font-size:0.7rem; letter-spacing:1.5px; text-transform:uppercase; }
.cs-result h3 { margin:0; color:var(--text); font-size:clamp(1.35rem,2.5vw,2rem); font-weight:400; line-height:1.15; text-wrap:balance; }
.cs-result p { margin:0; color:var(--text-muted); font-size:0.9rem; line-height:1.7; text-wrap:pretty; }

.cs-contact-banner { position:relative; z-index:10; padding:72px 0; background:var(--primary); }
.cs-contact-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:72px; align-items:center; }
.cs-contact-copy { max-width:780px; }
.cs-contact-copy h2 { margin:0 0 20px; color:var(--bg); font-size:clamp(2rem,4.5vw,3.5rem); font-weight:400; line-height:1.08; text-wrap:balance; }
.cs-contact-copy h2 strong { font-weight:700; }
.cs-contact-copy p { margin:0; max-width:720px; color:rgba(10,14,26,0.74); font-size:0.98rem; line-height:1.75; text-wrap:pretty; }
.cs-contact-actions { display:flex; flex-direction:column; gap:12px; min-width:210px; }
.cs-contact-link { display:block; padding:14px 22px; border:1px solid rgba(10,14,26,0.38); border-radius:4px; color:var(--bg); font-size:0.78rem; font-weight:600; text-align:center; text-decoration:none; text-transform:uppercase; transition:transform 0.18s ease-out, background 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out; }
.cs-contact-link--primary { background:var(--bg); border-color:var(--bg); color:var(--text); }
.cs-contact-link:hover { transform:translateY(-2px); background:rgba(10,14,26,0.1); border-color:var(--bg); }
.cs-contact-link--primary:hover { background:var(--surface); color:#ffffff; }
.cs-contact-link:focus-visible { outline:2px solid var(--bg); outline-offset:4px; }

@media (max-width:900px) {
    .cs-split { grid-template-columns:1fr; gap:34px; }
    .cs-result { grid-template-columns:40px minmax(170px,0.7fr) minmax(0,1.3fr); }
    .cs-contact-inner { grid-template-columns:1fr; gap:36px; align-items:start; }
    .cs-contact-actions { flex-direction:row; min-width:0; }
    .cs-contact-link { min-width:190px; }
}

@media (max-width:640px) {
    .cs-hero { padding-top:110px; }
    .cs-tagline { margin-bottom:26px; }
    .cs-frame { padding:30px 16px; }
    .cs-table td:first-child { width:auto; }
    .cs-result { grid-template-columns:32px 1fr; gap:8px 14px; padding:24px 0; }
    .cs-result p { grid-column:2; }
    .cs-contact-banner { padding:56px 0; }
    .cs-contact-actions { flex-direction:column; }
    .cs-contact-link { width:100%; min-width:0; }
}

/* Progressive continuous corners; border-radius remains the fallback. */
.cs-demo,
.cs-contact-link {
    border-radius: var(--radius-control);
    corner-shape: var(--shape-continuous);
}

.cs-frame {
    border-radius: var(--radius-card);
    corner-shape: var(--shape-continuous);
}

.media-frame--photo img {
    border-radius: var(--radius-feature);
    corner-shape: var(--shape-continuous);
}

.media-frame--diagram img,
.media-frame--mockup img {
    border-radius: var(--radius-card);
    corner-shape: var(--shape-continuous);
}