/* =========================================================
   COMPONENTS
   ========================================================= */

/* ---------- Site header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,250,246,0.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
  flex-wrap:nowrap;
}
.brand{
  display:flex; align-items:center; gap:0.65rem;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  color:var(--forest-900);
  min-width:0;
  flex:0 1 auto;
}
.brand .mark{
  width:38px; height:38px;
  border-radius:50%;
  border:2px solid var(--forest-800);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.brand .mark svg{ width:20px; height:20px; }
.brand > span{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.brand small{
  display:block;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:0.6rem;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  text-transform:uppercase;
  white-space:nowrap;
}

.main-nav{ display:flex; align-items:center; gap:2rem; }
.main-nav ul{ display:flex; gap:1.75rem; }
.main-nav a{
  font-size:0.9rem; font-weight:600; color:var(--ink);
  position:relative; padding:0.3rem 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--signal);
  transition:right 0.2s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right:0; }
.main-nav a[aria-current="page"]{ color:var(--forest-900); }

.header-actions{ display:flex; align-items:center; gap:0.75rem; flex:none; }
.mobile-nav-ctas{ display:none; }
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-strong);
  width:42px; height:42px; border-radius:var(--radius-sm);
  align-items:center; justify-content:center;
  flex:none;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--ink);
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

body.nav-open .nav-toggle span{ background:transparent; }
body.nav-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5em;
  padding:0.85rem 1.5rem;
  font-weight:700; font-size:0.88rem;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--signal); color:var(--white); }
.btn-primary:hover{ background:var(--signal-dim); }
.btn-secondary{ background:transparent; color:var(--forest-900); border-color:var(--forest-800); }
.btn-secondary:hover{ background:var(--forest-900); color:var(--white); }
.btn-ghost-inverse{ background:transparent; color:var(--paper); border-color:rgba(250,250,246,0.4); }
.btn-ghost-inverse:hover{ background:rgba(250,250,246,0.12); border-color:var(--paper); }
.btn-block{ width:100%; }
.btn-sm{ padding:0.6rem 1.05rem; font-size:0.8rem; }

/* ---------- Section scaffolding ---------- */
.section{ padding:clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-alt{ background:var(--paper-dim); }
.section-dark{ background:var(--forest-900); color:var(--paper); }
.section-dark h2, .section-dark h3{ color:var(--paper); }
.section-dark p{ color:#D7DED8; }
.section-dark .tag{ color:#8FCBA2; }
.section-dark .tag::before{ background:var(--signal); }

.section-head{
  display:flex; justify-content:space-between; align-items:end; gap:2rem;
  margin-bottom:2.75rem;
  flex-wrap:wrap;
}
.section-head h2{ font-size:var(--step-3); max-width:16ch; }
.section-head .lede{ max-width:38ch; color:var(--ink-soft); font-size:var(--step-0); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--green-700);
  margin-bottom:0.75rem;
  display:block;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:var(--forest-950);
  color:var(--paper);
  overflow:hidden;
  padding-top:clamp(3rem,7vw,5rem);
  padding-bottom:0;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:3rem;
  align-items:center;
}
.hero-copy .tag{ color:#8FCBA2; margin-bottom:1.5rem; }
.hero h1{
  color:var(--paper);
  font-size:var(--step-5);
  letter-spacing:-0.02em;
  max-width:14ch;
}
.hero .lede{
  color:#C7D2C9;
  font-size:var(--step-1);
  max-width:42ch;
  margin-top:1.25rem;
}
.hero-ctas{ display:flex; gap:1rem; margin-top:2.25rem; flex-wrap:wrap; }
.hero-meta{
  display:flex; gap:2.25rem; margin-top:3rem;
  padding-top:1.75rem; border-top:1px solid rgba(255,255,255,0.14);
  flex-wrap:wrap;
}
.hero-meta div strong{
  display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--paper);
}
.hero-meta div span{ font-size:0.78rem; color:#9FAFA3; }

.hero-diagram{ position:relative; }

/* ---------- Service quick-list (below hero) ---------- */
.quick-services{
  border-top:1px solid rgba(255,255,255,0.12);
  margin-top:clamp(2.5rem,6vw,4rem);
}
.quick-services ul{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.quick-services li{ border-right:1px solid rgba(255,255,255,0.12); border-bottom:1px solid rgba(255,255,255,0.12); }
.quick-services li:nth-child(3n){ border-right:none; }
.quick-services a{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem clamp(1rem,2vw,1.75rem);
  font-weight:700; font-size:0.95rem; color:var(--paper);
}
.quick-services a .num{
  font-family:var(--font-mono); font-size:0.72rem; color:#8FCBA2; margin-right:0.85rem;
}
.quick-services a:hover{ background:rgba(255,255,255,0.05); }
.quick-services a .arrow{ opacity:0; transform:translateX(-4px); transition:all .16s ease; color:var(--signal); }
.quick-services a:hover .arrow{ opacity:1; transform:translateX(0); }

/* ---------- Alternating feature rows ---------- */
.feature-row{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
  padding:clamp(2.5rem,5vw,4rem) 0;
}
.feature-row + .feature-row{ border-top:1px solid var(--line); }
.feature-row.reverse{ grid-template-columns:1.1fr 0.9fr; }
.feature-row.reverse .feature-visual{ order:2; }
.feature-visual{
  background:var(--paper-dim);
  border:1px solid var(--line);
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.feature-copy .index{
  font-family:var(--font-mono); color:var(--signal); font-size:0.78rem; margin-bottom:0.75rem; display:block;
}
.feature-copy h3{ font-size:var(--step-2); margin-bottom:0.85rem; }
.feature-list{ margin-top:1.25rem; display:grid; gap:0.55rem; }
.feature-list li{
  display:flex; gap:0.65rem; align-items:flex-start;
  font-size:0.92rem; color:var(--ink-soft);
}
.feature-list li::before{
  content:""; width:5px; height:5px; margin-top:0.55em; flex:none;
  background:var(--green-700);
}

/* ---------- Spec panel (used on service pages) ---------- */
.spec-panel{
  border:1px solid var(--line-strong);
  background:var(--white);
}
.spec-panel .spec-head{
  background:var(--forest-900); color:var(--paper);
  padding:1rem 1.25rem;
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.03em;
}
.spec-panel dl{ margin:0; }
.spec-panel .row{
  display:grid; grid-template-columns:38% 62%;
  border-top:1px solid var(--line);
}
.spec-panel .row:first-of-type{ border-top:none; }
.spec-panel dt{
  padding:0.85rem 1.1rem; font-size:0.78rem; color:var(--ink-soft);
  font-family:var(--font-mono);
  border-right:1px solid var(--line);
}
.spec-panel dd{ margin:0; padding:0.85rem 1.1rem; font-size:0.88rem; }

/* ---------- Industry index list ---------- */
.industry-index{ border-top:1px solid var(--line-strong); }
.industry-item{
  border-bottom:1px solid var(--line);
}
.industry-item summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:1.25rem;
  padding:1.35rem 0.25rem;
}
.industry-item summary::-webkit-details-marker{ display:none; }
.industry-item .n{ font-family:var(--font-mono); font-size:0.78rem; color:var(--signal); }
.industry-item h3{ font-size:1.2rem; font-family:var(--font-display); font-weight:800; }
.industry-item .plus{
  width:28px; height:28px; border:1px solid var(--line-strong); position:relative; flex:none;
  transition:transform .18s ease, background .18s ease;
}
.industry-item .plus::before, .industry-item .plus::after{
  content:""; position:absolute; background:var(--forest-900);
}
.industry-item .plus::before{ left:50%; top:22%; bottom:22%; width:1px; transform:translateX(-50%); }
.industry-item .plus::after{ top:50%; left:22%; right:22%; height:1px; transform:translateY(-50%); }
.industry-item[open] .plus{ transform:rotate(45deg); background:var(--forest-900); }
.industry-item[open] .plus::before, .industry-item[open] .plus::after{ background:var(--paper); }
.industry-item .body{ padding:0 0.25rem 1.75rem 76px; max-width:60ch; color:var(--ink-soft); }
.industry-item .body .chips{ margin-top:0.9rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
.industry-item .body .chips span{
  font-family:var(--font-mono); font-size:0.7rem; border:1px solid var(--line-strong);
  padding:0.3rem 0.55rem; color:var(--green-700);
}

/* ---------- Process timeline ---------- */
.process-strip{ position:relative; }
.process-strip ol{
  display:grid; grid-template-columns:repeat(6, 1fr);
  border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
}
.process-strip li{
  padding:1.75rem 1.1rem;
  border-right:1px solid var(--line);
}
.process-strip li:last-child{ border-right:none; }
.process-strip .n{
  font-family:var(--font-mono); color:var(--signal); font-size:0.78rem; display:block; margin-bottom:0.9rem;
}
.process-strip h4{ font-size:1rem; margin-bottom:0.4rem; }
.process-strip p{ font-size:0.82rem; color:var(--ink-soft); }

/* ---------- Client wall ---------- */
.client-wall{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.client-wall li{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; align-items:center;
  padding:1.15rem 1.25rem;
  font-size:0.85rem; font-weight:600; color:var(--ink-soft);
  min-height:64px;
}

/* ---------- Cards (used sparingly: blog, team) ---------- */
.card{
  background:var(--white); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.card-media{ aspect-ratio:16/10; background:var(--paper-dim); border-bottom:1px solid var(--line); }
.card-body{ padding:1.35rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.card-body .cat{ font-family:var(--font-mono); font-size:0.68rem; color:var(--green-700); }
.card-body h3{ font-size:1.05rem; }
.card-body p{ color:var(--ink-soft); font-size:0.9rem; }
.card-body .meta{ margin-top:auto; padding-top:0.75rem; font-size:0.78rem; color:var(--ink-soft); border-top:1px solid var(--line); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.1rem; }
.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.1rem; min-width:0; }
.field label{ font-size:0.8rem; font-weight:700; color:var(--forest-900); }
.field .req{ color:var(--signal); }
.field input, .field select, .field textarea{
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  border:1px solid var(--line-strong); background:var(--white);
  padding:0.75rem 0.9rem; border-radius:var(--radius-sm); font-size:0.92rem; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--forest-800); }
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-note{ font-size:0.78rem; color:var(--ink-soft); margin-top:0.75rem; }
.form-status{ font-size:0.85rem; margin-top:1rem; display:none; padding:0.85rem 1rem; border:1px solid var(--line-strong); }
.form-status.is-visible{ display:block; }
.form-status.success{ border-color:var(--green-700); color:var(--green-700); background:#EEF6F0; }
.form-status.error{ border-color:var(--signal); color:var(--signal-dim); background:#FBEDE7; }

.stepper{ display:flex; gap:0.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.stepper span{
  font-family:var(--font-mono); font-size:0.72rem; padding:0.5rem 0.8rem;
  border:1px solid var(--line-strong); color:var(--ink-soft);
}
.stepper span.active{ background:var(--forest-900); color:var(--paper); border-color:var(--forest-900); }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--forest-950); border-top:1px solid rgba(255,255,255,0.1);
}
.mobile-cta .row{ display:grid; grid-template-columns:1fr 1fr 1fr; }
.mobile-cta a{
  display:flex; flex-direction:column; align-items:center; gap:0.2rem;
  padding:0.7rem 0.4rem; color:var(--paper); font-size:0.68rem; font-weight:700;
  border-right:1px solid rgba(255,255,255,0.1);
}
.mobile-cta a:last-child{ border-right:none; }
.mobile-cta svg{ width:18px; height:18px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--forest-950); color:#B9C3BC; padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand{ color:var(--paper); }
.footer-brand .mark{ border-color:rgba(255,255,255,0.4); }
.footer-brand p{ color:#93A296; font-size:0.88rem; margin-top:1rem; max-width:34ch; }
.footer-col h4{
  font-family:var(--font-mono); color:#8FCBA2; font-size:0.72rem; letter-spacing:0.04em;
  margin-bottom:1rem; text-transform:uppercase;
}
.footer-col ul{ display:grid; gap:0.6rem; }
.footer-col a{ font-size:0.9rem; }
.footer-col a:hover{ color:var(--paper); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:1.75rem; flex-wrap:wrap; gap:1rem;
  font-size:0.78rem; color:#7C8B7F;
}
.footer-social{ display:flex; gap:0.85rem; }
.footer-social a{
  width:34px; height:34px; border:1px solid rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:15px; height:15px; }

/* ---------- Chatbot launcher ---------- */
.chat-launcher{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:210;
  width:56px; height:56px; border-radius:50%;
  background:var(--forest-900); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 8px 24px rgba(15,27,19,0.28);
}
.chat-launcher svg{ width:24px; height:24px; }
.chat-panel{
  position:fixed; right:1.5rem; bottom:5.75rem; z-index:210;
  width:340px; max-width:calc(100vw - 2.5rem);
  background:var(--white); border:1px solid var(--line-strong);
  box-shadow:0 20px 50px rgba(15,27,19,0.25);
  display:none; flex-direction:column;
  max-height:min(520px, 70vh);
}
.chat-panel.is-open{ display:flex; }
.chat-panel .chat-head{
  background:var(--forest-900); color:var(--paper);
  padding:0.95rem 1.1rem; display:flex; align-items:center; justify-content:space-between;
}
.chat-panel .chat-head strong{ font-family:var(--font-display); font-size:0.95rem; }
.chat-panel .chat-head span{ font-family:var(--font-mono); font-size:0.68rem; color:#8FCBA2; }
.chat-log{ padding:1rem 1.1rem; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:0.7rem; }
.chat-msg{ font-size:0.86rem; padding:0.6rem 0.8rem; max-width:85%; border:1px solid var(--line); }
.chat-msg.bot{ background:var(--paper-dim); align-self:flex-start; }
.chat-msg.user{ background:var(--forest-900); color:var(--paper); align-self:flex-end; }
.chat-quick{ display:flex; flex-wrap:wrap; gap:0.4rem; padding:0 1.1rem 0.85rem; }
.chat-quick button{
  font-size:0.72rem; border:1px solid var(--line-strong); background:none; padding:0.4rem 0.65rem; color:var(--forest-900);
}
.chat-quick button:hover{ background:var(--paper-dim); }
.chat-input{ display:flex; border-top:1px solid var(--line); }
.chat-input input{ flex:1; border:none; padding:0.85rem 1rem; font-size:0.85rem; }
.chat-input input:focus{ outline:none; }
.chat-input button{ background:var(--signal); color:var(--white); border:none; padding:0 1.1rem; font-weight:700; }

/* ---------- Breadcrumb / page intro ---------- */
.page-intro{ padding:clamp(2.5rem,6vw,4rem) 0 0; }
.breadcrumb{ font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-soft); margin-bottom:1.5rem; }
.breadcrumb a:hover{ color:var(--forest-900); }
.page-intro h1{ font-size:var(--step-4); max-width:20ch; }
.page-intro .lede{ font-size:var(--step-1); color:var(--ink-soft); max-width:52ch; margin-top:1rem; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--forest-950); color:var(--paper);
  padding:clamp(2.5rem,6vw,4rem);
  display:grid; grid-template-columns:1.3fr auto; gap:2rem; align-items:center;
  border:1px solid rgba(255,255,255,0.08);
}
.cta-banner h2{ color:var(--paper); font-size:var(--step-2); max-width:20ch; }
.cta-banner .lede{ color:#B9C3BC; margin-top:0.6rem; }
.cta-actions{ display:flex; gap:0.85rem; flex-wrap:wrap; }