* { box-sizing: border-box; }
body { margin: 0; color: #003127; font-family: "DM Sans", Arial, sans-serif; background: #fff; }
[data-site-nav] { left: 0; position: sticky; top: 0; width: 100%; z-index: 10000; }
.blog-page { background: radial-gradient(900px 280px at 10% -40px, transparent 99%, rgba(0,49,39,.08) 100%, transparent 101%), #fff; overflow: hidden; padding-top: 95px; }
.blog-hero, .blog-list { margin: 0 auto; max-width: 1170px; }
.eyebrow, .post-meta span, .blog-list article span:first-child { background: #c6fbec; border-radius: 999px; color: #1a6a59; display: inline-block; font-size: 16px; font-weight: 700; padding: 7px 12px; }
.blog-hero > .eyebrow { background: transparent; padding: 0; }
h1 { font-size: 66px; line-height: 1.05; letter-spacing: 0; margin: 28px 0 48px; }
.blog-layout { display: grid; gap: 50px; grid-template-columns: 770px 350px; }
.featured-post img { border-radius: 8px; display: block; height: 450px; object-fit: cover; width: 770px; }
.post-meta { align-items: center; display: flex; justify-content: space-between; margin: 30px 0 6px; }
.post-meta time, .recent-posts time { color: #696e77; font-size: 16px; }
.featured-post h2 { font-size: 32px; line-height: 1.22; margin: 0; max-width: 560px; }
.recent-posts h2 { font-size: 28px; margin: 6px 0 28px; }
.recent-posts a { align-items: center; background: #fff; border-bottom: 5px solid #11dba3; border-radius: 8px; box-shadow: 0 14px 30px rgba(0,49,39,.12); color: #003127; display: grid; gap: 8px 16px; grid-template-columns: 80px 1fr; margin-bottom: 20px; padding: 15px; text-decoration: none; }
.recent-posts img { border-radius: 5px; grid-row: span 2; height: 80px; object-fit: cover; width: 80px; }
.recent-posts span { font-size: 20px; font-weight: 700; line-height: 1.2; }
.blog-list { display: grid; gap: 80px; margin-top: 120px; padding-bottom: 120px; }
.blog-list article { align-items: center; display: grid; gap: 100px; grid-template-columns: 570px 500px; }
.blog-list article div > span { margin-bottom: 26px; }
.blog-list h2 { font-size: 28px; line-height: 1.2; margin: 0 0 24px; }
.blog-list p { color: #696e77; font-size: 16px; line-height: 1.5; margin: 0; max-width: 500px; }
.blog-list a { color: #003127; display: inline-flex; font-size: 18px; font-weight: 700; gap: 50px; margin-top: 82px; text-decoration: none; }
.blog-list img { border-radius: 8px; display: block; height: 255px; object-fit: cover; width: 500px; }
@media (max-width: 900px) { .blog-page { padding: 70px 20px 0; } h1 { font-size: 46px; } .blog-hero,.blog-list { max-width: 100%; } .blog-layout,.blog-list article { grid-template-columns: 1fr; gap: 36px; } .featured-post img,.blog-list img { height: auto; width: 100%; } .blog-list { margin-top: 70px; } .recent-posts a { grid-template-columns: 70px 1fr; } }