.case-hero{padding-top:90px}.case-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.case-heading{max-width:1000px;padding:50px 0 30px}.case-heading h1{font-size:clamp(3.2rem,7vw,7.4rem);line-height:.94}.case-heading em{font-family:var(--font-serif);color:var(--accent);font-weight:400}.case-summary{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-bottom:70px}.case-summary p{color:var(--muted);font-size:1.12rem;max-width:650px}.case-visual-section{border-radius:28px;background:var(--inverse-surface);padding:28px}.case-visual-section .project-art{max-width:900px;margin:auto;min-height:580px}.case-story{display:grid;grid-template-columns:170px 1fr;gap:80px;padding-block:115px}.case-story-index span{font-family:var(--font-serif);font-size:5rem}.case-story h2,.case-result h2,.case-evidence h2{font-size:clamp(2.7rem,5vw,5rem);line-height:1.02;margin:18px 0 26px}.case-story p,.case-result p,.case-evidence p,.case-evidence li{color:var(--muted);max-width:800px;font-size:1.02rem;line-height:1.7}.case-block+.case-block{margin-top:85px}.approach-list{display:grid;gap:18px;margin-top:30px}.approach-list li{display:grid;grid-template-columns:40px 1fr;gap:20px;border-top:1px solid var(--line);padding-top:18px}.approach-list b{color:var(--accent);font-family:var(--font-mono);font-size:.7rem}.case-metrics{background:var(--inverse-surface);color:var(--inverse-ink)}.case-metrics .shell{display:grid;grid-template-columns:repeat(3,1fr)}.case-metrics article{padding:45px 25px;border-right:1px solid #ffffff24}.case-metrics article:last-child{border:0}.case-metrics strong{display:block;font-family:var(--font-serif);font-size:clamp(2.5rem,4vw,4.5rem);color:var(--inverse-accent);font-weight:500}.case-metrics span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.case-result{padding-block:110px}.case-evidence{border-top:1px solid var(--line);padding-block:90px}.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:50px}.evidence-grid h3{font-size:1.5rem;margin-bottom:15px}.evidence-grid ul{list-style:outside;padding-left:20px}.evidence-grid li+li{margin-top:10px}.case-stack{border-top:1px solid var(--line);padding-block:55px;display:flex;gap:10px;flex-wrap:wrap}.case-stack span{border:1px solid var(--line);border-radius:99px;padding:8px 15px;font-size:.7rem}.next-project{display:block;background:var(--accent);color:#fff;padding-block:70px}.next-project .shell{display:flex;justify-content:space-between;align-items:center;gap:30px}.next-project small{font-size:.7rem;text-transform:uppercase}.next-project strong{font-size:clamp(2rem,4vw,4rem);line-height:1.04;display:block;max-width:850px}.back-link{display:inline-block;margin:30px 0 20px;font-weight:700;font-size:.8rem}@media(max-width:820px){.case-hero{padding-top:40px}.case-summary,.case-story,.evidence-grid{grid-template-columns:1fr;gap:28px}.case-story{padding-block:80px}.case-metrics .shell{grid-template-columns:1fr}.case-metrics article{border-right:0;border-bottom:1px solid #ffffff24}.case-visual-section{padding:12px}.case-visual-section .project-art{min-height:430px}.next-project .shell{display:block}}
.case-visual-section{overflow:hidden}
.case-visual-section .project-art{width:100%;box-sizing:border-box;border-radius:20px;margin:0}
.case-approach-copy{color:var(--muted);font-size:1.02rem;line-height:1.7;max-width:800px;margin-top:30px}
.evidence-lede{max-width:850px}
.case-story h2 em,.case-result h2 em,.case-evidence h2 em{font-family:var(--font-serif);color:var(--accent);font-weight:400}
.case-result{grid-template-columns:1fr 1fr;gap:100px;padding-block:140px;display:grid}
.case-result h2{margin-top:20px;font-size:clamp(3rem,5vw,5.4rem)}
.result-copy{align-self:end}
.result-copy p{color:var(--muted);font-size:1.08rem;line-height:1.8;max-width:760px}
.case-evidence .evaluation-context{margin-top:42px;max-width:1000px}
.evaluation-context h3{font-size:1.5rem;margin-bottom:14px}
.evaluation-context table{width:100%;border-collapse:collapse;margin-top:28px;font-size:.86rem}
.evaluation-context caption{text-align:left;color:var(--muted);font-size:.75rem;padding-bottom:10px}
.evaluation-context th,.evaluation-context td{border:1px solid var(--line);padding:14px;text-align:left;vertical-align:top}
.evaluation-context th{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.case-stack{grid-template-columns:180px 1fr;gap:40px;padding:34px 0 120px;display:grid}
.case-stack>div{display:flex;flex-wrap:wrap;gap:8px}
.case-stack>div span{border:1px solid var(--line);border-radius:999px;padding:9px 13px;font-size:.66rem;font-weight:700}
@media(max-width:820px){.case-result,.case-stack{grid-template-columns:1fr;gap:40px;padding-block:90px}.case-stack{padding-bottom:80px}.work-visual-wrap{padding:16px}.work-visual-wrap .project-visual{min-height:430px}}
/* Two-layer system frame, matched to the supplied reference */
.case-visual-section{padding:0;background:transparent;border-radius:0;overflow:visible}
.case-visual-frame{background:color-mix(in srgb,var(--accent) 23%,#1b1826);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:42px;padding:42px 48px 48px;box-shadow:0 30px 90px color-mix(in srgb,var(--accent) 16%,transparent)}
.case-frame-meta{color:color-mix(in srgb,#fff 70%,var(--accent));font-family:var(--font-mono);font-size:.76rem;letter-spacing:.045em;display:flex;justify-content:space-between;gap:24px;padding:8px 8px 34px}
.case-visual-canvas{position:relative;overflow:hidden;border-radius:28px;background-color:#14121a;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);background-size:56px 56px;border:1px solid color-mix(in srgb,var(--accent) 20%,#ffffff18);min-height:620px;padding:0}
.case-visual-canvas:before{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 35%);z-index:1}
.case-visual-canvas .project-art{position:relative;z-index:2;min-height:620px;max-width:none;border-radius:0;box-shadow:none;background-color:transparent}
.case-visual-canvas .traffic-art{background-color:#201d35}
.case-visual-canvas .grocery-art{background-color:#c9ead7}
.case-visual-canvas .docquery-art,.case-visual-canvas .explainable-art{background-color:#191720}
.case-visual-canvas .arabic-art{background-color:#e8e1fc}
@media(max-width:820px){.case-visual-frame{border-radius:28px;padding:20px 16px 16px}.case-frame-meta{font-size:.57rem;padding:6px 4px 18px;gap:12px}.case-frame-meta span:last-child{display:none}.case-visual-canvas{border-radius:20px;min-height:440px;background-size:36px 36px}.case-visual-canvas .project-art{min-height:440px}}
/* Keep the system artwork at an editorial size within the case study. */
.case-visual-section{width:min(100%,900px);margin-inline:auto}
.case-visual-frame{padding:24px 28px 28px;border-radius:32px}
.case-frame-meta{padding:4px 6px 20px;font-size:.68rem}
.case-visual-canvas{min-height:440px;border-radius:22px;background-size:40px 40px}
.case-visual-canvas .project-art{min-height:440px;padding:24px}
.case-visual-canvas .road-grid{height:240px}
.case-visual-canvas .phone-mock{height:310px;padding-top:24px}
.case-visual-canvas .explainable-view{max-width:350px;gap:10px}
.case-visual-canvas .explainable-road{height:160px}
.case-visual-canvas .explainable-panel{padding:11px 14px}
@media(max-width:820px){.case-visual-section{width:100%}.case-visual-frame{padding:16px;border-radius:24px}.case-frame-meta{padding:3px 4px 14px}.case-visual-canvas{min-height:350px;border-radius:16px}.case-visual-canvas .project-art{min-height:350px;padding:18px}.case-visual-canvas .road-grid{height:190px}.case-visual-canvas .phone-mock{height:275px}.case-visual-canvas .explainable-road{height:130px}}
/* The case frame uses the same palette as its project card. */
:root[data-project=traffic]{--accent:#57b7ed;--project-canvas:#102a3b}
:root[data-project=thalaja]{--accent:#67bf83;--project-canvas:#cdebd5}
:root[data-project=docquery]{--accent:#e8ac57;--project-canvas:#332515}
:root[data-project=explainable]{--accent:#aa8cff;--project-canvas:#251a3c}
:root[data-project=wadeh]{--accent:#58c6ad;--project-canvas:#d8f1e9}
.case-visual-frame{background:color-mix(in srgb,var(--accent) 28%,#1b1826);border-color:color-mix(in srgb,var(--accent) 54%,transparent)}
.case-visual-canvas{background-color:var(--project-canvas);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.case-visual-canvas .project-art{background-color:var(--project-canvas)}
.case-visual-canvas .traffic-art{background-color:#102a3b}
.case-visual-canvas .grocery-art{background-color:#cdebd5}
.case-visual-canvas .docquery-art{background-color:#332515}
.case-visual-canvas .explainable-art{background-color:#251a3c}
.case-visual-canvas .arabic-art{background-color:#d8f1e9}
.case-stack>.section-kicker{border:0;border-radius:0;padding:0}
.next-project strong{letter-spacing:0;word-spacing:.12em;line-height:1.12;max-width:760px}

.case-summary{border-top:1px solid var(--line);padding-top:28px;align-items:start}
.case-headline-outcome{justify-self:end;text-align:right;max-width:430px}
.case-headline-outcome .section-kicker{display:block}
.case-headline-outcome strong{display:block;margin-top:12px;color:var(--accent);font-family:var(--font-serif);font-size:clamp(1.3rem,2vw,2rem);line-height:1.2;font-weight:500}
@media(max-width:820px){.case-headline-outcome{justify-self:start;text-align:left}}