/* Service pages + blog. Loads after base.css; uses only base tokens. */

/* ---------- Service hero: copy left, live visual right ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:var(--s-8);max-width:calc(var(--container) + 2 * var(--pad));margin:0 auto;padding:clamp(120px,14vw,168px) var(--pad) var(--section-y);min-height:min(100svh,920px)}
.hero h1{font-size:var(--fs-6xl);max-width:14ch}
.hero .lede{margin-top:var(--s-5)}
.hero-ctas{margin-top:var(--s-6)}
.hero-note{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--text-muted)}
.section > .wrap > h2:first-child + .lede,.section .wrap > [data-reveal] > h2 + .lede{margin-top:var(--s-5)}

/* Visual panels (pipeline, flow, hub, call) share the panel look */
.pipe-card,.flow,.hubviz,.call{position:relative;padding:var(--s-5);border-radius:var(--r-lg);background:rgba(11,29,23,.74);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow-lg)}
.pipe-head,.flow-head,.call-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-4);font-size:var(--fs-xs);color:var(--text-strong);font-weight:600}

/* HubSpot: animated pipeline */
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;font-size:.75rem;color:var(--text-muted)}
.cols span{padding:8px 6px;border-radius:10px;background:rgba(212,233,226,.05);text-align:center;line-height:1.2}
.lane{position:relative;height:250px;margin-top:10px;border-radius:16px;background:linear-gradient(90deg,rgba(212,233,226,.035) 0 calc(25% - 7.5px),transparent 0 calc(25% + 2.5px),rgba(212,233,226,.035) 0 calc(50% - 5px),transparent 0 calc(50% + 5px),rgba(212,233,226,.035) 0 calc(75% - 2.5px),transparent 0 calc(75% + 7.5px),rgba(212,233,226,.035) 0)}
.deal{--w:calc((100% - 30px) / 4);position:absolute;left:0;width:var(--w);padding:10px 9px;border-radius:12px;background:linear-gradient(160deg,var(--green),var(--house));border:1px solid var(--line-gold);font-size:.75rem;color:var(--white);line-height:1.3;animation:move 9s var(--ease) infinite;box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
.deal small{display:block;color:var(--gold);font-size:.75rem;margin-top:3px}
.deal:nth-child(1){top:10px}
.deal:nth-child(2){top:92px;animation-delay:-3s}
.deal:nth-child(3){top:174px;animation-delay:-6s}
@keyframes move{0%{transform:translateX(0);opacity:0}4%,18%{transform:translateX(0);opacity:1}25%,43%{transform:translateX(calc(100% + 10px));opacity:1}50%,68%{transform:translateX(calc(200% + 20px));opacity:1}75%,93%{transform:translateX(calc(300% + 30px));opacity:1;border-color:var(--gold)}100%{transform:translateX(calc(300% + 30px));opacity:0}}
.pipe-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-4)}

/* CRM: flow of nodes */
.nodes{position:relative;display:grid;gap:var(--s-3);padding-left:34px}
.nodes::before{content:"";position:absolute;left:12px;top:14px;bottom:14px;width:2px;background:rgba(212,233,226,.1);border-radius:2px}
.nodes::after{content:"";position:absolute;left:8px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 16px var(--gold);animation:travel 6s linear infinite}
@keyframes travel{0%{transform:translateY(0);opacity:0}5%{opacity:1}95%{opacity:1}100%{transform:translateY(calc(var(--h,260px) - 20px));opacity:0}}
.node{position:relative;display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:13px 16px;border-radius:14px;background:rgba(212,233,226,.04);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--mint);animation:lit 6s linear infinite;animation-delay:calc(var(--i) * 1.1s)}
.node::before{content:"";position:absolute;left:-27px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--ink);border:2px solid rgba(212,233,226,.3)}
.node b{color:var(--text-strong);font-weight:600}
.node small{color:var(--text-muted);font-size:.8rem;white-space:nowrap}
@keyframes lit{0%,4%{border-color:var(--line);background:rgba(212,233,226,.04)}8%,22%{border-color:var(--gold);background:rgba(0,117,74,.35)}30%,100%{border-color:var(--line);background:rgba(212,233,226,.04)}}
.node.trigger{border-style:dashed}

/* Zapier: integration hub (SVG) */
.hubviz{padding:var(--s-4)}
.hubviz svg{width:100%;height:auto;display:block}
.wire{stroke:rgba(212,233,226,.22);stroke-width:1.5;stroke-dasharray:4 6;animation:dash 1.2s linear infinite}
.wire.out{animation-direction:reverse}
@keyframes dash{to{stroke-dashoffset:-20}}
.app rect{fill:var(--ink-2);stroke:rgba(212,233,226,.22)}
.app text,.core text{fill:var(--white);font-size:14px;font-weight:600;text-anchor:middle;dominant-baseline:middle;font-family:inherit}
.core circle.ring{fill:none;stroke:var(--gold);stroke-width:1.5;transform-origin:200px 160px;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.6);opacity:0}}
svg .pulse{fill:var(--gold);width:auto;height:auto;border-radius:0;background:none;animation:none}
.hubviz .legend{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted);padding:4px 6px 0}

/* AI: live call */
.wave{display:flex;align-items:center;gap:4px;height:54px;margin:var(--s-4) 0 var(--s-3);padding:0 4px}
.wave i{flex:1;height:100%;border-radius:4px;background:linear-gradient(180deg,var(--gold),var(--accent));transform:scaleY(.2);animation:wave 1.1s ease-in-out infinite alternate}
@keyframes wave{to{transform:scaleY(1)}}
.lines{display:grid;gap:9px;min-height:250px;align-content:start}
.ln{padding:10px 14px;border-radius:14px;font-size:var(--fs-sm);line-height:1.4;opacity:0}
.ln b{display:block;font-size:.75rem;letter-spacing:.02em;margin-bottom:2px;opacity:.8}
.ln.ai{background:rgba(0,117,74,.35);color:var(--white);border:1px solid var(--line);margin-right:18%}
.ln.caller{background:rgba(212,233,226,.08);color:var(--mint);margin-left:18%}
.ln.done{background:var(--gold);color:var(--ink);font-weight:600;text-align:center}
@keyframes l0{0%,4%{opacity:0;transform:translateY(8px)}8%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes l1{0%,16%{opacity:0;transform:translateY(8px)}20%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes l2{0%,30%{opacity:0;transform:translateY(8px)}34%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes l3{0%,44%{opacity:0;transform:translateY(8px)}48%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes l4{0%,58%{opacity:0;transform:translateY(8px)}62%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.call .t0{animation:l0 12s var(--ease) infinite}.call .t1{animation:l1 12s var(--ease) infinite}.call .t2{animation:l2 12s var(--ease) infinite}.call .t3{animation:l3 12s var(--ease) infinite}.call .t4{animation:l4 12s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){.ln{opacity:1}}

/* ---------- Proof: real client result ---------- */
.result{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-8);align-items:start}
.result .tag{margin-bottom:var(--s-5)}
.result .lede{margin-top:var(--s-5)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.stat{background:var(--surface-hi)}
.stat .num{white-space:nowrap;font-family:var(--display);font-weight:800;font-size:clamp(2.75rem,5vw,4.25rem);line-height:.9;letter-spacing:-.05em;color:var(--gold);font-variant-numeric:tabular-nums}
.stat .num span{font-size:.45em;letter-spacing:0}
.stat p{margin-top:var(--s-3);font-size:var(--fs-sm)}
.story{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.story div{padding:var(--s-5) var(--s-1) 0;border-top:1px solid var(--line-gold)}
.story h3{font-size:var(--fs-xl);margin-bottom:var(--s-2)}
.mini{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6) var(--s-7);margin-top:var(--s-6);padding:clamp(24px,4vw,40px);border-radius:var(--r-lg);background:var(--surface-feature);border:1px solid var(--line-gold)}
.mini .big{font-family:var(--display);font-weight:800;font-size:clamp(3rem,6vw,4.5rem);line-height:.85;letter-spacing:-.05em;color:var(--gold);white-space:nowrap}
.mini .big span{font-size:.4em;letter-spacing:0;color:var(--gold-2);margin-left:4px}
.mini p{max-width:24ch}
.mini .txt{flex:1;min-width:240px;max-width:none}
.mini a{color:var(--gold);font-weight:600;border-bottom:1px solid currentColor}

/* ---------- Card grids ---------- */
.hubs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-7)}
.hub h3,.crm h3,.group h3,.tool h3{font-size:var(--fs-2xl)}
.hub .sub,.crm .sub,.group .sub{color:var(--gold-2);font-size:var(--fs-sm);margin:6px 0 var(--s-5)}
.hub ul{list-style:none;display:grid;gap:var(--s-3)}
.examples{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-top:var(--s-7)}
.ex{padding:var(--s-5)}
.ex .n{font-family:var(--display);color:var(--gold);font-weight:700;font-size:var(--fs-sm)}
.ex h3{font-size:var(--fs-xl);margin:var(--s-2) 0 var(--s-2)}
.ex p{font-size:var(--fs-sm)}
.crms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-top:var(--s-7)}
.crm a{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s-3);color:var(--gold);font-weight:600;border-bottom:1px solid currentColor}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-top:var(--s-7)}
.tool{padding:var(--s-6) var(--s-5)}
.tool .best{display:block;color:var(--gold-2);font-size:var(--fs-sm);margin:6px 0 var(--s-3)}
.tool p{font-size:var(--fs-sm)}
.groups{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);margin-top:var(--s-7)}
.svc{padding:var(--s-4) 0;border-top:1px solid var(--line)}
.svc h4{font-size:var(--fs-lg);font-weight:600}
.svc p{font-size:var(--fs-sm);margin-top:4px}
.svc a{color:var(--gold);border-bottom:1px solid currentColor}

/* Zapier: AI agent chat */
.agents{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-8);align-items:center}
.chat{display:grid;gap:var(--s-3);padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.chat-top{font-size:var(--fs-xs);color:var(--text-muted);display:flex;justify-content:space-between}
.msg{max-width:88%;padding:12px 16px;border-radius:18px;font-size:var(--fs-sm);line-height:1.45;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.msg.you{justify-self:end;background:var(--gold);color:var(--ink);border-bottom-right-radius:6px}
.msg.bot{background:rgba(0,117,74,.35);color:var(--white);border:1px solid var(--line);border-bottom-left-radius:6px}
.chat.in .msg{opacity:1;transform:none}
.chat.in .msg:nth-child(2){transition-delay:.7s}.chat.in .msg:nth-child(3){transition-delay:1.5s}.chat.in .msg:nth-child(4){transition-delay:2.3s}

/* Bizmate vs agency table */
.why{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
.why .lede{margin-top:var(--s-5)}
.compare{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);font-size:var(--fs-sm);align-items:center}
.row:first-child{border-top:0;font-weight:600;color:var(--text-strong);background:rgba(212,233,226,.04)}
.row span:nth-child(2){color:var(--gold-2);font-weight:600}
.row span:nth-child(3){color:var(--text-muted)}

/* ---------- Blog ---------- */
.post-hero{max-width:calc(1014px + 2 * var(--pad));margin:0 auto;padding:clamp(120px,14vw,160px) var(--pad) var(--s-6)}
.post-hero h1{font-size:var(--fs-5xl);line-height:1;max-width:22ch}
.post-hero .lede{margin-top:var(--s-5)}
.meta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-5);font-size:var(--fs-xs);color:var(--text-muted)}
.post{display:grid;grid-template-columns:220px minmax(0,var(--measure));gap:var(--s-8);justify-content:center;padding:var(--s-5) var(--pad) var(--s-9)}
.toc{position:sticky;top:104px;align-self:start;font-size:var(--fs-sm)}
.toc-toggle{display:block;width:100%;text-align:left;color:var(--text-strong);font-weight:600;margin-bottom:var(--s-3);cursor:default;pointer-events:none}
.toc a{display:block;padding:6px 0 6px var(--s-4);border-left:2px solid var(--line);color:var(--text-muted);transition:color var(--dur-fast),border-color var(--dur-fast)}
.toc a:hover,.toc a.active{color:var(--gold-2);border-color:var(--gold)}
.prose{font-size:1.125rem;line-height:1.75;min-width:0}
.prose h2{font-size:var(--fs-3xl);line-height:1.1;margin:var(--s-8) 0 var(--s-4);max-width:none}
.prose h3{font-size:var(--fs-xl);margin:var(--s-6) 0 var(--s-2)}
.prose p{margin:0 0 var(--s-4)}
.prose a:not(.btn){color:var(--gold);border-bottom:1px solid currentColor}
.prose a:not(.btn):hover{color:var(--gold-2)}
.prose ul,.prose ol{margin:0 0 var(--s-5) 22px}
.prose li{margin-bottom:var(--s-2)}
.prose li::marker{color:var(--gold)}
.prose .faq{margin-top:0}
.answer{padding:var(--s-5) var(--s-5);border-radius:var(--r-md);background:var(--surface-feature);border:1px solid var(--line-gold);margin:0 0 var(--s-6)}
.answer b{display:block;color:var(--gold-2);font-size:var(--fs-xs);margin-bottom:6px;letter-spacing:.02em}
.formula{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin:var(--s-5) 0 var(--s-6)}
.formula div{padding:var(--s-4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5}
.formula b{display:block;font-family:var(--display);color:var(--gold);font-size:var(--fs-lg);margin-bottom:4px}
.exa{padding:var(--s-5) var(--s-5) var(--s-2);margin:var(--s-4) 0;border-radius:var(--r-md)}
.exa:hover{border-color:var(--line-gold)}
.exa h3{margin:0 0 var(--s-2);display:flex;gap:var(--s-3);align-items:baseline}
.exa h3 span{font-family:var(--display);color:var(--gold);font-size:var(--fs-base)}
.exa .rep{font-size:var(--fs-sm);color:var(--text-muted)}
.stat-row{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-5) 0}
.stat-row div{flex:1;min-width:200px;padding:var(--s-5);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-size:var(--fs-sm)}
.stat-row b{display:block;font-family:var(--display);font-size:var(--fs-4xl);color:var(--gold);line-height:1;margin-bottom:var(--s-2)}
.inline-cta{margin:var(--s-7) 0;padding:var(--s-6);border-radius:var(--r-lg);text-align:center;background:radial-gradient(80% 120% at 50% 0%,rgba(0,117,74,.45),rgba(11,29,23,.92) 70%);border:1px solid var(--line-gold)}
.inline-cta p{margin:0 auto var(--s-5);max-width:52ch}
/* Blog index cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--s-4);margin-top:var(--s-7)}
a.card{display:flex;flex-direction:column;padding:var(--s-6)}
.card .cat{align-self:flex-start;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--line-gold);font-size:var(--fs-xs);color:var(--gold-2)}
.card h2{font-size:var(--fs-2xl);line-height:1.15;margin:var(--s-4) 0 var(--s-3);max-width:none}
.card p{font-size:var(--fs-sm);flex:1}
.card .more{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-5);color:var(--gold);font-weight:600}
.card .more::after{content:"→";transition:transform var(--dur) var(--ease)}
a.card:hover .more::after{transform:translateX(4px)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0;gap:var(--s-7)}
  .result,.why,.agents{grid-template-columns:1fr;gap:var(--s-6)}
  .hubs,.crms{grid-template-columns:1fr;max-width:600px}
  .story{grid-template-columns:1fr}
  .examples,.tools{grid-template-columns:repeat(2,1fr)}
  .groups{grid-template-columns:1fr;max-width:680px}
  .post{grid-template-columns:minmax(0,var(--measure));gap:0}
  .toc{position:static;margin-bottom:var(--s-6);padding:var(--s-2) var(--s-4);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
  .toc-toggle{pointer-events:auto;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:44px;margin:0}
  .toc-toggle::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg) translateY(-3px);transition:transform var(--dur-fast)}
  .toc.open .toc-toggle::after{transform:rotate(225deg) translateY(-2px)}
  .toc-links{display:none;padding-bottom:var(--s-3)}
  .toc.open .toc-links{display:block}
  .formula{grid-template-columns:1fr}
}
@media (max-width:640px){
  .examples,.tools,.stats{grid-template-columns:1fr}
  .row{padding:var(--s-3) var(--s-4);font-size:.875rem}
  .lane{height:230px}
  .deal{padding:8px 6px}
  .node small{display:none}
  .prose{font-size:1.0625rem}
}