/* ============================================================
   AdFin — vizitka.adfin.si stylesheet. Tokens, base, header and
   footer are the same excerpt as www.adfin.si/css/site.css
   (source: ../../claude-adfin-brand/tokens/adfin.tokens.css) so
   the two sites read as one. Card-specific rules at the bottom.
   No JS on this site.
   ============================================================ */
@font-face{
  font-family:"InterVariable";
  src:url("/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --af-chalk:#E8EAEC; --af-paper:#FFFFFF; --af-charcoal:#2F3337; --af-charcoal-deep:#23272A;
  --af-navy:#0A2540; --af-slate:#4C5F76; --af-dusk:#75879D; --af-mist:#ABB6C4;
  --af-sage:#7B9C77; --af-sage-tint:#AEC3AC;

  --ground:var(--af-chalk);
  --ground-raised:var(--af-paper);
  --ink:var(--af-navy);
  --ink-secondary:var(--af-slate);
  --ink-quiet:var(--af-dusk);
  --rule:rgba(10,37,64,.12);
  --accent:var(--af-sage);

  --font-sans:"InterVariable","Inter","Helvetica Neue",Arial,sans-serif;
  --weight-regular:400; --weight-medium:500; --weight-semi:600;
  --track-tight:-0.015em; --track-eyebrow:0.09em;
  --lead-display:1.14; --lead-body:1.55;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s14:3.5rem; --s18:4.5rem;

  --radius-md:3px;
  --container:1120px;
  --card:600px;

  --dur-fast:120ms; --dur-base:180ms;
  --ease:cubic-bezier(0.2,0,0.2,1);

  --head-pad:18px;
  --mark:26px;
  --word:1.2rem;
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--af-chalk);
  color:var(--af-navy);
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:var(--lead-body);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}
main{flex:1}
a{color:inherit}
::selection{background:var(--af-sage-tint);color:var(--af-navy)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}
img,svg{display:block;max-width:100%}

.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(16px,5vw,64px)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:10px;z-index:30;background:var(--af-navy);color:var(--af-chalk);
  padding:10px 16px;border-radius:var(--radius-md);font-size:.875rem}

/* ============================================================
   Header — mark + wordmark + dot, as on www.adfin.si
   ============================================================ */
.site-head{
  background:var(--af-chalk);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding-top:var(--head-pad);padding-bottom:var(--head-pad)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand .mark{height:var(--mark);width:var(--mark);margin-right:.55em}
.brand .word{font-weight:var(--weight-semi);font-size:var(--word);letter-spacing:-.02em;
  color:var(--af-navy);display:inline-flex;align-items:baseline}
.brand .dot{width:.2em;height:.2em;background:var(--af-navy);margin-left:.09em;flex:none}
.nav{display:flex;gap:clamp(14px,2.4vw,30px);list-style:none;font-size:.9rem}
.nav a{color:var(--af-slate);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.nav a:hover{color:var(--af-navy);border-bottom-color:var(--af-navy)}

/* ============================================================
   Shared type
   ============================================================ */
h1,h2{font-weight:var(--weight-medium);letter-spacing:var(--track-tight)}
.eyebrow{font-size:.75rem;font-weight:var(--weight-medium);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--af-slate);
  display:flex;align-items:center;gap:var(--s3)}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--af-sage);flex:none}
.sub{color:var(--ink-secondary);font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.5}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:var(--af-navy);color:var(--af-chalk);
  text-decoration:none;padding:14px 26px;border-radius:var(--radius-md);
  font-size:1rem;font-weight:var(--weight-medium);line-height:1.2;
  transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.btn:hover{background:#123253}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn svg *{stroke:currentColor;stroke-width:8;fill:none;stroke-linecap:butt;stroke-linejoin:miter}
.btn--ghost{background:transparent;color:var(--af-navy);box-shadow:inset 0 0 0 1px var(--af-navy)}
.btn--ghost:hover{background:rgba(10,37,64,.05)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4)}
@media (max-width:480px){ .actions .btn{flex:1 1 100%} }

/* definition list of contact facts — label / value rows on a hairline grid */
.facts{border-top:1px solid var(--rule)}
.facts>div{display:grid;grid-template-columns:8.5rem 1fr;gap:var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.facts dt{font-size:.8125rem;color:var(--ink-secondary);padding-top:.2em}
.facts dd{font-size:1.0625rem;letter-spacing:-.005em;overflow-wrap:anywhere}
.facts a{text-decoration:none;border-bottom:1px solid var(--af-sage);padding-bottom:1px}
.facts a:hover{border-bottom-color:var(--af-navy)}
@media (max-width:480px){
  .facts>div{grid-template-columns:1fr;gap:var(--s1)}
}

/* ============================================================
   Person card — Paper surface on Chalk, one hairline, no decoration
   ============================================================ */
.card-page{padding:clamp(28px,6vh,72px) 0 clamp(56px,10vh,112px)}
.back{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  font-size:.875rem;color:var(--af-slate);margin-bottom:var(--s6);
  border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--ease)}
.back:hover{color:var(--af-navy)}
.back svg{width:.8em;height:.8em}
.back svg *{stroke:currentColor;stroke-width:10;fill:none;stroke-linecap:butt;stroke-linejoin:miter}

.card{
  max-width:var(--card);
  background:var(--ground-raised);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  padding:clamp(28px,5vw,48px);
}
.card h1{font-size:clamp(1.85rem,5vw,2.5rem);line-height:var(--lead-display);margin-top:var(--s5)}
.card .role{margin-top:var(--s2);font-size:clamp(1.0625rem,1.6vw,1.25rem);color:var(--ink-secondary)}
.card .actions{margin-top:var(--s8)}
.card .facts{margin-top:var(--s8)}
.card .facts>div:last-child{border-bottom:0;padding-bottom:0}
.card .note{margin-top:var(--s6);font-size:.8125rem;color:var(--ink-quiet)}

/* ============================================================
   Root — company card + people index
   ============================================================ */
.hero{padding:clamp(44px,8vh,96px) 0 clamp(44px,8vh,88px)}
.hero h1{font-size:clamp(2rem,5.6vw,3.25rem);line-height:var(--lead-display);margin-top:var(--s5);max-width:20ch}
.hero .sub{margin-top:var(--s5);max-width:52ch}
.hero .sub a{text-decoration:none;border-bottom:1px solid var(--af-sage);padding-bottom:1px;color:var(--ink)}
.hero .actions{margin-top:var(--s8)}
.hero .facts{margin-top:var(--s10);max-width:var(--card)}

.people{padding:clamp(56px,10vh,112px) 0;border-top:1px solid var(--rule)}
.people h2{font-size:clamp(1.5rem,3.2vw,2.125rem);line-height:1.2;margin-top:var(--s5)}
.people-list{list-style:none;margin-top:var(--s8);max-width:var(--card);border-top:1px solid var(--rule)}
.people-list li{border-bottom:1px solid var(--rule)}
.people-list a{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s4);
  padding:var(--s5) var(--s2) var(--s5) 0;text-decoration:none;
  transition:background var(--dur-fast) var(--ease)}
.people-list a:hover{background:rgba(10,37,64,.04)}
.people-list .name{font-size:1.1875rem;font-weight:var(--weight-medium);letter-spacing:-.01em}
.people-list .role{display:block;margin-top:2px;font-size:.9rem;color:var(--ink-secondary)}
.people-list .chev{width:12px;height:12px;flex:none;margin-right:var(--s2)}
.people-list .chev *{stroke:var(--af-mist);stroke-width:10;fill:none;stroke-linecap:butt;stroke-linejoin:miter;
  transition:stroke var(--dur-fast) var(--ease)}
.people-list a:hover .chev *{stroke:var(--af-navy)}

/* ============================================================
   Footer — imprint, as on www.adfin.si (compact)
   ============================================================ */
.site-foot{background:var(--af-chalk);color:var(--af-slate);
  border-top:1px solid var(--rule);padding:var(--s14) 0 var(--s10);font-size:.8125rem}
.imprint{display:grid;gap:var(--s5) var(--s10);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.imprint dt{color:var(--af-dusk);font-size:.75rem}
.imprint dd{margin-top:2px;color:var(--af-slate)}
.foot-legal{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.foot-legal a{text-decoration:none;border-bottom:1px solid transparent}
.foot-legal a:hover{border-bottom-color:var(--af-slate)}

@media print{
  .site-head,.site-foot,.back,.actions{display:none}
  body{background:#fff}
  .card{border:0;padding:0;max-width:none}
}