/* DiazUX Studio — case studies / 2026-09-02
   Uses the canonical monochrome public shell. Project color is limited to media framing. */
body.dx-secondary.case-study{--case-accent:#111;--case-on-accent:#fff}
body.dx-secondary.case-study main{overflow:hidden}
.case-study .case-hero{padding:clamp(64px,8vw,116px) 0 clamp(48px,7vw,92px);border-bottom:1px solid var(--dx-rule)}
.case-study .case-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 clamp(36px,5vw,68px);font:500 11px/1.4 var(--dx-mono);letter-spacing:.05em;text-transform:uppercase}
.case-study .case-breadcrumb a{text-decoration:none}
.case-study .case-breadcrumb a:hover{text-decoration:underline;text-underline-offset:4px}
.case-study .case-eyebrow{margin-bottom:18px;font:500 11px/1.45 var(--dx-mono);letter-spacing:.06em;text-transform:uppercase}
.case-study .case-title{max-width:1120px;margin:0;font-size:clamp(64px,10vw,152px)!important;line-height:.84!important;letter-spacing:-.075em!important;text-wrap:balance}
.case-study .case-lead{max-width:720px;margin:clamp(28px,4vw,46px) 0 0 auto;font-size:clamp(19px,1.8vw,27px)!important;line-height:1.38!important;letter-spacing:-.025em!important}
.case-study .case-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(44px,6vw,74px);border-top:1px solid #000;border-bottom:1px solid #000}
.case-study .case-meta-item{min-width:0;padding:18px 18px 20px 0;border-right:1px solid var(--dx-rule)}
.case-study .case-meta-item:not(:first-child){padding-left:18px}
.case-study .case-meta-item:last-child{border-right:0}
.case-study .case-meta-label{margin-bottom:7px;font:500 10px/1.4 var(--dx-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dx-muted)}
.case-study .case-meta-value{font-size:16px;line-height:1.35}
.case-study .case-visual{padding:clamp(32px,5vw,72px) 0;background:var(--case-accent);color:var(--case-on-accent)}
.case-study .case-visual-frame{width:min(calc(100% - var(--dx-pad)*2),var(--dx-max));margin-inline:auto;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.28)}
.case-study .case-visual img{display:block;width:100%;height:auto;max-height:760px;object-fit:cover;object-position:center;filter:none!important}
.case-study .case-section{padding:clamp(70px,9vw,128px) 0;border-bottom:1px solid var(--dx-rule)}
.case-study .case-section:last-of-type{border-bottom:0}
.case-study .case-grid{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,1fr);gap:clamp(42px,9vw,132px);align-items:start}
.case-study .case-section-label{position:sticky;top:96px;font:500 11px/1.45 var(--dx-mono);letter-spacing:.06em;text-transform:uppercase}
.case-study .case-copy{max-width:780px}
.case-study .case-copy h2{margin:0 0 26px;font-size:clamp(46px,6vw,88px)!important;line-height:.9!important;letter-spacing:-.065em!important;text-wrap:balance}
.case-study .case-copy h3{margin:36px 0 12px;font-size:clamp(25px,3vw,38px)!important;line-height:1!important}
.case-study .case-copy p{margin:0 0 18px;font-size:17px!important;line-height:1.7!important;color:#111!important}
.case-study .case-points{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid #000}
.case-study .case-points li{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:19px 0;border-bottom:1px solid var(--dx-rule);font-size:16px;line-height:1.5}
.case-study .case-points li::before{content:counter(case-point,decimal-leading-zero);counter-increment:case-point;font:500 11px/1.5 var(--dx-mono);letter-spacing:.04em}
.case-study .case-points{counter-reset:case-point}
.case-study .case-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #000;border-bottom:1px solid #000}
.case-study .case-metric{padding:30px 20px 30px 0;border-right:1px solid var(--dx-rule)}
.case-study .case-metric:not(:first-child){padding-left:20px}
.case-study .case-metric:last-child{border-right:0}
.case-study .case-metric strong{display:block;margin-bottom:10px;font-size:clamp(38px,5vw,68px);font-weight:400;line-height:.95;letter-spacing:-.06em}
.case-study .case-metric span{display:block;font:500 11px/1.5 var(--dx-mono);letter-spacing:.04em;text-transform:uppercase}
.case-study .case-note{max-width:760px;margin:30px 0 0 auto;padding-top:18px;border-top:1px solid #000;font-size:14px!important;line-height:1.65!important;color:var(--dx-muted)!important}
.case-study .case-outcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:clamp(36px,8vw,110px);align-items:end}
.case-study .case-outcome h2{margin:0;font-size:clamp(48px,7vw,104px)!important;line-height:.88!important;letter-spacing:-.07em!important}
.case-study .case-outcome p{margin:0 0 22px;font-size:17px!important;line-height:1.65!important}
.case-study .case-next{padding:34px 0;border-top:1px solid #000}
.case-study .case-next-inner{display:flex;justify-content:space-between;gap:24px;align-items:center}
.case-study .case-next a{font:500 12px/1.4 var(--dx-mono);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.case-study .case-next a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:900px){
  .case-study .case-meta,.case-study .case-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-study .case-meta-item:nth-child(2),.case-study .case-metric:nth-child(2){border-right:0}
  .case-study .case-meta-item:nth-child(-n+2),.case-study .case-metric:nth-child(-n+2){border-bottom:1px solid var(--dx-rule)}
  .case-study .case-grid,.case-study .case-outcome{grid-template-columns:1fr;gap:28px}
  .case-study .case-section-label{position:static}
}
@media(max-width:560px){
  .case-study .case-title{font-size:clamp(52px,17vw,76px)!important}
  .case-study .case-lead{margin-left:0;font-size:19px!important}
  .case-study .case-meta,.case-study .case-metrics{grid-template-columns:1fr}
  .case-study .case-meta-item,.case-study .case-meta-item:not(:first-child),.case-study .case-metric,.case-study .case-metric:not(:first-child){padding:16px 0;border-right:0;border-bottom:1px solid var(--dx-rule)}
  .case-study .case-meta-item:last-child,.case-study .case-metric:last-child{border-bottom:0}
  .case-study .case-visual-frame{width:calc(100% - 24px)}
  .case-study .case-copy h2{font-size:44px!important}
  .case-study .case-next-inner{align-items:flex-start;flex-direction:column}
}