/* ITSM Negotiations · shared design system (Slate direction)
   Extracted from index.html :root tokens + components, extended with
   article/content, breadcrumb, byline, prose, FAQ and TOC classes.
   Every page links this file at /assets/css/site.css. */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FBFBFC;--card:#FFFFFF;--ink:#101826;--ink2:#52606F;--ink3:#94A0AC;
  --line:#E8ECF0;--line2:#D5DCE3;--slate:#121A29;--slate2:#1C2738;
  --amber:#E0A43B;--amber-d:#C8862A;--amber-bg:#FBF1DD;
  --teal:#1E9E86;--teal-bg:#E0F3EF;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}
.sora{font-family:'Sora',sans-serif}
.mono{font-family:'Geist Mono',monospace}
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.on{opacity:1;transform:none}

/* DARK SIDEBAR */
.sidebar{position:fixed;top:0;left:0;width:272px;height:100vh;background:var(--slate);padding:34px 24px;display:flex;flex-direction:column;z-index:50;overflow-y:auto}
.sb-logo{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.sb-mk{width:34px;height:34px;border-radius:9px;border:1.5px solid var(--amber);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Sora',sans-serif;font-weight:800;color:var(--amber);font-size:.8125rem}
.sb-logo .t{font-family:'Sora',sans-serif;font-weight:700;font-size:.9375rem;color:#fff;line-height:1.1}
.sb-tag{font-family:'Geist Mono',monospace;font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:6px 0 34px;padding-left:45px}
.sb-label{font-family:'Geist Mono',monospace;font-size:.5625rem;font-weight:500;color:#5A6678;letter-spacing:.12em;text-transform:uppercase;margin:0 0 9px}
.sb-section{margin-bottom:22px}
.sb-link{display:block;font-size:.8125rem;color:#9AA6B4;padding:6px 0;transition:.15s;border-left:2px solid transparent;padding-left:0}
.sb-link:hover{color:#fff;border-left-color:var(--amber);padding-left:8px}
.sb-link.active{color:#fff;border-left-color:var(--amber);padding-left:8px}
.sb-cta{margin-top:auto;font-family:'Sora',sans-serif;font-weight:600;font-size:.8125rem;padding:12px 0;background:var(--amber);color:var(--slate);text-align:center;border-radius:9px;transition:.2s}
.sb-cta:hover{background:#fff}
.sb-foot{font-family:'Geist Mono',monospace;font-size:.5625rem;color:#4A5568;text-align:center;margin-top:14px;text-transform:uppercase;letter-spacing:.06em}

/* MAIN */
.main{margin-left:272px;padding:72px 72px 0}
.wrap{max-width:820px}
.ey{font-family:'Geist Mono',monospace;font-size:.625rem;font-weight:500;color:var(--amber-d);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
h1{font-family:'Sora',sans-serif;font-size:clamp(2.5rem,5vw,4.2rem);font-weight:800;line-height:1.0;letter-spacing:-.035em;margin-bottom:20px;max-width:17ch}
h1 span{color:var(--amber-d)}
.lead{font-size:1.0625rem;color:var(--ink2);max-width:560px;line-height:1.7;margin-bottom:30px}
.lead b{color:var(--ink);font-weight:600}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.btn{font-family:'Sora',sans-serif;font-weight:600;font-size:.8125rem;padding:13px 24px;border:none;border-radius:9px;cursor:pointer;background:var(--slate);color:#fff;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:var(--amber-d)}
.ghost{font-family:'Sora',sans-serif;font-size:.8125rem;color:var(--ink);background:var(--card);border:1px solid var(--line2);padding:13px 22px;border-radius:9px;cursor:pointer;transition:.2s}
.ghost:hover{border-color:var(--slate)}
.pays{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:64px}
.pays span{font-family:'Geist Mono',monospace;font-size:.625rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line2);border-radius:20px;padding:6px 13px}
.pays b{color:var(--teal);font-weight:600}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:64px}
.statc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.statc .n{font-family:'Sora',sans-serif;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.statc .n .u{color:var(--amber-d)}
.statc .l{font-family:'Geist Mono',monospace;font-size:.5625rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin-top:12px;line-height:1.5}

/* SECTION */
.sec{margin-bottom:64px}
.sec-t{font-family:'Sora',sans-serif;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;margin-bottom:28px}
.sec-t span{color:var(--amber-d)}

/* VENDORS */
.vrow{display:flex;flex-wrap:wrap;gap:8px}
.vchip{font-size:.8125rem;font-weight:500;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 15px;transition:.18s}
.vchip:hover{border-color:var(--amber);color:var(--ink)}

/* SERVICES */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;transition:.2s}
.svc:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(16,24,38,.25)}
.svc-num{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800;color:var(--line2);letter-spacing:-.03em;margin-bottom:12px}
.svc:hover .svc-num{color:var(--amber-d)}
.svc-t{font-family:'Sora',sans-serif;font-size:1rem;font-weight:600;margin-bottom:6px}
.svc-d{font-size:.8125rem;color:var(--ink2);line-height:1.6}

/* METHOD on dark */
.method{background:var(--slate);border-radius:16px;padding:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mnum{font-family:'Geist Mono',monospace;font-size:.625rem;color:#5A6678;margin-bottom:12px}
.mword{font-family:'Sora',sans-serif;font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:10px}
.method .mcard:nth-child(4) .mword{color:var(--amber)}
.mdesc{font-size:.8125rem;color:#9AA6B4;line-height:1.6}

/* CASES */
.case-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.casec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
.casec .tag{font-family:'Geist Mono',monospace;font-size:.5625rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
.casec .m{font-family:'Sora',sans-serif;font-size:2rem;font-weight:800;color:var(--teal);letter-spacing:-.03em;margin-bottom:8px}
.casec .t{font-family:'Sora',sans-serif;font-size:.9375rem;font-weight:600;margin-bottom:4px}
.casec .d{font-size:.8125rem;color:var(--ink2);line-height:1.55}

/* QUOTE */
.qt{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:600;color:var(--ink);line-height:1.4;letter-spacing:-.02em;border-left:3px solid var(--amber);padding-left:26px;margin-bottom:16px;max-width:660px}
.qt span{color:var(--amber-d)}
.qa{font-family:'Geist Mono',monospace;font-size:.6875rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em;padding-left:29px}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.blog-item{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;transition:.18s}
.blog-item:hover{border-color:var(--amber)}
.blog-cat{font-family:'Geist Mono',monospace;font-size:.5625rem;color:var(--amber-d);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.blog-t{font-family:'Sora',sans-serif;font-size:.9375rem;font-weight:600;line-height:1.3}
.blog-d{font-family:'Geist Mono',monospace;font-size:.5625rem;color:var(--ink3);margin-top:8px}

/* CTA */
.cta-sec{background:var(--slate);border-radius:16px;padding:56px;text-align:center;margin-bottom:18px}
.cta-sec h2{font-family:'Sora',sans-serif;color:#fff;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.cta-sec h2 span{color:var(--amber)}
.cta-sec p{color:#9AA6B4;max-width:480px;margin:0 auto 26px;font-size:.9375rem;line-height:1.6}
.btn-w{background:var(--amber);color:var(--slate);font-family:'Sora',sans-serif;font-weight:600;font-size:.8125rem;padding:13px 28px;border:none;border-radius:9px;cursor:pointer;transition:.2s;display:inline-block}
.btn-w:hover{background:#fff}

/* NEWSLETTER */
.nl{padding:52px 0;text-align:center}
.nl h3{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:8px}
.nl p{font-size:.875rem;color:var(--ink2);margin-bottom:18px}
.nl-f{display:flex;gap:8px;max-width:380px;margin:0 auto}
.nl-f input{flex:1;border:1px solid var(--line2);border-radius:9px;padding:11px 14px;font-family:inherit;font-size:.8125rem;outline:none}
.nl-f input:focus{border-color:var(--amber)}

/* FOOTER */
.ft{padding:52px 0 28px;border-top:1px solid var(--line)}
.ft-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.ft-b{font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;margin-bottom:10px}
.ft-p{font-size:.8125rem;color:var(--ink2);max-width:280px;line-height:1.6}
.ft-h{font-family:'Geist Mono',monospace;font-size:.5625rem;font-weight:500;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.ft a{display:block;color:var(--ink2);padding:3px 0;font-size:.8125rem;transition:.15s}
.ft a:hover{color:var(--amber-d)}
.ft-bt{font-family:'Geist Mono',monospace;font-size:.625rem;color:var(--ink3);display:flex;justify-content:space-between;padding-top:18px;border-top:1px solid var(--line);gap:20px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.04em}

/* ===== ARTICLE / CONTENT EXTENSIONS ===== */
.breadcrumb{font-family:'Geist Mono',monospace;font-size:.625rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:7px}
.breadcrumb a{color:var(--ink2)}
.breadcrumb a:hover{color:var(--amber-d)}
.breadcrumb .sep{color:var(--line2)}
.art-h1{font-family:'Sora',sans-serif;font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin-bottom:16px;max-width:24ch}
.byline{font-family:'Geist Mono',monospace;font-size:.625rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.byline b{color:var(--ink2);font-weight:500}
.prose{max-width:720px}
.prose p{font-size:1rem;color:var(--ink2);line-height:1.75;margin-bottom:20px}
.prose p.intro{font-size:1.125rem;color:var(--ink);line-height:1.7}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose h2{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:46px 0 16px;line-height:1.2;color:var(--ink)}
.prose h3{font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:600;margin:32px 0 12px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{font-size:1rem;color:var(--ink2);line-height:1.7;margin-bottom:9px}
.prose a{color:var(--amber-d);font-weight:500;border-bottom:1px solid var(--amber-bg)}
.prose a:hover{border-bottom-color:var(--amber-d)}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:.875rem}
.prose th{background:var(--slate);color:#fff;font-family:'Sora',sans-serif;font-weight:600;text-align:left;padding:11px 14px;font-size:.8125rem}
.prose td{border:1px solid var(--line);padding:10px 14px;color:var(--ink2);vertical-align:top}
.prose tr:nth-child(even) td,.prose tbody tr:nth-child(even){background:#FAFBFC}
.callout{background:var(--amber-bg);border:1px solid var(--amber);border-radius:12px;padding:20px 24px;margin:8px 0 28px}
.callout .k{font-family:'Geist Mono',monospace;font-size:.5625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--amber-d);margin-bottom:8px}
.callout p{margin:0;color:var(--ink);font-size:.9375rem;line-height:1.6}
.keyfacts{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:12px;padding:22px 26px;margin:0 0 32px}
.keyfacts .k{font-family:'Geist Mono',monospace;font-size:.5625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin-bottom:10px}
.keyfacts p{margin:0;font-size:1rem;color:var(--ink);line-height:1.7}
.toc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:0 0 36px}
.toc .k{font-family:'Geist Mono',monospace;font-size:.5625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:12px}
.toc ol{margin:0 0 0 18px}
.toc li{margin-bottom:7px;font-size:.875rem}
.toc a{color:var(--ink2)}
.toc a:hover{color:var(--amber-d)}
.relbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;margin:8px 0 32px}
.relbox .k{font-family:'Geist Mono',monospace;font-size:.5625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);margin-bottom:14px}
.relbox a{display:block;color:var(--ink);font-family:'Sora',sans-serif;font-weight:500;font-size:.9375rem;padding:7px 0;border-bottom:1px solid var(--line)}
.relbox a:last-child{border-bottom:none}
.relbox a:hover{color:var(--amber-d)}
.faq{margin:8px 0 36px}
.faq-q{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:600;color:var(--ink);margin:24px 0 8px}
.faq-a{font-size:1rem;color:var(--ink2);line-height:1.7}
.pillar-list{columns:2;column-gap:32px;margin:8px 0 32px}
.pillar-list a{display:block;break-inside:avoid;color:var(--ink2);font-size:.9375rem;padding:7px 0;border-bottom:1px solid var(--line)}
.pillar-list a:hover{color:var(--amber-d)}
.cta-inline{background:var(--slate);border-radius:14px;padding:30px 34px;margin:32px 0;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.cta-inline .ci-t{font-family:'Sora',sans-serif;font-size:1.15rem;font-weight:700;color:#fff;max-width:30ch;line-height:1.3}
.cta-inline .ci-t span{color:var(--amber)}
.formcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px}
.formcard label{display:block;font-size:.8125rem;font-weight:600;color:var(--ink);margin:14px 0 6px}
.formcard input,.formcard textarea,.formcard select{width:100%;border:1px solid var(--line2);border-radius:9px;padding:11px 14px;font-family:inherit;font-size:.875rem;outline:none}
.formcard input:focus,.formcard textarea:focus{border-color:var(--amber)}
.formcard button{margin-top:18px;width:100%}

@media(max-width:900px){
  .sidebar{display:none}
  .main{margin-left:0;padding:40px 22px 0}
  .stats,.svc-grid,.method,.case-row,.blog-grid,.ft-row{grid-template-columns:1fr}
  .method{padding:28px;gap:20px}
  .acts{flex-direction:column;align-items:stretch}
  .cta-sec{padding:36px 24px}
  .nl-f{flex-direction:column}
  .pillar-list{columns:1}
  .cta-inline{flex-direction:column;align-items:flex-start}
}