@font-face { font-family: Bastardo; src: url("../fonts/BastardoGrotesk-Regular.otf") format("opentype"); font-display: swap; }
:root { --canvas:#101010; --ink:#f2f2f0; --muted:#7d7d7d; --accent:linear-gradient(90deg,#60a5fa 0%,#f472b6 52%,#f87171 100%); --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html,body { background:var(--canvas); }
body { margin:0; color:var(--ink); font:15px/21px Bastardo,Arial,sans-serif; letter-spacing:.02em; text-transform:lowercase; }
a { color:inherit; text-decoration:none; }
.topbar { display:flex; justify-content:space-between; width:min(100% - 110px,1130px); margin:0 auto; padding:55px 0 0; }
.back { color:var(--muted); transition:color .18s var(--ease); }
.back:hover { color:var(--ink); }
main { width:min(700px,calc(100% - 110px)); margin:0 auto; padding:57px 0 120px; }
.hero { padding:0 0 72px; }
.eyebrow,h2 { color:var(--muted); font-weight:400; margin:0; }
h1 { margin:6px 0 18px; font-size:15px; line-height:21px; font-weight:400; }
.hero p { max-width:470px; margin:0; }
.meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; color:var(--muted); }
.meta span + span::before { content:"·"; margin-right:12px; }
.story { display:grid; grid-template-columns:140px minmax(0,1fr); gap:36px; padding:0 0 72px; }
.story h2 { font-size:15px; line-height:21px; }
.story-copy { max-width:480px; }
.story-copy p { margin:0; }
.story-copy p + p { margin-top:12px; color:var(--muted); }
figure { width:min(700px,100%); margin:0 0 72px; overflow:hidden; background:#252525; }
figure img { display:block; width:100%; height:500px; object-fit:cover; object-position:center; }
.gradient-link { display:inline-block; margin-top:18px; background:var(--accent); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
@keyframes case-study-text-appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
[data-reveal] { opacity:0; }
[data-reveal].is-visible { animation:.5s both case-study-text-appear; }
@media (max-width:700px) { .topbar { width:calc(100% - 40px); padding-top:24px; } main { width:min(100% - 40px,560px); padding:42px 0 80px; } .hero { padding-bottom:52px; } .story { display:block; padding-bottom:52px; } .story h2 { margin-bottom:6px; } figure { margin-bottom:52px; } figure img { height:min(500px,calc((100vw - 40px) * .714)); } }
@media (prefers-reduced-motion:reduce) { [data-reveal] { opacity:1; transform:none; } [data-reveal].is-visible { animation:none; } }