/* Site chrome shared by every case study, so they match the homepage (index.html):
   Inter Tight / Inter type, avatar home link, pill "Get in touch" button,
   "More case studies" cards, the "Let's have a word?" contact block and the footer.
   Load after the page's own styles. */
:root{
  --font-display:"Inter Tight","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --site-serif:"Instrument Serif",Georgia,serif;
  --bg:#f5f5f3;
}
body{background:var(--bg)}

/* Header: avatar + name goes home, chapters in the middle, pill CTA on the right */
.s-top{background:rgb(245 245 243/.88)}
.s-top .brand.site-me{display:flex;align-items:center;gap:8px;font:600 15px/1 var(--font-body);letter-spacing:0;padding:4px 12px 4px 4px;border-radius:999px;transition:background .2s}
.s-top .brand.site-me:hover{background:rgba(0,0,0,.05)}
.site-me img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.site-cta{flex:none;padding:9px 16px;border-radius:999px;background:var(--ink);color:#fff!important;font:600 14px/1 var(--font-body);text-decoration:none;white-space:nowrap;transition:background .2s}
.site-cta:hover{background:#333}
@media (max-width:760px){.site-cta{display:none}}

/* More case studies */
.site-more{padding:clamp(72px,9vw,120px) 0 0;border-top:1px solid var(--line)}
.site-more-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.site-more-head h2{font:800 clamp(34px,5vw,60px)/1 var(--font-display);letter-spacing:-.04em}
.site-more-head h2 em{font:italic 400 1.08em/1 var(--site-serif);letter-spacing:-.01em}
.site-more-head a{font:500 15px/1 var(--font-body);color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.site-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.site-card{display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.site-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}
.site-card-media{aspect-ratio:16/10;background:var(--card-tint,#eef0f3);display:flex;align-items:flex-end;justify-content:center;padding:20px 20px 0;overflow:hidden}
.site-card-media img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:10px 10px 0 0}
.site-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.site-card-client{font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.site-card h3{font:700 21px/1.15 var(--font-display);letter-spacing:-.02em}
.site-card-stat{color:var(--ink-2);font-size:14px}
.site-card-go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--font-body)}
.site-card-go svg{width:14px;height:14px;transition:transform .2s}
.site-card:hover .site-card-go svg{transform:translateX(3px)}
.site-card.is-next{outline:2px solid var(--ink);outline-offset:-2px}
.site-card-tag{align-self:flex-start;padding:5px 9px;border-radius:999px;background:var(--ink);color:#fff;font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){.site-cards{grid-template-columns:minmax(0,1fr)}.site-card{flex-direction:row}.site-card-media{width:38%;aspect-ratio:auto;padding:14px 0 0 14px}.site-card-media img{border-radius:8px 0 0 0}}
@media (max-width:520px){.site-card{flex-direction:column}.site-card-media{width:auto;aspect-ratio:16/9;padding:14px 14px 0}.site-card-media img{border-radius:8px 8px 0 0}}

/* Contact, same as the homepage */
.site-contact{padding:clamp(88px,11vw,150px) 0 clamp(56px,7vw,88px);text-align:center}
.site-contact h2{font:italic 400 clamp(48px,8vw,112px)/1 var(--site-serif);letter-spacing:-.02em}
.site-contact p{margin-top:16px;color:var(--ink-2)}
.site-contact .site-mail{display:inline-block;margin-top:24px;font:700 clamp(20px,2.8vw,32px)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;border-bottom:2px solid currentColor;word-break:break-word}

/* Footer */
.foot.site-foot{border-top:1px solid var(--line);background:transparent}
.site-foot .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:24px var(--gutter);font-size:14px;color:var(--muted)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:18px}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--ink)}
.foot.site-foot{margin-top:0;padding:0}