:root{
  --brand:#123a28;            /* dark green */
  --brand-2:#214c37;          /* slightly lighter green for accents */
  --sage:#dfe6df;
  --ink:#0f1b14;
  --paper:#ffffff;
  --muted:#5c6b63;
  --radius:16px;
  --sticky-h:78px;
  --shadow: 0 6px 24px rgba(0,0,0,.1);
  --shadow-soft: 0 2px 10px rgba(0,0,0,.08);
}

/* Reset & base */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:#122019;
  background:
    /* subtle diagonal lines */
    repeating-linear-gradient(135deg,
      rgba(18,58,40,.14) 0, rgba(18,58,40,.14) 2px,
      transparent 2px, transparent 8px),
    /* noise-like dither */
    radial-gradient(circle at 10% 5%, rgba(255,255,255,.03) 0 40%, transparent 41%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,.05) 0 30%, transparent 31%),
    #0f2e1f;
  background-attachment: fixed;
}
/* container */
.wrap{max-width:1180px;margin:0 auto;padding:24px 20px}
/* Header */
.topbar{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(6px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brandline{display:flex; align-items:center; gap:14px; padding:10px 0; flex-wrap:wrap}
.brandline img.logo{width:32px; height:32px; border-radius:999px}
.brand-title{font-family: 'Georgia', 'Times New Roman', serif; font-weight:700; font-size:22px}
.tagline{color:#30473c; font-weight:700;}
.nav{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:8px 0 14px;
}
.nav a, .nav button{
  appearance:none; border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#122019; font-weight:700;
  padding:10px 14px; border-radius:999px; text-decoration:none;
  box-shadow: var(--shadow-soft);
}
.nav a:hover, .nav button:hover{box-shadow: var(--shadow)}
.nav .cta{background:var(--brand); color:#fff; border-color:#0a2519}
/* Hero */
.hero{position:relative; overflow:hidden}
.hero img{width:100%; height:58vh; object-fit:cover; display:block; filter: saturate(1.05) contrast(1.05)}
.hero .hero-text{
  position:absolute; inset:auto 0 12%; text-align:center; color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.hero .hero-text h1{font-family: 'Georgia', 'Times New Roman', serif; font-size:40px; margin:0 0 8px}
.hero .hero-text p{margin:0; opacity:.95}
/* Cards */
.section{margin:40px auto}
.paper{
  background:#fff; border-radius: var(--radius);
  box-shadow: var(--shadow); padding:22px;
}
.grid{display:grid; gap:16px}
.grid.cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width:900px){ .grid.cols-4{grid-template-columns: repeat(2,1fr)} }
@media (max-width:640px){ .grid, .grid.cols-4, .grid.cols-3{grid-template-columns: 1fr} }

.card{background:#fff;border-radius:14px; box-shadow: var(--shadow-soft); padding:18px}
.card h3{margin:0 0 6px}
.card p{margin:0; color:#2a4035}
/* Learn / FAQ */
.learn{display:grid; grid-template-columns: 260px 1fr; gap:24px}
@media (max-width:860px){ .learn{grid-template-columns:1fr} }
.tabs .tab{display:block; width:100%; text-align:left; padding:12px 14px; margin:10px 0;
  border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff; font-weight:800}
.tabs .tab.active{background:var(--brand); color:#fff; border-color:#0b2a1d}
.learn-pane{display:none}
.learn-pane.active{display:grid; grid-template-columns: 1fr 320px; gap:24px; align-items:start}
@media (max-width:900px){ .learn-pane.active{grid-template-columns:1fr} }
.learn-pane .photos{display:grid; gap:12px}
.learn-pane .photos img{width:100%; border-radius:12px; box-shadow:var(--shadow-soft); display:block}
/* Portfolio grid */
.thumbgrid{display:grid; grid-template-columns: repeat(5, 1fr); gap:10px}
.thumbgrid img{width:100%; border-radius:10px; display:block; height:120px; object-fit:cover}
@media (max-width:900px){ .thumbgrid{grid-template-columns: repeat(3,1fr)} }
/* Rustic section wrapper so pattern doesn't cross cards */
.rustic{background:transparent; padding: 26px 0}
.rustic .paper{background:#f9fbf9}
/* Sticky bottom bar */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:999;
  background:rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border-top:1px solid rgba(0,0,0,.12);
}
.sticky .wrap{display:flex; gap:16px; justify-content:center; align-items:center}
.sticky a{
  text-decoration:none; font-weight:800; padding:12px 18px; border-radius:999px;
  border:2px solid var(--brand); color:var(--brand); background:#fff;
}
.sticky a.cta{background:var(--brand); color:#fff; border-color:#0b2a1d}
/* Footer */
.sitefooter{
  background:#0a1f15; color:#fff; padding:26px 0;
  margin-top:40px; border-top:4px solid #0d2a1d;
}
.sitefooter a{color:#9ad3b2; font-weight:800; text-decoration:underline}
.socials{display:flex; gap:14px; margin:10px 0}
.badge{display:inline-flex; gap:8px; align-items:center; background:#192d24; padding:8px 12px; border-radius:999px}
.badge .dot{width:22px;height:22px;border-radius:50%; background:#2b9b5e}
/* Utility */
.center{text-align:center}
.spacer{height:20px}
/* Ensure no overlap with sticky bar */
main{display:block; padding-bottom: calc(var(--sticky-h) + 28px)}

/* Fix small mobile cut-off by increasing sticky height on tiny screens */
@media (max-width:420px){
  :root{ --sticky-h:92px;}
}