/* ============================================================
   Nätverkstan UF — designsystem
   Ljus, varm bas. En accent. Få regler, tydlig rytm.
   ============================================================ */

/* ------------------------------------------------------------
   Typsnittet ligger på vår egen server, inte hos Google.

   Två skäl. Besökarens IP-adress skickas annars till Google vid
   varje sidvisning, vilket kräver samtycke enligt en tysk dom och
   är onödigt att riskera. Och sidan blir snabbare: hämtningen från
   Google kostade uppkoppling till två främmande domäner plus ett
   CSS-anrop som måste besvaras innan webbläsaren ens visste vilken
   typsnittsfil den skulle be om.

   Archivo ligger under SIL Open Font License, som tillåter det här.
   Filerna är variabla — en fil täcker alla vikter 400–700 och alla
   bredder 75–100 % som sajten använder.

   unicode-range gör att webbläsaren bara hämtar det den behöver:
   en svensk sida rör aldrig latin-ext-filerna.
   ------------------------------------------------------------ */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:75% 100%;
  font-display:swap;
  src:url('/assets/font/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:75% 100%;
  font-display:swap;
  src:url('/assets/font/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:italic;
  font-weight:400 700;
  font-stretch:75% 100%;
  font-display:swap;
  src:url('/assets/font/archivo-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:italic;
  font-weight:400 700;
  font-stretch:75% 100%;
  font-display:swap;
  src:url('/assets/font/archivo-latin-ext-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Ytor — varmt off-white, aldrig kallt vitt */
  --bg:#FAF7F3;
  --card:#FFFFFF;
  --tint:#F2EBE4;
  --ink-bg:#141010;          /* mörka band (footer, CTA) */

  /* Text */
  --ink:#171210;
  --ink-2:#544B44;
  --ink-3:#8A7F76;

  /* Accent — samma röd-orange som tidigare */
  --accent:#FF4A1C;          /* fyllningar, dekor, glöd */
  --accent-deep:#D8330A;     /* text och knappar på ljust (AA-kontrast) */
  --accent-soft:#FFF1EB;     /* mycket ljus accentyta */

  --line:rgba(23,18,16,.10);
  --line-2:rgba(23,18,16,.16);

  --shadow-s:0 1px 2px rgba(23,18,16,.05), 0 4px 14px -6px rgba(23,18,16,.10);
  --shadow-m:0 2px 6px rgba(23,18,16,.05), 0 18px 40px -22px rgba(23,18,16,.30);
  --shadow-l:0 30px 70px -34px rgba(23,18,16,.42), 0 10px 24px -14px rgba(23,18,16,.16);
  --glow:0 24px 60px -26px rgba(255,74,28,.55);

  --r-s:12px;
  --r:18px;
  --r-l:26px;
  --pill:999px;

  --maxw:1160px;
  --gutter:clamp(1.1rem, 4vw, 2.2rem);

  /* Ett enda typsnitt på hela sajten. Archivo är en variabel
     grotesk med en breddaxel, så rubrikerna smalnas av med
     font-stretch i stället för att vi blandar in fler familjer.
     Ett typsnitt, två bredder — det är vad som gör intrycket
     stramt i stället för hopplockat. */
  --font-display:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Bredden på rubriker. 100% är normal, lägre är smalare.
     Sänk till 80 för strängare, höj till 92 för mjukare. */
  --w-rubrik:85%;

  /* Färgerna en knapp byter till vid hover. Byts ut i .ink, annars
     skulle vit fyllning möta vit text på de mörka banden. */
  --swap-bg:#171210;
  --swap-fg:#FFFFFF;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);
}

/* Mörka band ärver samma variabler — allt inuti anpassar sig */
.ink{
  --bg:#141010;
  --card:#1E1815;
  --tint:#241C18;
  --ink:#FFFFFF;
  --ink-2:#C6BBB3;
  --ink-3:#93877F;
  --accent-deep:#FF5C31;
  --accent-soft:rgba(255,74,28,.14);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --shadow-s:none;
  --shadow-m:0 20px 50px -30px rgba(0,0,0,.9);
  --shadow-l:0 40px 90px -40px rgba(0,0,0,.9);
  --swap-bg:#FFFFFF;
  --swap-fg:#141010;
  background:var(--ink-bg);
  color:var(--ink);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:120px}

body{
  font-family:var(--font-body);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.62;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, inte hidden: hidden gör body till en scrollcontainer, vilket
     slår sönder position:sticky för processektionen. clip klipper bara. */
  overflow-x:clip;
}

/* Mycket svag varm ljuspöl högst upp — ger djup utan att synas */
body::before{
  content:"";position:fixed;inset:-20% -20% auto -20%;height:70vh;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48% 60% at 22% 0%, rgba(255,74,28,.10), transparent 70%),
    radial-gradient(38% 55% at 82% 6%, rgba(255,138,60,.08), transparent 70%);
}
/* Papperskorn — knappt synligt, bara känsla */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--accent);color:#fff}

:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:6px}

.skip{
  position:absolute;left:1rem;top:-100px;z-index:1000;padding:.7rem 1.1rem;
  background:var(--ink);color:#fff;border-radius:var(--pill);transition:top .2s;
}
.skip:focus{top:1rem}

/* ---------- Typografi ---------- */
h1,h2,h3,h4,.display,.h1,.h2,.h3{
  font-family:var(--font-display);
  font-weight:600;
  font-stretch:var(--w-rubrik);
  letter-spacing:-.012em;
  line-height:1.12;
  text-wrap:balance;
}
/* Smala bokstäver bär tätare radavstånd och behöver mindre
   negativ knipning — texten sitter redan ihop på bredden. */
/* Storlekarna sänkta ett snäpp och radavstånden öppnade. 1,02 var så
   tätt att raderna nästan rörde vid varandra, vilket i kombination med
   den stora graden gjorde rubrikerna tunga att läsa. Lite mindre och
   lite luftigare läser bättre och ser mer avsiktligt ut. */
.display{font-size:clamp(2.05rem,1.3rem + 3.5vw,4rem);line-height:1.08;letter-spacing:-.018em}
.h1{font-size:clamp(1.75rem,1.3rem + 2.2vw,2.95rem);line-height:1.12;letter-spacing:-.014em}
.h2{font-size:clamp(1.6rem,1.25rem + 1.5vw,2.35rem);line-height:1.16}
.h3{font-size:clamp(1.18rem,1.08rem + .45vw,1.4rem);line-height:1.26;letter-spacing:-.008em;font-stretch:92%}

/* Enstaka ord i kursiv. Tidigare en serif — den lutande serifen
   mitt i en rubrik har blivit ett så vanligt grepp att den läser
   som mall. Samma typsnitt lutat gör samma sak, tystare. */
em.ser,.ser{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:600;
  font-stretch:var(--w-rubrik);
  letter-spacing:-.012em;
}

.lead{
  font-size:clamp(1.06rem,1rem + .38vw,1.25rem);
  line-height:1.6;color:var(--ink-2);max-width:58ch;
}
.small{font-size:.885rem;line-height:1.55}
.muted{color:var(--ink-3)}
p+p{margin-top:1em}

.eyebrow{
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.735rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);
}
.eyebrow::before{
  content:"";width:22px;height:1px;background:currentColor;opacity:.55;
  transform-origin:left;animation:dash 3.8s var(--ease) infinite;
}
@keyframes dash{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.32)}}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}
.section{padding-block:clamp(4rem,3rem + 5.5vw,7rem);position:relative}
.section--tight{padding-block:clamp(2.8rem,2.2rem + 3vw,4.4rem)}
.stack>*+*{margin-top:1.1rem}
.center{text-align:center;margin-inline:auto}

.shead{max-width:62ch;margin-bottom:clamp(2.2rem,1.6rem + 2vw,3.4rem)}
.shead>*+*{margin-top:1rem}
.shead.center{text-align:center;margin-inline:auto}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Knappar ---------- */
.btn{
  --b-bg:var(--ink);--b-fg:#fff;
  position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.4rem;border-radius:var(--pill);
  font-family:var(--font-body);font-size:.955rem;font-weight:600;letter-spacing:-.008em;
  color:var(--b-fg);background:var(--b-bg);
  isolation:isolate;overflow:hidden;white-space:nowrap;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), color .35s, background .35s;
  box-shadow:var(--shadow-s);
}
.btn::before{ /* mjuk svep-fyllning vid hover */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(105deg,#FF6A3D,var(--accent) 45%,var(--accent-deep));
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .45s var(--ease);font-size:.95em}
.btn:hover .arw{transform:translate(3px,-3px)}

.btn--accent{--b-bg:linear-gradient(105deg,#FF6234,var(--accent-deep));--b-fg:#fff;box-shadow:var(--glow)}
.btn--accent::before{background:var(--swap-bg)}
.btn--accent:hover{--b-fg:var(--swap-fg);box-shadow:0 28px 60px -28px rgba(255,74,28,.7)}

.btn--ghost{--b-bg:transparent;--b-fg:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost::before{background:var(--swap-bg)}
.btn--ghost:hover{--b-fg:var(--swap-fg);box-shadow:inset 0 0 0 1px transparent}

.btn--lg{padding:1rem 1.7rem;font-size:1.01rem}
.btn--sm{padding:.6rem 1.05rem;font-size:.88rem}

.btns{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* ---------- Portalknappen ----------
   Knappen längst ner på varje sida. Vid hover öppnar den sig och
   visar kontaktsidan i miniatyr — en riktig sida i en iframe, inte
   en bild. Vid klick zoomas den upp till full skärm innan
   navigeringen sker, så att man känner att man går in i sidan.
   Utan mus (telefon, tangentbord, reducerad rörelse) beter den sig
   som en helt vanlig knapp.                                        */
.portal{
  --portal-w:360px;
  --portal-h:216px;
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  width:266px;height:56px;max-width:100%;
  border-radius:var(--pill);
  background:linear-gradient(105deg,#FF6234,var(--accent-deep));
  color:#fff;box-shadow:var(--glow);
  transition:width .65s var(--ease), height .65s var(--ease),
             border-radius .65s var(--ease), box-shadow .65s var(--ease),
             transform .5s var(--ease);
}
.portal__frame{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:#FAF7F3;
  opacity:0;transition:opacity .5s var(--ease);
}
.portal__frame::after{ /* hårfin innerkant, som en glasruta */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);z-index:3;
}

/* Två lager i samma koordinatsystem (1280 px sidbredd), båda skalade
   med --s: en ritad attrapp som alltid finns, och den riktiga sidan
   ovanpå när iframen har laddat. Utan iframe blir det attrappen —
   effekten fungerar alltid. */
/* Iframen renderas i besökarens EGEN fönsterstorlek (--pw/--ph, satta
   av main.js). Då är miniatyren en förminskning av exakt den sida man
   landar på — och vid full inzoomning blir skalan 1, alltså pixel för
   pixel samma sak som destinationen. */
.portal__frame iframe{
  position:absolute;top:0;left:0;
  width:var(--pw,1280px);height:var(--ph,900px);border:0;
  transform-origin:top left;transform:scale(var(--sf,.28));
  pointer-events:none;z-index:2;
  opacity:0;transition:opacity .4s var(--ease);
}
.portal[data-ready] .portal__frame iframe{opacity:1}

/* Attrappen är abstrakt och ritas alltid i 1280×900, med egen skala */
.portal__mock{
  position:absolute;top:0;left:0;width:1280px;height:900px;
  transform-origin:top left;transform:scale(var(--sm,.28));
  pointer-events:none;
}

.portal__mock{background:#FAF7F3;padding:110px 90px 0}
.portal__mock i{display:block;border-radius:8px;background:rgba(23,18,16,.13)}
.portal__mock .pm-bar{
  position:absolute;top:26px;left:50%;transform:translateX(-50%);
  width:1100px;height:64px;border-radius:999px;background:#fff;
  box-shadow:0 10px 30px -18px rgba(23,18,16,.5);
}
.portal__mock .pm-eye{width:150px;height:16px;border-radius:6px;background:var(--accent);margin-bottom:34px}
.portal__mock .pm-h{height:56px;border-radius:12px;background:rgba(23,18,16,.82);margin-bottom:18px}
.portal__mock .pm-h.s{width:64%}
.portal__mock .pm-t{height:18px;margin-top:30px}
.portal__mock .pm-t.s{width:52%;margin-top:14px}
.portal__mock .pm-btn{
  width:280px;height:64px;border-radius:999px;margin-top:56px;
  background:linear-gradient(105deg,#FF6234,#D8330A);
}
.portal__label{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-body);font-size:1.01rem;font-weight:600;letter-spacing:-.008em;
  padding:.5rem 1.05rem;border-radius:var(--pill);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), opacity .3s;
}
.portal__label .arw{transition:transform .45s var(--ease)}

@media (hover:hover){
  .portal:hover,.portal:focus-visible{
    width:var(--portal-w);height:var(--portal-h);border-radius:26px;
    box-shadow:0 44px 90px -34px rgba(255,74,28,.6);
  }
  .portal:hover .portal__frame,.portal:focus-visible .portal__frame{opacity:1}
  .portal:hover .portal__label,.portal:focus-visible .portal__label{
    background:rgba(15,11,10,.76);box-shadow:0 8px 24px -10px rgba(0,0,0,.7);
  }
  .portal:hover .arw{transform:translate(3px,-3px)}
}
/* Mäts fram: JS lägger på klassen ett ögonblick för att läsa av hur bred
   knappen blir i öppet läge, och räknar ut miniatyrens skala därifrån.
   Att läsa --portal-w direkt går inte — den kan vara i procent. */
.portal.is-measuring{width:var(--portal-w);height:var(--portal-h);transition:none}

/* Klicket: knappen lyfts ur flödet och växer till full skärm */
.portal.is-zoom{
  position:fixed;z-index:9999;margin:0;
  /* Accelererar först, bromsar in mot slutet — det är den kurvan
     som får det att kännas som en förflyttning, inte en uttoning. */
  transition:top .8s cubic-bezier(.62,.02,.34,1), left .8s cubic-bezier(.62,.02,.34,1),
             width .8s cubic-bezier(.62,.02,.34,1), height .8s cubic-bezier(.62,.02,.34,1),
             border-radius .8s cubic-bezier(.62,.02,.34,1);
}
.portal.is-zoom .portal__frame{opacity:1;transition:none}
.portal.is-zoom .portal__frame iframe,
.portal.is-zoom .portal__mock{transition:transform .8s cubic-bezier(.62,.02,.34,1)}
.portal.is-zoom .portal__frame::after{opacity:0;transition:opacity .3s}
.portal.is-zoom .portal__label{opacity:0;transition:opacity .22s}

@media (max-width:520px){
  .portal{width:100%;--portal-w:100%}
}

/* Textlänk med underlinje som ritas */
.tlink{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--accent-deep);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease);
  padding-bottom:2px;
}
.tlink:hover{background-size:100% 1px}
.tlink span{transition:transform .4s var(--ease)}
.tlink:hover span{transform:translateX(3px)}

/* ---------- Header: kompakt pill ---------- */
/* Centreras med margin, INTE med translateX — transform reserveras helt
   åt göm-animationen. Blandas de två börjar headern hacka vid scroll. */
.hdr{
  position:fixed;z-index:100;top:14px;left:0;right:0;
  margin-inline:auto;
  width:min(var(--maxw), calc(100% - 28px));
  transform:translate3d(0,0,0);
  transition:transform .42s var(--ease-2);
  will-change:transform;
}
.hdr__box{
  position:relative;border-radius:var(--pill);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 10px -4px rgba(23,18,16,.12), 0 16px 40px -28px rgba(23,18,16,.5);
  border:1px solid rgba(23,18,16,.07);
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
  overflow:hidden;
}
.hdr.is-stuck .hdr__box{
  background:rgba(255,255,255,.88);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 4px 14px -6px rgba(23,18,16,.16), 0 22px 50px -30px rgba(23,18,16,.6);
}
.hdr.is-hidden{transform:translate3d(0,calc(-100% - 22px),0)}

.hdr__inner{display:flex;align-items:center;gap:1rem;padding:.5rem .55rem .5rem 1.1rem}

/* Tunn läsprogress längst ner i pillen */
.hdr__prog{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none}
.hdr__prog i{
  display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:left;
  background:linear-gradient(90deg,var(--accent),#FF8A3C);
}

.logo{display:inline-flex;align-items:center;gap:.55rem;flex-shrink:0}
.logo svg{width:19px;height:21px;stroke:var(--ink);stroke-width:9;stroke-linecap:square;fill:none;transition:stroke .3s}
.logo__txt{
  font-family:var(--font-display);font-weight:600;font-size:1.015rem;letter-spacing:-.03em;
  color:var(--ink);
}
.logo__txt b{font-weight:600;color:var(--accent-deep)}
.logo:hover svg{stroke:var(--accent-deep)}

.nav{display:flex;align-items:center;gap:.15rem;margin-inline:auto}
.nav a{
  position:relative;padding:.5rem .8rem;border-radius:var(--pill);
  font-size:.925rem;font-weight:500;color:var(--ink-2);
  transition:color .3s, background .3s;
}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:.32rem;width:4px;height:4px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,4px) scale(0);opacity:0;transition:.4s var(--ease);
}
.nav a:hover{color:var(--ink);background:rgba(23,18,16,.045)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a[aria-current="page"]::after{transform:translate(-50%,0) scale(1);opacity:1}

.hdr__inner>.btn{padding:.62rem 1.15rem;font-size:.9rem}

.burger{
  display:none;width:42px;height:42px;border-radius:50%;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:rgba(23,18,16,.05);
}
.burger i{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;transition:.45s var(--ease)}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* Pillen växer till panel på mobil */
.hdr__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.hdr__panel>div{overflow:hidden;min-height:0}
.hdr.is-open .hdr__panel{grid-template-rows:1fr}
.hdr__nav{padding:.4rem .8rem .8rem;display:grid;gap:.1rem}
.hdr__nav a{
  display:flex;align-items:center;justify-content:space-between;
  padding:.72rem .6rem;border-radius:12px;
  font-family:var(--font-display);font-size:1.1rem;font-weight:500;color:var(--ink);
  border-top:1px solid var(--line);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .25s;
}
.hdr__nav a span{font-size:.72rem;color:var(--ink-3);letter-spacing:.1em;font-family:var(--font-body)}
.hdr__nav a:active{background:var(--tint)}
.hdr__nav a[aria-current="page"]{color:var(--accent-deep);font-weight:600}
.hdr__nav a[aria-current="page"] span{color:var(--accent-deep)}
.hdr.is-open .hdr__nav a{opacity:1;transform:none}
.hdr.is-open .hdr__nav a:nth-child(1){transition-delay:.06s}
.hdr.is-open .hdr__nav a:nth-child(2){transition-delay:.11s}
.hdr.is-open .hdr__nav a:nth-child(3){transition-delay:.16s}
.hdr.is-open .hdr__nav a:nth-child(4){transition-delay:.21s}
.hdr.is-open .hdr__nav a:nth-child(5){transition-delay:.26s}
.hdr.is-open .hdr__nav a:nth-child(6){transition-delay:.31s}
.hdr__cta{padding:0 .8rem .8rem;display:grid;gap:.5rem}
.hdr__cta .btn{width:100%;justify-content:center;padding:.85rem 1.2rem;font-size:.98rem}
.hdr__meta{padding:0 1.4rem 1.05rem;font-size:.85rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.hdr__meta a:hover{color:var(--accent-deep)}

@media (max-width:940px){
  .hdr{top:10px;width:calc(100% - 20px)}
  .hdr__box{border-radius:24px}
  .hdr.is-open .hdr__box{background:rgba(255,255,255,.96)}
  .hdr__inner{padding:.55rem .6rem .55rem 1rem}
  .nav{display:none}
  .hdr__inner>.btn{display:none}
  .burger{display:flex}
  .logo{margin-inline-end:auto}
}
@media (min-width:941px){
  .hdr__panel{display:none}
}

/* ---------- Footer ---------- */
.footer{position:relative;overflow:hidden}
.footer::before{
  content:"";position:absolute;inset:auto -10% -55% -10%;height:75%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%, rgba(255,74,28,.20), transparent 70%);
}
.footer__cta{
  position:relative;text-align:center;
  padding-block:clamp(4rem,3rem + 5vw,6.5rem) clamp(2.5rem,2rem + 2vw,3.5rem);
}
.footer__cta .display{max-width:16ch;margin-inline:auto}
/* Höjden reserveras i förväg så att portalknappens öppning inte
   knuffar footern nedåt när man hovrar. */
.footer__cta .btns{justify-content:center;margin-top:2rem}
@media (hover:hover){
  .footer__cta .btns:has(.portal){min-height:216px}
}
.footer__grid{
  position:relative;display:grid;gap:2.2rem;
  grid-template-columns:1.6fr 1fr 1fr;
  padding-block:clamp(2.4rem,2rem + 2vw,3.4rem);
  border-top:1px solid var(--line);
}
.footer__grid h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:1rem}
.footer__grid ul{display:grid;gap:.15rem}
.footer__grid a:not(.logo){color:var(--ink-2);transition:color .3s}
.footer__grid a:not(.logo):hover{color:var(--accent-deep)}
/* Länkarna var 17 px höga — svårt att träffa med en tumme. Tryckytan
   växer med padding i stället för med textstorlek, så utseendet är sig
   likt medan ytan blir dryga 40 px. Radavståndet ovan minskas lika
   mycket som padding lägger till, annars glesnar spalten. */
.footer__grid li > a{display:inline-block;padding-block:.55rem}
.footer__bottom{
  position:relative;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;
  padding-block:1.5rem 2rem;border-top:1px solid var(--line);
  font-size:.845rem;color:var(--ink-3);
}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>*:first-child{grid-column:1/-1}}

/* ---------- Till toppen ---------- */
.totop{
  position:fixed;right:18px;bottom:18px;z-index:90;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-bg);color:#fff;box-shadow:var(--shadow-m);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:.55s var(--ease);
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--accent-deep)}

/* ============================================================
   Animationer
   ============================================================ */

/* Grundläggande in-toning */
[data-reveal]{
  opacity:0;transform:translateY(18px);filter:blur(6px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay:var(--d,0s);
}
[data-reveal="scale"]{transform:translateY(22px) scale(.97)}
[data-reveal="left"]{transform:translateX(-22px)}
[data-reveal="right"]{transform:translateX(22px)}
[data-reveal="fade"]{transform:none}
.is-in[data-reveal]{opacity:1;transform:none;filter:blur(0)}
/* Filtret tas bort helt när in-toningen är klar. Ett kvarliggande
   filter — även blur(0) — gör elementet till referensram för
   position:fixed hos allt inuti, vilket ställer till det för
   portalknappens inzoomning. */
.is-done[data-reveal]{filter:none;will-change:auto}

/* Rubriker som stiger ord för ord */
/* white-space:nowrap är nödvändig, inte kosmetisk. Utan den räknar
   text-wrap:balance på de här inline-blocken som om varje ord fick
   brytas inuti sig självt, och långa rubriker radas upp ett tecken
   per rad på smala skärmar. */
/* Ordet ligger i en mask som det stiger upp bakom. Masken klipper, så
   den måste vara högre än raden — annars kapas det som sticker ut.

   Nedåt är det underslängarna i g, j och y. Uppåt är det ringen på Å
   och prickarna på Ä och Ö, som sitter ovanför versalhöjden. Med
   line-height 1,02 ligger takhöjden 0,87 em över baslinjen medan Å når
   0,94 em — ringen kapades alltså rakt av. På svenska rubriker syns det
   nästan alltid.

   Utrymmet läggs till med padding och tas bort igen med lika stor
   negativ marginal, så att ordet står kvar på exakt samma plats. */
/* Måtten är tilltagna med flit och gäller vilket typsnitt som helst.

   Uppmätt vid 100 px em: Archivo har stigning 88 och underslängar 19,
   medan Segoe UI — reserven på Windows — har 108 respektive 24. Den
   höga stigningen trycker ned hela raden i masken, så att underslängen
   i g, j och y behöver 0,145 em extra i stället för Archivos 0,015.
   Var måttet satt efter Archivo kapades g:et så fort typsnittet inte
   hann ladda, eller inte laddade alls.

   Uppåt är det tvärtom: Archivos Å når 0,93 em och behöver mest.
   Värdena nedan täcker det värsta fallet åt båda hållen. */
.sp{
  display:inline-block;overflow:hidden;vertical-align:top;
  white-space:nowrap;
  padding-top:.16em;margin-top:-.16em;
  padding-bottom:.2em;margin-bottom:-.2em;
}
.sp i{
  display:inline-block;font-style:inherit;
  /* Ordet parkeras under masken i väntan på att stiga upp. 100 % är
     ordets egen höjd; tillägget måste täcka både luften under raden och
     att ringen på Å når en bit ovanför sin egen ruta. Med bara 106 %
     kikade ringarna fram nedtill innan animationen börjat. */
  transform:translateY(calc(100% + .42em));
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--i) * 45ms);
}
.is-in .sp i{transform:none}

/* Rullande textband */
.marq{
  overflow:hidden;padding-block:1.1rem;
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marq__track{display:flex;width:max-content;will-change:transform}
.marq__track>span{
  display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;
  font-family:var(--font-display);font-size:clamp(.95rem,.9rem + .3vw,1.12rem);
  font-weight:500;color:var(--ink-2);white-space:nowrap;
}
.marq__track>span i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* ============================================================
   Sidövergångar
   Webbläsare som stöder View Transitions korsar över mellan
   sidorna istället för att blinka vitt. Övriga navigerar som
   vanligt — ingenting går sönder, effekten uteblir bara.
   ============================================================ */
@view-transition{navigation:auto}

::view-transition-old(root){animation:pageOut .3s var(--ease-2) both}
::view-transition-new(root){animation:pageIn .45s var(--ease) both}
@keyframes pageOut{to{opacity:0;transform:translateY(-10px) scale(.995)}}
@keyframes pageIn{from{opacity:0;transform:translateY(14px) scale(.995)}}

/* Headern och till-toppen-knappen ligger stilla — de finns ju
   på båda sidorna och ska inte tona över sig själva. */
.hdr{view-transition-name:hdr}
.totop{view-transition-name:totop}
::view-transition-group(hdr),
::view-transition-group(totop){animation-duration:.3s}

/* Kommer man in genom att zooma in i portalknappen har man redan
   sett sidan i miniatyr. Då ska bytet inte märkas alls: ingen
   glidning, bara en kort överkorsning där den nya sidan tonas in
   ovanpå den gamla. Klassen sätts av main.js innan första uppritningen. */
.from-portal::view-transition-old(root){animation:none;opacity:1}
.from-portal::view-transition-new(root){animation:portalArrive .22s linear both}
.from-portal::view-transition-group(hdr),
.from-portal::view-transition-group(totop){animation:none}
@keyframes portalArrive{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none;filter:none}
  .sp i{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}