/* =========================
   Base / Resets
   ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#0f172a;
  background:#f8fafc;
  line-height:1.6;
}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.hidden{display:none}
.center{text-align:center}
.meta{color:#64748b}

/* Accessible skip link (hidden until focused) */
.skip-to-content{
  position:absolute; top:-40px; left:0;
  background:#14532d; color:#fff;
  padding:8px 12px; font-weight:700;
  border-radius:4px; z-index:100; transition:top .25s;
}
.skip-to-content:focus{ top:10px }

/* =========================
   Topbar / Navigation
   ========================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid #e2e8f0;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; gap:12px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900}
.brand__logo{
  width:40px; height:40px; object-fit:contain;
  border:1px solid #e2e8f0; border-radius:8px; background:#fff;
}
.nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nav a{
  padding:.45rem .7rem; border-radius:8px;
  text-decoration:none; color:#0f172a;
}
.nav a:hover{ background:rgba(20,83,45,.08) }

/* Make Book stand out in the nav */
.nav .btn--primary{
  color:#fff !important; background:#14532d;
  border:2px solid #0f3d23;
}
.nav .btn--primary:hover{ background:#0f3d23 }

/* =========================
   Hero
   ========================= */
.hero{
  background:linear-gradient(180deg,#fff 0%,#f1f5f9 100%);
  border-bottom:1px solid #e2e8f0;
}
.hero__inner{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:24px; align-items:start; padding:48px 0;
}
h1{
  font-family:Merriweather,Georgia,serif;
  font-size:clamp(28px,5vw,44px);
  line-height:1.2; margin:10px 0;
}
.lede{ color:#475569; max-width:60ch }
.cta{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 }
.ticks{
  list-style:none; margin:0; padding:16px;
  border:1px solid #e2e8f0; border-radius:14px; background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
.ticks li{ position:relative; padding-left:22px; margin:.35rem 0 }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:#14532d; font-weight:900 }

/* =========================
   Sections / Pills
   ========================= */
.section{ padding:56px 0 }
.section h2{ text-align:center; margin:0 0 12px }
.pills{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px;
}
.pills span{
  background:#f1f5f9; border:1px solid #e2e8f0;
  border-radius:999px; padding:.35rem .7rem; font-weight:700; color:#0f172a;
}

/* =========================
   Cards / Grids
   ========================= */
.card{
  background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  padding:16px; box-shadow:0 6px 18px rgba(15,23,42,.05);
}
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.featured{ outline:2px solid rgba(20,83,45,.18) }

/* Lists, pricing labels */
.list{ margin:.3rem 0 0 0; padding-left:18px }
.inline{ list-style:none; padding:0; margin:.4rem 0; display:flex; gap:10px; flex-wrap:wrap }
.price{
  font-weight:900; color:#0f3d23; background:rgba(20,83,45,.08);
  display:inline-block; padding:.2rem .5rem; border-radius:8px;
  border:1px solid rgba(20,83,45,.18);
}
.badge{
  font-size:12px; background:rgba(20,83,45,.08); color:#0f3d23;
  border:1px solid rgba(20,83,45,.18); border-radius:8px; padding:.1rem .4rem; margin-left:6px;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:.7rem 1.1rem; border-radius:10px;
  font-weight:800; border:2px solid transparent; cursor:pointer; text-decoration:none;
}
.btn--primary{
  background:#14532d; color:#fff; border-color:#0f3d23;
  box-shadow:0 4px 14px rgba(20,83,45,.25);
}
.btn--primary:hover{ background:#0f3d23 }
.btn--secondary{ background:#fff; color:#0f172a; border-color:#94a3b8 }
.btn--secondary:hover{ background:#f1f5f9 }
.btn--sm{ min-height:38px; padding:.45rem .8rem }

/* =========================
   LightWidget
   ========================= */
.lightwidget-widget{ width:100%!important; display:block; min-height:420px }

/* =========================
   Steps
   ========================= */
.steps{ list-style:none; padding:16px; border-radius:14px }
.steps li{ margin:.35rem 0 }

/* =========================
   Forms
   ========================= */
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
input[type="text"], input[type="email"], textarea{
  width:100%; padding:.75rem; border:1px solid #cbd5e1; border-radius:10px;
}
textarea{ min-height:140px }
.contact{ text-align:center; margin-top:12px }

/* =========================
   Footer
   ========================= */
.footer{ border-top:1px solid #e2e8f0; color:#475569; text-align:center; padding:28px 0 }

/* =========================================================
   Hamburger Menu (mobile only) — desktop remains unchanged
   ========================================================= */
.nav-toggle{
  display:none;               /* hidden on desktop */
  background:#14532d; color:#fff;
  border:2px solid #0f3d23; border-radius:10px;
  padding:.45rem .7rem; font-weight:800;
  box-shadow:0 4px 10px rgba(20,83,45,.2);
}

/* Ensure desktop nav shows normally */
@media (min-width:769px){ #siteNav{ display:flex !important; } }

/* Mobile menu behavior */
@media (max-width:768px){
  .nav-toggle{ display:inline-flex; align-items:center; }
  #siteNav{ display:none; }

  #siteNav.is-open{
    display:flex; flex-direction:column; gap:.4rem;
    position:absolute; left:16px; right:16px; top:64px;
    background:#fff; border:1px solid #e2e8f0; border-radius:12px;
    padding:.7rem; box-shadow:0 12px 24px rgba(15,23,42,.12); z-index:60;
  }

  #siteNav a{ padding:.7rem .8rem; border-radius:8px }
  #siteNav a:hover{ background:rgba(20,83,45,.06) }
  #siteNav .btn--primary{ width:100%; justify-content:center }
}

/* =========================================================
   Mobile Optimizations (breathing room, stacked CTAs, etc.)
   ========================================================= */
@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; padding:36px 0 }
  .grid-3{ grid-template-columns:1fr }
}

@media (max-width:768px){
  /* Global side padding */
  body, header, .section, .footer{ padding-left:15px; padding-right:15px }

  /* Compact topbar */
  .topbar__inner{ padding:8px 0; gap:8px }
  .brand__logo{ width:34px; height:34px }
  .nav{ justify-content:center; gap:4px }
  .nav a{ padding:.35rem .55rem }
  .nav .btn--primary{ padding:.4rem .7rem }

  /* Hero tweaks */
  .hero{ padding-top:6px; padding-bottom:6px }
  h1{ font-size:2rem; margin:.4rem 0 .6rem }
  .lede{ font-size:1rem; margin-bottom:12px }

  /* Stack CTAs */
  .cta{ flex-direction:column; gap:.7rem }
  .cta .btn{ width:100% }

  /* Ticks soft padding */
  .ticks{ padding:14px; margin-top:10px }

  /* Section spacing */
  .section{ padding:40px 0 }

  /* Form grid single column */
  .grid-2{ grid-template-columns:1fr }
}