/* ============================================================
   BAMBA CAPITAL
   index.html + skyline.svg. Ingen byggkedja, inga beroenden.
   NAV-serien redigeras i <script> längst ned.
   ============================================================ */

:root{
  --shell:   #F1F0ED;
  --paper:   #FFFFFF;
  --panel:   #F4F4F1;
  --panel-2: #FAFAF8;
  --ink:     #13251F;
  --ink-2:   #5E6461;
  --ink-3:   #667069;
  --line:    #E5E4DF;
  --line-2:  #EEEDE9;
  --pos:     #2F5D4A;
  --neg:     #8A4A42;

  --sans:  "Figtree", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;

  --pad: clamp(1.25rem, 3.6vw, 3.75rem);
  --gap: clamp(.6rem, 1.1vw, 1rem);
  --nav-gap: clamp(1rem, 2.2vw, 2.4rem);
  --shell-pad: clamp(0px, 1.4vw, 20px);

  /* Typskala, elva steg från 17px brödtext. Inget värde utanför denna. */
  --t-2xs:  .74rem;
  --t-xs:   .85rem;
  --t-sm:   .95rem;
  --t-md:   1.0625rem;
  --t-lg:   1.2rem;
  --t-xl:   clamp(1.25rem, 1.9vw, 1.6rem);
  --t-2xl:  clamp(1.25rem, 2.1vw, 1.85rem);
  --t-3xl:  clamp(1.8rem, 4.2vw, 3.4rem);
  --t-4xl:  clamp(2.15rem, 6.4vw, 5.6rem);
  --t-stat: clamp(1.35rem, 2.3vw, 1.85rem);
  --t-lead: clamp(1.9rem, 3.4vw, 2.9rem);

  /* Rymdskala, åtta steg. Ersätter 28 lösa värden. */
  --s-1: .5rem;
  --s-2: .85rem;
  --s-3: 1.25rem;
  --s-4: clamp(1.5rem, 2.4vw, 2.15rem);
  --s-5: clamp(1.75rem, 3vw, 2.5rem);
  --s-6: clamp(2rem, 4vw, 3.25rem);
  --s-7: clamp(2.5rem, 5vw, 4.25rem);
  --s-8: clamp(3.5rem, 7vw, 6.5rem);
  --col-gap: clamp(1.5rem, 4vw, 4rem);

  /* Tre kolumnförhållanden, inte tolv. */
  --col-main: 1.1fr 1fr;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--shell);
  overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  /* i liggande läge på telefoner med kamerahål skulle kanten annars
     hamna under urtaget */
  padding:var(--shell-pad) max(var(--shell-pad), env(safe-area-inset-right))
          var(--shell-pad) max(var(--shell-pad), env(safe-area-inset-left));
  background:var(--shell);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.ledger, .facts td, .infobox dd{
  font-variant-numeric: lining-nums tabular-nums;
}

.frame{
  background:var(--paper);
  border:1px solid var(--line);
  max-width:1600px;
  margin-inline:auto;
  /* overflow:hidden här slog ut position:sticky på sidhuvudet, som då
     rullade bort. overflow-x:clip klipper i sidled utan att skapa en
     rullningskontext. */
  overflow-x:clip;
}

a{ color:inherit; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--ink); color:#fff; padding:.85rem 1.35rem;
  text-decoration:none; font-size:var(--t-sm);
}
.skip:focus{ left:0; }
a:focus-visible, button:focus-visible{ outline:1.5px solid var(--ink); outline-offset:2px; }

/* sektionsetikett som inramad bricka
   höjden hålls i en variabel eftersom högerspalten justeras mot den */
:root{ --eyebrow-h: calc(.74rem * 1.3 + .98rem + 2px); --head-h: 74px; }
/* stoppar det klistrade sidhuvudet från att täcka sektionens överkant
   när man hoppar dit via menyn */
:target, section[id], footer[id], main[id]{
  scroll-margin-top: calc(var(--head-h) + clamp(.75rem, 2vw, 1.75rem));
}
.eyebrow{
  display:inline-block; overflow:hidden; max-width:none;
  font-weight:400;
  /* etiketten kan brytas på två rader på telefon, då behövs radavstånd */
  line-height:1.3;
  border:1px solid var(--line); background:var(--panel-2);
  padding:.52rem .95rem .46rem calc(.95rem + .15em);
  margin:0 0 1.6rem;
  font-size:var(--t-2xs); letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-2);
}
.eyebrow .t{ display:block; }
/* Rörelsen läggs på först när JavaScript svarar. Utan skript syns allt
   direkt i stället för att fastna på opacity:0. */
.js .eyebrow{
  opacity:0; transform:translateY(7px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.25,1);
}
.js .eyebrow .t{
  transform:translateY(115%);
  transition:transform .75s cubic-bezier(.22,.8,.25,1) .14s;
}
.js .eyebrow.in{ opacity:1; transform:none; }
.js .eyebrow.in .t{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .eyebrow, .js .eyebrow .t{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Sidhuvud ---------- */
.masthead{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.85rem var(--pad); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30; background:var(--paper);
}
.logo{
  display:inline-block; border:1px solid var(--ink);
  /* höger padding kompenserar för spärrningens tomrum efter sista bokstaven,
     annars ser ordet ut att sitta för långt åt vänster i rutan */
  padding:.52rem 1.05rem .46rem calc(1.05rem + .13em);
  text-decoration:none; font-family:var(--serif); font-weight:500; font-size:var(--t-md);
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; line-height:1;
  transition:background .45s cubic-bezier(.22,.8,.25,1), color .45s cubic-bezier(.22,.8,.25,1);
}
.logo:hover{ background:var(--ink); color:#fff; }
.masthead nav{ display:flex; align-items:center; gap:var(--nav-gap); }
.masthead nav a:not(.btn){ color:var(--ink-2); text-decoration:none; font-size:var(--t-md);
  position:relative; padding-bottom:.15rem; transition:color .3s ease; }
/* understruken linje som växer fram från vänster i stället för att bara tändas */
.masthead nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s cubic-bezier(.22,.8,.25,1);
}
.masthead nav a:not(.btn):hover{ color:var(--ink); }
.masthead nav a:not(.btn):hover::after{ transform:scaleX(1); }

.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-block; text-decoration:none; font-size:var(--t-sm); font-weight:500;
  padding:.78rem 1.6rem; border:1px solid var(--ink); white-space:nowrap;
  transition:color .45s cubic-bezier(.22,.8,.25,1);
}
/* fyllningen sveper upp underifrån och texten växlar med samma kurva */
.btn::before{
  content:""; position:absolute; inset:-1px; z-index:-1;
  transform:translateY(101%);
  transition:transform .45s cubic-bezier(.22,.8,.25,1);
}
.btn:hover::before{ transform:translateY(0); }

.masthead nav a.btn-solid, .btn-solid{ background:var(--ink); color:#fff; }
.btn-solid::before{ background:#fff; }
.masthead nav a.btn-solid:hover, .btn-solid:hover{ color:var(--ink); }

.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost::before{ background:var(--ink); }
.btn-ghost:hover{ color:#fff; }

/* Touchytor. Apple och Google rekommenderar minst 44px höjd. */
@media (pointer:coarse){
  .btn{ min-height:48px; display:inline-flex; align-items:center; }
  .logo{ min-height:44px; display:inline-flex; align-items:center; }
  .docs a{ min-height:52px; }
  .colophon li a{ display:inline-flex; align-items:center; min-height:40px; }
  .people a{ display:inline-flex; align-items:center; min-height:40px; }
  .infobox .reg, .doc-foot a{ min-height:40px; align-items:center; }
}

@media (prefers-reduced-motion: reduce){
  .btn::before, .masthead nav a:not(.btn)::after{ transition:none; }
}
/* Mobilmeny. Under 940px döljs länkarna i huvudet och flyttas
   till en panel som fälls ut. Utan den finns ingen navigation alls
   på telefon, bara inloggningsknappen. */
.menu-btn{
  display:none; align-items:center; gap:var(--s-1);
  background:none; border:1px solid var(--ink); color:var(--ink);
  font:inherit; font-size:var(--t-sm); font-weight:500;
  padding:.72rem 1.1rem; cursor:pointer; min-height:44px;
}
.menu-btn .bars{ display:inline-block; width:16px; height:9px; position:relative; }
.menu-btn .bars::before, .menu-btn .bars::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform .35s cubic-bezier(.22,.8,.25,1), top .35s cubic-bezier(.22,.8,.25,1);
}
.menu-btn .bars::before{ top:0; }
.menu-btn .bars::after{ top:8px; }
.menu-btn[aria-expanded="true"] .bars::before{ top:4px; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after{ top:4px; transform:rotate(-45deg); }

.drawer{ display:none; }

@media (max-width:940px){
  .masthead nav .hide-sm{ display:none; }
  .menu-btn{ display:inline-flex; }
  /* inloggningen flyttar in i menypanelen, annars trängs tre element
     på en rad som bara rymmer två */
  .masthead nav > .btn-solid{ display:none; }

  .drawer{
    display:block; position:fixed; left:0; right:0;
    /* täcker hela vyn och lägger sidhuvudet ovanpå sig. Att i stället
       börja vid en uppmätt höjd gav en glipa högst upp på sidan, där
       sidhuvudet sitter några pixlar ned. */
    top:0; bottom:0; z-index:25;
    background:var(--paper);
    /* nedersta menyraden hamnade under hemknappsstapeln på iPhone,
       den fixerade panelen når hela vägen ned till skärmkanten */
    padding:var(--s-5) var(--pad)
            max(var(--s-5), env(safe-area-inset-bottom));
    overflow-y:auto; overscroll-behavior:contain;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,.8,.25,1),
               visibility 0s linear .35s;
  }
  .drawer.open{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,.8,.25,1),
               visibility 0s;
  }
  /* ligger sist i panelen, efter navigationen. Färgen måste sättas
     explicit eftersom .drawer a annars vinner över .btn-solid och
     gör texten mörk på mörk botten. */
  .drawer .drawer-login{
    display:flex; justify-content:center; align-items:center;
    width:100%; min-height:56px; margin:var(--s-6) 0 0;
    font-size:var(--t-md); font-weight:500; color:#fff;
  }
  .drawer .drawer-login:hover{ color:var(--ink); }
  .drawer ul{ list-style:none; margin:0; padding:0; }
  .drawer li{ border-bottom:1px solid var(--line-2); }
  .drawer a{
    display:flex; align-items:center; min-height:56px;
    text-decoration:none; color:var(--ink);
    font-size:var(--t-xl); font-weight:300; letter-spacing:-.015em;
  }
  .drawer .grp{
    margin-top:2rem; font-size:var(--t-2xs); letter-spacing:.15em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .drawer .grp + ul a{ font-size:var(--t-md); font-weight:400; min-height:48px; }
  /* Ingen låsning av bakgrunden här. overflow:hidden på body gör body
     till en rullningsyta, vilket slår ut position:sticky och får
     sidhuvudet med stängknappen att försvinna. Panelen täcker ändå
     hela vyn och overscroll-behavior hindrar att bakgrunden dras med. */
}
@media (prefers-reduced-motion: reduce){
  .drawer, .menu-btn .bars::before, .menu-btn .bars::after{ transition:none; }
}

/* ---------- Hero ---------- */
.hero{ padding:var(--s-8) var(--pad) 0; }
h1{
  font-weight:300; font-size:var(--t-4xl);
  line-height:1.02; letter-spacing:-.035em; margin:0; max-width:13ch;
}
.hero .sub{ margin:var(--s-5) 0 0; color:var(--ink-2); max-width:44ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin:2.1rem 0 var(--s-7); }

/* ---------- Illustration ---------- */
.plate{ padding:0 var(--pad); }
.plate img{
  display:block; width:100%; height:clamp(172px, 34vw, 460px);
  object-fit:cover; object-position:center bottom;
}
.plate.tight img{ height:clamp(150px, 20vw, 250px); }

/* ---------- Nyckeltal ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.stats > div{ padding:var(--s-5) clamp(1rem,2vw,2rem); border-left:1px solid var(--line); }
.stats > div:first-child{ border-left:0; padding-left:var(--pad); }
.stats > div:last-child{ padding-right:var(--pad); }
.stat-v{
  font-size:var(--t-stat); font-weight:300; letter-spacing:-.022em;
  line-height:1.1; margin:0 0 .5rem;
  font-variant-numeric: lining-nums tabular-nums;
}
/* andelsvärdet är sidans egentliga besked och väger tyngre än de tre
   procenttalen bredvid */
.stats > div:first-child .stat-v{
  font-size:var(--t-lead); color:var(--ink);
}
/* andelsvärdet är sidans besked, de två procenttalen är sammanhang */
.stats > div:first-child{ background:var(--panel-2); }
.stat-l{ font-size:var(--t-sm); color:var(--ink-2); margin:0; }
.pos{ color:var(--pos); } .neg{ color:var(--neg); }
@media (max-width:900px){
  /* på telefon får andelsvärdet hela bredden och de två procenttalen
     delar raden under */
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats > div:first-child{
    grid-column:1 / -1; border-bottom:1px solid var(--line); padding-right:var(--pad);
  }
  .stats > div:nth-child(2){ border-left:0; padding-left:var(--pad); }
  .stats > div:nth-child(3){ padding-right:var(--pad); }
}

/* ---------- Sektioner ---------- */
.section{ padding:var(--s-8) var(--pad); border-top:1px solid var(--line); }
.sec-head{
  display:grid; grid-template-columns:var(--col-main); gap:var(--col-gap);
  align-items:start; margin-bottom:var(--s-6);
}
h2{ font-weight:300; font-size:var(--t-3xl); line-height:1.06;
  letter-spacing:-.032em; margin:0; max-width:20ch; }
/* högerspalten startar i höjd med rubriken, inte med etiketten ovanför den */
.sec-head .aside{ padding-top:calc(var(--eyebrow-h) + 1.6rem); }
.sec-head .aside p{ margin:0; color:var(--ink-2); max-width:40ch; }
/* sektionshuvud utan högerspalt */
.sec-head.wide{ grid-template-columns:1fr; }
.sec-head.wide h2{ max-width:26ch; }

/* citat som avslutar sektionen */
.quote{
  margin:var(--s-7) 0 0; padding-top:var(--s-6);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:var(--col-main); gap:var(--col-gap);
  align-items:start;
}
.quote blockquote{ margin:0; }
/* Citatet sätts i serif. Sidan är annars helt grotesk, så snittbytet
   markerar att det är någons ord och inte bolagets. Serifen behöver
   mindre negativ kerning och tål något luftigare radavstånd. */
.quote blockquote p{
  margin:0; font-family:var(--serif); font-size:var(--t-2xl); font-weight:400;
  line-height:1.42; letter-spacing:-.004em; color:var(--ink); max-width:19ch;
  text-indent:-.44em;
}
.quote figcaption{ padding-top:.55rem; }
/* kort streck över namnet, klassiskt sätt att skilja rösten från citatet */
.quote figcaption::before{
  content:""; display:block; width:2.25rem; height:1px;
  background:var(--ink-3); margin-bottom:var(--s-3);
}
.quote .qn{ display:block; font-size:var(--t-sm); color:var(--ink); }
.quote .qr{
  display:block; margin-top:.35rem; font-size:var(--t-2xs); color:var(--ink-3);
  letter-spacing:.15em; text-transform:uppercase;
}
/* när högerspalten bär brödtexten är huvudet hela sektionen */
/* informationsruta för tillsynsuppgiften */
.infobox{
  background:var(--panel-2); border:1px solid var(--line);
  padding:var(--s-4); max-width:31rem;
}
.infobox .lbl{
  font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .95rem;
}
.sec-head .aside .infobox p{ margin:0; color:var(--ink); font-size:var(--t-md); max-width:34ch; }
.infobox dl{
  margin:1.25rem 0 0; padding-top:var(--s-3); border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.75rem; font-size:var(--t-sm);
}
.infobox dt{ color:var(--ink-3); }
/* Under 420px är satsytan som smalast. Långa etiketter måste få
   brytas och de fasta kolumnbredderna släppa, annars sticker
   raderna utanför kanten. */
@media (max-width:420px){
  .ledger li{ gap:.45rem; }
  .ledger .mo{ white-space:normal; }
  .ledger .dl{ width:auto; }
  .docs a{ gap:.85rem; font-size:var(--t-md); }
  .docs .mt{ align-self:flex-start; }
}

@media (max-width:560px){
  .infobox dl{ grid-template-columns:1fr; gap:.15rem; }
  .infobox dt{ margin-top:var(--s-2); }
  .infobox dt:first-of-type{ margin-top:0; }
}
.infobox dd{ margin:0; }

.infobox .reg{
  display:inline-flex; align-items:baseline; gap:.45rem; margin-top:var(--s-3);
  font-size:var(--t-sm); color:var(--ink);
}
.js .infobox, .js .quote{ opacity:0; transform:translateY(9px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.25,1); }
.js .infobox.in, .js .quote.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .infobox, .js .quote{ opacity:1 !important; transform:none !important; transition:none !important; }
}
.infobox .reg span:last-child{ font-size:.85em; }

.sec-head.solo{ margin-bottom:0; align-items:start; }
.sec-head.solo .aside p{ max-width:46ch; margin:0 0 1.05em; }
.sec-head.solo .aside p:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .sec-head{ grid-template-columns:1fr; }
  .sec-head .aside{ padding-top:0; }
}

.prose{ max-width:62ch; }
.prose p{ margin:0 0 1.05em; color:var(--ink-2); }
.prose p:last-child{ margin-bottom:0; }
.prose .lede{ font-size:var(--t-lg); line-height:1.45; color:var(--ink); font-weight:300; }
.prose strong{ color:var(--ink); font-weight:500; }

/* ---------- Kort ---------- */
.cards{
  display:grid; grid-template-columns:var(--col-main);
  gap:var(--gap); align-items:stretch;
}
.stack{ display:grid; grid-template-rows:1fr 1fr; gap:var(--gap); min-height:0; }
.card{
  background:var(--panel); border:1px solid var(--line-2);
  padding:var(--s-4);
  display:flex; flex-direction:column; height:100%; min-height:0;
}
.card.alt{ background:var(--panel-2); }
.card h3{
  font-weight:400; font-size:var(--t-xl);
  letter-spacing:-.015em; margin:0; line-height:1.2;
}
.card p{ margin:0; color:var(--ink-2); max-width:38ch; }
.card .foot{ margin-top:auto; padding-top:var(--s-5); }
/* korten i stapeln delar höjd, så det längsta styr. Ett fast stort
   avstånd skulle klämma ihop rubrik och text i just det kortet. */
.stack .card .foot{ padding-top:var(--s-4); }

.card .row{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; }
.card .row h3{ margin:0; }
.card .more{ font-size:var(--t-sm); white-space:nowrap; }
@media (max-width:900px){
  .cards{ grid-template-columns:1fr; }
  .stack{ grid-template-rows:auto auto; }
  /* på smal skärm ska korten vara innehållsstora. Det medvetna
     tomrummet mellan rubrik och text fungerar i bred spalt men
     ser ut som ett fel i en smal, och gör sidan onödigt lång. */
  .card{ min-height:0; }
  .card .foot{ padding-top:var(--s-4); }
  .card.feature .foot{ padding-top:var(--s-4); }
  .people li{ min-height:0; }
}

/* ---------- Kurva och reskontra ---------- */
.navgrid{ display:grid; grid-template-columns:var(--col-main); gap:var(--col-gap); align-items:start; }
@media (max-width:900px){ .navgrid{ grid-template-columns:1fr; } }
#plot{ display:block; width:100%; height:clamp(180px,22vw,300px); }
.ledger{ list-style:none; margin:0; padding:0; }
.ledger li{ display:flex; align-items:baseline; gap:.7rem; padding:.52rem 0; font-size:var(--t-sm); }
.ledger li + li{ border-top:1px solid var(--line-2); }
.ledger .mo{ color:var(--ink-2); white-space:nowrap; }
.ledger .ld{ flex:1; border-bottom:1px dotted #CFCEC8; transform:translateY(-.28em); min-width:1rem; }
.ledger .vl{ white-space:nowrap; }
.ledger .dl{ width:4.7rem; text-align:right; white-space:nowrap; font-size:var(--t-xs); }

/* ---------- Fakta ---------- */
.facts{ width:100%; border-collapse:collapse; text-align:left; max-width:58rem; }
.facts th, .facts td{ padding:1rem 1.5rem 1rem 0; border-bottom:1px solid var(--line-2);
  vertical-align:top; font-size:var(--t-md); font-weight:400; }
.facts th{ color:var(--ink-3); width:17rem; }
.facts tr:last-child th, .facts tr:last-child td{ border-bottom:0; }
@media (max-width:620px){
  .facts th, .facts td{ display:block; width:auto; border-bottom:0; padding:0; }
  .facts th{ padding-top:1.15rem; font-size:var(--t-xs); }
  .facts td{ padding-bottom:1.15rem; border-bottom:1px solid var(--line-2); }
}

/* ---------- Personer ---------- */
.people{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--gap); }
.people li{ background:var(--panel); border:1px solid var(--line-2); padding:1.6rem;
  display:flex; flex-direction:column; min-height:11rem; }
.people .nm{ font-size:var(--t-lg); margin:0 0 .2rem; letter-spacing:-.012em; }
.people .rl{ font-size:var(--t-sm); color:var(--ink-3); margin:0; }
.people a{ margin-top:auto; font-size:var(--t-sm); }

/* ---------- Dokument ---------- */
.docs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2); }
.docs li{ border-bottom:1px solid var(--line-2); }
.docs a{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:1.3rem 0; text-decoration:none; font-size:var(--t-lg); font-weight:300;
  transition:padding-left .45s cubic-bezier(.22,.8,.25,1); }
.docs a:hover{ padding-left:.65rem; }
.docs .mt{ font-size:var(--t-xs); color:var(--ink-3); white-space:nowrap; }

/* ---------- Sidfot ---------- */
.colophon{ border-top:1px solid var(--line); background:var(--panel-2); }
.colophon-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--s-6); padding:var(--s-7) var(--pad) var(--s-6); }
@media (max-width:800px){ .colophon-grid{ grid-template-columns:1fr 1fr; }
  .colophon-grid .brand{ grid-column:1 / -1; } }
.colophon .foot-h{
  font-size:var(--t-md); font-weight:400; color:var(--ink-3);
  /* rubriknivån ärvde h2-reglernas hårda kerning och maxbredd */
  letter-spacing:0; line-height:1.4; max-width:none;
  margin:0 0 var(--s-3);
}
.colophon ul{ list-style:none; margin:0; padding:0; }
.colophon li{ margin-bottom:.65rem; }

.addr{ font-style:normal; color:var(--ink-2); font-size:var(--t-md); margin:1.8rem 0 0; }
.copy{ color:var(--ink-2); font-size:var(--t-sm); margin:1.1rem 0 0; }
.risk{ padding:0 var(--pad) 1.75rem; color:var(--ink-3); font-size:var(--t-xs);
  line-height:1.6; max-width:88ch; }
.footplate{ overflow:hidden; }
.footplate img{ display:block; width:100%; height:clamp(140px,17vw,240px);
  object-fit:cover; object-position:center top; opacity:.9; }

/* ---------- Rörelse ---------- */
.js .reveal{ opacity:0; transform:translateY(12px); }
.js .reveal.in{ opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .reveal.in{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   DOKUMENTSIDOR (regelverk)
   ============================================================ */

.doc{ padding:var(--s-8) var(--pad) clamp(3.5rem,7vw,6rem); }

.doc-head{
  display:grid; grid-template-columns:var(--col-main);
  gap:var(--col-gap); align-items:start;
  margin-bottom:var(--s-7);
}
@media (max-width:900px){ .doc-head{ grid-template-columns:1fr; } }

.doc h1{
  font-weight:300; font-size:var(--t-3xl); line-height:1.06;
  letter-spacing:-.032em; margin:0; max-width:18ch;
}
.doc .sub{
  margin:1.1rem 0 0; color:var(--ink-2); font-size:var(--t-md); max-width:44ch;
}
.doc-head .aside{ padding-top:calc(var(--eyebrow-h) + 1.6rem); }
@media (max-width:900px){ .doc-head .aside{ padding-top:0; } }

.doc-body{ max-width:66ch; }
.doc-body > *:first-child{ margin-top:0; }
.doc-body p{ margin:0 0 1.1em; color:var(--ink-2); }
.doc-body strong{ color:var(--ink); font-weight:500; }
.doc-body h2{
  font-weight:400; font-size:var(--t-xl); line-height:1.25;
  letter-spacing:-.014em; color:var(--ink); max-width:none;
  margin:var(--s-6) 0 1rem;
  padding-top:var(--s-4); border-top:1px solid var(--line-2);
}
.doc-body ul{ list-style:none; margin:0 0 1.6em; padding:0; }
.doc-body li{
  padding:.95rem 0 .95rem 1.5rem; position:relative;
  border-bottom:1px solid var(--line-2); color:var(--ink-2);
}
.doc-body li:first-child{ border-top:1px solid var(--line-2); }
.doc-body li::before{
  content:""; position:absolute; left:0; top:1.62rem;
  width:5px; height:5px; background:var(--ink-3);
}
.doc-body .contact{
  margin-top:1.4rem; padding:var(--s-4);
  background:var(--panel-2); border:1px solid var(--line);
}
.doc-body .contact p{ margin:0; color:var(--ink); }
.doc-body .contact .r{ color:var(--ink-2); font-size:var(--t-sm); margin-top:.3rem; }


.doc-foot{
  margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:baseline;
}
.doc-foot a{
  display:inline-flex; align-items:baseline; gap:.45rem;
  font-size:var(--t-sm); color:var(--ink);
}
.doc-foot a span:last-child{ font-size:.85em; }

/* ============================================================
   TILLÄGG EFTER BAMBAS GENOMGÅNG
   ============================================================ */


/* kolumnetikett över en lista eller tabell */
.col-lbl{
  margin:0 0 1.1rem; font-size:var(--t-xs); color:var(--ink-3);
}
.note{
  margin:1.1rem 0 0; font-size:var(--t-xs); color:var(--ink-3); max-width:44ch;
}

/* raden "Sedan start" och "CAGR" väger tyngre än enskilda år */
.ledger li.strong{ border-top:1px solid var(--line); }
.ledger li.strong + li.strong{ border-top:1px solid var(--line-2); }
.ledger li.strong .mo,
.ledger li.strong .dl{ color:var(--ink); font-weight:500; }
.ledger li.strong .dl.pos{ color:var(--pos); }

/* Om Bamba: faktaruta över, personkorten under */
.team{
  display:grid; grid-template-columns:var(--col-main);
  gap:var(--col-gap);
  margin-top:var(--s-7);
  align-items:start;
}
.team-aside{ order:2; }
.team .people{ order:1; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){
  .team{ grid-template-columns:1fr; gap:1.5rem; }
  .quote{ grid-template-columns:1fr; gap:var(--s-4); }
  .quote figcaption{ padding-top:0; }
  .team-aside{ order:1; }
  .team .people{ order:2; grid-template-columns:1fr; }
}

/* Villkor: löptext bredvid faktatabellen */
.villkor-grid{
  display:grid; grid-template-columns:var(--col-main);
  gap:var(--col-gap); align-items:start;
}
.villkor-grid .prose{ max-width:44ch; }
.villkor-grid .facts{ max-width:none; }
.villkor-grid .facts th{ width:12.5rem; }
.sub-h{
  margin:2rem 0 .5rem !important; color:var(--ink) !important; font-weight:500;
}
@media (max-width:900px){ .villkor-grid{ grid-template-columns:1fr; } }

/* ensam dokumentrad under löptexten: mer luft mot länken ovanför,
   och samma satsbredd som prosan bredvid */
.docs.tight{ margin-top:var(--s-5); max-width:44ch; }

/* Rapporter och pressmeddelanden i två spalter */
.release-grid{
  display:grid; grid-template-columns:var(--col-main);
  gap:var(--col-gap); align-items:start;
}
/* samma brytpunkt som övriga sektioner, annars står spalterna
   kvar i två under ett enspaltigt sektionshuvud */
@media (max-width:900px){ .release-grid{ grid-template-columns:1fr; gap:var(--s-6); } }

/* sektionshuvud som bara bär en etikett, utan rubrik under */
.sec-head.label-only{ margin-bottom:var(--s-5); }
.sec-head.label-only .eyebrow{ margin-bottom:0; }

/* ============================================================
   ETT LÄNKIDIOM FÖR HELA INNEHÅLLET
   En vilande hårfin linje som mörknar från vänster vid hover.
   Ersätter sex olika beteenden som fanns tidigare.
   ============================================================ */
.infobox .reg,
.infobox dd a,
.card .more,
.people a,
.colophon li a,
.doc-foot a,
.doc-body .contact a,
.facts a,
.prose a{
  color:var(--ink);
  text-decoration:none;
  padding-bottom:.14rem;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--line), var(--line));
  background-size:0% 1px, 100% 1px;
  background-position:0 100%, 0 100%;
  background-repeat:no-repeat;
  transition:background-size .45s cubic-bezier(.22,.8,.25,1);
}
.infobox .reg:hover,
.infobox dd a:hover,
.card .more:hover,
.people a:hover,
.colophon li a:hover,
.doc-foot a:hover,
.doc-body .contact a:hover,
.facts a:hover,
.prose a:hover{ background-size:100% 1px, 100% 1px; }

@media (prefers-reduced-motion: reduce){
  .infobox .reg, .infobox dd a, .card .more, .people a, .colophon li a,
  .doc-foot a, .doc-body .contact a, .facts a, .prose a{ transition:none; }
}

/* fokusmarkering med tydlig form, inte webbläsarens standard */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

/* ============================================================
   AKTIVT AVSNITT I MENYN
   ============================================================ */
.masthead nav a.current{ color:var(--ink); }
.masthead nav a.current::after{ transform:scaleX(1); }

/* ============================================================
   FRAMHÄVT KORT
   Illustrationen låg tidigare på tre ställen. Två räcker: överst
   och underst, som ram runt sidan. Kortet bär text i stället.
   ============================================================ */
.card.feature h3{
  font-size:var(--t-3xl); font-weight:300; letter-spacing:-.028em;
  line-height:1.06; max-width:11ch;
}
.card.feature .foot{ padding-top:var(--s-7); }
.card.feature .row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s-4); flex-wrap:wrap;
}
.card.feature p{ max-width:34ch; }

/* ============================================================
   TILLÄGG EFTER BAMBAS ANDRA GENOMGÅNG
   ============================================================ */

/* datum över nyckeltalen */
.stats-date{
  margin:0; padding:var(--s-4) var(--pad) 0;
  font-size:var(--t-xs); color:var(--ink-3);
}

/* platshållare tills diagrammet med NAV per kvartal finns */
.plot-placeholder{ overflow:hidden; background:var(--panel-2); }
.plot-placeholder img{
  display:block; width:100%; height:clamp(180px,22vw,300px);
  object-fit:cover; object-position:center bottom;
}

/* "Mejl" i stället för utskriven adress, se site.js */
a.mail{ cursor:pointer; }
a.mail:not([href]){ color:var(--ink-3); }

/* ============================================================
   MENYPANELENS EGET HUVUD
   Sidhuvudet är klistrat och kan hoppa ur position när sidan
   låses vid öppen panel. Då försvann vägen tillbaka. Panelen
   bär därför sin egen rad med ordmärke och stängknapp, och
   sidhuvudet döljs så länge den är öppen.
   ============================================================ */
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4);
  padding-bottom:var(--s-5);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--s-4);
}
.drawer-close{
  display:inline-flex; align-items:center; gap:.55rem;
  font:inherit; font-size:var(--t-sm); letter-spacing:.02em;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:0;
  padding:.62rem 1.05rem; min-height:44px; cursor:pointer;
  transition:border-color .45s cubic-bezier(.22,.8,.25,1);
}
.drawer-close:hover{ border-color:var(--ink); }
.drawer-close .x{ font-size:1.15em; line-height:1; }

body.nav-open .masthead{ visibility:hidden; }