@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap");
:root{
  --brand:#2e7d32; /* adjust on request */
  --ink:#1f2937;
  --muted:#6b7280;
  --surface:#ffffff;
  --line:#e5e7eb;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:#fff}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Layout: sidebar on desktop, top bar on small screens */
.app{display:grid;grid-template-columns: 260px 1fr; min-height:100vh}
@media(max-width: 900px){
  .app{grid-template-columns: 1fr}
}

.sidebar{
  position: sticky; top:0; height:100vh;
  background:#fff;border-right:1px solid var(--line);
  padding:20px 18px;display:flex;flex-direction:column;gap:18px
}
@media(max-width:900px){
  .sidebar{height:auto;position:sticky;top:0;border-right:none;border-bottom:1px solid var(--line); z-index:50; background:#ffffffcc; backdrop-filter: blur(6px);}
}

.brand{display:flex;align-items:center;gap:10px}
.brand img{width:48px;height:48px;border-radius:999px}
.brand .name{font-weight:800;font-size:18px}

/* Mobile hamburger */
.bar{display:flex;align-items:center;justify-content:space-between}
.hamburger{display:none;border:1px solid var(--line);padding:10px 12px;border-radius:12px;cursor:pointer;user-select:none}
@media(max-width:900px){
  .hamburger{display:block}
}

/* Nav menu */
.menu{display:flex;flex-direction:column;gap:8px}
.menu > a, .menu > .dropdown > a{
  padding:10px 12px;border-radius:10px;font-weight:700;color:#111827;
}
.menu > a:hover, .menu > .dropdown > a:hover{background:#f3f4f6}

/* Dropdown for Locations */
.dropdown{position:relative}
.dropdown ul{
  list-style:none;position:relative;margin-top:6px;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:none;
}
.dropdown:hover ul{display:block}
.dropdown ul li a{display:block;padding:10px 12px;background:#fff}
.dropdown ul li + li a{border-top:1px solid var(--line)}
.dropdown ul li a:hover{background:#f9fafb}

/* Show dropdown on mobile when expanded menu is open */
.menu.expanded .dropdown ul{display:block}

/* Main content */
.main{padding:28px 20px}
.container{width:min(1060px,92vw)}

/* Hero */
.hero{position:relative;min-height:64vh;display:grid;place-items:center;text-align:center;color:#fff;border-radius:18px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url('assets/banner.webp') center/cover no-repeat;filter:brightness(0.4)}
.hero .content{position:relative;padding:60px 20px}
.hero h1{font-family:'Montserrat',sans-serif;font-size:clamp(30px,5.6vw,52px);font-weight:800;line-height:1.1}
.hero p{margin-top:10px;font-size:17px;opacity:.96}
.btns{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{padding:12px 20px;border-radius:9999px;font-weight:700;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.12);display:inline-block}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.secondary{background:transparent;color:#fff}
.btn:hover{opacity:.96;transform:translateY(-1px) scale(1.01);transition:transform 150ms, opacity 150ms}

/* Sections */
.section{padding:clamp(52px,7vw,80px) 0}
.section h2{font-family:'Montserrat',sans-serif;font-size:24px;font-weight:800;letter-spacing:.2px;margin-bottom:14px}
.section p{margin:10px 0;line-height:1.7}
.grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:800px){.grid{grid-template-columns:1.1fr 1fr;align-items:center}}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.06)}

/* Footer */
.footer{margin-top:40px;background:#111827;color:#e5e7eb;padding:28px 0;font-size:14px}
.footer .menu-row{display:flex;gap:12px;flex-wrap:wrap}
.cookie{text-align:center;padding:10px;font-size:13px;border-top:1px solid #374151;background:#0f172a}

/* Mobile menu expand/collapse */
.menu.collapsible{display:none}
@media(max-width:900px){
  .menu.collapsible{display:flex}
  .menu{display:none}
  .menu.expanded{display:flex}
}