:root{
  --brand:#16a34a;
  --bg:#ffffff;
  --paper:#ffffff;
  --paper-2:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --shadow:0 10px 30px rgba(2,8,23,.08);
  --radius:18px;
  --ring:0 0 0 4px rgba(34,197,94,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:1100px; margin-inline:auto; padding: clamp(16px, 2.2vw, 32px); }

/* TwoStack topbar */
.twostack-bar{
  position: relative; z-index: 80; overflow: visible;
  background:#fff; border-bottom:1px solid #00000010;
}
.ts-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.ts-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.ts-logo{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  font-weight:800; background:linear-gradient(140deg, #b5c7ff, #c7ffd6);
  color:#111; border:1px solid #00000010; box-shadow:var(--shadow);
}
.ts-name{ font-weight:800; color:#16a34a; }
.ts-nav{ display:flex; align-items:center; gap:16px; }
.ts-nav a{ text-decoration:none; color:inherit; font-weight:600; }
.ts-cta{
  background:#16a34a; color:#fff !important; padding:8px 12px; border-radius:10px;
  box-shadow:var(--shadow);
}

/* dropdown */
.ts-dropdown{ position:relative; }
.ts-dropdown summary{
  list-style:none; cursor:pointer; font-weight:600;
}
.ts-dropdown[open] summary{ opacity:.9; }
.ts-dropdown ul{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid #00000010; border-radius:12px;
  padding:8px; margin:0; min-width:200px; box-shadow:var(--shadow);
  display:grid; gap:6px; z-index:100;
}
.ts-dropdown li{ list-style:none; }
.ts-dropdown a{
  display:block; padding:8px 10px; border-radius:8px;
}
.ts-dropdown a:hover{ background:#f9fafb; }
.ts-dropdown a[aria-current="page"]{
  background:#f3f4f6; font-weight:700;
}

/* Site Header */
header.site{ padding: 16px 0; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; }
.brand .logo{ width:40px; aspect-ratio:1/1; border-radius:12px; background:conic-gradient(from 180deg, var(--brand), #22c55e); box-shadow:var(--shadow); }
nav ul{ display:flex; list-style:none; gap:18px; padding:0; margin:0; }
nav a{ font-weight:600; color:#0b3b17; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--brand); color:#fff; padding:.9rem 1.1rem; border-radius:8px;
  border:0; font-weight:700; cursor:pointer; box-shadow:0 4px 14px rgba(11,59,23,.2);
}
.btn:hover{ filter:brightness(1.05); }
.btn.outline{ background:#fff; color:var(--brand); border:2px solid var(--brand); box-shadow:none; }

/* Hero */
.hero{ padding:64px 0; }
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(16px, 3vw, 48px);
  align-items:center;
}
.hero h1{ font-size:clamp(28px, 5vw, 52px); line-height:1.05; margin:0 0 12px; }
.hero p.lead{ font-size:clamp(16px, 2.1vw, 22px); color:var(--muted); margin:0 0 24px; }
.hero-card{
  background:var(--paper);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  border:1px solid #e2e8f0;
}
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.badge{
  background:#e8f5ec;
  color:#0b3b17;
  padding:.45rem .7rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid #cde9d6;
}

/* Sections */
h1,h2,h3{ font-family:Georgia, Cambria, "Times New Roman", serif; font-weight:700; letter-spacing:.1px; }
.portrait{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  border:1px solid #e2e8f0;
  box-shadow:var(--shadow);
}
section{ padding:56px 0; }
h2{ font-size:clamp(22px, 3.4vw, 36px); margin:0 0 18px; }
p{ line-height:1.7; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  background:var(--paper);
  border-radius:var(--radius);
  padding:22px;
  border:1px solid #e2e8f0;
  box-shadow:var(--shadow);
}
.card h3{ margin-top:0; }

/* Highlight band */
.band{
  background:#103a1f;
  color:#dcfce7;
  border-top:1px solid #0e301a;
  border-bottom:1px solid #0e301a;
}
.band .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
}
.band h3{ margin:0; }

/* Testimonials */
.testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
blockquote{ margin:0; font-size:1rem; }
blockquote p{ margin:0 0 10px; }
cite{ color:var(--muted); }

/* FAQ */
details{
  background:var(--paper);
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:16px;
  box-shadow:var(--shadow);
}
details + details{ margin-top:12px; }
summary{ cursor:pointer; font-weight:700; }

/* Contact */
form{ display:grid; gap:12px; }
input, textarea, select{
  padding:12px 14px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  font:inherit;
}
input:focus, textarea:focus, select:focus{
  outline:none;
  box-shadow:var(--ring);
  border-color:#14b8a6;
}
.cols{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }

/* Footer */
footer{ background:var(--paper-2); border-top:1px solid #e2e8f0; }
.footgrid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; }
small, .legal a{ color:var(--muted); }

/* Responsive */
@media (max-width:900px){
  .hero-grid, .band .container, .grid-3, .testimonials, .footgrid{
    grid-template-columns:1fr;
  }
  nav ul{ display:none; }
}

/* Cookie Banner */
.cookie-banner{
  position:fixed;
  inset:auto 16px 16px 16px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  box-shadow:var(--shadow);
  border-radius:12px;
  padding:14px;
}

/* Utility */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Stacking & sticky behavior for navbars */
header.site{ position: sticky; top: 0; z-index: 60; background:#fff; border-bottom:1px solid #00000010; }
.twostack-bar{ overflow: visible; }

/* Ensure dropdown above site header */
.ts-dropdown ul{ z-index: 1000; }