@import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;600;700&display=swap');

:root{
  --bg:#ffffff;
  --text:#333333;
  --muted:#666666;
  --line:#d9d9d9;

  /* Original Look */
  --green:#0f5b32;
  --yellow:#fcc60c;

  --max: 980px;
  --radius: 10px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Asap", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

a{ color:var(--green); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:var(--max); margin:0 auto; padding:0 14px; }

.skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{
  left:14px; top:14px; width:auto; height:auto; padding:10px 12px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  z-index:9999;
}

/* Header */
header{
  background:#fff;
  border-bottom:3px solid var(--green);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  color:var(--green);
}
.brand img{ height:44px; width:auto; display:block; }
.brand span{ font-size:18px; letter-spacing:.2px; }

/* Nav */
.menu-toggle{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  padding:10px 12px;
  font-weight:700;
  color:var(--green);
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}
.menu-toggle:focus{ outline:3px solid rgba(15,91,50,.18); outline-offset:2px; }

nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
nav a{
  display:inline-block;
  padding:7px 10px;
  border-radius:6px;
  color:var(--green);
  font-weight:600;
}
nav a:hover{
  background:rgba(252,198,12,.25);
  text-decoration:none;
}
nav a.is-active{
  background:var(--green);
  color:#fff;
}

/* Mobile */
@media (max-width: 860px){
  nav{ display:none; padding:0 0 12px 0; }
  nav[data-open="true"]{ display:block; }
  nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    border-top:1px solid var(--line);
    padding-top:12px;
  }
  nav a{ padding:10px 12px; }
}
@media (min-width: 861px){
  .menu-toggle{ display:none; }
}

/* Page head */
.hero{ padding:18px 0 10px 0; }
.crumbs{ font-size:13px; color:var(--muted); }
.hero h1{
  margin:6px 0 0 0;
  font-size:clamp(26px, 3.2vw, 40px);
  line-height:1.15;
  color:var(--green);
}
.hero p{ margin:10px 0 0 0; max-width:70ch; color:var(--muted); }

/* Content */
main{ padding:12px 0 32px 0; }
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.card h2{ margin:0 0 12px 0; font-size:20px; color:var(--green); }

.note{
  border-left:5px solid var(--yellow);
  background:#fffdf2;
  border-radius:8px;
  padding:12px;
  color:var(--text);
}

.grid{ display:grid; gap:12px; }
.grid.two{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:720px){ .grid.two{ grid-template-columns:1fr; } }

.list{ margin:0; padding-left:18px; }

.hero-img{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.hero-img img{ width:100%; height:auto; display:block; }

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:14px 0;
  color:var(--muted);
  font-size:13px;
}
.footer-row{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}