/* Case-study pages. Loads after brand.css. */
.top .bar{max-width:960px}
.top .back{font-size:14px;font-weight:600;color:var(--sage);text-decoration:none;white-space:nowrap}
.top .back:hover{text-decoration:underline}

header.hero{padding:clamp(40px,7vw,84px) clamp(16px,4vw,48px) clamp(24px,4vw,40px)}
.inner{max-width:960px;margin-inline:auto}
.hero .eyebrow{margin-bottom:14px}
h1{font-size:clamp(40px,6.4vw,76px);font-weight:500;letter-spacing:-.015em;line-height:1.05;max-width:18ch;margin-bottom:20px}
h1 em{font-style:italic;color:var(--accent)}
.sub{color:var(--muted);font-size:clamp(17px,1.6vw,19px);max-width:62ch}

main{max-width:960px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 72px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,4vw,40px)}
h2{font-size:clamp(24px,2.8vw,31px);margin:38px 0 10px}
h2:first-child{margin-top:0}
.panel p{color:var(--muted);margin-bottom:12px}
.panel p b,.panel li b{color:var(--fg)}
.panel ul{margin:0 0 12px 20px;color:var(--muted);padding:0}
.panel li{margin-bottom:6px}

.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:8px}
.meta div{background:var(--soft);border-radius:12px;padding:12px 16px}
.meta b{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;font-weight:500}
.meta span{font-size:14px;font-weight:600;color:var(--fg)}

.panel .btn{margin-top:8px}
.note{font-size:13px;color:var(--muted);margin-top:22px}

/* tabs */
.tabs{display:flex;gap:6px;background:var(--soft);padding:5px;border-radius:14px;margin-bottom:26px}
.tab{flex:1;font:inherit;font-size:14px;font-weight:600;color:var(--muted);background:none;border:none;padding:10px 14px;border-radius:10px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--band);color:var(--band-fg)}
.tabpanel[hidden]{display:none}

@media(max-width:600px){.tab{font-size:12.5px;padding:9px 8px}.top .back{font-size:13px}}

/* banner art on case-study heroes */
header.hero{position:relative;overflow:hidden;background:#FBF6EC;border-bottom:1px solid var(--line)}
header.hero .inner{position:relative;z-index:1}
header.hero .inner>*:not(.eyebrow):not(h1){max-width:min(52%,560px)}
.hart{position:absolute;right:0;top:0;bottom:0;width:min(64%,900px);margin:0;pointer-events:none}
.hart img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
@media(max-width:900px){
  header.hero .inner>*:not(.eyebrow):not(h1){max-width:none}
  .hart{position:static;width:100%;height:170px;margin-top:22px}
}

/* keep hero text clear of the art */
header.hero h1{font-size:clamp(36px,5vw,66px);max-width:none}
header.hero .inner>h1,header.hero .inner>.eyebrow{max-width:min(50%,520px)}
.hart{width:min(50%,760px)}
@media(max-width:900px){header.hero .inner>h1,header.hero .inner>.eyebrow{max-width:none}.hart{width:100%}}