:root { --deep:#063f2b; --forest:#075c37; --green:#149b36; --lime:#6bcb43; --ink:#102723; --muted:#5d6c66; --paper:#f6faf7; --line:#dfeae3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:115px; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:#fff; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; }
.container { width:min(1360px,calc(100% - 48px)); margin:auto; }
.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; }
.translate-bar { background:linear-gradient(90deg,#006a3c,#0a9e40); color:#fff; min-height:34px; }
.translate-inner { display:flex; justify-content:flex-end; align-items:center; gap:14px; min-height:34px; font-size:12px; font-weight:600; }
#google_translate_element { min-height:24px; }
#google_translate_element select { max-width:190px; font-size:12px; border:0; border-radius:4px; padding:3px; }
.site-header { position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 2px 16px #102c2114; }
.header-inner { min-height:93px; display:flex; align-items:center; justify-content:space-between; gap:26px; }
.brand { display:block; flex:0 0 auto; width:clamp(235px,29vw,365px); }
.brand img { display:block; width:100%; height:auto; }
.main-nav { display:flex; align-items:center; gap:clamp(12px,1.8vw,27px); font-size:13px; font-weight:700; }
.main-nav > a:not(.nav-cta) { padding:13px 0; white-space:nowrap; }
.main-nav > a:hover { color:var(--green); }
.nav-cta,.button { background:linear-gradient(110deg,#006d39,#41b52e); color:#fff; display:inline-flex; justify-content:center; align-items:center; gap:12px; border-radius:30px; padding:15px 22px; font-size:12px; font-weight:800; box-shadow:0 5px 12px #064f2d25; text-align:center; }
.nav-cta { padding:13px 20px; white-space:nowrap; }
.button:hover,.nav-cta:hover { filter:brightness(1.1); transform:translateY(-1px); }
.menu-toggle { display:none; background:none; border:0; padding:10px; }
.menu-toggle span { display:block; width:27px; height:3px; background:var(--deep); margin:5px 0; border-radius:2px; }
.hero { min-height:440px; display:flex; align-items:center; color:#fff; background:#053c2d url('images/hero_bkgd.png') center center / cover no-repeat; }
.hero-content { padding:56px 0 65px; }
.hero-content > * { max-width:515px; }
.eyebrow { color:#08783d; font-size:12px; font-weight:800; letter-spacing:3px; margin:0 0 10px; }
.eyebrow.light { color:#f2fff6; }
.hero h1 { font-size:clamp(42px,5vw,68px); line-height:0.99; letter-spacing:-2px; margin:10px 0 20px; text-shadow:0 2px 8px #001e1c80; }
.hero h1 em { color:#75d64c; font-style:normal; }
.hero p:not(.eyebrow) { font-size:16px; line-height:1.6; margin:0 0 22px; text-shadow:0 1px 5px #001c1580; }
.button-glow { border:1px solid #b3f77a; box-shadow:0 0 15px #b7f77e70; }
.pillars { background:#fff; border-bottom:1px solid var(--line); }
.pillar-grid { display:grid; grid-template-columns:repeat(5,1fr); padding:23px 0; }
.pillar-grid > div { text-align:center; display:flex; flex-direction:column; gap:5px; border-right:1px solid #d5e0d8; }
.pillar-grid > div:last-child { border:0; }
.pillar-grid span { font-size:30px; line-height:1; color:var(--forest); }
.pillar-grid strong { font-size:13px; }
.pillar-grid small { font-size:12px; color:#41524c; }
.directory { padding:48px 0 62px; background:linear-gradient(#f5faf7,#eef6f1); }
.directory-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:20px; }
h2 { margin:0; font-size:clamp(29px,3vw,42px); letter-spacing:-1px; }
.tools { display:flex; gap:12px; }
.tools input,.tools select { border:1px solid #d4e3da; background:#fff; border-radius:10px; padding:13px 15px; outline-color:#20a64b; color:#294239; }
.tools input { width:260px; }
.filter-tabs { display:flex; gap:7px; overflow-x:auto; padding:0 0 16px; margin-bottom:4px; scrollbar-width:thin; }
.filter-tabs button { border:0; padding:9px 15px; border-radius:22px; background:transparent; color:#33453c; font-size:12px; white-space:nowrap; }
.filter-tabs button:hover { background:#dcece0; }
.filter-tabs button.active { background:linear-gradient(90deg,#006b36,#2ba942); color:#fff; }
.site-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.site-card { background:#fff; border:1px solid #e0e8e3; border-radius:12px; padding:7px; box-shadow:0 5px 16px #143c2510; display:flex; flex-direction:column; min-width:0; transition:transform .2s,box-shadow .2s; }
.site-card:hover { transform:translateY(-5px); box-shadow:0 12px 30px #164b2925; }
.card-media { position:relative; aspect-ratio:1.72; border-radius:7px; overflow:hidden; background:linear-gradient(145deg,#e7f5e8,#d4eadc); }
.card-media img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#11653d; background:radial-gradient(circle at 80% 10%,#c4edc7,transparent 55%),linear-gradient(145deg,#eff9f0,#cfe9d7); text-align:center; padding:15px; }
.placeholder-symbol { font-size:48px; line-height:1; }
.placeholder span:last-child { font-weight:800; letter-spacing:1.5px; font-size:12px; }
.card-body { padding:13px 9px 5px; display:flex; flex:1; flex-direction:column; }
.card-body h3 { font-size:15px; margin:0 0 6px; }
.card-body p { font-size:13px; color:var(--muted); line-height:1.4; margin:0 0 15px; flex:1; }
.card-action { display:flex; align-items:center; justify-content:center; width:100%; padding:10px 12px; border-radius:24px; background:linear-gradient(90deg,#006d38,#4cb63a); color:white; font-size:11px; font-weight:800; }
.card-action.pending { background:linear-gradient(#f0f1f2,#d9dcdf); color:#26302d; }
.card-action.pending::before { content:'⚒'; margin-right:8px; }
.empty-state { text-align:center; padding:35px; color:var(--muted); }
.about { padding:65px 0; text-align:center; background:#fff; }
.about-inner { max-width:800px; }
.about p:not(.eyebrow) { line-height:1.7; color:var(--muted); }
.closing { min-height:230px; background:#d7ecd8 url('images/footer_bkgd.png') center / cover no-repeat; display:flex; align-items:center; }
.closing-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:35px 0; }
.closing-inner > div:first-child { text-align:center; flex:1; }
.closing h2 { font-size:clamp(24px,2.5vw,36px); margin:0 0 17px; }
.stats { display:flex; gap:28px; }
.stats > div { display:flex; align-items:center; flex-direction:column; min-width:82px; text-align:center; }
.stats span { background:#075437; color:#fff; width:47px; height:47px; border-radius:50%; display:grid; place-items:center; font-size:24px; }
.stats strong { font-size:25px; margin-top:6px; }
.stats small { font-size:11px; font-weight:800; }
.site-footer { background:#063e2b; color:#e7f3ea; font-size:12px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 0; }
.footer-inner a:hover { text-decoration:underline; }
@media (max-width:1050px) { .header-inner { min-height:78px; } .brand { width:260px; } .main-nav { gap:12px; font-size:12px; } .nav-cta { display:none; } .site-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .container { width:min(100% - 30px,1360px); } .header-inner { min-height:75px; } .brand { width:min(260px,72vw); } .menu-toggle { display:block; } .main-nav { display:none; position:absolute; top:100%; left:0; right:0; padding:12px 20px 20px; background:white; box-shadow:0 12px 20px #0002; flex-direction:column; align-items:stretch; } .main-nav.open { display:flex; } .main-nav a { padding:11px !important; } .nav-cta { display:inline-flex; } .hero { min-height:460px; background-position:64% center; } .hero-content { padding:48px 0; } .hero-content > * { max-width:430px; } .hero h1 { font-size:clamp(38px,8vw,56px); } .hero p:not(.eyebrow) { font-size:14px; } .pillar-grid { grid-template-columns:repeat(3,1fr); gap:18px 0; } .pillar-grid > div:nth-child(3) { border:0; } .directory-heading { align-items:stretch; flex-direction:column; } .tools input { flex:1; width:0; } .site-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .closing-inner { flex-direction:column; } .stats { justify-content:center; } .footer-inner { flex-wrap:wrap; justify-content:center; text-align:center; } }
@media (max-width:480px) { .translate-inner { justify-content:center; } .translate-inner > span { display:none; } .hero { background-position:66% center; } .hero-content { background:linear-gradient(90deg,#002b20b0,#002b2044,transparent); } .pillar-grid { grid-template-columns:repeat(2,1fr); } .pillar-grid > div:nth-child(3) { border-right:1px solid #d5e0d8; } .pillar-grid > div:nth-child(even) { border:0; } .tools { flex-direction:column; } .tools input { width:100%; flex:auto; } .site-grid { grid-template-columns:1fr; } .card-media { aspect-ratio:1.9; } .stats { gap:12px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .site-card,.button { transition:none; } }