/* /projects/styrk-karriere/: case study as a new firm's climb, on top of essay.css (scene: styrk-scene.js). Styrk's own palette and fonts are kept for the identity samples. */
:root{--paper:#EFE4CC;--rust:#B4532F;--mustard:#D6A23C;--pine:#2F4A3A}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.essay section{padding:16vh 0}
.stop.chapter-now{display:flex;align-items:center;gap:12px}
.stop{margin:0;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.88rem}
.stop b{color:var(--ink);font-weight:500}
.meter{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);z-index:1100}
.kicker{margin:0 0 1rem;color:var(--accent);font-size:.92rem;font-weight:500}
.essay h1 em{display:block;margin-top:.3em;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:.56em;letter-spacing:0;color:#E9DCC0}
.essay .dek{font-family:var(--sans);font-style:normal;margin:0 0 1.4rem;font-size:1.1rem;line-height:1.6;color:#DED8CD;max-width:33rem}
.did{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.4rem;padding:0;list-style:none}
.did li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:var(--muted)}
.label{display:flex;align-items:baseline;gap:10px;margin:0 0 .7rem;color:var(--accent);font-size:.92rem;font-weight:500;font-variant-numeric:tabular-nums}
.label span{color:var(--muted);font-weight:400}
.layers{list-style:none;margin:1.2rem 0;padding:0;border-top:1px solid var(--line)}
.layers li{display:grid;grid-template-columns:2.4rem 1fr;gap:0 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.layers .n{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums;padding-top:2px}
.essay .layers p{margin:0;font-size:.94rem;line-height:1.5;color:var(--muted)}
.logo{margin:1.2rem 0;padding:22px;border-radius:14px;background:var(--paper);display:flex;align-items:center;justify-content:center;min-height:120px;color:var(--pine);font-family:'Playfair Display',Georgia,serif;font-size:1.6rem}
.logo img{max-width:70%;max-height:90px;display:block}
.poster{margin:1.2rem 0;border-radius:14px;overflow:hidden;background:var(--paper);color:#2B2A26}
.poster .sw{display:grid;grid-template-columns:repeat(4,1fr)}
.poster .sw span{display:flex;align-items:flex-end;height:74px;padding:8px;font-family:'Karla',system-ui,sans-serif;font-size:.8rem;font-weight:500}
.poster .type{padding:18px 18px 16px}
.essay .poster .type b{display:block;font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:1.9rem;line-height:1.1;color:var(--pine)}
.poster .type i{display:block;margin:6px 0 10px;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.05rem;color:var(--rust)}
.essay .poster .type p{margin:0;font-family:'Karla',system-ui,sans-serif;font-size:.95rem;line-height:1.55;color:#4A463F}
.essay .poster .type small{display:block;margin-top:10px;font-family:'Karla',system-ui,sans-serif;font-size:.78rem;color:#6B655A}
.steps3{list-style:none;margin:1.2rem 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps3 li{padding:14px;border:1px solid var(--line);border-radius:12px}
.essay .steps3 small{display:block;color:var(--accent);font-weight:500;font-size:.8rem;margin-bottom:6px}
.essay .steps3 p{margin:0;font-size:.88rem;line-height:1.45;color:var(--muted)}
.pk{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pk li{padding:12px;border:1px solid var(--line);border-radius:12px;text-align:center}
.pk li.hl{border-color:var(--accent)}
.essay .pk b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;line-height:1}
.essay .pk span{color:var(--muted);font-size:.84rem}
.form{margin:1.2rem 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,250,240,.03)}
.form .row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.form .row span{padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:.88rem;color:var(--muted)}
.form .row span.on{border-color:var(--accent);color:var(--ink);background:rgba(244,122,42,.1)}
.form code{display:block;padding:10px 12px;border-radius:10px;background:#07090C;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:#D6D0C4;overflow-x:auto}
.form code b{color:var(--accent);font-weight:500}
.funnel{list-style:none;margin:1.2rem 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.funnel li{display:flex;align-items:center;gap:8px;font-size:.92rem}
.funnel li span{padding:8px 12px;border:1px solid var(--line);border-radius:999px}
.funnel li span small{color:var(--muted);margin-left:6px;font-size:.8rem}
.funnel li:last-child span{border-color:var(--accent)}
.funnel li:not(:last-child)::after{content:"";width:12px;height:1px;background:var(--accent)}
.ranks{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:8px}
.ranks li{display:grid;grid-template-columns:4.2rem 1fr;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.essay .ranks b{font-size:1.9rem;font-weight:700;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.essay .ranks span{font-size:.94rem;line-height:1.45;color:#D6D0C4}
.essay .ranks small{display:block;color:var(--muted);font-size:.8rem}
.strata{list-style:none;margin:1.2rem 0;padding:0;display:flex;flex-direction:column-reverse;gap:4px}
.strata li{padding:12px 14px;border-radius:10px}
.strata li:nth-child(1){background:#2F4A3A}.strata li:nth-child(2){background:#3E5A45}.strata li:nth-child(3){background:#8C5530}.strata li:nth-child(4){background:#B4532F}
.essay .strata b{display:block;font-weight:500}
.essay .strata span{font-size:.88rem;color:rgba(255,250,240,.8)}
.quote{margin:1.4rem 0;padding:20px 22px;border-radius:16px;background:var(--paper);color:#2B2A26}
.essay .quote p{margin:0 0 10px;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.25rem;line-height:1.45;color:#2B2A26}
.essay .quote small{font-family:'Karla',system-ui,sans-serif;color:#6B655A;font-size:.85rem}
.essay .final h2{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.03em}
.essay .final h2 span{display:block}
.essay .final h2 span:nth-child(2){color:#E9DCC0}
.essay .final h2 span:nth-child(3){color:var(--accent)}
@media (max-width:820px){
  .steps3,.pk{grid-template-columns:1fr}
  .stop span{display:none}
}