/* ═══════════════════════════════════════════════════════════════════════
   ARBOTECH — urban forestry
   Technical precision meets eco-innovation · Tesla × Patagonia
   Deep forest green · dark slate · safety amber (sparingly)
   Outfit (display) · Plus Jakarta Sans (body) · IBM Plex Mono (labels/numerals)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper: #ffffff;
  --mist: #f4f7f4;            /* light grey-green base panels */
  --mist-2: #eef3ee;
  --forest: #14532d;         /* primary deep forest green */
  --forest-deep: #0f3d22;
  --forest-soft: #e7f0e9;    /* tint for chips / fills */
  --slate: #1e293b;          /* secondary dark slate / charcoal */
  --slate-2: #0f172a;
  --ink: #0f1a13;            /* near-black, green-tinted, for display type */
  --text: #1d2a22;
  --body: #45514a;
  --muted: #71827a;
  --line: #e0e8e1;
  --line-dark: rgba(255, 255, 255, 0.12);
  --amber: #f97316;          /* ACCENT — CTAs, badges, highlights. Use sparingly. */
  --amber-deep: #ea6306;
  --amber-soft: rgba(249, 115, 22, 0.1);
  --display: 'Outfit', -apple-system, sans-serif;
  --sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --wrap: 1180px;
  --header-h: 74px;
  --r: 14px;                 /* soft, engineered corner radius */
  --r-sm: 10px;
  --shadow: 0 18px 44px rgba(15, 26, 19, 0.1);
  --shadow-sm: 0 8px 22px rgba(15, 26, 19, 0.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--forest); color: #fff; }

a { color: inherit; }
img, svg { max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 880px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--forest); color: #fff; padding: 10px 16px; z-index: 999;
  font-family: var(--mono); font-size: 13px; text-decoration: none;
}
.skip-link:focus { left: 0; }

.amber-text { color: var(--amber); }
.forest-text { color: var(--forest); }

/* ─── Scroll reveal (gentle, once) ────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rv.in { opacity: 1; transform: none; }
.rv-2 { transition-delay: 0.08s; }
.rv-3 { transition-delay: 0.16s; }
.rv-4 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  text-decoration: none; padding: 15px 26px; border: 2px solid transparent;
  border-radius: 999px; cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.16s, box-shadow 0.18s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }
/* Primary CTA = safety amber (per brand: amber for primary actions) */
.btn-solid { background: var(--amber); color: #fff; box-shadow: 0 10px 24px rgba(249, 115, 22, 0.28); }
.btn-solid:hover { background: var(--amber-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(249, 115, 22, 0.34); }
/* Secondary = forest green solid */
.btn-forest { background: var(--forest); color: #fff; }
.btn-forest:hover { background: var(--forest-deep); transform: translateY(-2px); }
.btn-line { background: transparent; color: var(--text); border-color: rgba(29, 42, 34, 0.2); }
.btn-line:hover { color: var(--forest); border-color: var(--forest); }
.hero .btn-line, .band-slate .btn-line { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.hero .btn-line:hover, .band-slate .btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-wide { width: 100%; }

/* ─── Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; height: 100%; display: flex; align-items: center; gap: 18px; }

/* language toggle */
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.lang-btn { border: none; background: transparent; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted); padding: 7px 12px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.lang-btn.is-active { background: var(--forest); color: #fff; }
.lang-btn:not(.is-active):hover { color: var(--ink); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-glyph { height: 40px; width: auto; flex: none; display: block; }
.brand-glyph-lg { height: 54px; }
.brand-text { display: flex; flex-direction: column; gap: 0; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.brand-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest); white-space: nowrap; font-weight: 500; margin-top: 3px; }
.main-nav { display: flex; gap: 26px; }
.main-nav a { font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--body); padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.main-nav a:hover { color: var(--ink); border-bottom-color: var(--amber); }
.header-cta { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 14px; font-weight: 700; text-decoration: none; color: #fff; background: var(--forest); padding: 11px 20px; border-radius: 999px; transition: background 0.15s, transform 0.15s; }
.header-cta:hover { background: var(--forest-deep); transform: translateY(-1px); }
.header-cta svg { width: 16px; height: 16px; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); width: 44px; height: 44px; cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, top 0.2s; }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding: calc(var(--header-h) + 56px) 0 70px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(20, 83, 45, 0.55) 0%, transparent 55%),
    linear-gradient(160deg, var(--slate-2) 0%, var(--slate) 55%, #16231c 100%);
}
/* tree branding: growth-ring cross-section watermark */
.hero-rings { position: absolute; top: 46%; right: -40px; transform: translateY(-50%); width: min(540px, 56%); height: auto; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.chip { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #d6e0d9; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 8px 15px; display: inline-flex; align-items: center; gap: 8px; }
.chip svg { width: 13px; height: 13px; color: var(--amber); }
.hero-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: #7fcf9c; margin-bottom: 20px; display: flex; align-items: center; gap: 11px; }
.hero-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--amber); }
.hero-h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 6.8vw, 92px); line-height: 1.0; letter-spacing: -0.02em;
  color: #fff; max-width: 16ch;
}
.hero-h1 .g { color: #7fcf9c; }
.hero-under { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-top: 32px; flex-wrap: wrap; }
.hero-ctas { display: flex; gap: 13px; flex-wrap: wrap; }
.hero-sub { color: #c3ccc6; font-size: 17.5px; line-height: 1.7; max-width: 46ch; }

/* trust badge row under hero */
.hero-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 46px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r); overflow: hidden; }
.hbadge { background: rgba(15, 23, 32, 0.6); padding: 26px 26px; display: flex; gap: 16px; align-items: flex-start; }
.hbadge-ico { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber); }
.hbadge-ico svg { width: 22px; height: 22px; }
.hbadge h3 { font-family: var(--sans); font-weight: 700; font-size: 15.5px; color: #fff; margin-bottom: 4px; line-height: 1.25; }
.hbadge p { font-size: 13.5px; color: #a7b1ab; line-height: 1.5; }

/* ─── Sections ────────────────────────────────────────────────────────── */
.section { padding: 74px 0; }
.section-mist { background: var(--mist); }
.band-slate { background: var(--slate); color: #fff; }
.band-forest { background: var(--forest); color: #fff; }
.section-head { margin-bottom: 38px; max-width: var(--wrap); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--forest); margin-bottom: 15px; }
/* tree branding: leaf-shaped eyebrow marker */
.eyebrow::before {
  content: ''; width: 15px; height: 15px; flex: none; background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C9 3 3 9 3 21c12 0 18-6 18-18z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C9 3 3 9 3 21c12 0 18-6 18-18z'/%3E%3C/svg%3E") center/contain no-repeat;
  transform: rotate(0deg);
}
.band-slate .eyebrow, .band-forest .eyebrow { color: #8fd3a6; }
.section-title { font-family: var(--display); font-weight: 700; font-size: clamp(31px, 4.2vw, 52px); letter-spacing: -0.02em; line-height: 1.06; color: var(--ink); max-width: 22ch; }
.band-slate .section-title, .band-forest .section-title { color: #fff; }
.section-sub { color: var(--body); margin-top: 18px; max-width: 58ch; font-size: 17px; }
.band-slate .section-sub, .band-forest .section-sub { color: #c3ccc6; }

/* ─── Services grid ───────────────────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.svc-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 32px 30px; display: flex; flex-direction: column; gap: 14px; transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cbd8cd; }
.svc-ico { width: 52px; height: 52px; border-radius: 13px; background: var(--forest-soft); color: var(--forest); display: grid; place-items: center; }
.svc-ico svg { width: 26px; height: 26px; }
.svc-card h3 { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
.svc-es { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-top: -8px; }
.svc-card p { color: var(--body); font-size: 15.5px; flex: 1; }

/* ─── QUOTE WIZARD ────────────────────────────────────────────────────── */
.wizard-shell { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.wizard-head { background: var(--slate); color: #fff; padding: 26px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.wizard-head h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.wizard-head .wz-id { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: #8fd3a6; margin-top: 3px; }
.wz-counter { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: #a7b1ab; }
.wz-counter b { color: var(--amber); }

/* progress bar / stepper */
.wz-progress { display: flex; background: var(--slate-2); }
.wz-pnode { flex: 1; padding: 14px 8px; text-align: center; position: relative; border-right: 1px solid rgba(255,255,255,0.07); }
.wz-pnode:last-child { border-right: none; }
.wz-pdot { width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 7px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.09); color: #8b97a2; border: 1.5px solid transparent; transition: all 0.3s; }
.wz-plabel { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #7c8892; transition: color 0.3s; }
.wz-pnode.done .wz-pdot { background: var(--forest); color: #fff; }
.wz-pnode.active .wz-pdot { background: var(--amber); color: #fff; border-color: rgba(255,255,255,0.35); box-shadow: 0 0 0 4px var(--amber-soft); }
.wz-pnode.active .wz-plabel { color: #fff; }
.wz-pnode.done .wz-plabel { color: #b6c0b9; }

/* step body */
.wz-body { padding: 40px 40px 30px; position: relative; min-height: 340px; }
.wz-step { display: none; animation: wzIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wz-step.active { display: block; }
@keyframes wzIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.wz-step.back { animation: wzInBack 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes wzInBack { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-step, .wz-step.back { animation: none; } }

.wz-steptitle { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px; }
.wz-stepsub { color: var(--muted); font-size: 15px; margin-bottom: 28px; max-width: 56ch; }

/* fields */
.wz-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.wz-field > label, .wz-label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.wz-field input, .wz-field select, .wz-field textarea {
  background: var(--paper); border: 1.5px solid #d3ddd5; color: var(--ink);
  font-family: var(--sans); font-size: 16px; padding: 14px 15px; outline: none;
  border-radius: var(--r-sm); transition: border-color 0.15s, box-shadow 0.15s; width: 100%; appearance: none;
}
.wz-field textarea { resize: vertical; min-height: 90px; }
.wz-field input:focus, .wz-field select:focus, .wz-field textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-soft); }
.wz-field input.err, .wz-field select.err { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.wz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wz-hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.wz-hint b { color: var(--forest); }

select.wz-select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* selectable service cards (step 2) */
.wz-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-optcard { position: relative; border: 1.5px solid #d3ddd5; border-radius: var(--r); padding: 22px 20px; cursor: pointer; display: flex; gap: 15px; align-items: flex-start; transition: border-color 0.16s, background 0.16s, transform 0.16s; background: var(--paper); }
.wz-optcard:hover { border-color: var(--forest); transform: translateY(-2px); }
.wz-optcard.sel { border-color: var(--forest); background: var(--forest-soft); }
.wz-optcard input { position: absolute; opacity: 0; pointer-events: none; }
.wz-optico { width: 44px; height: 44px; flex: none; border-radius: 11px; background: var(--mist); color: var(--forest); display: grid; place-items: center; transition: background 0.16s, color 0.16s; }
.wz-optcard.sel .wz-optico { background: var(--forest); color: #fff; }
.wz-optico svg { width: 22px; height: 22px; }
.wz-optcard h4 { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--ink); }
.wz-optcard .wz-optes { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin: 1px 0 5px; }
.wz-optcard p { font-size: 13.5px; color: var(--body); }
.wz-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cdd8cf; display: grid; place-items: center; color: #fff; transition: all 0.16s; }
.wz-optcard.sel .wz-check { background: var(--forest); border-color: var(--forest); }
.wz-check svg { width: 12px; height: 12px; opacity: 0; }
.wz-optcard.sel .wz-check svg { opacity: 1; }

/* tree repeater (step 3) */
.tree-card { border: 1.5px solid var(--line); border-radius: var(--r); padding: 22px 22px 24px; margin-bottom: 16px; background: var(--mist); position: relative; }
.tree-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tree-card-head h4 { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--forest); letter-spacing: 0.01em; display: flex; align-items: center; gap: 9px; }
.tree-num { width: 26px; height: 26px; border-radius: 8px; background: var(--forest); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; }
.tree-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; transition: color 0.15s, background 0.15s; }
.tree-remove:hover { color: var(--amber-deep); background: var(--amber-soft); }
.tree-remove svg { width: 14px; height: 14px; }

/* segmented control (height) */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg-opt { border: 1.5px solid #d3ddd5; border-radius: var(--r-sm); padding: 12px 6px; text-align: center; cursor: pointer; background: var(--paper); transition: all 0.15s; }
.seg-opt:hover { border-color: var(--forest); }
.seg-opt.sel { border-color: var(--forest); background: var(--forest); color: #fff; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt strong { display: block; font-family: var(--sans); font-weight: 700; font-size: 14px; }
.seg-opt span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.seg-opt.sel span { color: rgba(255,255,255,0.8); }

.btn-add { display: inline-flex; align-items: center; gap: 9px; background: var(--paper); border: 1.5px dashed #c3d0c5; color: var(--forest); font-family: var(--sans); font-weight: 700; font-size: 14.5px; padding: 14px 20px; border-radius: var(--r-sm); cursor: pointer; width: 100%; justify-content: center; transition: border-color 0.15s, background 0.15s; }
.btn-add:hover { border-color: var(--forest); background: var(--forest-soft); }
.btn-add svg { width: 18px; height: 18px; }

/* photo dropzone */
.dropzone { border: 2px dashed #c3d0c5; border-radius: var(--r); padding: 26px 20px; text-align: center; cursor: pointer; transition: border-color 0.16s, background 0.16s; background: var(--paper); }
.dropzone:hover, .dropzone.drag { border-color: var(--forest); background: var(--forest-soft); }
.dropzone-ico { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; background: var(--forest-soft); color: var(--forest); display: grid; place-items: center; }
.dropzone-ico svg { width: 22px; height: 22px; }
.dropzone strong { display: block; font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--ink); }
.dropzone span { font-size: 13px; color: var(--muted); }
.dropzone .dz-cam { color: var(--forest); font-weight: 700; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 14px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--mist-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(15, 23, 32, 0.82); color: #fff; border: none; cursor: pointer; display: grid; place-items: center; font-size: 14px; line-height: 1; transition: background 0.15s; }
.thumb-x:hover { background: var(--amber-deep); }
.thumb-x svg { width: 11px; height: 11px; }

/* risk checklist (step 4) */
.risk-list { display: flex; flex-direction: column; gap: 11px; }
.risk-item { display: flex; align-items: center; gap: 14px; border: 1.5px solid #d3ddd5; border-radius: var(--r-sm); padding: 15px 18px; cursor: pointer; background: var(--paper); transition: border-color 0.15s, background 0.15s; }
.risk-item:hover { border-color: var(--forest); }
.risk-item.sel { border-color: var(--forest); background: var(--forest-soft); }
.risk-item input { position: absolute; opacity: 0; pointer-events: none; }
.risk-box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1.5px solid #c3d0c5; display: grid; place-items: center; color: #fff; transition: all 0.15s; }
.risk-item.sel .risk-box { background: var(--forest); border-color: var(--forest); }
.risk-box svg { width: 13px; height: 13px; opacity: 0; }
.risk-item.sel .risk-box svg { opacity: 1; }
.risk-item span { font-weight: 600; font-size: 15px; color: var(--text); }
.risk-warn { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 13px 16px; border-radius: var(--r-sm); background: var(--amber-soft); color: var(--amber-deep); font-size: 13.5px; font-weight: 600; }
.risk-warn svg { width: 17px; height: 17px; flex: none; }

/* nav footer of wizard */
.wz-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 40px 30px; border-top: 1px solid var(--line); }
.wz-back { background: none; border: none; color: var(--muted); font-family: var(--sans); font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; transition: color 0.15s; }
.wz-back:hover { color: var(--forest); }
.wz-back svg { width: 16px; height: 16px; }
.wz-back[hidden] { visibility: hidden; }
.wz-err { font-family: var(--mono); font-size: 12.5px; color: var(--amber-deep); min-height: 18px; }

/* review summary (step 5) */
.wz-summary { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 24px; background: var(--mist); }
.wz-summary-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.wz-summary-row:last-child { border-bottom: none; }
.wz-summary-row dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.wz-summary-row dd { color: var(--text); font-weight: 500; }

/* success screen */
.wz-success { text-align: center; padding: 30px 20px 10px; }
.wz-success-ico { width: 78px; height: 78px; margin: 0 auto 24px; border-radius: 50%; background: var(--forest-soft); color: var(--forest); display: grid; place-items: center; animation: pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.wz-success-ico svg { width: 40px; height: 40px; }
.wz-success h3 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
.wz-success p { color: var(--body); font-size: 16.5px; max-width: 44ch; margin: 0 auto 26px; }
.wz-success .btn { margin: 0 6px; }

/* ─── Why us ──────────────────────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.why-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r); padding: 32px 30px; }
.why-item h3 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: #fff; margin-bottom: 11px; }
.why-item h3 span { color: #8fd3a6; }
.why-item p { color: #c3ccc6; font-size: 15.5px; }

/* ─── Stats band ──────────────────────────────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 46px 20px; text-align: center; border-left: 1px solid rgba(255,255,255,0.1); }
.stat:first-child { border-left: none; }
.stat-num { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(38px, 4.4vw, 60px); letter-spacing: -0.02em; color: #fff; margin-bottom: 6px; }
.stat-num b { color: var(--amber); font-weight: 700; }
.stat-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #9fb0a5; }

/* ─── Process steps ───────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { border-top: 2px solid var(--forest); padding-top: 18px; position: relative; }
.step::before { counter-increment: step; content: '0' counter(step); font-family: var(--display); font-weight: 700; font-size: 40px; color: var(--amber); display: block; margin-bottom: 8px; letter-spacing: -0.02em; }
.step h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.step p { color: var(--body); font-size: 15px; }

/* ─── Reviews ─────────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.quote { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); border-top: 3px solid var(--amber); padding: 32px 30px; }
.quote p { font-size: 17px; line-height: 1.7; color: var(--text); margin-bottom: 18px; }
.quote footer { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.quote cite { font-style: normal; color: var(--forest); font-weight: 700; }

/* ─── Service areas ───────────────────────────────────────────────────── */
.area-tags { display: flex; flex-wrap: wrap; gap: 11px; }
.area-tag { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--forest); background: var(--forest-soft); border-radius: 999px; padding: 10px 18px; }

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.faq-list { border-top: 1px solid var(--line); max-width: 860px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; font-weight: 700; font-size: 17px; color: var(--ink); position: relative; transition: color 0.15s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 24px; font-weight: 400; color: var(--amber); transition: transform 0.2s; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list summary:hover { color: var(--forest); }
.faq-body { padding: 0 0 26px; color: var(--body); max-width: 70ch; }

/* ─── CTA strip ───────────────────────────────────────────────────────── */
.cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 38px; padding: 32px 38px; background: var(--forest); color: #fff; border-radius: 18px; position: relative; overflow: hidden; }
/* tree branding: faint leaf sprig in the CTA corner */
.cta-strip::after {
  content: ''; position: absolute; right: -20px; bottom: -30px; width: 180px; height: 180px; pointer-events: none; opacity: 0.14;
  background: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C9 3 3 9 3 21c12 0 18-6 18-18z'/%3E%3Cpath d='M6 18 18 6' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3C9 3 3 9 3 21c12 0 18-6 18-18z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cta-strip .cs-head { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; color: #fff; line-height: 1.15; }
.cta-strip .cs-sub { color: #bfe0c9; font-size: 14.5px; margin-top: 6px; }
.cta-strip .cs-actions { display: flex; gap: 11px; flex-wrap: wrap; }

/* ─── Footer ──────────────────────────────────────────────────────────── */
.site-footer { background: var(--slate-2); color: #b6c0b9; }
/* tree branding: pine treeline skyline rising into the footer */
.footer-treeline { display: block; width: 100%; height: 34px; opacity: 0.6; margin-bottom: -1px; }
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.4fr; gap: 44px; padding: 72px 28px; max-width: var(--wrap); margin: 0 auto; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand .brand-name { color: #fff; }
.footer-desc { color: #8b978d; font-size: 14.5px; max-width: 36ch; }
.footer-col h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #8fd3a6; margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; color: #b6c0b9; font-size: 14.5px; text-decoration: none; padding: 5px 0; }
.footer-col a:hover { color: #fff; }
.footer-disclaimer { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-disclaimer .wrap { padding-top: 26px; padding-bottom: 4px; }
.footer-disclaimer p { font-size: 12px; color: #6f7c73; max-width: 90ch; line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }
.footer-bottom-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: #6f7c73; flex-wrap: wrap; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { color: #6f7c73; text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* ─── Persistent mobile action bar (CRO) ──────────────────────────────── */
.callbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147482000; border-top: 1px solid rgba(255,255,255,0.14); }
.callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 10px 12px; text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 15.5px; }
.callbar .cb-quote { background: var(--amber); color: #fff; }
.callbar .cb-quote:active { background: var(--amber-deep); }
.callbar .cb-wa { background: var(--forest); color: #fff; }
.callbar svg { width: 18px; height: 18px; flex: none; }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .svc-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .quotes { grid-template-columns: 1fr; }
  .hero-badges { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-under { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 780px) {
  .main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 10px 28px 22px; }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .brand-tag { display: none; }
  .header-cta span { display: none; }
  .header-cta { padding: 11px 13px; }
  .header-inner { gap: 10px; }
  .lang-btn { padding: 6px 9px; font-size: 11px; }

  .callbar { display: flex; }
  body { padding-bottom: 64px; }
  .pp-fab-stack { bottom: 76px !important; }

  .hero { padding-top: calc(var(--header-h) + 46px); padding-bottom: 64px; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat { padding: 40px 16px; border-top: 1px solid rgba(255,255,255,0.1); }
  .stat:nth-child(-n+2) { border-top: none; }
  .stat:nth-child(3) { border-left: none; }
  .steps { grid-template-columns: 1fr; }
  .section { padding: 68px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; padding: 52px 28px; }

  .wz-body { padding: 30px 22px 24px; }
  .wz-nav { padding: 20px 22px 26px; }
  .wizard-head { padding: 20px 24px; }
  .wz-cards { grid-template-columns: 1fr; }
  .wz-row { grid-template-columns: 1fr; }
  .segmented { grid-template-columns: repeat(3, 1fr); }
  .wz-plabel { display: none; }
  .wz-pnode { padding: 12px 4px; }
  .wz-summary-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ─── Chat widget retheme (shared/automation.js — if enabled later) ───── */
.pp-fab { background: var(--amber) !important; color: #fff !important; }
.pp-modal-head { background: var(--slate) !important; }
.pp-msg.user { background: var(--forest) !important; }