/* FoxyEco — considered technology for everyday wellbeing. */
:root {
  --primary:#23533c; --primary-container:#dce9bc; --on-primary-container:#24432f;
  --surface:#f7f8f2; --surface-lowest:#fff; --surface-low:#eff2e8;
  --surface-container:#e7eddf; --surface-high:#e6edde; --surface-highest:#dfe7d5;
  --outline-variant:#d5dece; --on-surface:#20392d; --on-surface-variant:#52614f;
  --bg-dark:#f7f8f2; --text-primary:#20392d; --text-muted:#52614f;
}
html,body { background:#f7f8f2; color:#20392d; color-scheme:light; }
body { font-family:Manrope,system-ui,sans-serif; }
*,*::before,*::after { box-sizing:border-box; }
a,button,input,summary { -webkit-tap-highlight-color:transparent; }
:where(a,button,input,summary):focus-visible { outline:3px solid #a66329; outline-offset:4px; }
::selection { background:#dce9bc; color:#20392d; }
.site-header { height:80px; padding-inline:max(24px,calc((100vw - 1240px)/2)); background:#f7f8f2f5; border-bottom:1px solid #d5dece; }
.site-header .logo-link { gap:10px; }
.site-header .logo-mark { width:39px; height:39px; }
.site-header .logo-text { color:#23533c; font-size:25px; letter-spacing:-.06em; line-height:1.1; white-space:nowrap; }
.eco-brand-caption { display:block; font-size:9px; line-height:1.6; font-weight:500; letter-spacing:.025em; margin-top:4px; color:#52614f; }
.site-header .nav-link { color:#3b5141; padding:11px 15px; border-radius:24px; }
.site-header .nav-link.active,.site-header .nav-link:hover { color:#23533c; background:#e7eddf; }
.site-header .nav-link .material-symbols-outlined { display:none; }
.eco-eyebrow { color:#536746; font-size:10px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; line-height:1.6; margin:0 0 20px; }
.eco-eyebrow > span { display:inline-block; width:7px; height:7px; background:#ad622c; border-radius:50%; margin-right:7px; }
.eco-hero { width:min(1240px,calc(100% - 48px)); margin:44px auto 34px; display:grid; grid-template-columns:1fr 1.05fr; gap:45px; align-items:center; }
.eco-hero-copy { padding:22px 0; }
.eco-hero h1 { color:#20392d; font-size:clamp(42px,4.6vw,67px); font-weight:650; line-height:1.09; letter-spacing:-.065em; margin:0 0 26px; }
.eco-hero h1 em { font-style:normal; color:#5b7449; }
.eco-hero-copy > p:not(.eco-eyebrow) { max-width:465px; color:#52614f; font-size:16px; line-height:1.85; margin:0; }
.eco-hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:30px; }
.eco-button { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; padding:15px 22px; min-height:48px; border-radius:28px; background:#23533c; color:#fff; text-decoration:none; font-size:12px; font-weight:700; }
.eco-button:hover { background:#173e2b; color:#fff; }
.eco-text-link { color:#23533c; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.eco-hero-note { display:flex; align-items:center; gap:10px; font-size:11px; color:#52614f; margin-top:36px; }
.eco-hero-note .material-symbols-outlined { font-size:19px; color:#5b7449; }
.eco-hero-image { margin:0; position:relative; overflow:hidden; border-radius:18px; background:#e6edde; }
.eco-hero-image img { width:100%; height:470px; display:block; object-fit:cover; object-position:47% center; }
.eco-hero-image figcaption { display:flex; flex-direction:column; gap:5px; position:absolute; bottom:0; inset-inline:0; background:linear-gradient(transparent,#142f24e8); color:#fff; padding:48px 25px 22px; font-size:10px; letter-spacing:.12em; }
.eco-hero-image figcaption small { font-size:9px; color:#e0e9d9; letter-spacing:0; }
.eco-topics { width:min(1240px,calc(100% - 48px)); margin:0 auto 60px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #d5dece; border-radius:14px; background:#eff2e8; overflow:hidden; }
.eco-topics > a { display:block; padding:26px 22px; border-right:1px solid #d5dece; text-decoration:none; color:#23533c; }
.eco-topics > a:last-child { border:0; }
.eco-topics > a:hover { background:#e3ead8; }
.eco-topics > a > .material-symbols-outlined { display:block; margin-bottom:16px; font-size:24px; color:#60774c; }
.eco-topics h2 { display:flex; justify-content:space-between; gap:8px; font-size:15px; font-weight:750; letter-spacing:-.025em; line-height:1.4; margin:0 0 7px; }
.eco-topics p { font-size:11px; color:#52614f; margin:0; line-height:1.7; }
.eco-archive-head { max-width:1240px; margin:auto; padding:55px 24px 35px; }
.eco-archive-head h1 { max-width:880px; font-size:clamp(34px,4.3vw,58px); line-height:1.13; letter-spacing:-.05em; font-weight:650; margin:0 0 18px; overflow-wrap:anywhere; }
.eco-archive-head > p:last-child { color:#52614f; max-width:660px; font-size:16px; line-height:1.8; }
.eco-journal-heading { width:min(1240px,calc(100% - 48px)); margin:0 auto 26px; display:flex; align-items:end; justify-content:space-between; gap:24px; scroll-margin-top:100px; }
.eco-journal-heading .eco-eyebrow { margin-bottom:8px; }
.eco-journal-heading h2 { margin:0; font-size:33px; font-weight:650; letter-spacing:-.045em; color:#20392d; }
.eco-journal-heading form { display:flex; border:1px solid #acbba2; border-radius:28px; overflow:hidden; background:#fff; }
.eco-journal-heading input { border:0; background:transparent; color:#20392d; padding:13px 18px; min-width:0; font:12px/1.5 Manrope,system-ui,sans-serif; }
.eco-journal-heading input::placeholder { color:#52614f; opacity:1; }
.eco-journal-heading button { border:0; background:transparent; color:#23533c; width:46px; font-size:20px; cursor:pointer; }
.eco-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.filters-bar { max-width:1288px; justify-content:flex-start; flex-wrap:wrap; padding:0 24px 25px; gap:8px; margin:auto; }
.filter-btn { border:1px solid #d5dece; background:transparent; color:#52614f; text-decoration:none; font-size:11px; min-height:38px; padding:10px 15px; }
.filter-btn.active { background:#23533c; border-color:#23533c; color:#fff; }
.blog-container { max-width:1288px; padding-bottom:70px; }
.blog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.blog-card { border:1px solid #d5dece; border-radius:13px; background:#fff; box-shadow:none; min-width:0; }
.blog-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px #213b2810; }
.blog-card::before { display:none; }
.blog-card .card-thumb { height:220px; }
.blog-card .card-body { padding:23px; }
.blog-card .card-category { color:#4a6338; background:#eef3e6; font-size:10px; padding:4px 9px; margin-bottom:14px; }
.blog-card .card-title { color:#20392d; font-size:20px; font-weight:700; line-height:1.4; letter-spacing:-.035em; margin:0 0 12px; display:block; overflow:visible; -webkit-line-clamp:unset; }
.blog-card .card-excerpt { color:#52614f; font-size:12px; line-height:1.8; margin-bottom:20px; }
.blog-card .card-meta { border-top:1px solid #e4eadd; padding-top:14px; margin-top:auto; color:#596851; font-size:10px; flex-wrap:wrap; }
.pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:42px; padding:8px 13px; color:#23533c; border:1px solid #c6d3bb; border-radius:24px; text-decoration:none; background:#fff; }
.pagination .current { background:#23533c; color:#fff; }
.blog-footer { background:#eaf0e2; color:#52614f; border-top:1px solid #d5dece; padding:38px 24px; font-size:12px; }
.blog-footer a { color:#23533c; font-weight:700; }
/* Shared article and utility surfaces retain their existing content hierarchy. */
:is(.article-container,.article-wrap) { max-width:900px !important; padding-inline:24px !important; margin:42px auto 65px !important; }
:is(.article-container,.article-wrap) .article-title { font-size:clamp(32px,4vw,50px) !important; line-height:1.15 !important; font-weight:650 !important; letter-spacing:-.05em; color:#20392d !important; }
:is(.article-meta,.back-link,.breadcrumb) { color:#52614f; }
.article-meta { font-size:12px !important; padding-block:8px 22px; border-bottom:1px solid #d5dece; }
.article-content { color:#304537 !important; font-size:17px !important; line-height:1.85 !important; }
.article-content :is(h2,h3) { color:#20392d; letter-spacing:-.035em; line-height:1.3; scroll-margin-top:105px; }
.article-content h2 { font-size:29px; margin-top:44px; }
.article-content a { color:#23533c; text-underline-offset:4px; }
.article-content table { display:block; max-width:100%; overflow-x:auto; background:#fff; border:1px solid #d5dece; border-radius:8px; }
.article-content :is(td,th) { border-color:#d5dece; color:#304537; }
.article-content th { background:#e7eddf; color:#20392d; }
.article-content img,.featured-image-container img { max-width:100%; height:auto; border-radius:12px; }
.article-content :is(pre,blockquote) { background:#eaf0e2; border-color:#9fb48f; color:#304537; }
.article-content pre { overflow-x:auto; }
:is(.foxy-scorecard-verdict,.foxy-verdict-card,.foxy-problem-solver) { border-color:#d5dece; background:#fff; box-shadow:none; border-radius:12px; }
@media(max-width:1000px) {
 .site-header { padding-inline:24px; } .eco-hero { gap:28px; } .eco-hero h1 { font-size:48px; }
 .eco-hero-image img { height:420px; } .eco-topics > a { padding:22px 16px; }
 .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
 .site-header { height:68px; padding-inline:18px; } .site-header .logo-text { font-size:22px; }
 .eco-hero { width:calc(100% - 36px); grid-template-columns:1fr; gap:22px; margin-top:23px; }
 .eco-hero-copy { padding:12px 0 0; } .eco-hero h1 { font-size:clamp(39px,10vw,58px); }
 .eco-hero-copy > p:not(.eco-eyebrow) { font-size:14px; } .eco-hero-note { margin-top:24px; }
 .eco-hero-image img { height:330px; } .eco-hero-actions { gap:18px; }
 .eco-topics { width:calc(100% - 36px); grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:40px; }
 .eco-topics > a { padding:22px 15px; } .eco-topics > a:nth-child(2) { border-right:0; }
 .eco-topics > a:nth-child(-n+2) { border-bottom:1px solid #d5dece; } .eco-topics h2 { font-size:14px; }
 .eco-journal-heading { width:calc(100% - 36px); display:block; } .eco-journal-heading form { margin-top:22px; }
 .eco-journal-heading input { flex:1; } .eco-journal-heading h2 { font-size:29px; }
 .blog-container { padding-inline:18px; } .blog-grid { grid-template-columns:1fr; gap:22px; }
 .filters-bar { padding-inline:18px; overflow:visible; } .filter-btn { font-size:10px; }
 .eco-archive-head { padding:35px 18px; } .eco-eyebrow { font-size:9px; }
 :is(.article-container,.article-wrap) { padding-inline:18px !important; margin-top:28px !important; }
 .article-content { font-size:16px !important; } .article-content h2 { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }
.site-header .nav-link span:not(.material-symbols-outlined) { display:inline; }
.eco-topic-icon { display:block; width:26px; height:26px; margin-bottom:18px; color:#60774c; }
.blog-card .card-thumb-placeholder { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:24px; background:#eaf0df; color:#526746; font-size:10px; }
.card-thumb-placeholder strong { font-size:28px; font-weight:550; letter-spacing:-.045em; color:#35533e; }
@media(max-width:650px) {
 .site-header { flex-wrap:wrap; height:auto; min-height:68px; overflow:visible; }
 .site-header .header-menu { display:block; margin-left:auto; }
 .site-header .header-menu-toggle { display:flex; align-items:center; justify-content:center; width:44px; height:44px; color:#23533c; }
 .site-header .header-nav { display:none; width:100%; flex-basis:100%; padding:8px 0 16px; flex-direction:column; align-items:stretch; gap:4px; }
 .site-header .header-menu[open] ~ .header-nav { display:flex; }
}
