/* =========================================================
   FRONTNESS: Webbyrå i Borås
   Design: Lumora-mallen (ljus, rem-baserat adaptivt rutnät)
   ========================================================= */

/* ============================= tokens ============================= */
:root{
  --background:#ffffff;
  --foreground:#111111;
  --ink:#0a0a0a;
  --muted:#8d8d8d;
  --subtle:#b6b6b6;
  --line:#e6e5e2;
  --surface:#f1f0ee;
  --surface-2:#e3e2df;
  --accent:#b15f2c;
  --accent-from:#cf8047;
  --accent-to:#97501f;
  --hero-from:#ecebe9;
  --hero-to:#c9c9c9;
  --radius-pill:9999px;
  --radius-card:2rem;
  --radius-card-sm:1.25rem;
  /* Mjuk korthöjning: ersätter kanterna på ljusgrå bakgrund i appen. */
  --shadow-card:0 1px 2px rgba(17,17,16,.04), 0 8px 24px -10px rgba(17,17,16,.10);
  --radius-control:0.875rem;
  --text-watermark:13rem;
  --container-shell:88rem;
  --h2-size:2.25rem;
}
@media (min-width:640px){ :root{ --h2-size:3rem } }

/* ============================= reset ============================= */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:var(--background); color:var(--foreground); font-family:'Onest',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
/* [hidden] är bara display:none i användaragentens stilmall och förlorar mot
   varje egen display-regel (.field{display:flex} m.fl.). Tvinga igenom den. */
[hidden]{ display:none !important }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ===================== rem-based adaptive grid ====================
   Rotstorleken styr hela rutnätet: rubriker, brödtext, luft. Den får
   skala med viewporten, men bara monotont och inom golv/tak: annars
   kollapsar brödtexten (.875rem) under läsbar storlek i mellanlägena.
   Basen (16px) sätts i reseten ovan. */
@media (max-width:640px){  html{ font-size:clamp(16px, 4.444444vw, 19px) } }
@media (min-width:1921px){ html{ font-size:clamp(16px, 0.833333vw, 20px) } }

/* ============================= shell ============================= */
.shell{ width:100%; max-width:var(--container-shell); margin-inline:auto }

.sect{ padding:5rem 1.25rem }
@media (min-width:640px){ .sect{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .sect{ padding-top:7rem; padding-bottom:7rem } }
.sect--tight{ padding-top:3rem; padding-bottom:3rem }
@media (min-width:1024px){ .sect--tight{ padding-top:4rem; padding-bottom:4rem } }
.sect--flush-top{ padding-top:0 }

/* ============================ skip link =========================== */
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{
  position:fixed; left:1rem; top:1rem; z-index:60; width:auto; height:auto;
  border-radius:.875rem; background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:#fff;
}

/* ============================= icons ============================= */
[data-icon]{ display:inline-flex; align-items:center; justify-content:center; line-height:0 }
[data-icon] svg{ width:1em; height:1em; display:block }

/* ============================= logos ============================= */
.logo{ width:auto; height:1.375rem }
.logo--lg{ height:2rem }
.logo--foot{ height:1.625rem }

/* ============================ reveals ============================ */
/* will-change sätts INTE här. Som fast regel höll den ett femtiotal element
   permanent uppkopierade till egna kompositlager, vilket iOS Safari betalar för
   i minne, och svarar på med att sluta måla om dem. main.js sätter den på
   elementet just innan det animeras och tar bort den när animationen är klar. */
[data-reveal]{
  opacity:0;
  transform:translateY(var(--ry,0)) scale(var(--rs,1));
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in{ opacity:var(--ro,1); transform:translateY(0) scale(1) }

/* Säkerhetsventil: allt som döljs här döljs av JS:s räkning. Kör inte JS
   (avstängt, en modul som inte laddar, ett fel någon annanstans i filen) ska
   texten stå kvar synlig, inte försvinna. .reveal-all sätts av en liten
   inline-skript-timer i <head> och nollställs så fort main.js har tagit över. */
html.reveal-all [data-reveal]{ opacity:var(--ro,1) !important; transform:none !important }
html.reveal-all .line > span,
html.reveal-all .word{ opacity:1 !important; transform:none !important }

/* Radavslöjande: masken klipper vid radboxens kant, så underhäng (g, j, y) och
   accenter (Å, Ä) kapas vid tajt line-height. Spannet får padding så masken
   växer; .line drar tillbaka samma mått med negativ marginal, så radavståndet
   är oförändrat. Spannet translateras 100 % av sin EGEN höjd (padding inräknad)
   och är därför fortfarande helt dolt i utgångsläget. */
.line{ display:block; overflow:hidden; margin-top:-.1em; margin-bottom:-.2em }
.line > span{
  display:block; padding-top:.1em; padding-bottom:.2em;
  transform:translateY(100%); opacity:0;
  transition:transform .9s cubic-bezier(.215,.61,.355,1), opacity .9s cubic-bezier(.215,.61,.355,1);
}
[data-lines].in .line > span{ transform:translateY(0); opacity:1 }

.word{
  display:inline-block; transform:translateY(24px); opacity:0;
  transition:transform .7s cubic-bezier(.165,.84,.44,1), opacity .7s cubic-bezier(.165,.84,.44,1);
}
[data-words].in .word{ transform:translateY(0); opacity:1 }

/* ============================= header ============================= */
.header{ position:absolute; inset-inline:0; top:0; z-index:50; --ry:-14px;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1) }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
@media (min-width:640px){ .header__inner{ padding:1.5rem 2rem } }
.brand{ display:inline-flex }
.brand__in{ display:flex; align-items:center; gap:.5rem }

/* höger sida: nav + Kontakt-CTA på desktop, enbart burgare därunder */
.header__right{ display:flex; align-items:center; gap:2rem }

.nav{ display:none }
@media (min-width:1024px){ .nav{ display:flex } }
.nav ul{ display:flex; align-items:center; gap:2rem; font-size:.875rem; font-weight:500 }
.nav a{ display:inline-flex }
.nav__label{ display:inline-flex; align-items:center; gap:.375rem; opacity:.8 }
.nav__caret{ font-size:.75rem; opacity:.6 }

/* ============================= mega-meny ========================= */
/* Öppnas på hover och :focus-within. Ingen JS: panelen ligger i samma <li>
   som länken, så tangentbordsfokus inuti den håller den öppen. */
.nav__has-mega{ position:relative }
.mega{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-.5rem);
  padding-top:1rem;                       /* brygga över gapet, annars tappas hovringen */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .22s }
.nav__has-mega:hover .mega,
.nav__has-mega:focus-within .mega{ opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) }

.mega__inner{ width:min(44rem, calc(100vw - 3rem));
  background:var(--background); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:0 1px 2px rgba(17,17,17,.04), 0 24px 60px -24px rgba(17,17,17,.35);
  padding:1rem }
/* .nav-prefix krävs: .nav ul{display:flex;gap:2rem} och .nav a{display:inline-flex}
   har högre specificitet och gör annars rutnätet till en 1 400 px bred flexrad. */
.nav .mega__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem;
  list-style:none; margin:0; padding:0 }
.nav .mega__item{ display:flex; align-items:flex-start; gap:.875rem; padding:.875rem;
  border-radius:var(--radius-control); transition:background .18s }
.mega__item:hover{ background:var(--surface) }
.mega__ico{ flex:none; width:2.25rem; height:2.25rem; border-radius:var(--radius-control);
  display:grid; place-items:center; background:var(--surface); color:var(--accent) }
.mega__ico [data-icon]{ font-size:1rem }
.mega__item:hover .mega__ico{ background:var(--ink); color:#fff }
.mega__text{ display:flex; flex-direction:column; min-width:0 }
.mega__name{ font-size:.9375rem; font-weight:600; letter-spacing:-.01em; color:var(--foreground) }
.mega__desc{ margin-top:.15rem; font-size:.8125rem; line-height:1.45; color:rgba(17,17,17,.55) }
/* Verktyg och Appar har färre poster: en smal panel i en spalt. */
.mega--narrow .mega__inner{ width:min(23rem, calc(100vw - 3rem)) }
.nav .mega--narrow .mega__grid{ grid-template-columns:1fr }

@media (prefers-reduced-motion:reduce){ .mega{ transition:none } }

/* .pill.header__cta krävs: .pill{display:inline-block} kommer senare i filen och
   skulle annars slå en ensam .header__cta{display:none} (samma specificitet). */
.pill.header__cta{ display:none }
@media (min-width:1024px){ .pill.header__cta{ display:inline-block } }
.header__cta .pill__in{ padding:.75rem 1.5rem }

.menu-btn{
  border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-radius:.875rem; overflow:hidden; transition:background .3s;
}
.menu-btn:hover{ background:rgba(255,255,255,.7) }
@media (min-width:1024px){ .menu-btn{ display:none } }
.menu-btn__in{ display:grid; place-items:center; padding:.625rem }
.menu-btn__in [data-icon]{ font-size:1.125rem }

/* ============================ eyebrow ============================ */
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(17,17,17,.7) }
.eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:rgba(17,17,17,.5); flex:none }
.eyebrow--light{ color:rgba(255,255,255,.7) }
.eyebrow--light::before{ background:rgba(255,255,255,.6) }

/* ============================== pills ============================= */
.pill{ display:inline-block }
.pill__scale{ display:inline-block; will-change:transform }
.pill__in{
  display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px;
  font-size:.875rem; font-weight:500; padding:.875rem 1.75rem;
}
.pill[data-arrow] .pill__in{ padding:.375rem .375rem .375rem 1.5rem }
.pill--dark .pill__in{ background:var(--ink); color:#fff }
.pill--light .pill__in{ background:var(--surface); color:var(--foreground) }
.pill--outline .pill__in{ border:1px solid var(--line); background:transparent; color:var(--foreground) }
.pill__badge{
  width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px;
  font-size:1rem; background:var(--ink); color:#fff; flex:none;
}
.pill--dark .pill__badge{ background:#fff; color:var(--ink) }
.pill__badge [data-icon]{ will-change:transform }
/* Större variant för den primära åtgärden i ett formulär, där knappen står ensam
   och inte konkurrerar med något annat om uppmärksamheten. */
.pill--lg .pill__in{ font-size:1rem; padding:1.0625rem 2rem }
.pill--lg[data-arrow] .pill__in{ padding:.5rem .5rem .5rem 1.75rem; gap:.875rem }
.pill--lg .pill__badge{ width:2.75rem; height:2.75rem; font-size:1.125rem }

/* ============================== tags ============================= */
.tag{ display:inline-flex; border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:9999px; padding:.5rem 1rem; font-size:.875rem }
.tag b{ font-weight:600 }
.tag span{ color:rgba(255,255,255,.72); margin-left:.375rem }

/* =========================== animated link ======================== */
.alink{ display:inline-flex }
.alink > span{ display:inline-block; opacity:.65; will-change:transform }

/* ============================ text link =========================== */
.tlink{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:var(--accent-from) }
.tlink:hover{ text-decoration:underline }

/* =============================== hero ============================= */
.hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 var(--radius-card) var(--radius-card); background:var(--hero-to) }
.hero__media{ position:absolute; inset:0; z-index:0 }
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero__media canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.hero__vignette{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.35), transparent, rgba(255,255,255,.35)) }

/* ============== KARTHERO (experiment): Borås, OSM-data ============= */
.hero--map{ background:#fff }

.hero__map{ position:absolute; inset:0; z-index:0; opacity:0; transition:opacity 1.2s cubic-bezier(.16,1,.3,1) }
.hero__map.ready{ opacity:1 }
.hero__map svg{ width:100%; height:100%; display:block }
.hero__map path{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round }
.hero__map .m-water path{ fill:#eeece8; stroke:none }
.hero__map .m-river path{ stroke:rgba(177,95,44,.22); stroke-width:1.6px }
.hero__map .m-minor path{ stroke:#eae8e4; stroke-width:1px }
.hero__map .m-major path{ stroke:#e0ded9; stroke-width:1.3px }
.hero__map .m-trunk path{ stroke:#d2cfc9; stroke-width:1.9px }

/* mjuk vit uttoning: gör plats åt rubriken t.v. och löser upp kartans kanter */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, #fff 0%, rgba(255,255,255,.94) 26%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 66%),
    linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 72%, rgba(255,255,255,.9) 100%);
}
@media (max-width:1023px){
  /* på smala skärmar ligger texten ovanpå kartan: tona ner den rejält */
  .hero__veil{ background:rgba(255,255,255,.72) }
}

.hero__links{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; overflow:visible }
.hero__links path{
  fill:none; stroke:var(--accent); stroke-width:1.25; stroke-linecap:round;
  stroke-dasharray:var(--len) var(--len); stroke-dashoffset:var(--len);
  opacity:0;
}
.hero__links path.on{ opacity:.55; stroke-dashoffset:0; transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1), opacity .4s ease }

.hero__nodes{ position:absolute; inset:0; z-index:3; pointer-events:none }
.node{
  position:absolute; transform:translate(-50%,-50%);
  display:block; opacity:0; transition:opacity .5s ease;
}
.node.shown{ opacity:1 }
.node.clipped{ opacity:0 !important; pointer-events:none }

/* företag: rundad kvadrat, till skillnad från personernas cirklar */
.node--biz{ pointer-events:none }
.node--biz .node__mark{
  display:grid; place-items:center; width:1.75rem; height:1.75rem;
  border-radius:.5rem; background:#fff; border:1px solid var(--line);
  color:var(--accent); font-size:.9375rem;
  box-shadow:0 2px 8px -2px rgba(17,17,17,.14);
}
.node--biz .node__name{
  position:absolute; left:50%; top:2.1rem; transform:translateX(-50%);
  white-space:nowrap; font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:rgba(17,17,17,.55);
}

/* människor: avatar med initial */
.node--person{ pointer-events:auto; cursor:pointer; padding:0; background:none; border:0 }
.node__avatar{
  position:relative; display:grid; place-items:center;
  width:1.75rem; height:1.75rem; border-radius:9999px;
  font-size:.6875rem; font-weight:600; letter-spacing:.01em; line-height:1;
  box-shadow:0 1px 3px rgba(17,17,17,.1), 0 0 0 2px #fff;
  opacity:.62; transform:scale(.92);
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
/* fyra dova toner ur paletten: reserv för personer utan foto */
.tone-a .node__avatar{ background:var(--ink);       color:#fff }
.tone-b .node__avatar{ background:var(--accent);    color:#fff }
.tone-c .node__avatar{ background:var(--surface-2); color:rgba(17,17,17,.75) }
.tone-d .node__avatar{ background:var(--surface);   color:rgba(17,17,17,.6) }

/* genererat porträtt (tools/gen-avatar.py) */
.node__avatar.has-img{ overflow:hidden; background:var(--surface-2) }
.node__avatar img{
  width:100%; height:100%; object-fit:cover; border-radius:inherit;
  filter:saturate(.5) contrast(.96);      /* vilande ansikten ska inte skrika */
  transition:filter .4s ease;
}
.node--person.active .node__avatar img{ filter:none }

.node--person:hover .node__avatar{ opacity:.85; transform:scale(1.02) }
.node--person.active{ z-index:5 }
.node--person.active .node__avatar{
  opacity:1; transform:scale(1.55);
  box-shadow:0 6px 18px rgba(17,17,17,.18), 0 0 0 1.5px #fff, 0 0 0 2.5px var(--accent);
}
.node--person.active .node__avatar::after{
  content:""; position:absolute; inset:-1.5px; border-radius:9999px;
  border:1px solid var(--accent); animation:nodepulse 2.2s ease-out infinite;
}
@keyframes nodepulse{
  0%{ transform:scale(1); opacity:.8 }
  70%{ transform:scale(1.9); opacity:0 }
  100%{ transform:scale(1.9); opacity:0 }
}

/* ---- tooltip: sitter ovanför noden, med pil, och hålls innanför bild ----
   --shift sätts av JS så att bubblan aldrig går utanför kanten; pilen
   kompenserar med samma värde åt andra hållet och pekar kvar på avataren. */
.node__chip{
  --shift:0px;
  position:absolute; left:50%; bottom:calc(100% + .95rem);
  transform:translate(calc(-50% + var(--shift)), 6px);
  white-space:nowrap; pointer-events:none;
  display:flex; flex-direction:column; gap:.0625rem;
  border:1px solid rgba(230,229,226,.9); background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:.75rem; padding:.5rem .75rem;
  box-shadow:0 8px 24px -6px rgba(17,17,17,.16), 0 2px 6px rgba(17,17,17,.05);
  opacity:0; transition:opacity .28s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.node--person.active .node__chip{ opacity:1; transform:translate(calc(-50% + var(--shift)), 0) }

/* pilen: roterad kvadrat, ärver bubblans kant på två sidor */
.node__chip::after{
  content:""; position:absolute; z-index:-1;
  left:calc(50% - var(--shift)); top:100%; margin-top:-.3rem;
  width:.5rem; height:.5rem; transform:translateX(-50%) rotate(45deg);
  background:rgba(255,255,255,.94);
  border-right:1px solid rgba(230,229,226,.9);
  border-bottom:1px solid rgba(230,229,226,.9);
}
/* nära överkanten fälls bubblan ned istället */
.node--person.below .node__chip{
  bottom:auto; top:calc(100% + .95rem);
  transform:translate(calc(-50% + var(--shift)), -6px);
}
.node--person.below.active .node__chip{ transform:translate(calc(-50% + var(--shift)), 0) }
.node--person.below .node__chip::after{
  top:auto; bottom:100%; margin-top:0; margin-bottom:-.3rem;
  border-right:0; border-bottom:0;
  border-left:1px solid rgba(230,229,226,.9);
  border-top:1px solid rgba(230,229,226,.9);
}

.node__who{ font-size:.8125rem; font-weight:600; letter-spacing:-.01em; color:var(--foreground) }
.node__who em{ font-style:normal; font-weight:400; color:rgba(17,17,17,.4) }
.node__need{ font-size:.75rem; color:rgba(17,17,17,.6) }

.hero__credit{
  position:absolute; right:1.25rem; bottom:1rem; z-index:4;
  font-size:.625rem; letter-spacing:.02em; color:rgba(17,17,17,.32);
}
@media (min-width:640px){ .hero__credit{ right:2rem } }
.hero__credit a:hover{ color:rgba(17,17,17,.6); text-decoration:underline }
.hero__grid{
  position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem;
  min-height:100dvh; justify-content:center;   /* fyll skärmen på mobil/surfplatta */
  padding:7rem 1.25rem 6.5rem; /* topp klarar headern, botten lämnar plats åt .hero__scroll */
}
@media (min-width:640px){ .hero__grid{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){
  .hero__grid{ display:grid; min-height:100lvh; grid-template-columns:repeat(12,1fr); gap:2.5rem; padding:9rem 2rem 7rem; align-content:center }
}
.hero__left{ display:flex; flex-direction:column; gap:1.75rem }
@media (min-width:1024px){
  .hero__left{ grid-column:span 7; justify-content:center }
}

/* kicker: samma svarta som h1, dras in mot rubriken (hero__left har gap 1.75rem) */
.hero__kicker{
  align-self:flex-start; margin-bottom:-1.125rem;
  font-size:1.5rem; font-weight:600; line-height:1.1; letter-spacing:-.01em;
  color:var(--foreground);
}
@media (min-width:640px){ .hero__kicker{ font-size:1.75rem } }
@media (min-width:1024px){ .hero__kicker{ margin-bottom:-1.25rem; font-size:2rem } }

/* max-width måste rymma längsta raden. Annars radbryts en .line inuti sin
   overflow-mask och slide-up-avslöjandet går sönder. Längst: "hemsidor som ger" (16 tkn) */
.hero h1{ max-width:17ch; font-size:2.25rem; font-weight:600; line-height:1.02; letter-spacing:-.02em }
@media (min-width:640px){ .hero h1{ font-size:3rem } }
@media (min-width:768px){ .hero h1{ font-size:3.75rem } }
.hero h1 em{ font-style:normal; color:var(--accent) }
/* dold knapp: ramen dyker upp först vid hover/fokus. Transition-listan måste
   ta med opacity/transform, annars äter den [data-reveal]:s entré-animation */
.hero__rating{
  display:flex; align-items:center; gap:.75rem; text-align:left; align-self:flex-start;
  margin-left:-.625rem; padding:.5rem 1.25rem .5rem .625rem;
  border:1px solid transparent; border-radius:9999px; background:rgba(255,255,255,0);
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease,
             opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.hero__rating:hover, .hero__rating:focus-visible{
  border-color:rgba(230,229,226,.9);
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 20px -10px rgba(17,17,17,.25);
}
.hero__face{
  width:2.75rem; height:2.75rem; flex:none; border-radius:9999px; object-fit:cover;
  box-shadow:0 0 0 2px #fff, 0 2px 10px rgba(17,17,17,.14);
}
.hero__cred{ display:flex; flex-direction:column; gap:.1875rem }
.hero__rating .txt{ font-size:.9375rem; font-weight:500; color:rgba(17,17,17,.75) }
.hero__stars{ display:inline-flex; align-items:center; gap:.125rem; color:var(--accent) }
.hero__stars [data-icon]{ font-size:.8125rem }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:.75rem }

.hcard{
  width:100%; max-width:24rem; border-radius:var(--radius-card-sm); background:rgba(255,255,255,.7); padding:.5rem;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05), 0 0 0 1px rgba(230,229,226,.7);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  --ry:16px; --rs:.96;
}
@media (min-width:1024px){ .hcard{ width:19rem } }
.hcard__row{ display:flex; gap:.5rem; cursor:pointer; border-radius:.875rem }
/* vit platta med hårstreckskant. Ikonen byts i takt med karusellen */
.hcard__tile{
  position:relative; aspect-ratio:1; width:7rem; flex:none;
  border-radius:.875rem; background:#fff; border:1px solid var(--line);
  font-size:1.75rem; color:var(--accent);
}
.hcard__icon{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transform:scale(.85);
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.hcard__icon.active{ opacity:1; transform:scale(1) }
.hcard__panel{ flex:1; border-radius:.875rem; background:rgba(241,240,238,.7); padding:.875rem; display:flex; flex-direction:column; justify-content:space-between; min-width:0 }
.hcard__slot{ position:relative; min-height:4rem }
.hcard__item{
  position:absolute; inset:0; opacity:0; transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.hcard__item.active{ opacity:1; transform:translateY(0) }
.hcard__cap{ font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45) }
.hcard__title{ max-width:9rem; font-size:.875rem; font-weight:500; line-height:1.35; margin-top:.125rem }
.hcard__bottom{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.75rem }
.hcard__dots{ display:flex; align-items:center; gap:.25rem }
.hcard__dot{ height:.25rem; width:.375rem; border-radius:9999px; background:rgba(17,17,17,.2); transition:all .3s }
.hcard__dot.active{ width:1rem; background:rgba(17,17,17,.7) }
.hcard__nav{ display:flex; align-items:center; gap:.375rem }
.hcard__btn{
  width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:9999px; background:#fff;
  color:rgba(17,17,17,.7); box-shadow:0 0 0 1px var(--line); font-size:.75rem; transition:color .2s;
}
.hcard__btn:hover{ color:var(--foreground) }
.hcard__btn.prev [data-icon]{ transform:rotate(180deg) }

.partners{ width:100%; max-width:24rem; --ry:14px }
@media (min-width:1024px){ .partners{ width:19rem } }
.partners__title{ margin-bottom:1.5rem; font-size:var(--h2-size); font-weight:600; letter-spacing:-.01em; line-height:1.05 }
.partners ul{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:1rem; row-gap:.75rem }
@media (min-width:400px){ .partners ul{ grid-template-columns:repeat(4,1fr) } }
.partner{ display:inline-flex }
/* vilo-opaciteten sätts av hover-fjädern i JS (lerp .82 → 1) */
.partner > span{ display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:var(--foreground); opacity:.82; white-space:nowrap }
.partner [data-icon]{ font-size:.875rem; color:rgba(17,17,17,.55); flex:none }

/* ========================= DET VI LEVERERAR ======================= */
.deliver{ background:var(--surface) }
.deliver__grid{ display:flex; flex-direction:column; align-items:flex-start; gap:2.5rem }
@media (min-width:1024px){ .deliver__grid{ flex-direction:row; align-items:center; gap:4rem } }
.deliver .hcard{ flex:none }
.deliver .partners{ width:100%; max-width:none; flex:1 }
.deliver .partners ul{ grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:1rem }
@media (min-width:640px){ .deliver .partners ul{ grid-template-columns:repeat(4,1fr) } }
.deliver .partner > span{ gap:.5rem; font-size:.875rem }
.deliver .partner [data-icon]{ font-size:1rem }

/* ---- flytande skroll-indikator, centrerad i hero:ns botten ---- */
.hero__scroll{
  position:absolute; inset-inline:0; bottom:1.75rem; z-index:20;
  display:flex; justify-content:center; pointer-events:none;
}
@media (min-width:640px){ .hero__scroll{ bottom:2.5rem } }
.scrolldot{
  pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(230,229,226,.8); background:rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:9999px; padding:.7rem;      /* rund knapp, bara pilen kvar */
  color:rgba(17,17,17,.7);
  transition:background .3s, color .3s, opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  --ry:12px;
}
.scrolldot:hover{ background:rgba(255,255,255,.75); color:var(--foreground) }
/* döljs så fort sidan lämnat toppen: .gone slår [data-reveal].in (samma specificitet, senare i filen) */
.scrolldot.gone{
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .35s ease-out, transform .35s ease-out;
}
.scrolldot__arrow{ display:inline-block; font-size:1.125rem; line-height:1; animation:scrollbob 1.8s ease-in-out infinite }
@keyframes scrollbob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(3px) } }

/* ============================== subhero =========================== */
.subhero{
  position:relative; overflow:hidden; border-radius:0 0 var(--radius-card) var(--radius-card);
  background:linear-gradient(160deg, var(--hero-from) 0%, var(--surface) 45%, var(--surface-2) 100%);
}
.subhero__inner{ position:relative; z-index:2; padding:8rem 1.25rem 4.5rem }
@media (min-width:640px){ .subhero__inner{ padding:9rem 2rem 5.5rem } }
@media (min-width:1024px){ .subhero__inner{ padding-top:11rem; padding-bottom:7rem } }
.subhero__mark{
  position:absolute; right:-2rem; top:50%; transform:translateY(-50%);
  font-size:26rem; color:rgba(17,17,17,.045); pointer-events:none; z-index:1; line-height:0;
}
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45) }
.crumbs a:hover{ color:var(--foreground) }
.crumbs span{ color:rgba(17,17,17,.25) }
.subhero .eyebrow{ margin-top:1.75rem }
.subhero h1{ margin-top:1.25rem; max-width:17ch; font-size:2.25rem; font-weight:600; line-height:1.02; letter-spacing:-.02em }
@media (min-width:640px){ .subhero h1{ font-size:3rem } }
@media (min-width:1024px){ .subhero h1{ font-size:3.75rem } }
.subhero__lead{ margin-top:1.5rem; max-width:48ch; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.6) }
@media (min-width:640px){ .subhero__lead{ font-size:1.125rem } }
.subhero__actions{ margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.75rem }

/* Subhero med bild: texten till vänster, bilden till höger. Bilden ersätter
   logotypmärket som annars fyllde den ytan – två dekorativa lager på samma plats
   hade slagits om uppmärksamheten. I mobil hamnar bilden under texten. */
.subhero--media .subhero__inner{ display:grid; gap:2.5rem; align-items:center }
@media (min-width:1024px){
  .subhero--media .subhero__inner{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:4rem }
}
.subhero--media .subhero__text{ min-width:0 }
.subhero__media{ margin:0; min-width:0 }
.subhero__media img{
  width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  border-radius:var(--radius-card);
  /* Bilderna är fotograferade i varmt ljus mot en ljus sajt – en hårfin ram och
     en mjuk skugga håller isär dem från bakgrundens toning. */
  box-shadow:0 24px 60px rgba(17,17,17,.14);
}
@media (min-width:1024px){ .subhero__media img{ aspect-ratio:4/3 } }

/* ============================ section head ======================== */
.sec-head{ margin-bottom:3rem }
.sec-head h2{ margin-top:1.25rem; max-width:20ch; font-size:var(--h2-size); font-weight:600; letter-spacing:-.02em; line-height:1.05 }
/* utan eyebrow ovanför behövs ingen toppmarginal (undersidornas sec-heads har kvar sina) */
.sec-head > h2:first-child{ margin-top:0 }
.sec-head .lead{ margin-top:1.25rem; max-width:56ch; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.6) }
.sec-head--center{ text-align:center }
.sec-head--center h2{ margin-inline:auto }
.sec-head--center .lead{ margin-inline:auto }
.sec-head--split{ display:grid; gap:1.5rem; align-items:end }
@media (min-width:1024px){ .sec-head--split{ grid-template-columns:1.2fr 1fr; gap:3rem } }
.sec-head--split .lead{ margin-top:0 }

/* ============================== about ============================= */
.about{ background:#fff }
.about__grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem }
@media (min-width:640px){ .about__grid{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .about__grid{ grid-template-columns:1fr 1fr; padding-top:7rem; padding-bottom:7rem } }
/* foto istället för den gamla jordglobs-illustrationen */
.about__photo{ position:relative; border-radius:var(--radius-card); overflow:hidden; --ry:24px }
.about__photo img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover }

.about__right{ display:flex; flex-direction:column; gap:2.5rem }
.about h2{ font-size:var(--h2-size); font-weight:600; line-height:1.35; letter-spacing:-.01em }
/* samma accentgrepp som hero-rubrikens <em> */
.about h2 em{ font-style:normal; color:var(--accent) }
.about__lead{ max-width:58ch; font-size:1rem; line-height:1.75; color:rgba(17,17,17,.6); --ry:12px }
.about__foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem; --ry:12px }
.about__social-label{ font-size:.875rem; color:rgba(17,17,17,.45); margin-bottom:.75rem }
.about__socials{ display:flex; gap:.5rem }
.social{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:.875rem; background:var(--surface); color:rgba(17,17,17,.7) }
.social--accent{ background:var(--accent); color:#fff }
.social [data-icon]{ will-change:transform }

/* =========================== principle cards ====================== */
.principles{ display:grid; grid-template-columns:1fr; gap:1.25rem; padding:0 1.25rem 5rem }
@media (min-width:640px){ .principles{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .principles{ grid-template-columns:repeat(3,1fr); padding-bottom:7rem } }
/* flex-kolumn så att CTA:n kan tryckas ner i botten oavsett textlängd */
.pcard{ display:flex; flex-direction:column; border-radius:var(--radius-card-sm); background:var(--surface); padding:2rem; --ry:24px }
.pcard__cta{ margin-top:auto; padding-top:1.75rem; align-self:flex-start }
.pcard__cta .pill__in{ background:#fff; border-color:transparent }
.pcard__k{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--accent) }
.pcard h3{ margin-top:1rem; font-size:1.25rem; font-weight:600; letter-spacing:-.01em }
@media (min-width:640px){ .pcard h3{ font-size:1.5rem } }
.pcard p{ margin-top:.75rem; font-size:.875rem; line-height:1.7; color:rgba(17,17,17,.6) }

/* =========================== omloppsbana ========================== */
/* Ringen roterar allt. Varje satellit motroterar exakt lika mycket, så
   ikon och etikett står upprätt hela varvet. Samma duration i båda. */
.orbit{ background:#fff; overflow:hidden }
.orbit__grid{ display:grid; gap:3rem }
@media (min-width:1024px){ .orbit__grid{ grid-template-columns:1fr 1.05fr; gap:4rem; align-items:center } }

.orbit__intro h2{ max-width:16ch; font-size:var(--h2-size); font-weight:600; line-height:1.25; letter-spacing:-.01em }
.orbit__intro h2 em{ font-style:normal; color:var(--accent) }
.orbit__intro p{ margin-top:1.25rem; max-width:52ch; font-size:1rem; line-height:1.75; color:rgba(17,17,17,.6) }
.orbit__intro .pill{ margin-top:2rem }

.orbit__stage{
  --k:1;                                  /* radieskala: banan måste rymmas i sin spalt */
  position:relative; height:36rem; display:grid; place-items:center;
}
/* radien är i rem och skalar med rotstorleken, men spaltbredden gör det inte
   i samma takt. Krymp banan innan etiketterna vandrar in i textspalten */
@media (max-width:1279px){ .orbit__stage{ --k:.82; height:31rem } }
@media (max-width:1023px){ .orbit__stage{ --k:.9;  height:33rem } }
.orbit__ring{
  position:absolute; inset:0; pointer-events:none;
  animation:orbit-spin 48s linear infinite;
  will-change:transform;
}
.orbit__item{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform:rotate(var(--a)) translate(calc(var(--r) * var(--k)));
}
.orbit__spin{
  position:absolute; left:50%; top:50%;
  display:flex; flex-direction:column; align-items:center; gap:.625rem;
  animation:orbit-counter 48s linear infinite;
  will-change:transform;
}
@keyframes orbit-spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
@keyframes orbit-counter{
  from{ transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) }
  to  { transform:translate(-50%,-50%) rotate(calc(-1 * var(--a) - 360deg)) }
}
/* utan animation (prefers-reduced-motion) måste satelliten ändå stå rätt */
@media (prefers-reduced-motion: reduce){
  .orbit__spin{ transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) }
}

.orbit__disc{
  display:grid; place-items:center; width:3.25rem; height:3.25rem; border-radius:9999px;
  background:#fff; font-size:1.125rem; color:rgba(17,17,17,.55);
  box-shadow:0 6px 20px -8px rgba(17,17,17,.22), 0 0 0 1px var(--line);
}
.orbit__label{
  white-space:nowrap; font-size:.8125rem; font-weight:500;
  letter-spacing:-.005em; color:rgba(17,17,17,.45);
}

.orbit__core{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.75rem; text-align:center;
}
.orbit__core-disc{
  display:grid; place-items:center; width:7rem; height:7rem; border-radius:9999px;
  background:linear-gradient(to bottom right, var(--accent-from), var(--accent-to));
  color:#fff; font-size:2.5rem;
  box-shadow:0 18px 40px -14px rgba(177,95,44,.55);
}
.orbit__core-name{ margin-top:.25rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em }
.orbit__core-sub{ margin-top:-.5rem; font-size:.875rem; color:rgba(17,17,17,.45) }

@media (max-width:640px){
  .orbit__stage{ --k:.62; height:24rem }
  .orbit__disc{ width:2.5rem; height:2.5rem; font-size:.9375rem }
  .orbit__label{ font-size:.6875rem }
  .orbit__core-disc{ width:5rem; height:5rem; font-size:1.75rem }
}

/* ============================ portfolio =========================== */
.portfolio{ background:#fff }
.portfolio .shell{ padding:2.5rem 1.25rem 5rem }
@media (min-width:640px){ .portfolio .shell{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .portfolio .shell{ padding-bottom:7rem } }
.pf-head{ text-align:center; margin-bottom:3rem }
.pf-head h2{ margin:0 auto; width:fit-content; font-size:var(--h2-size); font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.pf-head .lead{ margin:1.25rem auto 0; max-width:52ch; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.6) }
.pf-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
@media (min-width:768px){ .pf-grid{ grid-template-columns:1fr 1fr } }
.pf-grid li{ --ry:48px }
.pf-card{
  position:relative; min-height:22rem; overflow:hidden; border-radius:var(--radius-card);
  background:var(--ink); padding:1.5rem; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.05);
  will-change:transform; display:block;
}
@media (min-width:640px){ .pf-card{ min-height:26rem; padding:2rem } }
/* kort med bakgrundsbild: scrim krävs, kortets text är vit */
.pf-card__bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover }
.pf-card__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.78) 34%, rgba(10,10,10,.32) 62%, rgba(10,10,10,.22) 100%),
    linear-gradient(to bottom, rgba(10,10,10,.7) 0%, rgba(10,10,10,0) 34%);
}
.pf-card--img .pf-wm{ display:none }   /* vattenstämpeln krockar med motivet */

.pf-meta{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.8) }
.pf-badge{
  width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px;
  background:rgba(255,255,255,.1); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15);
  font-size:1rem; flex:none; will-change:transform;
}
.pf-wm{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.pf-wm__in{ display:inline-flex; align-items:flex-start; gap:.25rem }
.pf-wm [data-icon]{ font-size:4.5rem; color:rgba(255,255,255,.9) }
.pf-wm sup{ font-size:.75rem; color:rgba(255,255,255,.6); line-height:1 }
.pf-bottom{ position:absolute; inset-inline:1.5rem; bottom:1.5rem; z-index:2 }
@media (min-width:640px){ .pf-bottom{ inset-inline:2rem; bottom:2rem } }
.pf-bottom h3{ font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
@media (min-width:640px){ .pf-bottom h3{ font-size:1.875rem } }
.pf-bottom p{ margin-top:.5rem; max-width:28rem; font-size:.875rem; color:rgba(255,255,255,.78) }
.pf-tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem }

/* "Besök sida"-knapp. Kortet är länken; knappen är den synliga uppmaningen. */
.pf-visit{
  margin-top:1.25rem;
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(255,255,255,.4); border-radius:9999px;
  padding:.55rem 1.1rem .55rem 1.2rem;
  font-size:.875rem; font-weight:500; color:#fff; white-space:nowrap;
  background:rgba(255,255,255,.1); backdrop-filter:blur(4px);
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.pf-visit [data-icon]{ font-size:.9rem }
.pf-card:hover .pf-visit,
.pf-card:focus-within .pf-visit{ background:#fff; color:var(--ink); border-color:#fff }

/* ============================= services =========================== */
.services{ background:#fff }
.services .shell{ max-width:64rem; padding:5rem 1.25rem }
@media (min-width:640px){ .services .shell{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .services .shell{ padding-top:7rem; padding-bottom:7rem } }
.services h2{ margin:0 0 1.25rem; max-width:16ch; font-size:var(--h2-size); font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.services__lead{ max-width:52ch; margin-bottom:3rem; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.6) }
@media (min-width:640px){ .services__lead{ margin-bottom:3.5rem } }
.services li{ --ry:24px; border-top:1px solid var(--line) }
.services li:first-child{ border-top:0 }
/* ingen radie: hover-fyllningen möter hårstrecken ovan och under, och
   rundade hörn mot en rak linje ser trasigt ut */
/* ikon | rubrik över beskrivning | pil. Beskrivningen sitter under rubriken
   istället för i en egen kolumn långt ut till höger, där ögat tappade raden.

   I mobil kläms den mittkolumnen ihop av ikonen och pilen på var sin sida, och
   beskrivningen blir en smal remsa med tre ord per rad. Där får texten i stället
   gå över hela bredden på egen rad, med ikonen bredvid rubriken. Från 640px finns
   plats för den ursprungliga layouten, där ikon och pil spänner över båda raderna. */
.srow{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  column-gap:.875rem; row-gap:.5rem;
  padding:1.25rem 0; background:rgba(241,240,238,0);
}
@media (min-width:640px){ .srow{ column-gap:1.5rem; row-gap:.25rem; padding:2rem 1.5rem } }

.srow__idx{ grid-column:1; grid-row:1; width:1.5rem; display:grid; place-items:center;
  color:rgba(17,17,17,.4); transition:color .25s ease }
.srow__idx [data-icon]{ font-size:1.125rem }
@media (min-width:640px){
  .srow__idx{ grid-row:1 / span 2; width:2.5rem }
  .srow__idx [data-icon]{ font-size:1.5rem }
}
.srow:hover .srow__idx{ color:var(--accent) }

.srow h3{ grid-column:2; grid-row:1; font-size:1.25rem; font-weight:500; letter-spacing:-.01em;
  line-height:1.25; text-wrap:balance }
@media (min-width:640px){ .srow h3{ font-size:1.875rem } }
@media (min-width:768px){ .srow h3{ font-size:2.25rem } }

/* Mobil: hela bredden, under ikonraden. Desktop: i rubrikens kolumn. */
.srow__desc{ grid-column:1 / -1; grid-row:2; max-width:56ch;
  font-size:.875rem; line-height:1.6; color:rgba(17,17,17,.55) }
@media (min-width:640px){ .srow__desc{ grid-column:2 } }

.srow__badge{ grid-column:3; grid-row:1; width:2.25rem; height:2.25rem; flex:none; display:grid;
  place-items:center; border-radius:9999px; background:var(--ink); color:#fff; font-size:.9375rem }
@media (min-width:640px){ .srow__badge{ grid-row:1 / span 2; width:3rem; height:3rem; font-size:1rem } }
.srow__badge [data-icon]{ will-change:transform }

/* ============================= branscher ========================= */
/* Kortet börjar täckt av sex lodräta "trådar" i ytfärg. När [data-reveal]
   får .in dras varannan tråd upp och varannan ner, förskjutet i tid. Väven
   öppnar sig och fotot träder fram. Ren CSS; main.js sätter bara klassen. */
/* Löpande band genom hela det svarta kortet, som en logotypslinga.
   Varje uppsättning ligger i en egen .ind-set med gapet INUTI (padding-right
   ersätter det sista gapet). Då blir spåret exakt två lika breda halvor och
   -50 % landar sömlöst, oavsett kortbredd. Med gap direkt på spåret hade
   halva spåret saknat ett halvt gap och sömmen hoppat varje varv.
   Negativa marginaler tar ut panelens padding så bandet går kant i kant. */
.ind-marquee{ margin-top:2.5rem; margin-inline:-1.5rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent) }
@media (min-width:640px){ .ind-marquee{ margin-inline:-2rem } }
@media (min-width:768px){ .ind-marquee{ margin-inline:-4rem } }

.ind-track{ display:flex; width:max-content; animation:ind-scroll 70s linear infinite }
.ind-set{ display:flex; gap:.75rem; padding-right:.75rem }
.ind-set > *{ flex:0 0 auto; width:10.5rem }
@media (min-width:768px){ .ind-set > *{ width:11.5rem } }
.ind-marquee:hover .ind-track{ animation-play-state:paused }
@keyframes ind-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* Utan rörelse: bandet står stilla och blir en vanlig sidoscroll i stället. */
@media (prefers-reduced-motion:reduce){
  .ind-marquee{ overflow-x:auto; scrollbar-width:none }
  .ind-marquee::-webkit-scrollbar{ display:none }
  .ind-track{ animation:none }
}

.ind-marquee__cta{ margin-top:2rem; margin-bottom:1.5rem }

/* Ljus ghost-knapp på mörk yta. Ram, ingen fyllning förrän hovring. */
.btn-ghost{ display:inline-flex; align-items:center; font:inherit; font-size:.875rem; font-weight:500;
  color:#fff; background:none; border:1px solid rgba(255,255,255,.32);
  border-radius:var(--radius-pill); padding:.7rem 1.4rem; cursor:pointer;
  transition:background .2s, border-color .2s, color .2s }
.btn-ghost:hover{ background:#fff; border-color:#fff; color:var(--ink) }
.btn-ghost:focus-visible{ outline:2px solid var(--accent-from); outline-offset:3px }

.ind{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--radius-card-sm);
  background:#1a1a1a; isolation:isolate }
.ind img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1) }
.ind:hover img{ transform:scale(1.05) }


/* Varpen: lodräta hårstreck kvar över fotot, som trådarna i en väv. */
.ind__warp{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 14px) }

.ind__cap{ position:absolute; inset:auto 0 0 0; z-index:4; padding:1.75rem .875rem .8rem; color:#fff;
  background:linear-gradient(to top, rgba(10,10,10,.8), rgba(10,10,10,.3) 65%, transparent) }
.ind__cap h3{ font-size:.9375rem; font-weight:600; letter-spacing:-.01em }
/* Brödtexten bär mätvärden och ska alltid synas. En rad, alltid samma höjd. */
.ind__cap p{ margin-top:.15rem; font-size:.6875rem; line-height:1.4; color:rgba(255,255,255,.8) }

@media (prefers-reduced-motion:reduce){
  .ind img,.ind:hover img{ transform:none; transition:none }
  .ind__cap p{ opacity:1; transform:none; transition:none }
}

/* Sista kortet i slidern: resten av branscherna, bakom modalen. */
.ind--more{ display:grid; place-items:center; background:none;
  border:1px solid rgba(255,255,255,.14); text-align:center }
.ind__morein{ padding:1.5rem }
.ind__moren{ font-size:2.75rem; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--accent-from) }
.ind__morelbl{ margin-top:.4rem; font-size:.875rem; color:rgba(255,255,255,.6) }
.ind--more .stats__link{ margin-top:1rem }

/* ============================== process =========================== */
.process{ background:#fff }
.process .sec-head .lead{ max-width:67ch }
/* smalare än sajtens 88rem: tre korta textblock på full bredd blir en gles rad */
.process .shell{ max-width:72rem }
/* Tre steg på en rad. Inget mellanläge på två kolumner: då hamnar steg 03
   ensamt på rad två och läsordningen bryts. */
.process__grid{
  display:grid; grid-template-columns:1fr; align-items:start;
  --step-gap:2.5rem;   /* mellanrum mellan stegen */
  --node:.75rem;       /* prickens diameter */
  column-gap:var(--step-gap); row-gap:var(--step-gap);
}
@media (min-width:900px){ .process__grid{ grid-template-columns:repeat(3,1fr) } }

.step{ display:flex; flex-direction:column; --ry:28px }

/* Pricken ligger till vänster om rubriken och ankras mot rubrikens FÖRSTA rad
   (--node-y = halva radboxen), inte mot radens mitt: annars glider den nedåt
   så fort rubriken bryter till två rader. */
.step{ --h3-size:1.125rem; --node-y:calc(var(--h3-size) * 1.3 / 2) }
@media (min-width:640px){ .step{ --h3-size:1.25rem } }
.step__head{ display:flex; align-items:flex-start; gap:.75rem }
.step__dot{
  flex:none;
  margin-top:calc(var(--node-y) - var(--node) / 2);
  width:var(--node); height:var(--node); border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 5px rgba(177,95,44,.14);
}
.step h3{ font-size:var(--h3-size); font-weight:600; letter-spacing:-.01em; line-height:1.3 }
.step p{ margin-top:1.25rem; font-size:.875rem; line-height:1.7; color:rgba(17,17,17,.6) }

/* ============================== stats ============================= */
.stats{ background:#fff }
.stats .shell{ padding:0 1.25rem 5rem }
@media (min-width:640px){ .stats .shell{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .stats .shell{ padding-bottom:7rem } }
.stats__panel{ border-radius:var(--radius-card); background:var(--ink); padding:3rem 1.5rem; color:#fff; --ry:40px; --rs:.99 }
@media (min-width:640px){ .stats__panel{ padding:4rem 2rem } }
@media (min-width:768px){ .stats__panel{ padding-left:4rem; padding-right:4rem } }
.stats h2{ max-width:20ch; font-size:var(--h2-size); font-weight:600; letter-spacing:-.01em; line-height:1.05 }
/* Nio poster i ett rutnät: tre mätvärden och sex insikter, samma mall.
   Statusfärgerna är valda för den svarta ytan: #e5645f i stället för
   #d03b3b, som bara klarar 4,1:1 mot #0a0a0a. */
.stats{ --st-good:#0ca30c; --st-warn:#fab219; --st-bad:#e5645f }
.stats__lead{ margin-top:1.25rem; max-width:56ch; font-size:1rem; line-height:1.7; color:rgba(255,255,255,.55) }

/* Åtta poster: 4 + 4 på stora skärmar. */
/* Två i bredd redan i mobil: åtta ringar på rad efter rad blev en lång, blaffig
   rullning för åtta tal. Ringarna krymper därefter. */
.stats__rings{ margin-top:3rem; display:grid; grid-template-columns:repeat(2,1fr);
  gap:2.5rem 1rem; list-style:none }
@media (min-width:640px){ .stats__rings{ margin-top:4rem; grid-template-columns:repeat(2,1fr); gap:3rem 2rem } }
@media (min-width:1100px){ .stats__rings{ grid-template-columns:repeat(4,1fr); gap:3.5rem 2rem } }
/* Ringen och dess text hör ihop – texten centreras under ringen, inte mot cellens
   vänsterkant, annars hänger rubriken lös från cirkeln den beskriver. */
.stats li{ --ry:20px; max-width:34ch; position:relative; cursor:default;
  display:flex; flex-direction:column; align-items:center; text-align:center; margin-inline:auto }
.stats li:focus{ outline:none }
.stats li:focus-visible{ outline:2px solid rgba(255,255,255,.5); outline-offset:.75rem; border-radius:1rem }

.stats__ring{ width:7rem; height:7rem; border-radius:50%; display:grid; place-items:center;
  border:4px solid rgba(255,255,255,.18); margin-bottom:1rem; transition:transform .25s ease }
@media (min-width:480px){ .stats__ring{ width:9rem; height:9rem; border-width:5px } }
@media (min-width:768px){ .stats__ring{ width:12.5rem; height:12.5rem; margin-bottom:1.5rem } }
@media (min-width:1100px){ .stats__ring{ width:10.5rem; height:10.5rem; border-width:4px } }
.stats li:hover .stats__ring{ transform:scale(1.03) }
.stats__ring--good{ border-color:var(--st-good) }
.stats__ring--warn{ border-color:var(--st-warn) }
.stats__ring--bad{  border-color:var(--st-bad) }

/* Talet bär samma färg som ringen. Ordet under säger vad färgen betyder,
   så färgen aldrig står ensam. Proportionella siffror, inte tabular. */
.stats__num{ font-size:1.875rem; font-weight:600; letter-spacing:-.02em; line-height:1 }
@media (min-width:480px){ .stats__num{ font-size:2.375rem } }
@media (min-width:768px){ .stats__num{ font-size:3.25rem } }
@media (min-width:1100px){ .stats__num{ font-size:2.5rem } }
.stats__num--good{ color:var(--st-good) }
.stats__num--warn{ color:var(--st-warn) }
.stats__num--bad{  color:var(--st-bad) }
.stats__num .u{ font-size:.42em; font-weight:500; opacity:.6 }
.stats__num .u--st{ margin-left:.35em }

.stats__title{ font-size:.9375rem; font-weight:600; letter-spacing:-.01em; line-height:1.3; color:#fff }
@media (min-width:640px){ .stats__title{ font-size:1rem } }
.stats__word{ margin-top:.3rem; font-size:.8125rem; font-weight:500 }
.stats__word--good{ color:var(--st-good) }
.stats__word--warn{ color:var(--st-warn) }
.stats__word--bad{  color:var(--st-bad) }

/* Förklaringen är en tooltip, inte brödtext: åtta stycken under åtta ringar tog
   mer plats än talen de förklarade. Den ligger kvar i DOM för skärmläsare och
   visas vid hover, vid tangentbordsfokus och – eftersom pekskärmar inte hovrar –
   när ringen tas emot ett tryck (li har tabindex, så ett tryck ger fokus). */
.stats__tip{
  position:absolute; top:calc(100% + .625rem); z-index:5;
  padding:.875rem 1rem; border-radius:.875rem;
  background:#1c1b1a; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-size:.8125rem; line-height:1.55; color:rgba(255,255,255,.75); text-align:left;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  /* Mobil: rutan är nästan lika bred som panelens innermått och ankras i den kant
     som ligger inåt (vänsterkolumnen mot vänster, högerkolumnen mot höger).
     Centrerad över en 160px-kolumn hade den spillt ut genom panelens sida, och
     bredden räknas mot viewporten – inte mot kortet – så den aldrig kan bli bredare
     än utrymmet den ska rymmas i. Panelens padding är 1,5rem, shellens 1,25rem. */
  width:calc(100vw - 6rem); max-width:22rem; left:0; transform:translateY(-.25rem);
}
.stats__rings li:nth-child(even) .stats__tip{ left:auto; right:0 }
.stats li:hover .stats__tip,
.stats li:focus-visible .stats__tip,
.stats li:focus-within .stats__tip{ opacity:1; visibility:visible; transform:translateY(0) }

/* Från 640px finns marginal i panelen: centrera rutan under sin egen ring och
   sätt tillbaka pilen som pekar upp mot den. */
@media (min-width:640px){
  .stats__tip{ width:max-content; max-width:min(20rem, 60vw);
    left:50%; right:auto; transform:translate(-50%, -.25rem) }
  .stats__rings li:nth-child(even) .stats__tip{ left:50%; right:auto }
  .stats__tip::before{
    content:''; position:absolute; bottom:100%; left:50%; margin-left:-.375rem;
    border:.375rem solid transparent; border-bottom-color:#1c1b1a;
  }
  .stats li:hover .stats__tip,
  .stats li:focus-visible .stats__tip,
  .stats li:focus-within .stats__tip{ transform:translate(-50%, 0) }
}
@media (prefers-reduced-motion:reduce){ .stats__tip{ transition:none } }

/* Kicker: liten rad ovanför rubriken, med länken till branschmodalen. */
.stats__kicker{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  font-size:.875rem; color:rgba(255,255,255,.55); margin-bottom:1.25rem }
.stats__kicker > span{ position:relative; padding-left:1rem }
.stats__kicker > span::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:.375rem; height:.375rem; border-radius:50%; background:rgba(255,255,255,.4) }

.stats__link{ margin-top:0; padding:0; background:none; border:0; cursor:pointer;
  font:inherit; font-size:.8125rem; color:var(--accent-from);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.stats__link:hover{ color:#fff }

.stats__note{ margin-top:3.5rem; font-size:.8125rem; line-height:1.6; color:rgba(255,255,255,.5); max-width:60ch }

/* CTA efter rutnätet: beställ hela rapporten. */
.stats__cta{ margin-top:3rem; padding-top:2.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:grid; gap:1.75rem; align-items:center }
@media (min-width:900px){ .stats__cta{ grid-template-columns:1fr auto; gap:3rem } }
.stats__cta h3{ font-size:1.375rem; font-weight:600; letter-spacing:-.01em; color:#fff }
@media (min-width:640px){ .stats__cta h3{ font-size:1.75rem } }
.stats__cta p{ margin-top:.75rem; max-width:60ch; font-size:.9375rem; line-height:1.7; color:rgba(255,255,255,.6) }

/* ==================== modal: alla branscher ====================== */
/* margin:auto centrerar dialogen i båda led. Utan den ärver den UA-stilens
   margin och glider ur mitten så fort innehållet blir bredare än panelen. */
.indm{ margin:auto; width:min(56rem, calc(100vw - 2.5rem)); max-height:calc(100dvh - 4rem);
  padding:0; border:0; border-radius:var(--radius-card); background:var(--ink); color:#fff;
  overflow:hidden }
.indm::backdrop{ background:rgba(6,6,6,.72); backdrop-filter:blur(4px) }
.indm__head{ display:flex; align-items:flex-start; gap:1.5rem;
  padding:2rem 2rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.12) }
.indm__head h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.02em }
.indm__head p{ margin-top:.35rem; font-size:.875rem; color:rgba(255,255,255,.55) }
.indm__close{ margin-left:auto; background:none; border:0; color:rgba(255,255,255,.55);
  font-size:1.125rem; line-height:1; cursor:pointer; padding:.25rem }
.indm__close:hover{ color:#fff }
/* minmax(0,1fr), inte 1fr: rutnätsobjekt har min-width:auto och en lång
   branschtitel spränger annars kolumnen och ger vågrät scroll i dialogen. */
.indm__grid{ list-style:none; margin:0; padding:1.5rem 2rem 2rem; overflow-y:auto; overflow-x:hidden;
  max-height:calc(100dvh - 13rem); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem }
@media (min-width:640px){ .indm__grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:900px){ .indm__grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.indm__grid li{ min-width:0; display:flex; align-items:baseline; gap:.6rem; padding:.6rem .8rem;
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-control); font-size:.875rem }
.indm__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.indm__n{ color:rgba(255,255,255,.45); font-variant-numeric:tabular-nums; font-size:.8125rem }

/* =============================== faq ============================== */
.faq{ background:#fff }
.faq__head{ margin-bottom:3rem }
.faq__head h2{ max-width:14ch; font-size:var(--h2-size); font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.faq__head .lead{ margin-top:1.25rem; max-width:44ch; font-size:1rem; line-height:1.7; color:rgba(17,17,17,.6) }

/* Två OBEROENDE spalter. Ett delat rutnät (grid-auto-flow:column) hade tvingat
   raderna att linjera, så en öppnad fråga till vänster sköt isär raden till
   höger. Varje spalt är i stället sin egen kolumn med sina egna gränser. */
.faq__list{ --ry:24px; display:grid; grid-template-columns:1fr }
@media (min-width:900px){ .faq__list{ grid-template-columns:1fr 1fr; column-gap:4rem; align-items:start } }
.faq__col > details{ border-top:1px solid var(--line) }
.faq__col > details:last-child{ border-bottom:1px solid var(--line) }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; cursor:pointer; list-style:none;
  font-size:1.0625rem; font-weight:500; letter-spacing:-.01em;
}
@media (min-width:640px){ .faq summary{ font-size:1.25rem } }
.faq summary::-webkit-details-marker{ display:none }

/* Mjuk in- och utfällning. block-size kan bara animeras till "auto" med
   interpolate-size; content-visibility behöver allow-discrete för att
   stängningen ska hinna spelas upp innan innehållet göms.
   Utan stöd faller den tillbaka på ett hårt hopp, men inget går sönder. */
.faq{ interpolate-size:allow-keywords }
.faq details::details-content{
  block-size:0; overflow:hidden;
  transition:block-size .42s cubic-bezier(.22,1,.36,1),
             content-visibility .42s allow-discrete;
}
.faq details[open]::details-content{ block-size:auto }
@media (prefers-reduced-motion:reduce){ .faq details::details-content{ transition:none } }
.faq .plus{ position:relative; width:1.5rem; height:1.5rem; flex:none; border-radius:9999px; background:var(--surface) }
.faq .plus::before, .faq .plus::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--foreground);
  transform:translate(-50%,-50%); transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.faq .plus::before{ width:.625rem; height:1px }
.faq .plus::after{ width:1px; height:.625rem }
.faq .plus::before, .faq .plus::after{ transition:transform .42s cubic-bezier(.22,1,.36,1) }
.faq details[open] .plus::before{ transform:translate(-50%,-50%) rotate(180deg) }
.faq details[open] .plus::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0) }
.faq details p{ padding-bottom:1.5rem; max-width:62ch; font-size:.9375rem; line-height:1.75; color:rgba(17,17,17,.6) }
.faq details a{ color:var(--accent); font-weight:500 }
.faq .lead a{ color:var(--accent); font-weight:500 }
.faq .lead a:hover{ text-decoration:underline }

/* ============================== contact =========================== */
.contact{ background:#fff }
.contact__grid{ display:grid; grid-template-columns:1fr; gap:3rem }
@media (min-width:1024px){ .contact__grid{ grid-template-columns:1fr 1.1fr; gap:4rem; align-items:start } }
/* mörkt kort: samma radie och padding som formuläret bredvid */
.contact__card{
  --card-pad:1.75rem;
  border-radius:var(--radius-card); background:var(--ink); color:#fff;
  padding:var(--card-pad); display:flex; flex-direction:column;
}
@media (min-width:640px){ .contact__card{ --card-pad:2.5rem } }
.contact__card h2{ font-size:var(--h2-size); font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.contact__lead{ margin-top:1.25rem; max-width:46ch; font-size:1rem; line-height:1.7; color:rgba(255,255,255,.6) }

.contact dl{ margin-top:2.5rem; display:grid; grid-template-columns:auto 1fr; gap:1rem 2.5rem; font-size:.875rem }
.contact dt{ font-weight:500; text-transform:uppercase; letter-spacing:.025em; font-size:.75rem; color:rgba(255,255,255,.45); padding-top:.125rem }
.contact dd{ color:rgba(255,255,255,.8); line-height:1.6 }
.contact dd a:hover{ color:var(--accent-from) }
.contact address{ font-style:normal }

/* ---- kontorskarta ---------------------------------------------------
   kontor.svg genereras av tools/gen-office-map.py och är bara klassad
   geometri. All färg sitter här. main.js injicerar den och sätter .ready. */
/* Kartan går ut i kortets kanter: negativa marginaler äter upp paddingen.
   Den ljusgrå ramen löper runt hela kartan, även längs överkanten mot det
   mörka fältet. Bara de nedre hörnen rundas, de möter kortets rundning. */
.omap{
  position:relative; aspect-ratio:16/11;
  margin:2.5rem calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
  border:1px solid var(--line);
  border-radius:0 0 var(--radius-card) var(--radius-card); overflow:hidden;
  background:#fff;
}
.omap__canvas{ position:absolute; inset:0; opacity:0; transition:opacity .9s cubic-bezier(.16,1,.3,1) }
.omap.ready .omap__canvas{ opacity:1 }
.omap__canvas svg{ width:100%; height:100%; display:block }
.omap__canvas path{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round }
.omap__canvas .m-building path{ fill:#f2f1ef; stroke:none }
.omap__canvas .m-water path{ fill:#e9edf0; stroke:none }
.omap__canvas .m-river path{ stroke:#dde5ea; stroke-width:2.2px }
.omap__canvas .m-service path{ stroke:#eae8e4; stroke-width:1px }
.omap__canvas .m-minor path{ stroke:#dcd9d4; stroke-width:1.7px }
.omap__canvas .m-major path{ stroke:#cfccc6; stroke-width:2.2px }
.omap__canvas .m-trunk path{ stroke:#c4c1ba; stroke-width:2.8px }

/* pinnen: prick med pulsande ring, plus en etikett ovanför.
   .omap__pin är exakt lika stor som pricken, så det är PRICKEN som hamnar
   i kartans mitt. Etiketten svävar ovanför utan att flytta ankaret. */
.omap__pin{ position:absolute; left:50%; top:50%; width:.875rem; height:.875rem; transform:translate(-50%,-50%) }
.omap__label{
  position:absolute; bottom:calc(100% + .625rem); left:50%; transform:translateX(-50%);
  padding:.3rem .6rem; border-radius:9999px; background:var(--ink); color:#fff;
  font-size:.6875rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
}
.omap__dot{
  position:absolute; inset:0; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(177,95,44,.16);
}
.omap__dot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--accent);
  animation:omap-ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes omap-ping{ 0%{ transform:scale(1); opacity:.7 } 80%,100%{ transform:scale(3.2); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .omap__dot::after{ animation:none } }

.omap__foot{
  position:absolute; inset:auto 0 0 0; display:flex; align-items:end; justify-content:space-between; gap:1rem;
  padding:.875rem 1rem;
  background:linear-gradient(to top, rgba(255,255,255,.92), rgba(255,255,255,0));
}
.omap__credit{ font-size:.6875rem; color:rgba(17,17,17,.45) }
.omap__credit a:hover{ color:var(--accent) }
.omap__link{
  display:inline-flex; align-items:center; gap:.375rem; flex:none;
  padding:.5rem .875rem; border-radius:9999px;
  background:var(--ink); color:#fff; font-size:.8125rem; font-weight:500;
  transition:background .25s ease;
}
.omap__link:hover{ background:var(--accent) }
.omap__link [data-icon]{ font-size:.875rem }
.contact__form{ border-radius:var(--radius-card); background:var(--surface); padding:1.75rem; --ry:24px }
.contact__formtitle{ margin-bottom:1.5rem; font-size:1.25rem; font-weight:600; letter-spacing:-.01em; line-height:1.3 }
@media (min-width:640px){ .contact__form{ padding:2.5rem } }

/* ============================ form controls ======================= */
.field{ display:flex; flex-direction:column; gap:.375rem }
.field > span, .field > label, .field > legend{
  font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:rgba(17,17,17,.55);
}
.ctrl{
  width:100%; border:1px solid var(--line); background:#fff; border-radius:.875rem;
  padding:.75rem 1rem; font-size:.875rem; font-family:inherit; color:inherit; outline:none;
  transition:border-color .2s;
}
textarea.ctrl{ resize:none }
.ctrl:focus{ border-color:rgba(17,17,17,.3) }

/* ---- ikon i fältet: wrappern positionerar, inputen får plats åt vänster ---- */
.field__wrap{ position:relative; display:block }
.field__icon{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  font-size:1.0625rem; color:rgba(17,17,17,.32); pointer-events:none;
  transition:color .2s;
}
.field__wrap .ctrl{ padding-left:2.875rem }
.field__wrap:focus-within .field__icon{ color:rgba(17,17,17,.6) }
/* opacity:1 krävs: Firefox lägger på .54 ovanpå color och gör den dubbelt blek */
.ctrl::placeholder{ color:rgba(17,17,17,.3); opacity:1 }

/* ---- knappgrupp istället för <select>: kryssrutor, flera val möjliga ---- */
.field--group{ border:0; margin:0; padding:0; min-width:0 }
.field--group > legend{ padding:0; margin-bottom:.375rem }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip{ display:inline-flex; position:relative }
/* kryssrutan måste finnas kvar i tabbordningen: clip, inte display:none */
.chip input{ position:absolute; width:1px; height:1px; opacity:0; clip:rect(0,0,0,0); pointer-events:none }
.chip span{
  display:inline-flex; align-items:center; cursor:pointer; user-select:none;
  border:1px solid var(--line); border-radius:9999px; background:#fff; padding:.5rem .875rem;
  font-size:.8125rem; font-weight:500; color:rgba(17,17,17,.65); white-space:nowrap;
  transition:border-color .2s, background .2s, color .2s;
}
/* ingen bock: den ändrade pillrets bredd och fick grannarna att hoppa.
   Den svarta fyllningen räcker som markering. */
.chip:hover span{ border-color:rgba(17,17,17,.28); color:var(--foreground) }
.chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:#fff }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px }
.form-note{ max-width:44ch; font-size:.6875rem; line-height:1.55; color:rgba(17,17,17,.45) }
.form-msg:not(:empty){ margin-top:.25rem; font-size:.875rem; font-weight:500; color:var(--accent) }

/* ============================== footer ============================ */
.footer{ position:relative; overflow:hidden; border-radius:var(--radius-card) var(--radius-card) 0 0; background:var(--ink); color:#fff }
.footer .shell{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
@media (min-width:640px){ .footer .shell{ padding-left:2rem; padding-right:2rem } }
@media (min-width:1024px){ .footer .shell{ padding-top:6rem } }
.footer__cta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem }
@media (min-width:1024px){ .footer__cta{ flex-direction:row; align-items:flex-end; justify-content:space-between } }
.footer__cta h2{ max-width:15ch; font-size:var(--h2-size); font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.footer__cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-top:4rem; padding-bottom:4rem }
@media (min-width:768px){ .footer__cols{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .footer__cols{ grid-template-columns:1.4fr 1fr 1fr 1fr } }
.footer__tagline{ margin-top:1.25rem; max-width:20rem; font-size:.875rem; line-height:1.7; color:rgba(255,255,255,.55) }
.footer__coltitle{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4); margin-bottom:1.25rem }
.footer__col ul{ display:flex; flex-direction:column; gap:.75rem; font-size:.875rem }
.footer__legal{
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.45);
}
@media (min-width:640px){ .footer__legal{ flex-direction:row } }

/* ============================= nav menu =========================== */
.navmenu{
  position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:var(--ink); color:#fff;
  opacity:0; transition:opacity .5s cubic-bezier(.22,1,.36,1);
}
.navmenu[hidden]{ display:none }
.navmenu.open{ opacity:1 }
.navmenu__top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
@media (min-width:640px){ .navmenu__top{ padding:1.5rem 2rem } }
.navmenu__close{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:.875rem;
  padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  color:rgba(255,255,255,.7); transition:color .3s, border-color .3s;
}
.navmenu__close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
.navmenu__close [data-icon]{ font-size:.875rem }
.navmenu__nav{ flex:1; display:flex; flex-direction:column; justify-content:center; padding-inline:1.25rem }
@media (min-width:640px){ .navmenu__nav{ padding-inline:2rem } }
.navmenu__nav ul{ display:flex; flex-direction:column; gap:.25rem }
.nav-item{
  width:100%; display:flex; align-items:baseline; gap:1rem; padding-block:.5rem; text-align:left;
  font-size:2.25rem; font-weight:600; letter-spacing:-.02em;
  transform:translateY(1rem); opacity:0; transition:all .5s ease-out;
}
@media (min-width:640px){ .nav-item{ font-size:3.75rem } }
.navmenu.open .nav-item{ transform:translateY(0); opacity:1 }
.nav-item__idx{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
.nav-item__label{ color:rgba(255,255,255,.7); transition:color .3s }
.nav-item:hover .nav-item__idx{ color:var(--accent-from) }
.nav-item:hover .nav-item__label{ color:#fff }
.navmenu__bottom{
  display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem 1.25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45);
}
@media (min-width:640px){ .navmenu__bottom{ flex-direction:row; align-items:center; justify-content:space-between; padding-left:2rem; padding-right:2rem } }
.navmenu__start{ color:rgba(255,255,255,.7); transition:color .3s }
.navmenu__start:hover{ color:#fff; text-decoration:underline }

/* ============================== modal ============================= */
.modal{
  position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem;
  background:rgba(17,17,17,.3); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  opacity:0; transition:opacity .5s cubic-bezier(.22,1,.36,1);
}
.modal[hidden]{ display:none }
.modal.open{ opacity:1 }
@media (min-width:640px){ .modal{ align-items:center } }
.modal__panel{
  position:relative; width:100%; max-width:32rem; max-height:calc(100dvh - 2rem); overflow-y:auto;
  border-radius:var(--radius-card); background:#fff; padding:1.5rem;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25), 0 0 0 1px var(--line);
  opacity:0; transform:translateY(28px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
@media (min-width:640px){ .modal__panel{ padding:2rem } }
.modal.open .modal__panel{ opacity:1; transform:translateY(0) }
.modal.closing .modal__panel{ opacity:0; transform:translateY(18px) }
.modal__close{
  position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:9999px; background:var(--surface); color:rgba(17,17,17,.6); font-size:.875rem; transition:background .2s,color .2s;
}
.modal__close:hover{ background:var(--surface-2); color:var(--foreground) }
.modal__head{ margin-bottom:1.5rem }
.modal__head h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
@media (min-width:640px){ .modal__head h2{ font-size:1.875rem } }
.modal form{ display:flex; flex-direction:column; gap:1rem }
.modal__bottom{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
/* Sektionsformuläret: knappen är det man ska göra, så den står först och ensam till
   vänster. Villkorstexten är en fotnot och hamnar under den, i mindre grad. */
.modal__bottom--stack{ margin-top:1.25rem; flex-direction:column; align-items:flex-start; gap:.875rem }
.modal__note{ display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; color:rgba(17,17,17,.45) }
/* samma behandling som hero-knappens avatar: vit ring, mjuk skugga */
.note__face{
  width:1.75rem; height:1.75rem; flex:none; border-radius:9999px; object-fit:cover;
  box-shadow:0 0 0 2px #fff, 0 1px 5px rgba(17,17,17,.16);
}

/* ============================ kontaktkort ========================= */
.card__head{ display:flex; align-items:center; gap:1.25rem; padding-right:2.5rem }
.card__face{
  width:5rem; height:5rem; flex:none; border-radius:9999px; object-fit:cover;
  box-shadow:0 0 0 3px #fff, 0 4px 16px -4px rgba(17,17,17,.25);
}
.card__head h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em }
@media (min-width:640px){ .card__head h2{ font-size:1.75rem } }
.card__role{ margin-top:.125rem; font-size:.875rem; color:rgba(17,17,17,.5) }
.card__head .hero__stars{ margin-top:.5rem }
.card__bio{ margin-top:1.75rem; font-size:.9375rem; line-height:1.7; color:rgba(17,17,17,.65) }
/* styckeavstånd, inte sektionsavstånd */
.card__bio + .card__bio{ margin-top:.875rem }
.card__facts{
  margin-top:1.75rem; display:grid; grid-template-columns:1fr; gap:1rem;
  border-top:1px solid var(--line); padding-top:1.5rem;
}
@media (min-width:480px){ .card__facts{ grid-template-columns:1fr 1fr } }
.card__facts dt{ font-size:.6875rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:rgba(17,17,17,.4) }
.card__facts dd{ margin-top:.25rem; font-size:.9375rem; font-weight:500; color:var(--foreground) }
.card__facts a:hover{ color:var(--accent) }
.card__cta{
  margin-top:1.75rem; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1rem;
  border-top:1px solid var(--line); padding-top:1.5rem;
}

/* ===================== subpage: prose + aside ===================== */
.split{ display:grid; grid-template-columns:1fr; gap:3rem }
@media (min-width:1024px){ .split{ grid-template-columns:1.55fr 1fr; gap:4rem; align-items:start } }
.prose h2{ margin-top:1.25rem; max-width:22ch; font-size:1.875rem; font-weight:600; letter-spacing:-.02em; line-height:1.15 }
@media (min-width:640px){ .prose h2{ font-size:2.25rem } }
.prose h3{ margin-top:2.5rem; font-size:1.25rem; font-weight:600; letter-spacing:-.01em }
.prose p{ margin-top:1rem; max-width:62ch; font-size:1rem; line-height:1.75; color:rgba(17,17,17,.65) }
.aside{ position:relative; border-radius:var(--radius-card); background:var(--ink); color:#fff; padding:2rem; --ry:24px }
@media (min-width:1024px){ .aside{ position:sticky; top:2rem } }
.aside h4{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.4) }
.aside ul{ margin-top:1.5rem; display:flex; flex-direction:column; gap:.875rem; font-size:.875rem; color:rgba(255,255,255,.82) }
.aside li{ display:flex; align-items:baseline; gap:.75rem }
.aside li::before{ content:""; width:.375rem; height:.375rem; flex:none; border-radius:9999px; background:var(--accent-from) }
.aside .tlink{ margin-top:2rem }

/* ===================== subpage: feature cards ===================== */
.fcards{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media (min-width:768px){ .fcards{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .fcards{ grid-template-columns:repeat(3,1fr) } }
.fcard{ border-radius:var(--radius-card-sm); background:var(--surface); padding:1.75rem; --ry:24px }
@media (min-width:640px){ .fcard{ padding:2rem } }
.fcard__k{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--accent) }
.fcard h3{ margin-top:.875rem; font-size:1.25rem; font-weight:600; letter-spacing:-.01em }
.fcard p{ margin-top:.75rem; font-size:.875rem; line-height:1.7; color:rgba(17,17,17,.6) }

/* ========================= subpage: tiers ========================= */
.tiers{ display:grid; grid-template-columns:1fr; gap:1.25rem }
@media (min-width:1024px){ .tiers{ grid-template-columns:repeat(3,1fr) } }
.tier{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-card); padding:2rem; --ry:28px }
@media (min-width:640px){ .tier{ padding:2.5rem } }
.tier--feat{ background:var(--ink); color:#fff; border-color:transparent }
.tier__name{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.45) }
.tier--feat .tier__name{ color:var(--accent-from) }
.tier__price{ margin-top:1rem; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1 }
@media (min-width:640px){ .tier__price{ font-size:2.5rem } }
.tier__price small{ font-size:1rem; font-weight:500; color:rgba(17,17,17,.45) }
.tier--feat .tier__price small{ color:rgba(255,255,255,.45) }
.tier__desc{ margin-top:1rem; font-size:.875rem; line-height:1.6; color:rgba(17,17,17,.55) }
.tier--feat .tier__desc{ color:rgba(255,255,255,.55) }
.tier ul{ margin:1.75rem 0 2rem; display:flex; flex-direction:column; gap:.75rem; font-size:.875rem }
.tier li{ display:flex; align-items:baseline; gap:.75rem }
.tier li::before{ content:""; width:.375rem; height:.375rem; flex:none; border-radius:9999px; background:var(--accent) }
.tier--feat li::before{ background:var(--accent-from) }
.tier .pill{ margin-top:auto; align-self:flex-start }

/* ======================== subpage: related ======================== */
.related{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:768px){ .related{ grid-template-columns:repeat(3,1fr) } }
.rel{ --ry:20px }
.rel__in{
  height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  border:1px solid var(--line); border-radius:var(--radius-card-sm); padding:1.75rem;
  background:rgba(241,240,238,0); will-change:transform;
}
.rel__num{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(17,17,17,.4) }
.rel__row{ display:flex; align-items:center; justify-content:space-between; gap:1rem }
.rel h4{ font-size:1.125rem; font-weight:500; letter-spacing:-.01em }
@media (min-width:640px){ .rel h4{ font-size:1.25rem } }
.rel__badge{ width:2.25rem; height:2.25rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:var(--ink); color:#fff; font-size:.875rem }
.rel__badge [data-icon]{ will-change:transform }

/* ========================== subpage: CTA ========================== */
.ctaband{ background:#fff }
.ctaband__panel{
  position:relative; overflow:hidden; border-radius:var(--radius-card); background:var(--ink); color:#fff;
  padding:4rem 1.5rem; text-align:center; --ry:40px; --rs:.99;
}
@media (min-width:640px){ .ctaband__panel{ padding:5.5rem 2rem } }
.ctaband .eyebrow{ justify-content:center }
.ctaband h2{ margin:1.25rem auto 0; max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.05 }
@media (min-width:640px){ .ctaband h2{ font-size:3rem } }
@media (min-width:1024px){ .ctaband h2{ font-size:3.75rem } }
.ctaband h2 em{ font-style:normal; color:var(--accent-from) }
.ctaband p{ margin:1.5rem auto 0; max-width:52ch; font-size:1rem; line-height:1.7; color:rgba(255,255,255,.55) }
.ctaband .pill{ margin-top:2.25rem }
.ctaband__wm{
  position:absolute; inset-inline:0; bottom:-2rem; z-index:0; text-align:center; pointer-events:none;
  user-select:none; -webkit-user-select:none; font-weight:700; line-height:1; font-size:9rem;
  letter-spacing:-.02em; color:rgba(255,255,255,.04);
}

/* ========================== legal / policy ======================= */
/* Integritetspolicyn är ren löptext i .prose, som saknar list- och länkstil
   eftersom tjänstesidorna aldrig behövt någon. Här är de nödvändiga. */
.legal__stamp{ margin-top:1.5rem; font-size:.75rem; color:rgba(17,17,17,.45) }
.legal ul{ margin-top:1rem; max-width:62ch; display:flex; flex-direction:column; gap:.625rem;
  font-size:1rem; line-height:1.7; color:rgba(17,17,17,.65) }
.legal li{ position:relative; padding-left:1.125rem }
.legal li::before{ content:""; position:absolute; left:0; top:.7em; width:.375rem; height:.375rem;
  border-radius:9999px; background:var(--accent-from) }
.legal strong{ font-weight:600; color:var(--ink) }
.legal a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:rgba(17,17,17,.25) }
.legal a:hover{ text-decoration-color:var(--accent-from) }

.footer__legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.25); transition:color .25s ease, text-decoration-color .25s ease }
.footer__legal a:hover{ color:#fff; text-decoration-color:rgba(255,255,255,.6) }