/* =========================================================================
   Need Infotech — Design System
   Glassmorphism / sage-green. Mobile-first, progressively enhanced.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — self-hosted (public/fonts) instead of fonts.googleapis.com.
   Removes two extra DNS+TLS handshakes and a render-blocking cross-origin
   stylesheet from the critical path, and keeps EU visitors' IPs off Google.

   Both families are variable, so one file per subset covers every weight.
   Only latin + latin-ext are shipped; unicode-range means latin-ext is
   fetched only if a page actually uses those codepoints.

   Newsreader italic is pinned to wght 500 because the only italic on the
   site is .italic-accent inside .h1/.h2, which are 500.
   ------------------------------------------------------------------------- */
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#1d2b22;
  --ink-2:#21342a;
  --ink-3:#22372a;
  --green:#4f7256;
  --green-2:#5b8163;
  --green-3:#6e9374;
  --green-soft:#7aa07f;
  --muted:#52685a;
  --muted-2:#5d7163;
  --muted-3:#7c8e80;
  --kicker:#7c8e80;
  --line:rgba(110,147,116,.16);
  --line-2:rgba(110,147,116,.2);
  --danger:#b06a6a;
  --bg:#eef3ec;

  --glass:rgba(255,255,255,.52);
  --glass-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.75);

  --grad: linear-gradient(135deg,#7aa07f,#4f7256);
  --radius-sm:11px;
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:28px;

  --shadow-card:0 14px 38px -22px rgba(45,74,52,.5), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-lg:0 22px 56px -26px rgba(45,74,52,.55), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-btn:0 16px 38px -12px rgba(63,96,71,.7), inset 0 1px 0 rgba(255,255,255,.35);

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --maxw:1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.55;
}
::selection{ background:#bcd4c0; color:#22372a; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:6px; }

/* ---------- page background field ---------- */
.page-bg{
  position:relative;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(1100px 720px at 14% -6%, rgba(150,184,156,.55), transparent 60%),
    radial-gradient(960px 640px at 92% 4%, rgba(120,160,128,.42), transparent 58%),
    radial-gradient(1200px 900px at 50% 120%, rgba(168,196,172,.5), transparent 62%),
    linear-gradient(180deg,#f3f7f1 0%, #eaf1e8 50%, #eef3ec 100%);
}
.ambient{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ambient span{ position:absolute; border-radius:50%; filter:blur(8px); will-change:transform; }
.ambient .b1{ top:480px; left:-120px; width:380px; height:380px; background:radial-gradient(circle at 32% 30%, rgba(122,162,130,.4), transparent 70%); animation:floatB 17s ease-in-out infinite; }
.ambient .b2{ top:1400px; right:-100px; width:340px; height:340px; background:radial-gradient(circle at 60% 40%, rgba(96,138,106,.32), transparent 70%); animation:floatC 21s ease-in-out infinite; }
.ambient .b3{ top:2600px; left:6%; width:300px; height:300px; background:radial-gradient(circle at 40% 40%, rgba(140,178,146,.34), transparent 72%); animation:floatA 19s ease-in-out infinite; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:20px; padding-right:20px; }
.container-sm{ max-width:880px; }
.container-md{ max-width:1100px; }
.section{ position:relative; z-index:2; padding-top:48px; padding-bottom:48px; }
.section-tight{ padding-top:28px; padding-bottom:28px; }
main{ position:relative; z-index:2; }

/* ---------- typography ---------- */
.kicker{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--kicker); margin-bottom:12px; }
.h1{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,7vw,76px); line-height:1.05; letter-spacing:-.02em; color:var(--ink-2); }
.h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,5vw,46px); line-height:1.1; letter-spacing:-.015em; color:var(--ink-2); }
.h3{ font-family:var(--serif); font-weight:500; font-size:clamp(20px,3vw,25px); color:var(--ink-2); }
.serif{ font-family:var(--serif); font-weight:500; }
.italic-accent{ font-style:italic; color:var(--green-2); }
.lead{ font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:#4a5f4f; }
.muted{ color:var(--muted); }
.center{ text-align:center; }
.section-head{ max-width:700px; margin:0 auto 36px; }
.section-head.center{ text-align:center; }

/* ---------- scroll progress bar ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1200; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#8fb395,#4f7256); box-shadow:0 1px 8px rgba(63,96,71,.4); will-change:transform; }

/* ---------- floating contact stack ----------
   Icon-only at rest on every device, expanding to a labelled pill.
   Pointer devices: on hover. Touch devices: on the first tap, with the second
   tap running the action — see the (hover: none) block below. */
.fab-stack{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:1100; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.fab{ display:flex; align-items:center; height:52px; border-radius:26px 0 0 26px; overflow:hidden;
  background:linear-gradient(135deg,#7ba081,#4f7256); color:#fff; text-decoration:none; white-space:nowrap;
  box-shadow:-6px 12px 30px -12px rgba(63,96,71,.65); transition:box-shadow .25s ease, transform .25s ease;
  /* reset native <button> chrome so the button matches the <a> fab */
  border:0; margin:0; padding:0; cursor:pointer; font-family:inherit; -webkit-appearance:none; appearance:none; }
.fab-icon{ width:52px; height:52px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.fab-label{ max-width:0; opacity:0; overflow:hidden; font-size:14px; font-weight:600; line-height:1;
  transition:max-width .3s ease, opacity .22s ease, padding .3s ease; padding-right:0; }

/* Hover expansion is gated behind a real pointer. Without this gate, mobile
   browsers latch :hover onto the last-tapped element, leaving the pill stuck
   open over the page until the visitor taps somewhere else. */
@media (hover: hover) and (pointer: fine){
  .fab:hover{ transform:translateX(-2px); box-shadow:-10px 16px 40px -12px rgba(63,96,71,.8); }
  .fab:hover .fab-label{ max-width:180px; opacity:1; padding-right:20px; }
}

/* Keyboard focus expands on every device. */
.fab:focus-visible{ transform:translateX(-2px); box-shadow:-10px 16px 40px -12px rgba(63,96,71,.8); }
.fab:focus-visible .fab-label{ max-width:180px; opacity:1; padding-right:20px; }

/* Touch: same look and timing as the desktop hover state, driven by tap
   instead. Icon-only at rest; the first tap adds .expanded (see initFab in
   app.js) — the tap stands in for the hover — the second runs the action, and
   the pill collapses itself afterwards. Values below deliberately mirror the
   (hover: hover) block above so both platforms render identically. */
@media (hover: none){
  .fab:active{ transform:translateX(-2px); }

  /* 0,4,0, so it outranks the :hover and :focus-visible expansions above.
     Touch browsers latch :hover onto the last-tapped element and restore focus
     to a target="_blank" link when the visitor returns from the new tab —
     without this the chat pill stays stuck open. */
  .fab-stack .fab:not(.expanded) .fab-label{ max-width:0; opacity:0; padding-right:0; }

  .fab-stack .fab.expanded{ transform:translateX(-2px); box-shadow:-10px 16px 40px -12px rgba(63,96,71,.8); }
  .fab-stack .fab.expanded .fab-label{ max-width:180px; opacity:1; padding-right:20px; }
}

@media (hover: none) and (prefers-reduced-motion: reduce){
  .fab-label{ transition:none; }
}

@media (max-width:560px){
  .fab{ height:46px; border-radius:23px 0 0 23px; }
  .fab-icon{ width:46px; height:46px; }
  .fab-label{ font-size:13px; }
  .fab-stack{ gap:10px; }
}

/* ---------- back to top ---------- */
.back-to-top{ position:fixed; right:22px; bottom:22px; z-index:1100; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; border:1px solid rgba(255,255,255,.45);
  background:var(--grad); box-shadow:0 14px 30px -10px rgba(63,96,71,.7), inset 0 1px 0 rgba(255,255,255,.35);
  opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease, visibility .3s; }
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -10px rgba(63,96,71,.8), inset 0 1px 0 rgba(255,255,255,.4); }
@media (max-width:560px){ .back-to-top{ right:14px; bottom:14px; width:44px; height:44px; } }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden;
  padding:14px 26px; border-radius:14px; font-size:15px; font-weight:600; cursor:pointer; border:0;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease; }
.btn:hover{ box-shadow:0 22px 46px -14px rgba(63,96,71,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-ghost:hover{ transform:translateY(-2px); }
.btn-primary{ color:#fff; background:var(--grad); box-shadow:var(--shadow-btn); }
.btn-ghost{ color:#34503b; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.8); box-shadow:0 10px 28px -14px rgba(54,86,62,.4); }
.btn-sm{ padding:11px 18px; font-size:14px; border-radius:12px; }
.btn-block{ width:100%; }
.btn .sheen{ position:absolute; top:0; left:0; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:sheen 4.5s ease-in-out infinite; pointer-events:none; }

/* ---------- glass surfaces ---------- */
.glass{ background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); border:1px solid var(--glass-border); box-shadow:var(--shadow-card); }
.card{ border-radius:var(--radius-lg); padding:24px; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); border:1px solid rgba(255,255,255,.72); box-shadow:var(--shadow-card); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; }
.card-strong{ background:linear-gradient(150deg, rgba(255,255,255,.62), rgba(236,244,237,.42)); box-shadow:var(--shadow-lg); }

/* hover lift on cards (tilt cards manage their own transform via JS) */
.card:hover{ transform:translateY(-6px); box-shadow:0 32px 62px -26px rgba(45,74,52,.62), inset 0 1px 0 rgba(255,255,255,.75); border-color:rgba(255,255,255,.92); }
.card[data-tilt]:hover{ box-shadow:0 32px 62px -26px rgba(45,74,52,.62), inset 0 1px 0 rgba(255,255,255,.75); }
.card img:not(.avatar){ transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.card:hover img:not(.avatar){ transform:scale(1.05); }
.card .cover svg{ transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.card:hover .cover svg{ transform:scale(1.06); }

.badge{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:100px; font-size:13px; font-weight:600; color:#3c5544;
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.7); box-shadow:0 6px 20px -10px rgba(54,86,62,.4); }
.pill{ padding:10px 18px; border-radius:12px; font-size:14px; font-weight:600; color:#3e5645; background:rgba(255,255,255,.46); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.7); }
.chip{ padding:6px 12px; border-radius:9px; font-size:12.5px; font-weight:500; color:#425a49; background:rgba(255,255,255,.6); border:1px solid var(--line-2); }
.dot{ position:relative; display:inline-flex; width:8px; height:8px; }
.dot::before{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--green-3); animation:pulseRing 2.4s ease-out infinite; }
.dot::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--green-2); }

/* ---------- testimonials ---------- */
.testimonial{ display:flex; flex-direction:column; gap:16px; height:100%; }
.testimonial .quote{ font-size:15px; line-height:1.6; color:#3a4f41; flex:1; }
.testimonial .who{ display:flex; align-items:center; gap:12px; }
.testimonial .avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:2px solid rgba(255,255,255,.85); box-shadow:0 6px 16px -8px rgba(45,74,52,.5); background:#dceadd; }
.testimonial .name{ font-size:14.5px; font-weight:600; color:var(--ink-3); }
.testimonial .role{ font-size:12.5px; color:var(--muted-2); }
.stars{ display:flex; gap:2px; color:#e0a93b; }

/* ---------- icon tiles ---------- */
.icon-tile{ width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--grad); color:#fff; box-shadow:0 10px 22px -10px rgba(63,96,71,.65); }
.icon-soft{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:rgba(110,147,116,.16); color:var(--green); }

/* ---------- grids (mobile-first: 1 col) ---------- */
.grid{ display:grid; gap:16px; grid-template-columns:1fr; }
.grid.gap-lg{ gap:20px; }

/* ---------- checklist / feature ---------- */
.check{ display:flex; align-items:flex-start; gap:14px; }
.check svg{ flex:0 0 auto; margin-top:1px; }

/* ---------- metrics ---------- */
.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:6px; border-radius:var(--radius-xl);
  background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-lg); }
.metrics .metric{ padding:18px 12px; text-align:center; }
.metric .num{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,5vw,40px); line-height:1; color:#3f6047; }
.metric .lbl{ margin-top:6px; font-size:12.5px; font-weight:500; color:var(--muted-2); }

/* ---------- process steps ---------- */
.steps{ position:relative; display:grid; gap:24px; grid-template-columns:1fr; }
.steps .line{ display:none; }
.step{ position:relative; text-align:center; }
.step .n{ width:72px; height:72px; margin:0 auto 14px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:24px; color:#3f6047; background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.85); box-shadow:0 14px 32px -16px rgba(45,74,52,.55), inset 0 1px 0 rgba(255,255,255,.7); }
.step .t{ font-size:15px; font-weight:600; color:var(--ink-3); margin-bottom:5px; }
.step .d{ font-size:13px; line-height:1.45; color:var(--muted-2); }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:12px; }
details.faq-item{ border-radius:var(--radius); overflow:hidden; background:rgba(255,255,255,.52); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.72); box-shadow:0 12px 32px -24px rgba(45,74,52,.5); }
details.faq-item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; font-size:16px; font-weight:600; color:var(--ink-3); }
details.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-chev{ transition:transform .28s cubic-bezier(.16,.84,.27,1); flex:0 0 auto; }
details[open] .faq-chev{ transform:rotate(180deg); }
.faq-body{ padding:0 20px 20px; font-size:14.5px; line-height:1.6; color:var(--muted); }

/* ---------- pagination ---------- */
.pagination{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:18px; }
.pagination-info{ font-size:13px; color:var(--muted-2); }
.pagination-links{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pagination .page-btn{ min-width:36px; height:36px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:14px; font-weight:600; color:#34503b; background:rgba(255,255,255,.6); border:1px solid var(--line-2); transition:background .2s ease; }
.pagination .page-btn:hover{ background:rgba(255,255,255,.95); }
.pagination .page-btn.active{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 8px 18px -10px rgba(63,96,71,.6); }
.pagination .page-btn.disabled{ opacity:.45; pointer-events:none; }
.pagination .page-ellipsis{ padding:0 4px; color:var(--muted-2); }

/* ---------- filter pills ---------- */
.filter-pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:32px; }
.filter-pill{ padding:10px 20px; border-radius:100px; font-size:14px; font-weight:600; cursor:pointer; color:#34503b;
  background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.8);
  box-shadow:0 8px 22px -14px rgba(54,86,62,.4); transition:transform .25s ease, background .25s ease, color .25s ease; }
.filter-pill:hover{ transform:translateY(-2px); }
.filter-pill.active{ color:#fff; background:var(--grad); box-shadow:var(--shadow-btn); }
.cs-hidden{ display:none !important; }

/* ---------- breadcrumb ---------- */
.crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; font-weight:500; color:#6e8470; margin-bottom:20px; }
.crumbs a{ color:#6e8470; }
.crumbs .sep{ color:#9bb39f; }
.crumbs .cur{ color:#3c5544; font-weight:600; }

/* =========================================================================
   NAVBAR
   ========================================================================= */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; justify-content:center; padding:12px 16px; }
.nav{ width:100%; max-width:1280px; display:flex; align-items:center; gap:14px; padding:10px 12px 10px 16px;
  background:rgba(255,255,255,.58); -webkit-backdrop-filter:blur(20px) saturate(165%); backdrop-filter:blur(20px) saturate(165%);
  border:1px solid rgba(255,255,255,.7); border-radius:18px;
  box-shadow:0 12px 40px -16px rgba(54,86,62,.4), inset 0 1px 0 rgba(255,255,255,.65);
  transition:background .3s ease, box-shadow .3s ease; }
.nav.scrolled{ background:rgba(255,255,255,.78); box-shadow:0 16px 50px -18px rgba(54,86,62,.5), inset 0 1px 0 rgba(255,255,255,.7); }
.nav-logo{ display:flex; align-items:center; flex:0 0 auto; }
.nav-logo img{ height:28px; width:auto; }
.nav-menu{ display:none; flex:1; align-items:center; justify-content:center; gap:2px; }
.nav-link{ padding:9px 12px; border-radius:11px; font-size:14.5px; font-weight:500; color:#2c4334; white-space:nowrap; }
.nav-link:hover{ background:rgba(255,255,255,.5); }
.nav-cta{ flex:0 0 auto; }
.nav-cta-btn{ display:none; }

.nav-group{ position:relative; }
.nav-group > button{ display:flex; align-items:center; gap:6px; padding:9px 12px; border:0; background:transparent; cursor:pointer; border-radius:11px; font-size:14.5px; font-weight:500; color:#2c4334; }
.nav-group > button:hover{ background:rgba(255,255,255,.5); }
.nav-panel{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px); padding:16px; z-index:1001;
  background:#f3f7f1; /* solid fallback so text stays legible without backdrop-filter */
  border:1px solid rgba(110,147,116,.22); border-radius:20px; box-shadow:0 26px 60px -22px rgba(40,70,48,.55), inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s ease, transform .26s ease, visibility .26s; }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav-panel{ background:rgba(248,251,247,.96); -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%); }
}
.nav-group:hover .nav-panel,.nav-group:focus-within .nav-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.panel-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:440px; }
.panel-grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; width:860px; }
.panel-grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; width:400px; }
.panel-col{ width:260px; }
.panel-card{ display:block; padding:12px 13px; border-radius:13px; background:rgba(255,255,255,.5); }
.panel-card:hover{ background:rgba(255,255,255,.8); }
.panel-card .t{ font-weight:600; font-size:14px; color:var(--ink-3); }
.panel-card .d{ font-size:12px; color:var(--muted-2); margin-top:2px; }
.panel-head{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-3); margin-bottom:10px; }
.panel-link{ display:block; font-size:13px; color:#3a4f41; padding:5px 0; }
.panel-link:hover{ color:var(--green); }
.panel-chip{ display:block; padding:9px 11px; border-radius:11px; font-size:13px; font-weight:500; color:#33483b; background:rgba(255,255,255,.5); }
.panel-chip:hover{ background:rgba(255,255,255,.8); }
.panel-row{ display:block; padding:10px 12px; border-radius:12px; font-size:13.5px; font-weight:500; color:#33483b; }
.panel-row:hover{ background:rgba(255,255,255,.6); }

/* mobile toggle */
.nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.7); border-radius:12px; background:rgba(255,255,255,.5); cursor:pointer; margin-left:auto; }
.nav-toggle span{ width:18px; height:2px; background:#2c4334; border-radius:2px; transition:.3s; }

/* mobile drawer */
.mobile-drawer{ position:fixed; inset:0; z-index:1100; display:none; }
.mobile-drawer.open{ display:block; }
.mobile-drawer .scrim{ position:absolute; inset:0; background:rgba(33,52,42,.4); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.mobile-panel{ position:absolute; top:0; right:0; bottom:0; width:min(86vw,360px); overflow-y:auto; padding:20px;
  background:rgba(244,248,242,.97); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); border-left:1px solid rgba(255,255,255,.7);
  box-shadow:-20px 0 60px -20px rgba(40,70,48,.4); }
.mobile-panel .m-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mobile-panel .m-close{ width:40px; height:40px; border-radius:12px; border:1px solid var(--line-2); background:rgba(255,255,255,.6); font-size:20px; cursor:pointer; color:#2c4334; }
.m-acc{ border-bottom:1px solid var(--line); }
.m-acc > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:14px 4px; font-size:16px; font-weight:600; color:var(--ink-3); }
.m-acc > summary::-webkit-details-marker{ display:none; }
.m-acc[open] .faq-chev{ transform:rotate(180deg); }
.m-sub{ padding:0 4px 12px; display:flex; flex-direction:column; gap:2px; }
.m-sub a{ padding:9px 10px; border-radius:10px; font-size:14px; color:#3a4f41; }
.m-sub a:hover{ background:rgba(255,255,255,.6); }
.m-sub .grp{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-3); margin:8px 0 2px; padding:0 10px; }
.m-flat{ display:block; padding:14px 4px; font-size:16px; font-weight:600; color:var(--ink-3); border-bottom:1px solid var(--line); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:128px 20px 50px; text-align:center; }
.hero-split{ text-align:left; }
/* Single column below 768px (the two-column rule lives in the tablet block).
   Declaring the grid here rather than only at ≥768px is what keeps the second
   column — the contact form card, the page-hero aside — from butting straight
   up against the content above it once the layout stacks. */
.hero-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
.why-grid{ display:grid; grid-template-columns:1fr; gap:34px; }

/* ---------- long-form article / blog body ---------- */
.article-body h2{ font-family:var(--serif,'Newsreader',serif); font-size:clamp(22px,3vw,28px); color:var(--ink-3); margin:34px 0 12px; line-height:1.25; }
.article-body h3{ font-size:19px; font-weight:600; color:var(--ink-3); margin:24px 0 8px; }
.article-body p{ margin:0 0 16px; }
.article-body ul, .article-body ol{ margin:0 0 18px; padding-left:22px; }
.article-body li{ margin-bottom:8px; }
.article-body a{ color:var(--green,#4f7256); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.article-body strong{ color:var(--ink-3); }
.article-body .table-scroll{ overflow-x:auto; margin:0 0 22px; }
.article-body table{ width:100%; border-collapse:collapse; font-size:15px; }
.article-body th, .article-body td{ border:1px solid rgba(110,147,116,.28); padding:10px 12px; text-align:left; vertical-align:top; }
.article-body thead th{ background:rgba(110,147,116,.12); color:var(--ink-3); font-weight:600; white-space:nowrap; }
.article-body pre{ background:#132018; color:#e6efe8; padding:16px 18px; border-radius:12px; overflow-x:auto; font-size:13px; line-height:1.6; margin:0 0 20px; }
.article-body pre code{ background:none; padding:0; color:inherit; }
.article-body code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.article-body :not(pre) > code{ background:rgba(110,147,116,.14); color:#34503b; padding:2px 6px; border-radius:6px; font-size:.9em; }

/* floating glass blobs that drift + react to the pointer */
.hero-blob{ display:none; position:absolute; pointer-events:none; z-index:0;
  transform:translate(var(--mx,0),var(--my,0)); transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.hero-blob .shape{ width:100%; height:100%; border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:inset 0 6px 30px rgba(255,255,255,.5); }
.hero-blob.hb1{ top:90px; left:4%; width:220px; height:220px; }
.hero-blob.hb1 .shape{ border-radius:42% 58% 60% 40%/45% 42% 58% 55%; background:linear-gradient(135deg, rgba(170,200,176,.6), rgba(110,147,116,.3)); animation:floatA 16s ease-in-out infinite, hueShift 12s ease-in-out infinite; }
.hero-blob.hb2{ top:170px; right:5%; width:170px; height:170px; }
.hero-blob.hb2 .shape{ border-radius:58% 42% 45% 55%/52% 58% 42% 48%; background:linear-gradient(135deg, rgba(140,180,148,.5), rgba(90,130,100,.28)); animation:floatB 19s ease-in-out infinite; }

[data-tilt]{ transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease; will-change:transform; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ position:relative; z-index:2; border-top:1px solid rgba(110,147,116,.18); background:rgba(255,255,255,.42); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); margin-top:30px; }
.footer-grid{ max-width:var(--maxw); margin:0 auto; padding:48px 20px 24px; display:grid; grid-template-columns:1fr; gap:30px; }
.footer-logo{ height:34px; width:auto; }
.footer-tagline{ font-size:14px; line-height:1.65; color:var(--muted); max-width:320px; margin:16px 0 18px; }
.footer-contact{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.5; color:var(--muted-2); }
.footer-contact li svg{ flex:0 0 auto; margin-top:1px; color:var(--green-3); }
.footer-contact a{ color:var(--muted-2); transition:color .2s ease; }
.footer-contact a:hover{ color:var(--green); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.65); border:1px solid var(--glass-border); color:var(--green);
  box-shadow:0 6px 16px -10px rgba(54,86,62,.45); transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.footer-social a:hover{ transform:translateY(-3px); background:var(--grad); color:#fff; box-shadow:0 14px 26px -10px rgba(63,96,71,.6); }
.footer-col .ttl{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-3); margin-bottom:14px; }
.footer-col a{ display:block; font-size:13.5px; color:var(--muted); padding:6px 0; }
.footer-col a:hover{ color:var(--green); }
.footer-bottom{ max-width:var(--maxw); margin:0 auto; padding:20px; border-top:1px solid rgba(110,147,116,.14); display:flex; flex-direction:column; gap:12px; font-size:12.5px; color:var(--muted-3); }
.footer-bottom .links{ display:flex; gap:18px; flex-wrap:wrap; }

/* =========================================================================
   FORMS
   ========================================================================= */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:#3a4f41; margin-bottom:6px; }
.input,.textarea,.select{ width:100%; padding:13px 15px; border-radius:13px; border:1px solid var(--line-2); background:rgba(255,255,255,.7); font-family:inherit; font-size:15px; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--green-3); box-shadow:0 0 0 3px rgba(110,147,116,.18); }
.textarea{ min-height:130px; resize:vertical; }

/* iOS Safari styles date/time inputs natively rather than as text fields: it
   centres the value, sizes the control to its own content (so it overflows the
   rounded border) and drops the padding above. Normalise them back to match
   the sibling text inputs. */
.input[type="date"],
.input[type="time"],
.input[type="datetime-local"]{
  -webkit-appearance:none; appearance:none;
  min-width:0; max-width:100%;
  min-height:46px;              /* 13px padding ×2 + 18px line box + 2px border */
  text-align:left;
  line-height:1.2;
}
.input[type="date"]::-webkit-date-and-time-value,
.input[type="time"]::-webkit-date-and-time-value,
.input[type="datetime-local"]::-webkit-date-and-time-value{
  text-align:left;
  margin:0;
}
/* Keep the picker glyph on the trailing edge, inside the border. */
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator,
.input[type="datetime-local"]::-webkit-calendar-picker-indicator{ margin-left:auto; opacity:.55; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:rgba(110,147,116,.22); accent-color:var(--green); outline:none; margin:6px 0; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--grad); cursor:pointer; box-shadow:0 4px 10px -3px rgba(63,96,71,.6); border:2px solid #fff; }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border:2px solid #fff; border-radius:50%; background:#4f7256; cursor:pointer; }
.form-note{ font-size:12.5px; color:var(--muted-2); }
.alert{ padding:14px 18px; border-radius:14px; font-size:14px; margin-bottom:18px; }
.alert-success{ background:rgba(110,147,116,.16); color:#34503b; border:1px solid rgba(110,147,116,.3); }
.alert-error{ background:rgba(176,106,106,.12); color:#8a4a4a; border:1px solid rgba(176,106,106,.3); }
.error-text{ color:var(--danger); font-size:12.5px; margin-top:5px; }

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
@keyframes floatA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(20px,-26px) scale(1.06); } }
@keyframes floatB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-24px,20px) scale(1.08); } }
@keyframes floatC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(16px,22px) scale(1.05); } }
@keyframes hueShift{ 0%,100%{ filter:hue-rotate(0deg); } 50%{ filter:hue-rotate(14deg); } }
@keyframes sheen{ 0%{ transform:translateX(-120%) skewX(-18deg); } 60%,100%{ transform:translateX(260%) skewX(-18deg); } }
@keyframes pulseRing{ 0%{ transform:scale(.9); opacity:.55; } 70%{ transform:scale(1.5); opacity:0; } 100%{ opacity:0; } }
@keyframes growBar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes revealUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }

[data-reveal]{ opacity:0; }
[data-reveal].in{ animation:revealUp .8s cubic-bezier(.16,.84,.27,1) both; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; animation:none !important; }
  .ambient span,.btn .sheen,.dot::before,.hero-blob .shape{ animation:none !important; }
  .hero-blob{ transform:none !important; }
  .scroll-progress{ display:none; }
  .card:hover, .card:hover img:not(.avatar), .card:hover .cover svg{ transform:none !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================================
   RESPONSIVE — tablet & up
   ========================================================================= */
@media (min-width:560px){
  .container{ padding-left:24px; padding-right:24px; }
  .grid.cols-2{ grid-template-columns:repeat(2,1fr); }
  .grid.cols-3-sm{ grid-template-columns:repeat(2,1fr); }
  .metrics{ grid-template-columns:repeat(3,1fr); }
  .nav-cta-btn{ display:inline-flex; }
}

@media (min-width:768px){
  .section{ padding-top:60px; padding-bottom:60px; }
  .container{ padding-left:28px; padding-right:28px; }
  .hero{ padding:150px 28px 60px; }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
  .hero-grid{ grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
  .why-grid{ grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; }
  .steps{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width:992px){
  .nav-menu{ display:flex; }
  .nav-toggle{ display:none; }
  .nav-cta-btn{ display:inline-flex; }
  .grid.cols-4{ grid-template-columns:repeat(4,1fr); }
  .grid.cols-3-sm{ grid-template-columns:repeat(3,1fr); }
  .metrics{ grid-template-columns:repeat(5,1fr); }
  .metrics .metric{ border-right:1px solid rgba(110,147,116,.16); }
  .metrics .metric:last-child{ border-right:0; }
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; }
  .steps{ grid-template-columns:repeat(var(--steps,5),1fr); gap:14px; }
  .steps .line{ display:block; position:absolute; top:36px; left:9%; right:9%; height:2px; background:linear-gradient(90deg, rgba(110,147,116,.15), rgba(110,147,116,.5), rgba(110,147,116,.15)); }
  .hero-blob{ display:block; }
}

@media (min-width:1100px){
  .hero{ padding-top:168px; }
}

/* ── Book a call modal ─────────────────────────────────────────── */
/* Above the fixed header (1000), fabs (1100) and scroll-progress (1200). */
.modal-overlay{ position:fixed; inset:0; z-index:1300; background:rgba(24,40,30,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:20px; overflow-y:auto; }
.modal-overlay:not([hidden]){ display:flex; align-items:flex-start; justify-content:center; }
@media (min-width:640px){ .modal-overlay:not([hidden]){ align-items:center; } }
.modal{ position:relative; width:100%; max-width:520px; margin:auto; background:#fff;
  border-radius:22px; padding:28px 26px; box-shadow:0 30px 80px -20px rgba(24,40,30,.5);
  animation:modalIn .25s ease; }
@keyframes modalIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.modal-close{ position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; border-radius:50%;
  background:rgba(20,40,28,.06); color:#3a4f41; font-size:22px; line-height:1; cursor:pointer; }
.modal-close:hover{ background:rgba(20,40,28,.12); }
.modal .field{ margin-bottom:14px; }
.modal-grid{ display:grid; grid-template-columns:1fr; gap:0 14px; }
@media (min-width:520px){ .modal-grid{ grid-template-columns:1fr 1fr; } }
.modal .booking-error[hidden], .modal .booking-success[hidden]{ display:none; }