/* ---------------------------------------------------------
   FERMINIUS — shared system (pillar pages, journal, etc.)
   Mirrors index.html tokens & base. Slim subset.
--------------------------------------------------------- */

:root{
  --bg:        #0B0A08;
  --bg-2:      #12100C;
  --ink:       #EDE6D6;
  --ink-dim:   #B5AC98;
  --ink-muted: #6E6653;
  --rule:      #2A2620;
  --accent:    oklch(0.78 0.09 75);
  --accent-2:  oklch(0.58 0.10 55);
  --display:   "Fraunces", "Instrument Serif", serif;
  --body:      Arial, Helvetica, sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, monospace;
  --ui:        "Inter", system-ui, sans-serif;
  --radius:    0px;
  --grain-op:  0.06;
}

html[data-theme="terminal"]{
  --bg:        #08090B;
  --bg-2:      #0D0F12;
  --ink:       #E6EAEF;
  --ink-dim:   #8A93A0;
  --ink-muted: #4E5662;
  --rule:      #1A1E24;
  --accent:    oklch(0.82 0.14 145);
  --accent-2:  oklch(0.62 0.12 150);
  --display:   "Instrument Serif", "Fraunces", serif;
  --ui:        "JetBrains Mono", ui-monospace, monospace;
  --grain-op:  0.035;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--bg)}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:var(--grain-op);mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:radial-gradient(1800px 1000px at 50% -100px, color-mix(in oklab, var(--accent) 14%, transparent), transparent 55%);
}

.wrap{max-width:1340px;margin:0 auto;padding:0 48px}
@media (max-width:720px){.wrap{padding:0 20px}}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 48px;
  background:linear-gradient(to bottom, color-mix(in oklab, var(--bg) 90%, transparent), transparent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.topbar.scrolled{border-bottom-color:var(--rule);background:color-mix(in oklab, var(--bg) 88%, transparent)}
.brand{display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-size:22px;letter-spacing:0.02em}
.brand .mark{
  width:34px;height:34px;border-radius:50%;
  background:#0f1012 center/cover no-repeat url('logo-mark-circle.jpg');
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.5);
  position:relative;top:8px;
}
.brand-word{font-variation-settings:"opsz" 144}
.brand-sub{font-family:var(--mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-muted)}
.nav{display:flex;gap:28px;font-family:var(--ui);font-size:13px;letter-spacing:0.02em}
.nav a{color:var(--ink-dim);transition:color .2s}
.nav a:hover{color:var(--ink)}
.nav a.current{color:var(--ink)}
.topbar .cta{
  font-family:var(--ui);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--rule);color:var(--ink);transition:all .2s;
}
.topbar .cta:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:900px){.topbar{padding:16px 20px}.nav{display:none}}

/* ---------- Article hero ---------- */
.page-hero{
  padding:200px 0 80px;border-bottom:1px solid var(--rule);position:relative;
}
.page-hero .wrap{max-width:1340px}
.eyebrow{
  display:flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:32px;
}
.eyebrow .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;
  box-shadow:0 0 12px color-mix(in oklab, var(--accent) 60%, transparent)}
.eyebrow .rule{flex:0 0 60px;height:1px;background:var(--rule)}
.page-h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px, 6vw, 88px);line-height:0.98;letter-spacing:-0.025em;
  font-variation-settings:"opsz" 144;
  color:#FFFFFF;max-width:18ch;text-wrap:balance;margin-bottom:36px;
}
.page-h1 em{font-style:italic;color:var(--accent);font-family:"Instrument Serif",serif}
.page-lede{
  font-family:var(--body);font-size:clamp(18px, 1.4vw, 22px);line-height:1.55;
  color:var(--ink-dim);max-width:60ch;text-wrap:pretty;
}

/* ---------- Article prose ---------- */
.article{padding:100px 0 140px}
.article .wrap{max-width:1340px}
.article h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,42px);line-height:1.05;letter-spacing:-0.02em;
  margin:80px 0 28px;color:#FFFFFF;text-wrap:balance;
}
.article h2:first-child{margin-top:0}
.article h2 em{font-style:italic;color:var(--accent);font-family:"Instrument Serif",serif}
.article h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-0.01em;
  margin:56px 0 18px;color:var(--ink);
}
.article p{
  font-family:var(--body);font-size:18px;line-height:1.72;color:var(--ink-dim);
  margin-bottom:22px;text-wrap:pretty;
}
.article p strong{color:var(--ink);font-weight:600}
.article p em{color:var(--ink);font-style:italic;font-family:"Instrument Serif",serif;font-size:1.05em}
.article ul, .article ol{margin:8px 0 28px 0;padding-left:0;list-style:none}
.article li{
  font-family:var(--body);font-size:18px;line-height:1.65;color:var(--ink-dim);
  padding:14px 0 14px 36px;border-bottom:1px solid var(--rule);position:relative;
}
.article li::before{
  content:counter(li, decimal-leading-zero);counter-increment:li;
  position:absolute;left:0;top:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--accent);
}
.article ul{counter-reset:li}
.article ul li::before{content:"·";font-size:22px;top:12px;color:var(--accent)}
.article ol{counter-reset:li}
.article a:not(.btn){color:var(--ink);border-bottom:1px solid var(--rule);transition:border-color .2s}
.article a:not(.btn):hover{border-color:var(--accent)}

.article blockquote{
  border-left:2px solid var(--accent);padding:8px 0 8px 28px;margin:36px 0;
  font-family:"Instrument Serif",serif;font-style:italic;font-size:24px;line-height:1.4;color:var(--ink);
}

/* ---------- Pillar layout: dual-column for service pages ---------- */
.pillar-grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:start;
  padding:120px 0;border-bottom:1px solid var(--rule);
}
@media (max-width:900px){.pillar-grid{grid-template-columns:1fr;gap:48px;padding:80px 0}}
.pillar-grid .wrap{max-width:none}
.pillar-section-num{
  font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  color:#FFFFFF;margin-bottom:24px;
}
.pillar-section-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4vw,52px);line-height:1.05;letter-spacing:-0.02em;
  margin-bottom:32px;color:#FFFFFF;text-wrap:balance;
}
.pillar-section-title em{font-style:italic;color:var(--accent);font-family:"Instrument Serif",serif}

/* ---------- Highlights / metrics strip ---------- */
.proof-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  text-align:center;
}
@media (max-width:720px){.proof-strip{grid-template-columns:repeat(2,1fr)}}
.proof-strip .cell{padding:48px 24px;border-right:1px solid var(--rule)}
.proof-strip .cell:last-child{border-right:0}
.proof-strip .fig{
  font-family:var(--display);font-size:clamp(48px,6vw,80px);font-weight:400;
  color:#FFFFFF;line-height:1;letter-spacing:-0.04em;margin-bottom:14px;
}
.proof-strip .fig sup{font-size:0.4em;vertical-align:super;color:var(--accent)}
.proof-strip .lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-muted);max-width:24ch;margin:0 auto;line-height:1.4;
}

/* ---------- Step list (used in service pages: process / scope) ---------- */
.step-list{counter-reset:step}
.step-list .step{
  display:grid;grid-template-columns:80px 1fr;gap:32px;
  padding:32px 0;border-bottom:1px solid var(--rule);
}
.step-list .step:first-child{border-top:1px solid var(--rule)}
.step-list .step .n{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;color:var(--accent);
  padding-top:6px;
}
.step-list .step h3{
  font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2;color:#FFFFFF;margin-bottom:12px;
}
.step-list .step p{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink-dim)}

/* ---------- Inline CTA strip ---------- */
.cta-strip{
  padding:80px 0;text-align:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.cta-strip .ks{
  font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:18px;
}
.cta-strip h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-0.02em;
  color:#FFFFFF;max-width:22ch;margin:0 auto 32px;text-wrap:balance;
}
.cta-strip h2 em{font-style:italic;color:var(--accent);font-family:"Instrument Serif",serif}
.cta-strip .cta-row{display:inline-flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--ui);font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
  padding:18px 28px;border:1px solid var(--ink);color:var(--ink);cursor:pointer;
  transition:all .25s ease;display:inline-flex;align-items:center;gap:12px;background:transparent;
}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.primary:hover{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- Breadcrumb ---------- */
.crumb{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:32px;
}
.crumb a{color:var(--ink-dim);transition:color .2s}
.crumb a:hover{color:var(--accent)}
.crumb .sep{margin:0 12px;color:var(--ink-muted)}

/* ---------- Related cards ---------- */
.related{padding:100px 0;border-top:1px solid var(--rule)}
.related .ks{
  font-family:var(--mono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:32px;
}
.related h2{
  font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-0.02em;line-height:1.05;color:#FFFFFF;margin-bottom:48px;
}
.related h2 em{font-style:italic;color:var(--accent);font-family:"Instrument Serif",serif}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.related-grid{grid-template-columns:1fr}}
.related-card{
  border:1px solid var(--rule);padding:32px 28px;display:block;
  transition:border-color .2s,background .2s;
}
.related-card:hover{border-color:var(--accent);background:var(--bg-2)}
.related-card .ix{
  font-family:var(--mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.related-card h3{
  font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;
  color:#FFFFFF;margin-bottom:14px;
}
.related-card p{
  font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink-dim);
}

/* ---------- Footer ---------- */
footer{padding:100px 0 60px;border-top:1px solid var(--rule);background:var(--bg-2)}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:60px;border-bottom:1px solid var(--rule);
}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:40px}}
.foot-brand-title{
  font-family:var(--display);font-size:32px;letter-spacing:-0.02em;color:#FFFFFF;margin-bottom:16px;
}
.foot-brand p{font-family:var(--body);font-size:14px;line-height:1.7;color:#FFFFFF}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col-title{
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:#FFFFFF;margin-bottom:12px;
}
.foot-col a{
  font-family:var(--body);font-size:14px;color:var(--ink-dim);transition:color .2s;
}
.foot-col a:hover{color:var(--accent)}
.foot-bar{
  display:flex;justify-content:space-between;padding-top:32px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-muted);
}
@media (max-width:720px){.foot-bar{flex-direction:column;gap:12px;text-align:center}}