.blog-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #071410;
}
.blog-hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg, #000, transparent 78%); }
.blog-hero-glow { position: absolute; width: 500px; height: 500px; left: 2%; top: -340px; border-radius: 50%; background: rgba(54,211,153,.16); filter: blur(18px); }
.blog-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 355px; align-items: center; gap: 90px; padding-block: 54px; }
.blog-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 11px; border: 1px solid rgba(54,211,153,.2); border-radius: 999px; color: #66dfb2; background: rgba(54,211,153,.075); font-size: .74rem; font-weight: 700; }
.blog-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #36d399; box-shadow: 0 0 0 5px rgba(54,211,153,.1); }
.blog-hero h1 { margin: 15px 0 10px; font-size: clamp(2.45rem,5vw,4rem); line-height: 1.2; letter-spacing: -.045em; font-weight: 800; }
.blog-hero h1 em { color: #d7ad55; font-style: normal; }
.blog-hero p { max-width: 620px; margin: 0; color: #a7b9b1; font-size: .94rem; line-height: 2; }
.blog-hero-note { display: grid; gap: 4px; padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.045); box-shadow: 0 25px 60px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.blog-hero-note::before { content: "“"; color: #36d399; font-family: Georgia,serif; font-size: 2.6rem; line-height: .7; }
.blog-hero-note span { color: #57dfad; font-size: .68rem; font-weight: 700; }
.blog-hero-note b { color: #f6fbf8; font-size: .95rem; }
.blog-hero-note small { color: #82978e; font-size: .65rem; }

.blog-page { padding-block: 34px 90px; }
.blog-filters { display: flex; gap: 7px; margin-bottom: 28px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; }
.blog-filters::-webkit-scrollbar { display: none; }
.blog-filters a { flex: 0 0 auto; padding: 7px 13px; border: 1px solid #dce5df; border-radius: 999px; color: #68756e; background: #fff; font-size: .73rem; transition: .18s ease; }
.blog-filters a:hover { border-color: #a7c1b5; }
.blog-filters a.active { color: #fff; border-color: #0b211a; background: #0b211a; }

.featured-article { min-height: 360px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); border: 1px solid #dfe7e2; border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(7,20,16,.07); overflow: hidden; }
.featured-article-media, .blog-card-media { position: relative; display: block; overflow: hidden; background: #10271f; }
.featured-article-media img, .blog-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.featured-article:hover .featured-article-media img, .blog-card:hover .blog-card-media img { transform: scale(1.035); }
.media-placeholder { display: grid; place-items: center; background: radial-gradient(circle at 28% 22%, rgba(54,211,153,.25), transparent 28%), linear-gradient(145deg,#102a21,#071410); }
.media-placeholder::before, .media-placeholder::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; }
.media-placeholder::before { width: 240px; height: 240px; left: -80px; top: -110px; }
.media-placeholder::after { width: 170px; height: 170px; right: -70px; bottom: -80px; }
.media-placeholder > span { width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid rgba(54,211,153,.35); border-radius: 22px; color: #36d399; background: rgba(54,211,153,.08); font-size: 1.2rem; font-weight: 800; letter-spacing: .08em; }
.featured-article-copy { display: flex; flex-direction: column; justify-content: center; padding: 38px; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 11px; color: #829088; font-size: .66rem; }
.article-meta > span:not(.post-type) + span::before, .article-meta time::before { content: "•"; margin-left: 10px; color: #bec8c3; }
.article-meta .post-type { padding: 3px 7px; border-radius: 6px; color: #087452; background: #e2f7ed; font-weight: 700; }
.featured-article h2 { margin: 14px 0 10px; font-size: clamp(1.55rem,2.5vw,2.15rem); line-height: 1.55; font-weight: 800; letter-spacing: -.03em; }
.featured-article h2 a:hover, .blog-card h3 a:hover { color: #0b8f67; }
.featured-article-copy > p { display: -webkit-box; margin: 0; overflow: hidden; color: #65736c; font-size: .86rem; line-height: 1.95; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.article-byline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 25px; padding-top: 17px; border-top: 1px solid #edf1ef; color: #7a8780; font-size: .7rem; }
.article-byline a { color: #0a7957; font-weight: 700; }
.article-byline a b { margin-right: 5px; font-size: .9rem; }

.blog-list-section { padding-top: 70px; }
.blog-section-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 22px; }
.blog-section-head span { color: #0b8f67; font-size: .72rem; font-weight: 700; }
.blog-section-head h2 { margin: 2px 0 0; font-size: 1.65rem; font-weight: 800; }
.blog-section-head small { color: #77847d; font-size: .72rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.blog-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid #dfe7e2; border-radius: 17px; background: #fff; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.blog-card:hover { transform: translateY(-4px); border-color: #c8d8cf; box-shadow: 0 18px 45px rgba(7,20,16,.08); }
.blog-card-media { height: 190px; }
.blog-card-media.media-placeholder > span { width: 52px; height: 52px; border-radius: 16px; font-size: .85rem; }
.blog-card-body { min-height: 245px; display: flex; flex-direction: column; padding: 18px; }
.blog-card h3 { margin: 11px 0 8px; font-size: 1rem; line-height: 1.7; font-weight: 800; }
.blog-card-body > p { display: -webkit-box; margin: 0; overflow: hidden; color: #6a7771; font-size: .74rem; line-height: 1.85; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.blog-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 15px; border-top: 1px solid #edf1ef; color: #8a958f; font-size: .64rem; }
.blog-card-foot a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #087452; background: #e6f8f0; font-size: .9rem; }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; color: #748179; font-size: .72rem; }
.blog-pagination a { padding: 7px 14px; border: 1px solid #d6e1db; border-radius: 9px; color: #0b211a; background: #fff; }
.blog-state { min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 17px; padding: 35px; border: 1px dashed #cbd8d1; border-radius: 18px; background: #fff; }
.blog-state > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #0b8f67; background: #e4f8ef; font-size: 1.4rem; }
.blog-state h2, .blog-state p { margin: 0; }
.blog-state h2 { font-size: 1rem; }
.blog-state p { color: #748179; font-size: .78rem; }
.blog-state-error > span { color: #c33e4b; background: #fff0f1; }

.home-blog-section { padding-block: 82px 92px; border-top: 1px solid #e0e7e2; background: #eef3ef; }
.home-blog-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.home-blog-head h2 { margin: 3px 0 4px; font-size: clamp(1.7rem,3vw,2.25rem); font-weight: 800; letter-spacing: -.035em; }
.home-blog-head p { margin: 0; color: #69766f; }
.home-blog-head > a { flex: 0 0 auto; padding: 9px 14px; border: 1px solid #ccd9d2; border-radius: 10px; background: #fff; font-size: .75rem; font-weight: 700; }
.home-blog-section .blog-card-body { min-height: 225px; }

.article-hero { padding-block: 64px 70px; color: #fff; background: radial-gradient(circle at 12% 8%,rgba(54,211,153,.13),transparent 28%),#071410; }
.article-header-inner { max-width: 930px; }
.article-breadcrumb { display: flex; gap: 8px; margin-bottom: 30px; color: #7f958b; font-size: .7rem; }
.article-breadcrumb a { color: #48d7a3; }
.article-hero h1 { max-width: 900px; margin: 17px 0 15px; font-size: clamp(2rem,4.8vw,3.6rem); line-height: 1.45; letter-spacing: -.04em; font-weight: 800; }
.article-hero > .article-header-inner > p { max-width: 750px; margin: 0; color: #a5b6af; font-size: .95rem; line-height: 2; }
.article-author { display: flex; align-items: center; gap: 11px; margin-top: 27px; }
.article-author > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(54,211,153,.25); border-radius: 12px; color: #45d8a2; background: rgba(54,211,153,.08); font-size: .72rem; font-weight: 800; }
.article-author > div { display: grid; line-height: 1.45; }
.article-author b { font-size: .75rem; }
.article-author small { color: #758b82; font-size: .61rem; }
.article-shell { max-width: 1030px; padding-block: 48px 100px; }
.article-cover { height: min(520px,52vw); margin: 0 0 48px; overflow: hidden; border-radius: 21px; box-shadow: 0 25px 60px rgba(7,20,16,.12); }
.article-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.article-content { display: grid; grid-template-columns: 240px minmax(0,1fr); align-items: start; gap: 60px; }
.article-aside { position: sticky; top: 110px; padding: 18px; border-right: 3px solid #36d399; border-radius: 10px 0 0 10px; background: #eaf5ef; }
.article-aside span { color: #0b8f67; font-size: .65rem; font-weight: 800; }
.article-aside p { margin: 6px 0 14px; color: #53625b; font-size: .7rem; line-height: 1.85; }
.article-aside a { color: #087452; font-size: .68rem; font-weight: 700; }
.article-body { min-width: 0; color: #27372f; font-size: 1rem; line-height: 2.25; white-space: pre-line; overflow-wrap: anywhere; }

@media (max-width: 920px) {
  .blog-hero-inner { grid-template-columns: minmax(0,1fr) 300px; gap: 40px; }
  .featured-article { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-content { grid-template-columns: 200px minmax(0,1fr); gap: 35px; }
}

@media (max-width: 700px) {
  .blog-hero { min-height: 310px; }
  .blog-hero-inner { grid-template-columns: 1fr; padding-block: 42px; }
  .blog-hero-note { display: none; }
  .featured-article { grid-template-columns: 1fr; }
  .featured-article-media { height: 260px; }
  .featured-article-copy { padding: 25px; }
  .blog-grid { grid-template-columns: 1fr; }
  .home-blog-head { align-items: flex-start; flex-direction: column; }
  .article-hero { padding-block: 45px 50px; }
  .article-content { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}

@media (max-width: 480px) {
  .blog-page { padding-top: 24px; }
  .blog-hero h1 { font-size: 2.25rem; }
  .featured-article-media { height: 220px; }
  .featured-article-copy { padding: 21px; }
  .article-byline { align-items: flex-start; flex-direction: column; gap: 8px; }
  .blog-section-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .article-cover { height: 250px; border-radius: 15px; }
  .article-body { font-size: .92rem; }
}