/* AST SERA V62 — FINAL SITE/HEADER/BLOG QA OVERRIDES */
:root{--ast-green:#1f7a3d;--ast-green-dark:#155b2d;--ast-green-soft:#eaf5ed;--ast-line:#dfe8e2;--ast-ink:#17231b;--ast-muted:#657269}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.site-header{position:sticky!important;top:0!important;z-index:1000!important;background:rgba(255,255,255,.98)!important;border-bottom:1px solid var(--ast-line)!important;box-shadow:0 4px 18px rgba(20,60,32,.07)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important}
.site-header .container{width:100%!important;max-width:none!important;margin:0!important;padding:0 clamp(16px,3vw,44px)!important}
.site-header .navbar{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;gap:clamp(10px,1.5vw,22px)!important;min-height:68px!important;padding:7px 0!important}
.site-header .brand{display:flex!important;align-items:center!important;flex:0 0 auto!important;min-width:0!important;margin:0!important}
.site-header .brand-logo{display:block!important;width:auto!important;height:48px!important;max-width:180px!important;max-height:52px!important;object-fit:contain!important}
.site-header .nav-links{display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:0!important}
.site-header .nav-links a{color:#25342b!important;text-decoration:none!important;font-size:12.5px!important;font-weight:700!important;line-height:1!important;padding:10px 11px!important;border-radius:9px!important;border:1px solid transparent!important;background:transparent!important;white-space:nowrap!important;box-shadow:none!important}
.site-header .nav-links a:hover{color:var(--ast-green-dark)!important;background:#f1f7f3!important}
.site-header .nav-links a.active,.site-header .nav-links a[aria-current=page]{color:var(--ast-green-dark)!important;background:var(--ast-green-soft)!important;border-color:#d2e6d8!important}
.site-header .nav-cta{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;flex:0 0 auto!important;margin:0!important}
.site-header .nav-cta .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;height:38px!important;min-height:38px!important;padding:7px 11px!important;border-radius:999px!important;border:1px solid #d8e4dc!important;background:#fff!important;color:#26352c!important;text-decoration:none!important;white-space:nowrap!important;font-size:11.5px!important;font-weight:800!important}
.site-header .nav-cta .btn.primary{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
.site-header .nav-cta .btn:hover{transform:none!important;box-shadow:0 4px 12px rgba(20,60,32,.10)!important;text-decoration:none!important}
.site-header .header-icon{width:16px!important;height:16px!important;flex:0 0 auto!important}
.site-header .mobile-toggle{display:none!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:4px!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:12px!important;border:1px solid #d8e4dc!important;background:#fff!important;cursor:pointer!important}
.site-header .mobile-toggle span{display:block!important;width:19px!important;height:2px!important;background:#25342b!important;border-radius:2px!important}
.site-header .mobile-toggle:focus-visible,.site-header .nav-cta .btn:focus-visible,.site-header .nav-links a:focus-visible{outline:3px solid rgba(31,122,61,.25)!important;outline-offset:2px!important}

/* Blog index: full-bleed, like the approved desktop reference */
.blog-page{background:#f4f7f5!important;padding:0 0 70px!important}
.blog-page>.container{width:100%!important;max-width:none!important;margin:0!important}
.blog-hero{position:relative!important;width:100%!important;max-width:none!important;height:320px!important;min-height:320px!important;margin:0!important;border-radius:0!important;overflow:hidden!important;box-shadow:none!important}
.blog-hero-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 48%!important}
.blog-hero-overlay{position:absolute!important;inset:0!important;background:linear-gradient(90deg,rgba(5,25,16,.88) 0%,rgba(5,25,16,.68) 48%,rgba(5,25,16,.16) 100%)!important}
.blog-hero-inner{position:relative!important;z-index:2!important;width:100%!important;max-width:none!important;min-height:320px!important;margin:0!important;padding:36px clamp(20px,6vw,92px)!important;display:flex!important;align-items:center!important}
.blog-hero-content{max-width:760px!important}
.blog-hero-badge{display:inline-flex!important;align-items:center!important;gap:5px!important;margin:0 0 12px!important;padding:7px 11px!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:11px!important;font-weight:800!important}
.blog-hero-content h1{margin:0 0 10px!important;color:#fff!important;font-size:clamp(32px,3.6vw,54px)!important;line-height:1.03!important;letter-spacing:-1.2px!important;max-width:780px!important}
.blog-hero-content>p{margin:0!important;max-width:720px!important;color:rgba(255,255,255,.88)!important;font-size:15px!important;line-height:1.55!important}
.blog-hero-search{display:none!important}

/* 8 category boxes */
.blog-filters{width:100%!important;max-width:none!important;margin:0!important;padding:12px clamp(14px,2.5vw,34px) 10px!important;display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;background:#f4f7f5!important}
.blog-filters .filter{min-width:0!important;height:58px!important;display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;grid-template-rows:1fr auto!important;align-items:center!important;column-gap:8px!important;padding:7px 9px!important;border:1px solid #dfe8e2!important;border-radius:10px!important;background:#fff!important;color:#27352d!important;cursor:pointer!important;text-align:left!important;box-shadow:0 2px 8px rgba(20,60,32,.035)!important}
.blog-filters .filter:hover{border-color:#c8ddcf!important;background:#fbfdfb!important}
.blog-filters .filter.active{background:#fff!important;color:#27352d!important;border-color:#cfe3d5!important;box-shadow:0 4px 12px rgba(20,60,32,.05)!important}
.blog-filters .filter-icon{grid-row:1 / span 2;display:flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;border-radius:8px!important;background:#f0f6f2!important;color:#27814a!important;font-size:15px!important;font-weight:800!important}
.blog-filters .filter.active .filter-icon{background:#16a34a!important;color:#fff!important}
.blog-filters .filter-name{min-width:0!important;font-size:11px!important;font-weight:800!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;align-self:end!important}
.blog-filters .filter-count{font-size:8.5px!important;line-height:1!important;color:#7b887f!important;align-self:start!important}
.blog-filters .filter.active .filter-count{color:#7b887f!important}

/* Search toolbar exactly under categories */
.blog-toolbar{width:100%!important;max-width:none!important;margin:0!important;padding:0 clamp(14px,2.5vw,34px) 12px!important;display:flex!important;align-items:center!important;gap:10px!important;background:#f4f7f5!important}
.toolbar-search{display:flex!important;align-items:center!important;flex:1 1 auto!important;min-width:0!important;height:44px!important;background:#fff!important;border:1px solid #dfe8e2!important;border-radius:9px!important;padding:4px 5px 4px 12px!important;box-shadow:0 3px 10px rgba(20,60,32,.035)!important}
.toolbar-search-icon{width:17px!important;height:17px!important;color:#7b887f!important;flex:0 0 auto!important}
.toolbar-search input{border:0!important;outline:0!important;min-width:0!important;flex:1!important;height:34px!important;padding:5px 8px!important;background:transparent!important;color:#26352d!important;font-size:12.5px!important}
.toolbar-search input::placeholder{color:#8a968f!important}
.toolbar-search>button:not(.toolbar-search-submit){border:0!important;background:transparent!important;color:#8b958f!important;font-size:19px!important;cursor:pointer!important;padding:4px!important}
.toolbar-search-submit{height:34px!important;border:0!important;border-radius:7px!important;background:#16a34a!important;color:#fff!important;padding:0 17px!important;font-size:12px!important;font-weight:800!important;cursor:pointer!important}
.toolbar-search-submit:hover{background:#158c40!important}
.toolbar-result{font-size:10px!important;color:#7c8981!important;white-space:nowrap!important}
.toolbar-sort{display:flex!important;align-items:center!important;gap:6px!important;height:44px!important;padding:0 9px 0 12px!important;background:#fff!important;border:1px solid #dfe8e2!important;border-radius:9px!important;color:#7a867f!important;font-size:10px!important;white-space:nowrap!important}
.toolbar-sort select{border:0!important;outline:0!important;background:#fff!important;color:#26352d!important;font-size:11px!important;font-weight:700!important;cursor:pointer!important}

/* Cards: 5 columns, no stretched blank bodies */
.blog-grid{width:100%!important;max-width:none!important;margin:0!important;padding:0 clamp(14px,2.5vw,34px) 42px!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;align-items:start!important}
.blog-card{display:block!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;background:#fff!important;border:1px solid #dfe7e1!important;border-radius:10px!important;overflow:hidden!important;box-shadow:0 4px 14px rgba(20,60,32,.045)!important}
.blog-card:hover{transform:translateY(-2px)!important;box-shadow:0 9px 22px rgba(20,60,32,.09)!important;border-color:#cbded1!important}
.blog-card::before,.blog-card::after,.blog-card *::before,.blog-card *::after{content:none!important;display:none!important}
.blog-card-link{display:block!important;height:auto!important;text-decoration:none!important;background:#fff!important}
.blog-card-media{width:100%!important;aspect-ratio:1.58!important;overflow:hidden!important;background:#edf3ee!important}
.blog-card-media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;margin:0!important;border:0!important;border-radius:0!important;transform:none!important}
.blog-card:hover .blog-card-media img{transform:scale(1.025)!important}
.blog-card-body{display:flex!important;flex-direction:column!important;min-height:150px!important;height:auto!important;margin:0!important;padding:10px 11px 11px!important;background:#fff!important}
.blog-card-cat{display:block!important;margin:0 0 5px!important;color:#248044!important;font-size:8px!important;line-height:1.1!important;font-weight:850!important;letter-spacing:.06em!important;text-transform:uppercase!important}
.blog-card h2{margin:0 0 6px!important;color:#17211b!important;font-size:14px!important;line-height:1.2!important;letter-spacing:-.1px!important}
.blog-card p{margin:0 0 8px!important;color:#66736b!important;font-size:10.5px!important;line-height:1.42!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.read-more{display:inline-block!important;margin-top:auto!important;color:#21803f!important;font-size:9.5px!important;font-weight:850!important}
.blog-grid .blog-card[hidden],.blog-grid .blog-card.is-filter-hidden{display:none!important}
.empty-state{width:100%!important;max-width:none!important;margin:10px 0!important;padding:50px 20px!important;background:#fff!important;border:1px solid #dfe7e1!important;border-radius:14px!important;box-shadow:none!important;text-align:center!important}

/* Article pages: remove empty diagram gaps and make content breathe */
.v52-wrap,.v51-wrap{max-width:none!important;width:100%!important;margin:0!important;padding:28px clamp(18px,5vw,72px) 70px!important;background:#fff!important}
.v52-article,.v51-article{max-width:920px!important;margin:0 auto!important}
.v52-breadcrumb,.v51-breadcrumb{margin-bottom:18px!important}
.v52-article h1,.v51-article h1{font-size:clamp(34px,4.4vw,58px)!important;line-height:1.06!important;margin:14px 0 14px!important;color:#173b25!important}
.v52-lead,.v51-lead{font-size:18px!important;line-height:1.65!important;margin:0!important;color:#5d6b63!important}
.v52-content,.v51-content{font-size:17px!important;line-height:1.82!important;color:#2b382f!important}
.v52-content h2,.v51-content h2{font-size:28px!important;line-height:1.2!important;margin:42px 0 13px!important;color:#173f25!important}
.v52-content p,.v51-content p{margin:0 0 18px!important}
.v52-content ul,.v52-content ol,.v51-content ul,.v51-content ol{padding-left:22px!important}
.v52-hero:not(:has(img)),.v52-inline-figure:not(:has(img)),.v51-hero:not(:has(img)),.v51-inline-figure:not(:has(img)){display:none!important}
.v52-article .article-hero-photo,.v51-article .article-hero-photo{margin:24px 0 18px!important}
.v52-article .article-hero-photo img,.v51-article .article-hero-photo img{width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;border-radius:18px!important}

/* Homepage title/branding consistency */
.page-home .hero-h1{max-width:900px}

@media(max-width:1199px){
 .blog-filters{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .blog-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:900px){
 .site-header .nav-links{display:none!important;position:absolute!important;left:16px!important;right:16px!important;top:100%!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;padding:10px!important;background:#fff!important;border:1px solid #dfe7e1!important;border-radius:0 0 16px 16px!important;box-shadow:0 16px 32px rgba(20,60,32,.12)!important}
 .site-header.open .nav-links,.site-header .nav-links.is-open{display:flex!important}
 .site-header .nav-links a{width:100%!important;padding:12px 14px!important;font-size:14px!important;text-align:left!important}
 .site-header .mobile-toggle{display:inline-flex!important}
 .blog-hero{height:300px!important;min-height:300px!important}
 .blog-hero-inner{min-height:300px!important;padding:30px 34px!important}
 .blog-hero-content h1{font-size:clamp(30px,5vw,44px)!important}
}
@media(max-width:760px){
 .site-header .container{padding:0 10px!important}
 .site-header .navbar{min-height:64px!important;height:64px!important;padding:7px 0!important;gap:6px!important}
 .site-header .brand{flex:1 1 auto!important}
 .site-header .brand-logo{height:40px!important;max-width:145px!important}
 .site-header .nav-cta{gap:5px!important}
 .site-header .nav-cta .btn,.site-header .mobile-toggle{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex:0 0 40px!important;padding:0!important;border-radius:12px!important}
 .site-header .nav-cta .btn span{display:none!important}
 .site-header .nav-cta .header-icon{width:18px!important;height:18px!important}
 .blog-hero{height:280px!important;min-height:280px!important}
 .blog-hero-inner{min-height:280px!important;padding:28px 18px!important;align-items:flex-end!important}
 .blog-hero-overlay{background:linear-gradient(180deg,rgba(5,25,16,.18) 0%,rgba(5,25,16,.52) 42%,rgba(5,25,16,.92) 100%)!important}
 .blog-hero-content h1{font-size:31px!important;line-height:1.05!important}
 .blog-hero-content>p{font-size:13px!important;line-height:1.45!important}
 .blog-filters{display:flex!important;gap:7px!important;overflow-x:auto!important;padding:10px 12px 8px!important;scrollbar-width:none!important}
 .blog-filters::-webkit-scrollbar{display:none}
 .blog-filters .filter{height:42px!important;display:inline-flex!important;align-items:center!important;gap:7px!important;flex:0 0 auto!important;grid-template-columns:none!important;grid-template-rows:none!important;padding:0 12px!important;border-radius:999px!important}
 .blog-filters .filter-icon{display:none!important}
 .blog-filters .filter-name{font-size:11.5px!important;overflow:visible!important;text-overflow:clip!important}
 .blog-filters .filter-count{font-size:8.5px!important;display:inline!important}
 .blog-toolbar{display:flex!important;flex-wrap:wrap!important;padding:0 12px 10px!important;gap:7px!important}
 .toolbar-search{width:100%!important;flex-basis:100%!important}
 .toolbar-sort{flex:0 0 auto!important}
 .toolbar-result{margin-left:auto!important}
 .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0 12px 30px!important;gap:10px!important}
 .blog-card-body{min-height:138px!important;padding:9px 10px 10px!important}
 .blog-card h2{font-size:13px!important}
 .blog-card p{font-size:10px!important}
 .read-more{font-size:9px!important}
 .v52-wrap,.v51-wrap{padding:20px 15px 55px!important}
 .v52-article h1,.v51-article h1{font-size:34px!important}
 .v52-content,.v51-content{font-size:16px!important;line-height:1.75!important}
 .v52-content h2,.v51-content h2{font-size:24px!important;margin-top:34px!important}
}
@media(max-width:520px){
 .blog-grid{grid-template-columns:1fr!important}
 .blog-card-media{aspect-ratio:16/9!important}
 .blog-card-body{min-height:0!important}
 .blog-card h2{font-size:18px!important}
 .blog-card p{font-size:13px!important;line-height:1.5!important}
 .read-more{font-size:12px!important}
}

/* V66: shared navigation fixes. Append to v62-site-final.css.
   Kept global intentionally: home, articles and blog use the same header. */
@media (min-width: 901px) {
  header.site-header .navbar > .nav-links {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    justify-content: space-between !important;
    gap: clamp(2px, .5vw, 12px) !important;
  }
  .site-header .nav-links > a {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .site-header .nav-cta > .btn {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  header.site-header .nav-links > a {
    padding-inline: 6px !important;
  }
}
.site-header .nav-cta > .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
}
.site-header .nav-cta > .btn > .header-icon {
  display: block !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}
.site-header .nav-cta > .btn > span {
  font-size: inherit !important;
  line-height: 1 !important;
}
@media (max-width: 900px) {
  .site-header .nav-cta > .btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    padding: 0 !important;
  }
  .site-header .nav-cta > .btn > span { display: none !important; }
  header.site-header .navbar > .nav-links {
    width: auto !important;
    max-height: calc(100vh - 90px) !important;
    max-height: calc(100dvh - 90px) !important;
    overflow-y: auto !important;
  }
}

/* V67: shared DESKTOP header only. V66 mobile rules are unchanged.
   The same container is used by the blog hero, filters and cards.
   This file has a new URL so the old immutable asset cache cannot hide it. */
@media (min-width: 901px) {
  :root {
    --ast-desktop-shell: min(1920px, 92%);
  }

  header.site-header > .container {
    width: var(--ast-desktop-shell) !important;
    max-width: 1920px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  header.site-header .navbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(16px, 2vw, 36px) !important;
    min-height: clamp(76px, 4.8vw, 90px) !important;
    height: auto !important;
    padding: 12px 0 !important;
  }

  header.site-header .brand-logo {
    width: auto !important;
    height: clamp(46px, 3.1vw, 56px) !important;
    max-width: 220px !important;
    max-height: 56px !important;
  }

  header.site-header .navbar > .nav-links {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 1120px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: clamp(4px, .45vw, 10px) !important;
  }

  header.site-header .nav-links > a {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 12px clamp(6px, .65vw, 14px) !important;
    font-size: clamp(14px, .93vw, 17px) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  header.site-header .nav-cta {
    gap: 10px !important;
  }

  header.site-header .nav-cta > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px 15px !important;
    gap: 7px !important;
    font-size: clamp(13px, .85vw, 15px) !important;
    line-height: 1 !important;
  }

  header.site-header .nav-cta > .btn > .header-icon {
    display: block !important;
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    transform: none !important;
    align-self: center !important;
  }

  header.site-header .mobile-toggle {
    display: none !important;
  }
}

/* Small desktops: keep the SAME menu, without wrapping or hiding links. */
@media (min-width: 901px) and (max-width: 1199px) {
  header.site-header .navbar {
    gap: 12px !important;
    min-height: 72px !important;
    padding-block: 10px !important;
  }
  header.site-header .brand-logo {
    height: 42px !important;
    max-width: 162px !important;
  }
  header.site-header .navbar > .nav-links {
    gap: 2px !important;
  }
  header.site-header .nav-links > a {
    font-size: 13px !important;
    padding: 10px 5px !important;
  }
  header.site-header .nav-cta {
    gap: 6px !important;
  }
  header.site-header .nav-cta > .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    gap: 5px !important;
    font-size: 12px !important;
  }
}