/* ==========================================================================
   Professionell — Frontness Design
   Stil: rutnät, tunna linjer, numrerade sektioner, marinblått och vitt.
   Sakligt och självsäkert, med data som ritas fram i stället för att påstås.
   Alla klasser har prefixet pf- så temat kan läggas in i vilken sajt som helst.
   ========================================================================== */

/* ---------- Typsnitt (SIL Open Font License) ---------- */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/schibsted-grotesk.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: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/schibsted-grotesk-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;
}

/* ---------- Tokens ---------- */
:root {
  --pf-bg: #ffffff;
  --pf-bg-alt: #f2f4f7;
  --pf-ink: #0b1d39;
  --pf-ink-2: #45556e;
  --pf-ink-3: #56657c;
  --pf-line: #d9dfe8;
  --pf-accent: #1d4ed8;
  --pf-accent-hover: #1e3fae;

  --pf-navy: #0b1d39;
  --pf-navy-2: #12284c;
  --pf-navy-3: #1a3561;
  --pf-dark-ink: #f4f7fb;
  --pf-dark-ink-2: #aebbd0;
  --pf-dark-line: rgba(255, 255, 255, .14);
  --pf-signal: #5fe3bd;
  --pf-sky: #9db8ff;

  --pf-font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --pf-fs-display: clamp(2.75rem, 6.2vw, 5.25rem);
  --pf-fs-h1: clamp(2.5rem, 5.2vw, 4.25rem);
  --pf-fs-h2: clamp(2rem, 4vw, 3.25rem);
  --pf-fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --pf-fs-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
  --pf-fs-body: 1.0625rem;
  --pf-fs-small: .9375rem;
  --pf-fs-label: .75rem;

  --pf-space: clamp(5rem, 10vw, 8.5rem);
  --pf-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --pf-container: 1240px;
  --pf-container-narrow: 860px;
  --pf-header-h: 72px;

  --pf-radius: 6px;
  --pf-radius-lg: 10px;

  --pf-ease: cubic-bezier(.25, .1, .25, 1);
  --pf-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Bas ---------- */
.pf-page, .pf-page *, .pf-page *::before, .pf-page *::after { box-sizing: border-box; }
.pf-page {
  margin: 0;
  background: var(--pf-bg);
  color: var(--pf-ink);
  font-family: var(--pf-font);
  font-size: var(--pf-fs-body);
  line-height: 1.6;
  font-feature-settings: "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html:has(.pf-page) { scroll-behavior: smooth; scroll-padding-top: calc(var(--pf-header-h) + 1rem); }

/* Återställning med :where() = noll specificitet, så komponentklasserna alltid vinner */
:where(.pf-page) :where(img, svg) { display: block; max-width: 100%; }
:where(.pf-page) :where(img) { height: auto; }
:where(.pf-page) :where(a) { color: inherit; }
:where(.pf-page) :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset) { margin: 0; }
:where(.pf-page) :where(ol, ul) { padding: 0; list-style: none; }
:where(.pf-page) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.pf-page) :where(address) { font-style: normal; }
.pf-page ::selection { background: var(--pf-accent); color: #fff; }
.pf-page :focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 3px; border-radius: 2px; }

.pf-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pf-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--pf-navy); color: #fff; text-decoration: none; border-radius: var(--pf-radius); }
.pf-skip:focus { top: 1rem; }

/* Sektionsnumren räknas i ordning, så de stämmer hur sektionerna än kombineras */
.pf-page main { counter-reset: pf-sec; }

/* ---------- Layout ---------- */
.pf-container { width: 100%; max-width: calc(var(--pf-container) + var(--pf-gutter) * 2); margin-inline: auto; padding-inline: var(--pf-gutter); }
.pf-container--narrow { max-width: calc(var(--pf-container-narrow) + var(--pf-gutter) * 2); }
.pf-section { position: relative; padding-block: var(--pf-space); }
.pf-section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.pf-section--alt { background: var(--pf-bg-alt); }
.pf-section--navy { background: var(--pf-navy); color: var(--pf-dark-ink); overflow: hidden; }

/* ---------- Typografi ---------- */
.pf-display { font-size: var(--pf-fs-display); font-weight: 650; line-height: 1.02; letter-spacing: -.038em; text-wrap: balance; }
.pf-h1 { font-size: var(--pf-fs-h1); font-weight: 650; line-height: 1.04; letter-spacing: -.034em; text-wrap: balance; }
.pf-h2 { font-size: var(--pf-fs-h2); font-weight: 650; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.pf-h3 { font-size: var(--pf-fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.pf-lead { font-size: var(--pf-fs-lead); line-height: 1.55; color: var(--pf-ink-2); max-width: 40em; text-wrap: pretty; }
.pf-muted { color: var(--pf-ink-3); }
.pf-label { font-size: var(--pf-fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-ink-3); font-variant-numeric: tabular-nums; }
.pf-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-ink-2); }
.pf-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-accent); }
.pf-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--pf-accent); animation: pf-pulse 2.4s var(--pf-ease-out) infinite; }
@keyframes pf-pulse { from { scale: .6; opacity: 1; } to { scale: 2.2; opacity: 0; } }

/* Ordet som markeras i hero: färg och en linje som ritas under */
.pf-mark { position: relative; color: var(--pf-accent); white-space: nowrap; }
.pf-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .055em; background: currentColor; transform-origin: 0 50%; }

/* ---------- Sektionshuvud: rubrik på tolv kolumner med index till vänster ---------- */
.pf-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pf-gutter); row-gap: 1.25rem; align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.pf-head .pf-rule { grid-column: 1 / -1; }
.pf-head .pf-index { grid-column: 1 / span 3; padding-top: .7rem; }
.pf-head__main { grid-column: 4 / span 8; display: grid; gap: 1.25rem; }
.pf-head__link { grid-column: 4 / -1; justify-self: start; }
@media (min-width: 900px) {
  .pf-head:has(.pf-head__link) .pf-head__main { grid-column: 4 / span 6; }
  .pf-head__link { grid-column: 11 / span 2; justify-self: end; align-self: end; padding-bottom: .5rem; }
}
@media (max-width: 760px) {
  .pf-head .pf-index, .pf-head__main, .pf-head__link { grid-column: 1 / -1; }
  .pf-head .pf-index { padding-top: 0; }
}

.pf-index { display: flex; align-items: baseline; gap: .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-ink-2); }
.pf-index::before { counter-increment: pf-sec; content: counter(pf-sec, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--pf-accent); letter-spacing: .02em; }
.pf-index::after { content: ""; flex: 0 0 2.5rem; height: 1px; background: currentColor; opacity: .5; align-self: center; }
.pf-head--light .pf-index, .pf-index--light { color: var(--pf-dark-ink-2); }
.pf-head--light .pf-index::before, .pf-index--light::before { color: var(--pf-signal); }
.pf-head--light .pf-muted, .pf-section--navy .pf-muted, .pf-cta .pf-muted { color: var(--pf-dark-ink-2); }

.pf-rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--pf-line); transform-origin: 0 50%; }
.pf-head--light .pf-rule, .pf-footer .pf-rule { background: var(--pf-dark-line); }

/* ---------- Knappar och länkar ---------- */
.pf-arrow { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .45s var(--pf-ease-out); }
.pf-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.25rem; padding: .85rem 1.4rem;
  border: 1px solid var(--pf-navy); border-radius: var(--pf-radius);
  background: var(--pf-navy); color: #fff;
  font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; text-decoration: none;
  cursor: pointer; transition: color .35s var(--pf-ease), border-color .35s var(--pf-ease);
}
/* Färgen sveper in från vänster */
.pf-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pf-accent); scale: 0 1; transform-origin: 100% 50%; transition: scale .55s var(--pf-ease-out); }
.pf-btn:hover::before { scale: 1 1; transform-origin: 0 50%; }
.pf-btn:hover { border-color: var(--pf-accent); }
.pf-btn:hover .pf-arrow, .pf-link:hover .pf-arrow { translate: 4px 0; }
.pf-btn--small { min-height: 2.6rem; padding: .55rem 1rem; font-size: .9375rem; }
.pf-btn--ghost { background: transparent; color: var(--pf-ink); border-color: var(--pf-line); }
.pf-btn--ghost::before { background: var(--pf-navy); }
.pf-btn--ghost:hover { color: #fff; border-color: var(--pf-navy); }
.pf-btn--light { background: #fff; color: var(--pf-navy); border-color: #fff; }
.pf-btn--light::before { background: var(--pf-signal); }
.pf-btn--light:hover { border-color: var(--pf-signal); color: var(--pf-navy); }
.pf-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.pf-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--pf-accent); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px; transition: background-size .45s var(--pf-ease-out);
}
.pf-link:hover { background-size: 100% 1px; }

/* ---------- Header ---------- */
.pf-header {
  position: sticky; top: 0; z-index: 50; height: var(--pf-header-h);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: translate .5s var(--pf-ease-out), border-color .3s var(--pf-ease), background-color .3s var(--pf-ease);
}
.pf-header.is-scrolled { border-bottom-color: var(--pf-line); }
.pf-header.is-hidden { translate: 0 -100%; }
.pf-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.pf-logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--pf-ink); flex: none; }
.pf-logo__mark { width: 28px; height: 28px; }
.pf-logo__mark rect { fill: var(--pf-navy); }
.pf-logo__mark path { fill: #fff; }
.pf-logo__text { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.pf-logo__text span { font-weight: 450; color: var(--pf-ink-2); }
.pf-nav { display: flex; align-items: center; gap: 2rem; }
.pf-nav__list { display: flex; gap: 1.75rem; }
.pf-nav__list a { position: relative; font-size: .9375rem; font-weight: 500; text-decoration: none; color: var(--pf-ink); padding-block: .4rem; }
.pf-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; scale: 0 1; transform-origin: 100% 50%; transition: scale .4s var(--pf-ease-out); }
.pf-nav__list a:hover::after { scale: 1 1; transform-origin: 0 50%; }
.pf-nav__toggle { display: none; }

@media (max-width: 1000px) {
  .pf-nav__toggle {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
    border: 0; background: none; cursor: pointer; position: relative; z-index: 2;
  }
  .pf-nav__toggle span, .pf-nav__toggle span::before { display: block; width: 22px; height: 1.5px; background: var(--pf-ink); transition: translate .4s var(--pf-ease-out), rotate .4s var(--pf-ease-out); }
  .pf-nav__toggle span { position: relative; translate: 0 -3.5px; }
  .pf-nav__toggle span::before { content: ""; position: absolute; left: 0; top: 7px; }
  .pf-header.is-open .pf-nav__toggle span { translate: 0 0; rotate: 45deg; }
  .pf-header.is-open .pf-nav__toggle span::before { translate: 0 -7px; rotate: -90deg; }
  .pf-nav {
    position: fixed; inset: var(--pf-header-h) 0 0 0; z-index: 1;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2rem;
    padding: 2rem var(--pf-gutter) 3rem; background: var(--pf-bg); overflow-y: auto;
    visibility: hidden; opacity: 0; translate: 0 -12px;
    transition: opacity .35s var(--pf-ease), translate .5s var(--pf-ease-out), visibility 0s .5s;
  }
  /* backdrop-filter gör headern till referens för position: fixed, så panelen skulle klippas till headerns höjd */
  .pf-header.is-open { background: var(--pf-bg); border-bottom-color: var(--pf-line); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  .pf-header.is-open .pf-nav { visibility: visible; opacity: 1; translate: none; transition-delay: 0s; }
  .pf-nav__list { flex-direction: column; gap: 0; }
  .pf-nav__list li { border-bottom: 1px solid var(--pf-line); }
  .pf-nav__list a { display: block; padding: 1rem 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
  .pf-nav__list a::after { display: none; }
  .pf-nav .pf-btn { align-self: flex-start; }
}

/* ---------- Hero ---------- */
.pf-hero { position: relative; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem); overflow: hidden; }
.pf-hero::before {
  /* Diskret rutnät i bakgrunden som tonar ut */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--pf-line) 1px, transparent 1px), linear-gradient(90deg, var(--pf-line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 70% 60% at 20% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 20% 0%, #000 0%, transparent 70%);
  opacity: .55;
}
.pf-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pf-gutter); row-gap: 3rem; align-items: center; }
.pf-hero__text { grid-column: 1 / span 7; display: grid; gap: 1.75rem; justify-items: start; }
.pf-hero__lead { max-width: 34em; }
.pf-hero__media { grid-column: 8 / span 5; position: relative; }
.pf-hero__frame { position: relative; overflow: hidden; border-radius: var(--pf-radius-lg); background: var(--pf-bg-alt); }
.pf-hero__frame img { width: 100%; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--pf-header-h) - 7rem); min-height: 420px; object-fit: cover; object-position: 50% 30%; }
.pf-hero__kpi {
  position: absolute; left: clamp(-3.5rem, -4vw, -1rem); bottom: 2.5rem; width: min(260px, 80%);
  padding: 1.1rem 1.2rem 1rem; background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg);
  box-shadow: 0 24px 50px -24px rgba(11, 29, 57, .35);
}
.pf-hero__kpi-value { margin-top: .35rem; font-size: .9375rem; color: var(--pf-ink-2); }
.pf-hero__kpi-value strong { display: block; font-size: 2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--pf-ink); }
.pf-spark { width: 100%; height: 44px; margin-top: .6rem; overflow: visible; }
.pf-spark__line { fill: none; stroke: var(--pf-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pf-spark__area { fill: var(--pf-accent); opacity: .08; }
.pf-spark circle { fill: var(--pf-accent); }

.pf-proof { display: flex; flex-wrap: wrap; gap: 0; margin-top: 1rem; border-top: 1px solid var(--pf-line); width: 100%; }
.pf-proof > div { flex: 1 1 0; min-width: 8.5rem; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .2rem; padding: 1.25rem 1.25rem 0 0; }
.pf-proof > div + div { padding-left: 1.25rem; border-left: 1px solid var(--pf-line); }
.pf-proof dd { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pf-proof dt { font-size: .875rem; color: var(--pf-ink-2); line-height: 1.35; }

@media (max-width: 900px) {
  .pf-hero__text, .pf-hero__media { grid-column: 1 / -1; }
  .pf-hero__media { max-width: 520px; }
  .pf-hero__frame img { aspect-ratio: 4 / 5; }
  .pf-hero__kpi { left: auto; right: 1rem; bottom: 1rem; }
}
@media (max-width: 520px) {
  .pf-proof > div { min-width: 0; padding: 1rem .75rem 0 0; }
  .pf-proof > div + div { padding-left: .75rem; }
  .pf-proof dd { font-size: 1.5rem; }
  .pf-proof dt { font-size: .8125rem; }
}

/* Jalusi: fem lameller som dras undan över bilden */
.pf-blinds { position: absolute; inset: 0; display: flex; pointer-events: none; }
.pf-blinds i { flex: 1; background: var(--pf-bg-alt); scale: 0 1; transform-origin: 100% 50%; }

/* ---------- Logotyper ---------- */
.pf-logos { border-bottom: 1px solid var(--pf-line); }
.pf-logos__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--pf-gutter); align-items: center; }
.pf-logos__title { font-size: .9375rem; font-weight: 500; line-height: 1.45; color: var(--pf-ink-2); max-width: 15em; }
.pf-logos__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: center; }
.pf-logos__list svg { width: 100%; max-width: 140px; height: auto; color: #6b778a; fill: currentColor; font-family: var(--pf-font); transition: color .3s var(--pf-ease); }
.pf-logos__list li:hover svg { color: var(--pf-ink); }
@media (max-width: 1000px) { .pf-logos__grid { grid-template-columns: 1fr; } .pf-logos__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Tjänster: numrerad lista där raden fylls marinblå ---------- */
.pf-services { border-top: 1px solid var(--pf-line); }
.pf-service { position: relative; border-bottom: 1px solid var(--pf-line); }
.pf-service__link {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pf-gutter); row-gap: .75rem;
  align-items: start; padding: 2rem 0; text-decoration: none; color: inherit;
  transition: color .45s var(--pf-ease), padding .55s var(--pf-ease-out);
}
.pf-service__link::before {
  content: ""; position: absolute; inset: 0 calc(var(--pf-gutter) * -1); z-index: -1;
  background: var(--pf-navy); clip-path: inset(100% 0 0 0); transition: clip-path .6s var(--pf-ease-out);
}
.pf-service__num { grid-column: 1 / span 3; grid-row: 1; padding-top: .35rem; font-size: .875rem; font-weight: 600; color: var(--pf-accent); font-variant-numeric: tabular-nums; transition: color .45s var(--pf-ease); }
.pf-service__title { grid-column: 4 / span 4; grid-row: 1 / span 2; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.pf-service__text { grid-column: 8 / span 4; grid-row: 1; color: var(--pf-ink-2); transition: color .45s var(--pf-ease); }
.pf-service__tags { grid-column: 8 / span 4; grid-row: 2; display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-service__tags li { padding: .25rem .65rem; border: 1px solid var(--pf-line); border-radius: 999px; font-size: .8125rem; color: var(--pf-ink-2); transition: color .45s var(--pf-ease), border-color .45s var(--pf-ease); }
.pf-service__go { grid-column: 12; grid-row: 1 / span 2; align-self: start; justify-self: end; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--pf-line); border-radius: 50%; transition: background-color .45s var(--pf-ease), border-color .45s var(--pf-ease), rotate .55s var(--pf-ease-out); rotate: -45deg; }
.pf-service__go .pf-arrow { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) {
  .pf-service__link:hover { color: #fff; padding-inline: 1.25rem; }
  .pf-service__link:hover::before { clip-path: inset(0 0 0 0); }
  .pf-service__link:hover .pf-service__num { color: var(--pf-signal); }
  .pf-service__link:hover .pf-service__text { color: var(--pf-dark-ink-2); }
  .pf-service__link:hover .pf-service__tags li { color: var(--pf-dark-ink); border-color: var(--pf-dark-line); }
  .pf-service__link:hover .pf-service__go { background: #fff; border-color: #fff; color: var(--pf-navy); rotate: 0deg; }
}
@media (max-width: 900px) {
  .pf-service__link { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; }
  .pf-service__num { grid-column: 1; grid-row: 1; }
  .pf-service__title { grid-column: 2; grid-row: 1; }
  .pf-service__go { grid-column: 3; grid-row: 1; width: 2.5rem; height: 2.5rem; }
  .pf-service__text { grid-column: 2 / -1; grid-row: 2; }
  .pf-service__tags { grid-column: 2 / -1; grid-row: 3; }
}

/* ---------- Branscher: flikar med förloppsstreck ---------- */
.pf-tabs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--pf-gutter); align-items: start; }
.pf-tabs__list { display: grid; border-top: 1px solid var(--pf-line); }
.pf-tab {
  position: relative; display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; gap: .5rem;
  width: 100%; padding: 1.35rem 0; border: 0; border-bottom: 1px solid var(--pf-line); background: none;
  text-align: left; cursor: pointer; color: var(--pf-ink-3); transition: color .35s var(--pf-ease);
}
.pf-tab__num { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-tab__name { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 600; letter-spacing: -.015em; }
.pf-tab:hover, .pf-tab[aria-selected="true"] { color: var(--pf-ink); }
.pf-tab[aria-selected="true"] .pf-tab__num { color: var(--pf-accent); }
.pf-tab__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pf-navy); scale: 0 1; transform-origin: 0 50%; }
.pf-tab[aria-selected="true"] .pf-tab__bar { scale: 1 1; }
.pf-tabs.is-auto .pf-tab[aria-selected="true"] .pf-tab__bar { animation: pf-tabbar var(--pf-interval, 7s) linear both; animation-play-state: paused; }
.pf-tabs.is-auto.is-playing:not(:hover):not(:focus-within) .pf-tab[aria-selected="true"] .pf-tab__bar { animation-play-state: running; }
@keyframes pf-tabbar { from { scale: 0 1; } to { scale: 1 1; } }

.pf-tabs__panels { display: grid; }
.pf-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--pf-bg); border-radius: var(--pf-radius-lg); overflow: hidden; box-shadow: 0 1px 0 var(--pf-line), 0 30px 60px -40px rgba(11, 29, 57, .35); }
.pf-panel:focus-visible { outline-offset: 4px; }
.pf-panel__media { position: relative; overflow: hidden; min-height: 100%; }
.pf-panel__media img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.pf-panel__body { display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.5rem); }
.pf-panel__body > p { color: var(--pf-ink-2); }
.pf-panel__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 1rem; border-block: 1px solid var(--pf-line); }
.pf-panel__kpis div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .15rem; }
.pf-panel__kpis dd { font-size: 1.875rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.pf-panel__kpis dt { font-size: .875rem; color: var(--pf-ink-2); line-height: 1.35; }
/* Panelen som visas: bilden dras fram och texten glider upp */
.pf-js .pf-tabs.is-ready .pf-panel:not([hidden]) .pf-panel__media img { animation: pf-panel-img 1.1s var(--pf-ease-out) both; }
.pf-js .pf-tabs.is-ready .pf-panel:not([hidden]) .pf-panel__body > * { animation: pf-panel-in .8s var(--pf-ease-out) both; }
.pf-js .pf-tabs.is-ready .pf-panel:not([hidden]) .pf-panel__body > :nth-child(2) { animation-delay: .06s; }
.pf-js .pf-tabs.is-ready .pf-panel:not([hidden]) .pf-panel__body > :nth-child(3) { animation-delay: .12s; }
.pf-js .pf-tabs.is-ready .pf-panel:not([hidden]) .pf-panel__body > :nth-child(4) { animation-delay: .18s; }
@keyframes pf-panel-img { from { clip-path: inset(0 0 0 100%); scale: 1.15; } to { clip-path: inset(0 0 0 0); scale: 1; } }
@keyframes pf-panel-in { from { opacity: 0; translate: 0 16px; } }
@media (max-width: 1000px) {
  .pf-tabs { grid-template-columns: 1fr; }
  .pf-tabs__list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--pf-line); scrollbar-width: none; gap: 1.5rem; }
  .pf-tab { grid-template-columns: auto auto; border-bottom: 0; padding: .9rem 0; }
  .pf-panel { grid-template-columns: 1fr; }
  .pf-panel__media img { min-height: 0; aspect-ratio: 16 / 10; }
}
/* Flikarna ligger i en vågrät scrollrad på mobil: avslöja dem direkt så att de utanför bild inte förblir dolda */
@media (max-width: 1000px) { .pf-js .pf-tab[data-reveal] { opacity: 1; translate: none; } }

/* ---------- Arbetssätt: tidslinje som fylls när man scrollar ---------- */
.pf-phases { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pf-gutter); padding-top: 2.75rem; }
.pf-phases::before, .pf-phases::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--pf-line); }
.pf-phases::after { background: var(--pf-navy); scale: var(--pf-p, 1) 1; transform-origin: 0 50%; }
.pf-phase { --on: clamp(0, calc((var(--pf-p, 1) * 4 - var(--k)) * 3), 1); position: relative; display: grid; gap: .65rem; align-content: start; }
.pf-phase__dot { position: absolute; top: calc(-2.75rem + 1px); left: 0; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--pf-bg); border: 2px solid var(--pf-navy); }
.pf-phase__dot::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--pf-accent); scale: var(--on); }
.pf-phase .pf-label { color: var(--pf-accent); }
.pf-phase__text { color: var(--pf-ink-2); font-size: var(--pf-fs-small); }
@media (max-width: 900px) {
  .pf-phases { grid-template-columns: 1fr; padding-top: 0; padding-left: 2.5rem; gap: 2.25rem; }
  .pf-phases::before, .pf-phases::after { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pf-phases::after { scale: 1 var(--pf-p, 1); transform-origin: 50% 0; }
  .pf-phase__dot { top: .15rem; left: -2.5rem; }
}

/* ---------- Kundcase: kort som staplas när man scrollar ---------- */
.pf-cases { display: grid; gap: 2rem; }
.pf-case {
  --cover: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
  background: var(--pf-bg); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); overflow: hidden;
  transform-origin: 50% 0; scale: calc(1 - var(--cover) * .05);
  filter: brightness(calc(1 - var(--cover) * .08));
  box-shadow: 0 40px 70px -50px rgba(11, 29, 57, .45);
}
.pf-case__media { position: relative; overflow: hidden; }
.pf-case__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.pf-case__body { display: grid; align-content: center; gap: 1.1rem; padding: clamp(1.5rem, 4vw, 3.25rem); }
.pf-case__title { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.025em; }
.pf-case__text { color: var(--pf-ink-2); }
.pf-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pf-line); padding-top: 1.1rem; gap: 1rem; }
.pf-results div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .15rem; }
.pf-results dd { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--pf-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-results dt { font-size: .8125rem; color: var(--pf-ink-2); }
@media (min-width: 900px) and (min-height: 720px) {
  .pf-case { position: sticky; top: calc(var(--pf-header-h) + 1.5rem + var(--k) * 1.25rem); }
  .pf-cases { gap: 12vh; }
}
@media (max-width: 900px) {
  .pf-case { grid-template-columns: 1fr; }
  .pf-case__media img { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------- Siffror på marinblått ---------- */
.pf-stats__grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--pf-dark-line) 1px, transparent 1px), linear-gradient(90deg, var(--pf-dark-line) 1px, transparent 1px);
  background-size: 80px 80px; opacity: .35;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  translate: 0 calc(var(--pf-p, 0) * -40px);
}
.pf-stats .pf-container { position: relative; }
.pf-stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pf-gutter); }
.pf-stat { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .75rem; padding-top: 1.5rem; }
.pf-stat dd { font-size: clamp(2.75rem, 5.2vw, 4.25rem); font-weight: 650; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-stat dd span:first-child { color: #fff; }
.pf-stat dt { color: var(--pf-dark-ink-2); font-size: var(--pf-fs-small); max-width: 16em; }
.pf-stat__bar { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--pf-dark-line); }
.pf-stat__bar::after { content: ""; position: absolute; inset: 0; background: var(--pf-signal); scale: var(--v) 1; transform-origin: 0 50%; }
.pf-stats__note { margin-top: 3rem; font-size: .8125rem; color: var(--pf-dark-ink-2); }
@media (max-width: 900px) { .pf-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; } }
@media (max-width: 460px) { .pf-stats__list { grid-template-columns: 1fr; } }

/* ---------- Citat som tänds ord för ord ---------- */
.pf-quote__figure { display: grid; gap: 2.25rem; }
.pf-quote__mark { width: 48px; height: 36px; fill: var(--pf-accent); }
.pf-quote__text p { font-size: clamp(1.625rem, 3.2vw, 2.625rem); font-weight: 550; line-height: 1.25; letter-spacing: -.025em; text-wrap: pretty; }
.pf-quote__person { display: flex; align-items: center; gap: 1rem; color: var(--pf-ink-2); font-size: var(--pf-fs-small); }
.pf-quote__person strong { display: block; color: var(--pf-ink); font-size: 1rem; }
.pf-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pf-navy); color: #fff; font-weight: 650; letter-spacing: .02em; flex: none; }

/* ---------- Insikter ---------- */
.pf-insights { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pf-report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--pf-bg-alt); border-radius: var(--pf-radius-lg); }
.pf-report__stage { perspective: 1100px; }
.pf-report__cover {
  position: relative; display: grid; align-content: space-between; gap: 1rem; aspect-ratio: 3 / 4; padding: 1.4rem;
  background: linear-gradient(160deg, var(--pf-navy-3), var(--pf-navy) 70%); color: #fff; border-radius: 4px 8px 8px 4px;
  box-shadow: inset 6px 0 0 rgba(255, 255, 255, .08), 0 30px 50px -24px rgba(11, 29, 57, .6), 0 6px 12px -6px rgba(11, 29, 57, .35);
  rotate: y calc(-14deg + var(--pf-p, 1) * 10deg); transform-style: preserve-3d;
  transition: transform .6s var(--pf-ease-out);
}
.pf-report__brand { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-dark-ink-2); }
.pf-report__title { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 650; line-height: 1.1; letter-spacing: -.02em; }
.pf-report__year { font-size: 2.75rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--pf-signal); }
.pf-report__chart { width: 70%; height: auto; }
.pf-report__chart rect { fill: rgba(255, 255, 255, .25); transform-box: fill-box; transform-origin: 50% 100%; }
.pf-report__chart rect.is-hi { fill: var(--pf-signal); }
.pf-report__body { display: grid; gap: 1rem; justify-items: start; }
.pf-report__body > p:not(.pf-label) { color: var(--pf-ink-2); font-size: var(--pf-fs-small); }
.pf-articles { border-top: 1px solid var(--pf-line); }
.pf-articles li { border-bottom: 1px solid var(--pf-line); }
.pf-article-link { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; padding: 1.5rem 0; text-decoration: none; }
.pf-article-link .pf-label, .pf-article-link__title, .pf-article-link time { grid-column: 1; }
.pf-article-link__title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; transition: color .3s var(--pf-ease); }
.pf-article-link time { font-size: .875rem; color: var(--pf-ink-2); }
.pf-article-link .pf-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 1.25rem; height: 1.25rem; color: var(--pf-accent); opacity: 0; translate: -8px 0; transition: opacity .35s var(--pf-ease), translate .45s var(--pf-ease-out); }
.pf-article-link:hover .pf-article-link__title { color: var(--pf-accent); }
.pf-article-link:hover .pf-arrow { opacity: 1; translate: 0 0; }
@media (max-width: 1000px) { .pf-insights { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pf-report { grid-template-columns: 1fr; } .pf-report__stage { max-width: 220px; } }

/* ---------- Partners ---------- */
.pf-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pf-gutter); }
.pf-person { display: grid; gap: .3rem; align-content: start; }
.pf-person__photo { position: relative; overflow: hidden; margin-bottom: 1rem; border-radius: var(--pf-radius-lg); background: #dfe4ea; }
.pf-person__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter .7s var(--pf-ease), scale 1.2s var(--pf-ease-out); }
.pf-person:hover .pf-person__photo img { filter: grayscale(0); scale: 1.04; }
.pf-person__name { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; }
.pf-person__role { color: var(--pf-accent); font-size: var(--pf-fs-small); font-weight: 600; }
.pf-person__focus { color: var(--pf-ink-2); font-size: var(--pf-fs-small); }
@media (max-width: 900px) { .pf-team { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }

/* ---------- Kontor med lokal tid ---------- */
.pf-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pf-gutter); }
.pf-office { position: relative; display: grid; gap: .65rem; align-content: start; padding-top: 1.75rem; }
.pf-office::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--pf-navy); transform-origin: 0 50%; }
.pf-office__city { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.pf-office__now { display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: var(--pf-ink-2); font-variant-numeric: tabular-nums; }
.pf-office__now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa6b8; flex: none; }
.pf-office__now.is-open::before { background: #0f9d6b; box-shadow: 0 0 0 4px rgba(15, 157, 107, .15); }
.pf-office__time { font-weight: 600; color: var(--pf-ink); }
.pf-office address, .pf-office p { color: var(--pf-ink-2); }
.pf-office a { color: var(--pf-ink); text-decoration-color: var(--pf-line); text-underline-offset: 3px; }
@media (max-width: 800px) { .pf-offices { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- Certifieringar ---------- */
.pf-trust { border-block: 1px solid var(--pf-line); }
.pf-trust__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--pf-gutter); align-items: center; }
.pf-trust__title { font-size: .9375rem; font-weight: 500; line-height: 1.45; color: var(--pf-ink-2); max-width: 15em; }
.pf-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pf-badge { display: flex; align-items: center; gap: .85rem; font-size: .8125rem; color: var(--pf-ink-2); line-height: 1.35; }
.pf-badge strong { display: block; font-size: 1rem; color: var(--pf-ink); }
.pf-badge__icon { width: 36px; height: 36px; flex: none; fill: none; stroke: var(--pf-navy); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pf-badge__icon path:last-child { stroke: var(--pf-accent); stroke-width: 2; }
@media (max-width: 1000px) { .pf-trust__grid { grid-template-columns: 1fr; } .pf-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .pf-badges { grid-template-columns: 1fr; } }

/* ---------- Samarbetsformer ---------- */
.pf-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.pf-model { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--pf-bg); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); }
.pf-model__text { color: var(--pf-ink-2); font-size: var(--pf-fs-small); }
.pf-model__price { padding-block: 1rem; border-block: 1px solid var(--pf-line); color: var(--pf-ink-2); font-size: var(--pf-fs-small); }
.pf-model__price strong { display: block; font-size: 1.875rem; font-weight: 650; letter-spacing: -.03em; color: var(--pf-ink); line-height: 1.15; }
.pf-model__list { display: grid; gap: .6rem; font-size: var(--pf-fs-small); }
.pf-model__list li { display: flex; gap: .6rem; align-items: flex-start; }
.pf-check { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .2rem; fill: none; stroke: var(--pf-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-model__btn { margin-top: auto; width: 100%; }
.pf-model__badge { position: absolute; top: -.8rem; left: clamp(1.5rem, 3vw, 2.25rem); padding: .25rem .7rem; border-radius: 999px; background: var(--pf-signal); color: var(--pf-navy); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.pf-model--featured { background: var(--pf-navy); border-color: var(--pf-navy); color: var(--pf-dark-ink); box-shadow: 0 40px 70px -40px rgba(11, 29, 57, .6); }
.pf-model--featured .pf-model__text, .pf-model--featured .pf-model__price { color: var(--pf-dark-ink-2); border-color: var(--pf-dark-line); }
.pf-model--featured .pf-model__price strong { color: #fff; }
.pf-model--featured .pf-check { stroke: var(--pf-signal); }
.pf-model--featured .pf-btn { background: #fff; color: var(--pf-navy); border-color: #fff; }
.pf-model--featured .pf-btn::before { background: var(--pf-signal); }
.pf-models__note { margin-top: 1.5rem; font-size: .8125rem; color: var(--pf-ink-2); }
@media (max-width: 960px) { .pf-models { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- FAQ ---------- */
.pf-faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pf-faq-head { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 900px) { .pf-faq-layout > .pf-faq-head { position: sticky; top: calc(var(--pf-header-h) + 2rem); } }
.pf-contact-card { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.25rem 1rem 1rem; background: var(--pf-bg-alt); border-radius: var(--pf-radius-lg); font-size: var(--pf-fs-small); color: var(--pf-ink-2); line-height: 1.45; }
.pf-contact-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.pf-contact-card strong { display: block; color: var(--pf-ink); }
.pf-contact-card a { color: var(--pf-accent); font-weight: 600; text-decoration: none; }
.pf-faq { border-top: 1px solid var(--pf-line); }
.pf-faq details { border-bottom: 1px solid var(--pf-line); }
.pf-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.35;
}
.pf-faq summary::-webkit-details-marker { display: none; }
.pf-faq__icon { position: relative; width: 2.25rem; height: 2.25rem; flex: none; border: 1px solid var(--pf-line); border-radius: 50%; transition: background-color .35s var(--pf-ease), border-color .35s var(--pf-ease); }
.pf-faq__icon::before, .pf-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: rotate .45s var(--pf-ease-out); }
.pf-faq__icon::after { rotate: 90deg; }
.pf-faq details[open] .pf-faq__icon { background: var(--pf-navy); border-color: var(--pf-navy); color: #fff; }
.pf-faq details[open] .pf-faq__icon::after { rotate: 0deg; }
.pf-faq summary:hover .pf-faq__icon { border-color: var(--pf-navy); }
.pf-faq__answer { overflow: hidden; color: var(--pf-ink-2); }
.pf-faq__answer p { padding-bottom: 1.6rem; max-width: 42em; }
@media (max-width: 900px) { .pf-faq-layout { grid-template-columns: 1fr; } }

/* ---------- Karriär ---------- */
.pf-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.pf-filter button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border: 1px solid var(--pf-line); border-radius: 999px; background: var(--pf-bg); font-size: .9375rem; font-weight: 500; cursor: pointer; transition: background-color .3s var(--pf-ease), color .3s var(--pf-ease), border-color .3s var(--pf-ease); }
.pf-filter button span { font-size: .75rem; color: var(--pf-ink-2); font-variant-numeric: tabular-nums; }
.pf-filter button:hover { border-color: var(--pf-navy); }
.pf-filter button[aria-pressed="true"] { background: var(--pf-navy); border-color: var(--pf-navy); color: #fff; }
.pf-filter button[aria-pressed="true"] span { color: var(--pf-dark-ink-2); }
.pf-jobs__list { border-top: 1px solid var(--pf-line); }
.pf-job { border-bottom: 1px solid var(--pf-line); }
.pf-job a { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 2fr) 1.5rem; gap: 1rem; align-items: center; padding: 1.4rem 0; text-decoration: none; transition: padding .5s var(--pf-ease-out); }
.pf-job__title { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; }
.pf-job__meta, .pf-job__area { color: var(--pf-ink-2); font-size: var(--pf-fs-small); }
.pf-job .pf-arrow { width: 1.25rem; height: 1.25rem; color: var(--pf-accent); }
.pf-job a:hover { padding-inline: .75rem; }
.pf-job a:hover .pf-job__title { color: var(--pf-accent); }
.pf-job a:hover .pf-arrow { translate: 4px 0; }
.pf-job.is-out { display: none; }
.pf-job.is-in { animation: pf-panel-in .6s var(--pf-ease-out) both; }
.pf-jobs__empty { padding: 1.5rem 0; color: var(--pf-ink-2); }
@media (max-width: 760px) {
  .pf-job a { grid-template-columns: minmax(0, 1fr) 1.5rem; gap: .3rem 1rem; }
  .pf-job__title { grid-column: 1; }
  .pf-job__meta, .pf-job__area { grid-column: 1; }
  .pf-job .pf-arrow { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---------- Formulär ---------- */
.pf-form { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.pf-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.pf-field { display: grid; gap: .45rem; min-width: 0; }
.pf-field label { font-size: .875rem; font-weight: 600; }
.pf-field label span { font-weight: 400; color: var(--pf-ink-2); }
.pf-field input, .pf-field select, .pf-field textarea {
  width: 100%; min-width: 0; min-height: 3rem; padding: .75rem .9rem;
  background: var(--pf-bg); border: 1px solid #b9c3d1; border-radius: var(--pf-radius);
  transition: border-color .25s var(--pf-ease), box-shadow .25s var(--pf-ease);
}
.pf-field textarea { resize: vertical; min-height: 8rem; }
.pf-field select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%230b1d39' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem; }
.pf-field :is(input, select, textarea):hover { border-color: var(--pf-ink-3); }
.pf-field :is(input, select, textarea):focus { outline: none; border-color: var(--pf-accent); box-shadow: 0 0 0 3px rgba(29, 78, 216, .18); }
.pf-form__consent { font-size: .8125rem; color: var(--pf-ink-2); }
.pf-form .pf-btn { justify-self: start; }
.pf-form--card { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--pf-bg); border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: 0 40px 70px -50px rgba(11, 29, 57, .4); }
.pf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .pf-form__row { grid-template-columns: 1fr; } }

.pf-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; border: 0; min-width: 0; }
.pf-chips legend { width: 100%; margin-bottom: .6rem; padding: 0; font-size: .875rem; font-weight: 600; }
.pf-chip { position: relative; }
.pf-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pf-chip span { display: block; padding: .5rem .95rem; border: 1px solid var(--pf-line); border-radius: 999px; font-size: .9375rem; font-weight: 500; transition: background-color .25s var(--pf-ease), color .25s var(--pf-ease), border-color .25s var(--pf-ease); }
.pf-chip input:checked + span { background: var(--pf-navy); border-color: var(--pf-navy); color: #fff; }
.pf-chip input:focus-visible + span { outline: 2px solid var(--pf-accent); outline-offset: 2px; }

/* Mörka formulär (CTA) */
.pf-form--dark { color: var(--pf-dark-ink); }
.pf-form--dark .pf-field label span, .pf-form--dark .pf-form__consent { color: var(--pf-dark-ink-2); }
.pf-form--dark .pf-field :is(input, select, textarea) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; color-scheme: dark; }
.pf-form--dark .pf-field :is(input, select, textarea):hover { border-color: rgba(255, 255, 255, .5); }
.pf-form--dark .pf-field :is(input, select, textarea):focus { border-color: var(--pf-sky); box-shadow: 0 0 0 3px rgba(157, 184, 255, .25); }
.pf-form--dark .pf-chip span { border-color: rgba(255, 255, 255, .28); }
.pf-form--dark .pf-chip input:checked + span { background: #fff; border-color: #fff; color: var(--pf-navy); }
.pf-form--dark :focus-visible, .pf-cta :focus-visible, .pf-footer :focus-visible { outline-color: var(--pf-sky); }

/* ---------- CTA: boka samtal ---------- */
.pf-cta__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 6vw, 5rem); background: var(--pf-navy); color: var(--pf-dark-ink); border-radius: var(--pf-radius-lg);
}
.pf-cta__grid-bg {
  position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--pf-dark-line) 1px, transparent 1px), linear-gradient(90deg, var(--pf-dark-line) 1px, transparent 1px);
  background-size: 56px 56px; opacity: .5;
  mask-image: radial-gradient(ellipse 60% 70% at 85% 10%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 10%, #000, transparent 70%);
  translate: 0 calc((1 - var(--pf-p, 1)) * 60px);
}
.pf-cta__panel::after {
  content: ""; position: absolute; right: -10%; top: -30%; z-index: -1; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29, 78, 216, .55), transparent);
  opacity: calc(.3 + var(--pf-p, 1) * .7); pointer-events: none;
}
.pf-cta__text { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.pf-cta .pf-lead { color: var(--pf-dark-ink-2); }
.pf-cta__person { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--pf-dark-line); width: 100%; font-size: var(--pf-fs-small); color: var(--pf-dark-ink-2); line-height: 1.45; }
.pf-cta__person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.pf-cta__person strong { display: block; color: #fff; }
.pf-cta__person a { color: #fff; font-weight: 600; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
@media (max-width: 900px) { .pf-cta__panel { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.pf-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pf-contact__info { display: grid; gap: 2.5rem; }
.pf-details { display: grid; }
.pf-details > div { position: relative; display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1.1rem 0; }
.pf-details > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--pf-line); transform-origin: 0 50%; }
.pf-details dt { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-ink-2); padding-top: .15rem; }
.pf-details a { text-decoration-color: var(--pf-line); text-underline-offset: 3px; }
@media (max-width: 900px) { .pf-contact { grid-template-columns: 1fr; } }

/* ---------- Sidhuvud på undersidor ---------- */
.pf-page-hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem); background: var(--pf-bg-alt); overflow: hidden; }
.pf-page-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pf-gutter); row-gap: 3rem; align-items: center; }
.pf-page-hero__text { grid-column: 1 / span 6; display: grid; gap: 1.5rem; justify-items: start; }
.pf-page-hero__media { grid-column: 7 / -1; }
.pf-page-hero__media .pf-hero__frame img { aspect-ratio: 4 / 3; }
.pf-page-hero__grid:has(.pf-page-hero__media[hidden]) .pf-page-hero__text { grid-column: 1 / span 9; }
.pf-page-hero .pf-blinds i { background: var(--pf-bg-alt); }
.pf-crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; color: var(--pf-ink-2); }
.pf-crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--pf-ink-3); }
.pf-crumbs a { text-decoration: none; }
.pf-crumbs a:hover { color: var(--pf-ink); text-decoration: underline; }
.pf-crumbs [aria-current] { color: var(--pf-ink); font-weight: 600; }
@media (max-width: 900px) { .pf-page-hero__text, .pf-page-hero__media, .pf-page-hero__grid:has(.pf-page-hero__media[hidden]) .pf-page-hero__text { grid-column: 1 / -1; } }

/* ---------- Artikel och kundcase ---------- */
.pf-article { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.pf-article__facts { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .pf-article__facts { position: sticky; top: calc(var(--pf-header-h) + 2rem); } }
.pf-article__facts dl { display: grid; border-top: 2px solid var(--pf-navy); }
.pf-article__facts dl div { padding: .85rem 0; border-bottom: 1px solid var(--pf-line); }
.pf-article__facts dt { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-ink-2); }
.pf-article__facts dd { font-weight: 600; }
.pf-article__results { display: grid; gap: 1rem; padding: 1.25rem; background: var(--pf-navy); color: var(--pf-dark-ink-2); border-radius: var(--pf-radius-lg); font-size: .875rem; }
.pf-article__results strong { display: block; font-size: 2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; color: var(--pf-signal); white-space: nowrap; }
.pf-article__main { display: grid; gap: 2rem; min-width: 0; }
.pf-article__meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; color: var(--pf-ink-2); }
.pf-article__meta span:first-child { color: var(--pf-accent); font-weight: 600; }
.pf-prose { max-width: 44em; color: var(--pf-ink-2); font-size: 1.125rem; line-height: 1.7; }
.pf-prose > * + * { margin-top: 1.25em; }
.pf-prose__lead { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.5; color: var(--pf-ink); font-weight: 500; letter-spacing: -.01em; }
.pf-prose h2 { margin-top: 2.25em; font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.2; color: var(--pf-ink); }
.pf-prose ol { counter-reset: pf-li; display: grid; gap: .85rem; }
.pf-prose ol li { counter-increment: pf-li; position: relative; padding-left: 2.75rem; }
.pf-prose ol li::before { content: counter(pf-li, decimal-leading-zero); position: absolute; left: 0; top: .1em; font-size: .875rem; font-weight: 700; color: var(--pf-accent); font-variant-numeric: tabular-nums; }
.pf-prose ul { display: grid; gap: .6rem; }
.pf-prose ul li { position: relative; padding-left: 1.5rem; }
.pf-prose ul li::before { content: ""; position: absolute; left: 0; top: .75em; width: .6rem; height: 2px; background: var(--pf-accent); }
.pf-prose figure { margin-block: 2.5em; }
.pf-prose figure img { width: 100%; border-radius: var(--pf-radius-lg); }
.pf-prose figcaption { margin-top: .75rem; font-size: .875rem; color: var(--pf-ink-2); }
.pf-prose blockquote { margin-block: 2.5em; padding: 1.75rem 0 0; border-top: 2px solid var(--pf-navy); }
.pf-prose blockquote p { font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--pf-ink); }
.pf-prose cite { display: block; margin-top: .85rem; font-style: normal; font-size: .9375rem; color: var(--pf-ink-2); }
.pf-prose a { color: var(--pf-accent); text-underline-offset: 3px; }
.pf-prose strong { color: var(--pf-ink); }
.pf-callout { padding: 1.5rem 1.75rem; background: var(--pf-bg-alt); border-left: 3px solid var(--pf-accent); border-radius: 0 var(--pf-radius) var(--pf-radius) 0; }
.pf-callout strong { display: block; margin-bottom: .35rem; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-accent); }
.pf-callout p { color: var(--pf-ink); }
.pf-author { display: flex; align-items: center; gap: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--pf-line); font-size: .9375rem; color: var(--pf-ink-2); }
.pf-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.pf-author strong { display: block; color: var(--pf-ink); }
@media (max-width: 960px) { .pf-article { grid-template-columns: 1fr; } .pf-article__facts { order: 2; } }

/* ---------- Footer ---------- */
.pf-footer { padding-block: clamp(4rem, 8vw, 6rem) 2rem; background: var(--pf-navy); color: var(--pf-dark-ink-2); }
.pf-footer__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pf-gutter); align-items: end; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.pf-footer__statement { font-size: clamp(1.75rem, 3.6vw, 3rem); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.pf-footer__statement span { color: var(--pf-dark-ink-2); }
.pf-newsletter { display: grid; gap: .6rem; }
.pf-newsletter label { font-size: .875rem; font-weight: 600; color: #fff; }
.pf-newsletter__row { display: flex; gap: .5rem; }
.pf-newsletter input { flex: 1; min-width: 0; min-height: 3.25rem; padding: .75rem 1rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--pf-radius); color: #fff; color-scheme: dark; }
.pf-newsletter input::placeholder { color: #8d9bb3; }
.pf-newsletter input:focus { outline: none; border-color: var(--pf-sky); box-shadow: 0 0 0 3px rgba(157, 184, 255, .25); }
.pf-footer__cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--pf-gutter); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.pf-footer .pf-logo { color: #fff; }
.pf-footer .pf-logo__mark rect { fill: #fff; }
.pf-footer .pf-logo__mark path { fill: var(--pf-navy); }
.pf-footer .pf-logo__text span { color: var(--pf-dark-ink-2); }
.pf-footer__brand { display: grid; gap: 1rem; align-content: start; font-size: var(--pf-fs-small); max-width: 22em; }
.pf-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pf-gutter); }
.pf-footer__nav h2 { margin-bottom: 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.pf-footer__nav ul { display: grid; gap: .55rem; font-size: var(--pf-fs-small); }
.pf-footer a { text-decoration: none; transition: color .25s var(--pf-ease); }
.pf-footer__nav a:hover, .pf-footer__bottom a:hover { color: #fff; }
.pf-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--pf-dark-line); font-size: .8125rem; }
.pf-footer__bottom ul { display: flex; gap: 1.5rem; }
@media (max-width: 900px) { .pf-footer__top, .pf-footer__cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pf-footer__nav { grid-template-columns: 1fr 1fr; } .pf-newsletter__row { flex-direction: column; } }

/* ==========================================================================
   Rörelse
   Deklarativt: data-reveal="up|fade|blur|scale|lift|rise|clip|words|rule|line|watch"
   på ett element, data-reveal-stagger på föräldern, data-count på siffror,
   data-progress på element som styrs av scroll. Allt syns utan JS och med
   prefers-reduced-motion. Avslöjanden använder translate/scale/rotate (inte
   transform) så att de kan kombineras med komponenternas hover-effekter.
   ========================================================================== */
:root {
  --pf-reveal-dur: 1.15s;
  --pf-reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --pf-word-step: .045s;
}

@keyframes pf-header-in { from { translate: 0 -100%; } }
.pf-js .pf-header { animation: pf-header-in .9s var(--pf-reveal-ease) .05s backwards; }
.pf-js .pf-header.is-hidden { animation: none; }

.pf-js [data-reveal] {
  transition:
    opacity calc(var(--pf-reveal-dur) * .8) var(--pf-reveal-ease) var(--pf-delay, 0s),
    translate var(--pf-reveal-dur) var(--pf-reveal-ease) var(--pf-delay, 0s),
    scale var(--pf-reveal-dur) var(--pf-reveal-ease) var(--pf-delay, 0s),
    filter var(--pf-reveal-dur) var(--pf-reveal-ease) var(--pf-delay, 0s);
}
.pf-js [data-reveal="up"]    { opacity: 0; translate: 0 36px; }
.pf-js [data-reveal="fade"]  { opacity: 0; }
.pf-js [data-reveal="blur"]  { opacity: 0; translate: 0 10px; filter: blur(10px); }
.pf-js [data-reveal="scale"] { opacity: 0; translate: 0 48px; scale: .965; }
/* lift och rise tonas inte in: text och bild i hero räknas som synliga direkt (bra LCP) */
.pf-js [data-reveal="lift"]  { translate: 0 24px; }
.pf-js [data-reveal="rise"]  { translate: 0 60px; --pf-reveal-dur: 1.6s; }
.pf-js [data-reveal].is-visible { opacity: 1; translate: none; scale: none; filter: none; }
.pf-js [data-reveal].is-done { transition-delay: 0s; }

/* Jalusin dras undan lamell för lamell, bilden zoomar ut bakom */
.pf-js [data-reveal="rise"] .pf-blinds i { scale: 1 1; transition: scale 1.1s cubic-bezier(.77, 0, .18, 1); transition-delay: calc(var(--pf-delay, 0s) + .15s + var(--b, 0) * .08s); }
.pf-js [data-reveal="rise"].is-visible .pf-blinds i { scale: 0 1; }
.pf-blinds i:nth-child(2) { --b: 1; } .pf-blinds i:nth-child(3) { --b: 2; } .pf-blinds i:nth-child(4) { --b: 3; } .pf-blinds i:nth-child(5) { --b: 4; }
.pf-js [data-reveal="rise"] .pf-hero__frame img { scale: 1.18; transition: scale 2.4s var(--pf-reveal-ease) var(--pf-delay, 0s); }
.pf-js [data-reveal="rise"].is-visible .pf-hero__frame img { scale: 1; }

/* clip: ridån går upp över bilden inuti. Själva elementet klipps inte, annars ser IntersectionObserver det aldrig. */
.pf-js [data-reveal="clip"] > img { clip-path: inset(0 0 100% 0); scale: 1.2; transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1) var(--pf-delay, 0s), scale 2s var(--pf-reveal-ease) var(--pf-delay, 0s); }
.pf-js [data-reveal="clip"].is-visible > img { clip-path: inset(0 0 0 0); scale: 1; }

/* Rubriker ord för ord ur en mask */
.pf-js [data-reveal="words"]:not(.is-split) { visibility: hidden; }
.pf-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .04em .16em; margin: -.12em -.04em -.16em; }
.pf-w__i { display: inline-block; }
.pf-js [data-reveal="words"] .pf-w__i {
  translate: 0 108%;
  transition: translate 1.1s var(--pf-reveal-ease) calc(var(--pf-delay, 0s) + var(--i, 0) * var(--pf-word-step));
}
.pf-js [data-reveal="words"].is-visible .pf-w__i { translate: none; }
/* Understrykningen i hero ritas när orden är på plats */
.pf-js .pf-mark::after { scale: 0 1; transition: scale 1s var(--pf-reveal-ease) calc(var(--pf-delay, 0s) + .7s); }
.pf-js .is-visible .pf-mark::after { scale: 1 1; }

/* Linjer som ritas från vänster */
.pf-js [data-reveal="rule"] { scale: 0 1; transition: scale 1.4s var(--pf-reveal-ease) var(--pf-delay, 0s); }
.pf-js [data-reveal="rule"].is-visible { scale: 1 1; }
.pf-js [data-reveal="line"]::before { scale: 0 1; transition: scale 1.3s var(--pf-reveal-ease) var(--pf-delay, 0s); }
.pf-js [data-reveal="line"].is-visible::before { scale: 1 1; }
.pf-js [data-reveal="line"] > * { opacity: 0; translate: 0 18px; transition: opacity .9s var(--pf-reveal-ease), translate 1s var(--pf-reveal-ease); transition-delay: calc(var(--pf-delay, 0s) + .2s + var(--c, 0) * .07s); }
.pf-js [data-reveal="line"] > :nth-child(2) { --c: 1; } .pf-js [data-reveal="line"] > :nth-child(3) { --c: 2; } .pf-js [data-reveal="line"] > :nth-child(4) { --c: 3; }
.pf-js [data-reveal="line"].is-visible > * { opacity: 1; translate: none; }

/* Tjänsterna: linjen ovanför raden ritas, sedan glider innehållet upp */
.pf-service::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--pf-navy); scale: 0 1; transform-origin: 0 50%; z-index: 1; pointer-events: none; }
.pf-js .pf-service[data-reveal] { opacity: 1; translate: none; }
.pf-js .pf-service[data-reveal]::before { transition: scale 1.2s var(--pf-reveal-ease) var(--pf-delay, 0s), opacity .6s var(--pf-ease) calc(var(--pf-delay, 0s) + 1.4s); }
.pf-js .pf-service[data-reveal].is-visible::before { scale: 1 1; opacity: 0; }
.pf-js .pf-service[data-reveal] .pf-service__link > * { opacity: 0; translate: 0 22px; transition: opacity .9s var(--pf-reveal-ease) calc(var(--pf-delay, 0s) + .15s), translate 1s var(--pf-reveal-ease) calc(var(--pf-delay, 0s) + .15s), color .45s var(--pf-ease), background-color .45s var(--pf-ease), border-color .45s var(--pf-ease), rotate .55s var(--pf-ease-out); }
.pf-js .pf-service[data-reveal].is-visible .pf-service__link > * { opacity: 1; translate: none; }
.pf-js .pf-service[data-reveal].is-done .pf-service__link > * { transition-delay: 0s; }

/* Hero: gnistlinjen ritas och KPI-kortet glider in */
.pf-js .pf-hero__kpi[data-reveal] .pf-spark__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--pf-reveal-ease) calc(var(--pf-delay, 0s) + .3s); }
.pf-js .pf-hero__kpi[data-reveal].is-visible .pf-spark__line { stroke-dashoffset: 0; }
.pf-js .pf-hero__kpi[data-reveal] .pf-spark__area, .pf-js .pf-hero__kpi[data-reveal] .pf-spark circle { opacity: 0; transition: opacity .8s var(--pf-ease) calc(var(--pf-delay, 0s) + 1.2s); }
.pf-js .pf-hero__kpi[data-reveal].is-visible .pf-spark__area { opacity: .08; }
.pf-js .pf-hero__kpi[data-reveal].is-visible .pf-spark circle { opacity: 1; }
/* Hero tonar ut när man scrollar förbi */
.pf-hero__text { opacity: calc(1 - var(--pf-out, 0) * 1.8); translate: 0 calc(var(--pf-out, 0) * -60px); }
.pf-hero__frame { translate: 0 calc(var(--pf-out, 0) * 50px); }

/* Branschflikar och kundcase: KPI-staplar och siffror */
.pf-num { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* Siffrorna: stapeln fylls efter talet */
.pf-js .pf-stat[data-reveal] .pf-stat__bar::after { scale: 0 1; transition: scale 1.8s var(--pf-reveal-ease) calc(var(--pf-delay, 0s) + .2s); }
.pf-js .pf-stat[data-reveal].is-visible .pf-stat__bar::after { scale: var(--v) 1; }

/* Rapporten: staplarna växer */
.pf-js .pf-report[data-reveal] .pf-report__chart rect { scale: 1 0; transition: scale 1.2s var(--pf-reveal-ease); }
.pf-js .pf-report[data-reveal] .pf-report__chart rect:nth-child(1) { transition-delay: .5s; }
.pf-js .pf-report[data-reveal] .pf-report__chart rect:nth-child(2) { transition-delay: .58s; }
.pf-js .pf-report[data-reveal] .pf-report__chart rect:nth-child(3) { transition-delay: .66s; }
.pf-js .pf-report[data-reveal] .pf-report__chart rect:nth-child(4) { transition-delay: .74s; }
.pf-js .pf-report[data-reveal] .pf-report__chart rect:nth-child(5) { transition-delay: .82s; }
.pf-js .pf-report[data-reveal].is-visible .pf-report__chart rect { scale: 1 1; }

/* Partners: porträttet dras fram underifrån */
.pf-js .pf-person[data-reveal] { opacity: 1; translate: 0 24px; }
.pf-js .pf-person[data-reveal] .pf-person__photo { clip-path: inset(100% 0 0 0 round var(--pf-radius-lg)); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1) var(--pf-delay, 0s); }
.pf-js .pf-person[data-reveal].is-visible .pf-person__photo { clip-path: inset(0 0 0 0 round var(--pf-radius-lg)); }
.pf-js .pf-person[data-reveal] .pf-person__photo img { scale: 1.2; transition: scale 2s var(--pf-reveal-ease) var(--pf-delay, 0s), filter .7s var(--pf-ease); }
.pf-js .pf-person[data-reveal].is-visible .pf-person__photo img { scale: 1; }
.pf-js .pf-person[data-reveal].is-done .pf-person__photo img { transition: scale 1.2s var(--pf-ease-out), filter .7s var(--pf-ease); }
.pf-js .pf-person[data-reveal].is-done:hover .pf-person__photo img { scale: 1.04; }
.pf-js .pf-person[data-reveal] > :not(:first-child) { opacity: 0; translate: 0 12px; transition: opacity .8s var(--pf-reveal-ease) calc(var(--pf-delay, 0s) + .5s), translate 1s var(--pf-reveal-ease) calc(var(--pf-delay, 0s) + .5s); }
.pf-js .pf-person[data-reveal].is-visible > * { opacity: 1; translate: none; }

/* Citat som tänds ord för ord medan man scrollar */
.pf-sw { opacity: clamp(.18, calc(var(--pf-p, 1) * (var(--n, 20) + 6) - var(--i, 0)), 1); transition: opacity .25s linear; }

/* Kontorens linje ritas tjockare */
.pf-js .pf-office[data-reveal="line"]::before { transition-duration: 1.6s; }

/* ---------- Minskad rörelse: allt syns direkt, inget scrollstyrt ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.pf-page) { scroll-behavior: auto; }
  .pf-page *, .pf-page *::before, .pf-page *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .pf-js [data-reveal], .pf-js [data-reveal] .pf-w__i, .pf-js [data-reveal="line"] > *, .pf-js [data-reveal="clip"] > img,
  .pf-js .pf-service[data-reveal] .pf-service__link > *, .pf-js .pf-person[data-reveal] > *, .pf-js .pf-person[data-reveal] .pf-person__photo,
  .pf-js [data-reveal="rise"] .pf-hero__frame img {
    opacity: 1 !important; translate: none !important; filter: none !important; clip-path: none !important;
  }
  .pf-js .pf-service[data-reveal]::before { opacity: 0 !important; }
  .pf-js [data-reveal], .pf-js [data-reveal] img, .pf-js [data-reveal] .pf-w__i, .pf-js [data-reveal] .pf-report__chart rect { scale: none !important; }
  .pf-js [data-reveal="rule"], .pf-js [data-reveal="line"]::before, .pf-js .pf-mark::after { scale: 1 1 !important; }
  .pf-js [data-reveal] .pf-blinds { display: none; }
  .pf-js [data-reveal="words"] { visibility: visible; }
  .pf-js .pf-hero__kpi .pf-spark__line { stroke-dashoffset: 0 !important; }
  .pf-js .pf-hero__kpi .pf-spark__area { opacity: .08 !important; }
  .pf-hero__text, .pf-hero__frame, .pf-stats__grid-bg, .pf-cta__grid-bg { opacity: 1; translate: none; }
  .pf-report__cover { rotate: none; }
  .pf-case { scale: none; filter: none; }
  .pf-header.is-hidden { translate: none; }
}

/* Dolda element (t.ex. media@hidden på undersidor) ska alltid döljas, även om klassen sätter display */
.pf-page [hidden] { display: none !important; }