/* =========================================================
   STRATIVO — v4
   Reference DNA: Agility Ads (huge type, one CTA, numbered
   how-it-works, real stats) + Animalz (Q&A clarity, old-way/
   new-way comparison, clean team grid, generous whitespace).
   Predominantly white. One accent. Rows, not cards.
   ========================================================= */

:root{
  --bg:       #FFFFFF;
  --bg-soft:  #F7F6F2;
  --ink:      #16180F;
  --mute:     #6B6E62;
  --line:     rgba(22,24,15,0.11);

  --emerald:      #109A5C;
  --emerald-deep: #0B7A49;
  --emerald-tint: #E7F4EC;
  --emerald-ink:  #06210F;

  --font: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.16,.8,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input,textarea,select{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--emerald); outline-offset:3px; }

.edge{ width:100%; max-width:1160px; margin:0 auto; padding:0 32px; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-0.025em; line-height:1.08; color:var(--ink); }

.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--emerald-deep); margin-bottom:16px; display:inline-block; }

.btn{ display:inline-flex; align-items:center; gap:9px; padding:15px 26px; border-radius:10px; background:var(--emerald); color:var(--emerald-ink); font-weight:700; font-size:15.5px; transition:transform .25s var(--ease), background .25s; }
.btn:hover{ transform:translateY(-2px); background:var(--emerald-deep); color:#fff; }
.btn.dark{ background:var(--ink); color:#fff; }
.btn.dark:hover{ background:#000; }

.link{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:15px; color:var(--ink); border-bottom:1.5px solid var(--line); padding-bottom:2px; transition:border-color .25s, color .25s; }
.link:hover{ border-color:var(--ink); color:var(--emerald-deep); }
.link svg{ transition:transform .25s var(--ease); }
.link:hover svg{ transform:translateX(3px); }

/* ---------- Nav (simple bar, no overlay gimmick) ---------- */
.nav{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color .3s; }
.nav.scrolled{ border-color:var(--line); }
.nav .edge{ display:flex; align-items:center; justify-content:space-between; height:78px; max-width:1220px; }
.nav-logo img{ height:32px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:15px; font-weight:600; color:var(--mute); transition:color .2s; }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; width:38px; height:38px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; flex-direction:column; gap:4px; }
.nav-burger span{ width:16px; height:1.5px; background:var(--ink); transition:transform .25s, opacity .25s; }
.nav-burger.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.mobile-menu{ display:none; flex-direction:column; padding:8px 32px 20px; border-bottom:1px solid var(--line); background:var(--bg); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:13px 0; font-size:17px; font-weight:600; border-top:1px solid var(--line); }
.mobile-menu .btn{ margin-top:14px; justify-content:center; }
@media (max-width:840px){ .nav-links{ display:none; } .nav-actions .link{ display:none; } .nav-burger{ display:flex; } }

/* ---------- Hero ---------- */
.hero{ padding:90px 0 70px; }
.hero h1{ font-size:clamp(36px,5.6vw,60px); max-width:16ch; }
.hero p.sub{ font-size:18.5px; color:var(--mute); max-width:46ch; margin:22px 0 30px; }
.hero-ctas{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

/* ---------- Sections ---------- */
.sec{ padding:88px 0; border-top:1px solid var(--line); }
.sec--soft{ background:var(--bg-soft); }
.sec--emerald{ background:var(--emerald); color:var(--emerald-ink); border-top:none; }
.sec--emerald h2{ color:var(--emerald-ink); }
.head{ max-width:620px; margin-bottom:48px; }
.head h2{ font-size:clamp(26px,3.6vw,38px); }
.head p{ color:var(--mute); font-size:16.5px; margin-top:14px; }

/* ---------- Q&A rows (Section 2) ---------- */
.qa-row{ display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:32px 0; border-top:1px solid var(--line); align-items:baseline; }
.qa-row:last-child{ border-bottom:1px solid var(--line); }
.qa-q{ font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-0.02em; }
.qa-a{ color:var(--mute); font-size:16px; }
.qa-a b{ color:var(--ink); font-weight:700; }
@media (max-width:700px){ .qa-row{ grid-template-columns:1fr; gap:8px; padding:24px 0; } }

/* ---------- What we do (Section 3) ---------- */
.what-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.what-col .n{ font-family:var(--font-mono); font-size:12px; color:var(--emerald-deep); letter-spacing:.08em; margin-bottom:10px; display:block; }
.what-col h3{ font-size:20px; margin-bottom:10px; }
.what-col ul li{ color:var(--mute); font-size:14.5px; padding:4px 0; }
@media (max-width:900px){ .what-grid{ grid-template-columns:repeat(2,1fr); gap:32px 24px; } }
@media (max-width:520px){ .what-grid{ grid-template-columns:1fr; } }

/* ---------- Comparison (old way / strativo way) ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.compare > div{ padding:36px; }
.compare .old{ background:var(--bg-soft); }
.compare .new{ background:var(--emerald-tint); }
.compare h4{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:20px; }
.compare .new h4{ color:var(--emerald-deep); }
.compare li{ padding:10px 0; font-size:15px; border-top:1px solid var(--line); display:flex; gap:10px; }
.compare li:first-of-type{ border-top:none; }
.compare .old li{ color:var(--mute); }
.compare .new li{ color:var(--emerald-ink); font-weight:600; }
@media (max-width:700px){ .compare{ grid-template-columns:1fr; } }

/* ---------- Work (mixed sizes + device frame) ---------- */
.work-mixed{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.work-mixed .feature{ grid-column:1 / -1; }
.work-card{ display:block; }
.frame{ border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.frame-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--bg-soft); }
.frame-bar .dot{ width:7px; height:7px; border-radius:50%; background:var(--line); }
.frame img{ width:100%; object-fit:cover; object-position:top; }
.work-mixed .feature img{ height:440px; }
.work-mixed .work-card:not(.feature) img{ height:260px; }
.work-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-top:18px; }
.work-meta h3{ font-size:20px; margin-bottom:5px; }
.work-meta p{ color:var(--mute); font-size:14.5px; margin:0; max-width:44ch; }
.work-meta .tag{ font-family:var(--font-mono); font-size:11px; color:var(--emerald-deep); background:var(--emerald-tint); padding:6px 12px; border-radius:100px; white-space:nowrap; flex-shrink:0; }
@media (max-width:800px){ .work-mixed{ grid-template-columns:1fr; } .work-mixed .feature img{ height:280px; } }

.work-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:44px; }
.work-filters button{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; padding:9px 15px; border-radius:100px; border:1px solid var(--line); color:var(--mute); transition:all .2s; }
.work-filters button.active, .work-filters button:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pf-hidden{ display:none !important; }
.pf-empty{ display:none; padding:50px 0; text-align:center; color:var(--mute); font-size:17px; }
.pf-empty.show{ display:block; }

/* ---------- Stat strip (real numbers only) ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.stats > div{ padding:36px 28px; border-left:1px solid var(--line); }
.stats > div:first-child{ border-left:none; }
.stats b{ display:block; font-size:clamp(28px,3.2vw,38px); font-weight:800; letter-spacing:-0.02em; }
.stats span{ display:block; color:var(--mute); font-size:13px; margin-top:8px; }
.stats .cap{ font-family:var(--font-mono); font-size:11px; color:var(--emerald-deep); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; display:block; }
@media (max-width:800px){ .stats{ grid-template-columns:1fr 1fr; } .stats > div:nth-child(2n+1){ border-left:none; } .stats > div:nth-child(n+3){ border-top:1px solid var(--line); } }
@media (max-width:480px){ .stats{ grid-template-columns:1fr; } .stats > div{ border-left:none !important; border-top:1px solid var(--line); } .stats > div:first-child{ border-top:none; } }

/* ---------- Numbered how-it-works ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.step-col .n{ font-family:var(--font-mono); font-size:13px; color:var(--emerald-deep); display:block; margin-bottom:14px; }
.step-col h4{ font-size:18px; margin-bottom:8px; }
.step-col p{ color:var(--mute); font-size:14.5px; margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; gap:36px 24px; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

.steps-vert .step{ display:flex; gap:22px; padding:26px 0; border-top:1px solid var(--line); }
.steps-vert .step:last-child{ border-bottom:1px solid var(--line); }
.steps-vert .step .n{ font-family:var(--font-mono); font-size:13px; color:var(--emerald-deep); width:28px; flex-shrink:0; padding-top:3px; }
.steps-vert .step h4{ font-size:18px; margin-bottom:4px; }
.steps-vert .step p{ color:var(--mute); font-size:14.5px; margin:0; }

/* ---------- Services list rows ---------- */
.svc-row{ padding:44px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:200px 1fr; gap:32px; }
.svc-row:last-child{ border-bottom:1px solid var(--line); }
.svc-row .lbl{ font-family:var(--font-mono); font-size:12px; color:var(--emerald-deep); text-transform:uppercase; letter-spacing:.06em; }
.svc-row h3{ font-size:24px; margin:6px 0 14px; }
.svc-row p{ color:var(--mute); font-size:16px; max-width:62ch; margin:0 0 18px; }
.svc-row .pills{ display:flex; flex-wrap:wrap; gap:9px; }
.svc-row .pills span{ font-size:13px; background:var(--bg-soft); padding:6px 13px; border-radius:100px; color:var(--ink); }
@media (max-width:700px){ .svc-row{ grid-template-columns:1fr; gap:8px; } }

/* ---------- Team grid (compact, Animalz-style) ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.team-card .photo{ aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--bg-soft); margin-bottom:16px; }
.team-card .photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.team-card .photo .ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.team-card .photo .ph span{ font-size:44px; font-weight:800; color:var(--line); }
.team-card h3{ font-size:19px; margin-bottom:4px; }
.team-card .role{ font-family:var(--font-mono); font-size:12px; color:var(--emerald-deep); margin-bottom:10px; }
.team-card p{ color:var(--mute); font-size:14px; margin:0 0 10px; }
.team-card .li{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); font-weight:600; padding:8px 14px; border:1px solid var(--line); border-radius:100px; transition:all .2s; }
.team-card .li:hover{ color:#fff; background:var(--emerald-deep); border-color:var(--emerald-deep); }
.team-card .li svg{ flex-shrink:0; }
@media (max-width:900px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .team-grid{ grid-template-columns:1fr; max-width:280px; margin:0 auto; } }

/* ---------- Values / approach grid ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px; }
.values-grid .v-icon{ width:36px; height:36px; margin-bottom:16px; color:var(--emerald); }
.values-grid h4{ font-size:17px; margin-bottom:8px; }
.values-grid p{ color:var(--mute); font-size:14.5px; margin:0; }
@media (max-width:800px){ .values-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .values-grid{ grid-template-columns:1fr; } }

/* ---------- Story split (About) ---------- */
.story-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.story-split img{ border-radius:16px; width:100%; height:320px; object-fit:cover; }
.story-split p{ color:var(--mute); font-size:16.5px; line-height:1.75; margin:0; }
@media (max-width:800px){ .story-split{ grid-template-columns:1fr; gap:28px; } }

/* ---------- Contact ---------- */
.contact-wrap{ display:grid; grid-template-columns:1.3fr 1fr; gap:60px; }
.field{ margin-bottom:20px; display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); }
.field input, .field textarea, .field select{ background:var(--bg-soft); border:1px solid var(--line); border-radius:9px; padding:13px 15px; font-size:15px; color:var(--ink); transition:border-color .2s; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--emerald); }
.field textarea{ min-height:100px; resize:vertical; }
.field .err{ color:#B94A32; font-size:12px; min-height:14px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } .contact-wrap{ grid-template-columns:1fr; gap:40px; } }
.contact-side a, .contact-side div{ display:flex; justify-content:space-between; padding:16px 0; border-top:1px solid var(--line); font-size:15px; }
.contact-side > *:last-child{ border-bottom:1px solid var(--line); }
.contact-side .lbl{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); }
.contact-side a:hover{ color:var(--emerald-deep); }
.cf-success{ display:none; padding:16px 0; }
.cf-success.show{ display:block; }
.cf-success h3{ font-size:22px; margin-bottom:8px; }
.cf-success p{ color:var(--mute); }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line); padding:64px 0 28px; }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px; margin-bottom:56px; }
.foot-cta{ font-size:clamp(24px,3.6vw,36px); font-weight:800; letter-spacing:-0.02em; max-width:16ch; }
.foot-cta a{ color:var(--emerald-deep); }
.foot-cta a:hover{ text-decoration:underline; }
.foot-grid{ display:flex; gap:64px; flex-wrap:wrap; padding-top:32px; border-top:1px solid var(--line); }
.foot-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:14px; }
.foot-col a{ display:block; color:var(--mute); font-size:14.5px; margin-bottom:10px; }
.foot-col a:hover{ color:var(--emerald-deep); }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); color:var(--mute); font-size:12.5px; font-family:var(--font-mono); }

/* ---------- misc ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.mute{ color:var(--mute); }
.center{ text-align:center; }

/* ---------- Chatbot ---------- */
.chat-fab{ position:fixed; bottom:26px; right:26px; z-index:1200; width:56px; height:56px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; transition:transform .25s var(--ease); }
.chat-fab:hover{ transform:scale(1.06); background:var(--emerald-deep); }
.chat-fab .badge{ position:absolute; top:-3px; right:-3px; width:13px; height:13px; border-radius:50%; background:var(--emerald); border:2px solid #fff; }
.chat-window{ position:fixed; bottom:94px; right:26px; z-index:1200; width:352px; max-width:calc(100vw - 32px); height:500px; max-height:70vh; background:#fff; border:1px solid var(--line); border-radius:16px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(22,24,15,0.16); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.chat-window.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.chat-head{ padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.chat-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--emerald); }
.chat-head b{ font-size:14.5px; }
.chat-head span{ display:block; font-size:11.5px; color:var(--mute); font-family:var(--font-mono); }
.chat-close{ margin-left:auto; color:var(--mute); }
.chat-body{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:11px; }
.msg{ max-width:84%; padding:10px 13px; border-radius:11px; font-size:13.5px; line-height:1.5; }
.msg.bot{ background:var(--bg-soft); align-self:flex-start; }
.msg.user{ background:var(--ink); color:#fff; align-self:flex-end; }
.chat-options{ display:flex; flex-direction:column; gap:7px; }
.chat-opt{ text-align:left; padding:10px 12px; border-radius:9px; border:1px solid var(--line); font-size:13px; transition:all .2s; }
.chat-opt:hover{ border-color:var(--emerald); color:var(--emerald-deep); background:var(--emerald-tint); }
.chat-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.chat-input input{ flex:1; background:var(--bg-soft); border:none; border-radius:100px; padding:10px 14px; color:var(--ink); font-size:13px; }
.chat-input button{ width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.typing{ display:flex; gap:4px; padding:5px 4px; }
.typing span{ width:5px; height:5px; border-radius:50%; background:var(--mute); animation:blink 1.2s infinite ease-in-out; }
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }