/* Ekria – designsystem 2026-10
   Grund i Emmas böcker:
   - Refactoring UI s. 70–73: avståndsskala som börjar tätt och glesnar (4 8 12 16 24 32 48 64 96 128 160), aldrig godtyckliga värden.
   - Refactoring UI s. 101–105: handvald typskala 12 14 16 18 20 24 30 36 48 60 72, inga em-baserade storlekar.
   - Refactoring UI s. 113 och 121: radlängd 45–75 tecken (max 34em), radavstånd efter bredd.
   - Refactoring UI s. 147–150: alla nyanser bestämda i förväg (100–900), mörkaste för text, ljusaste för toner.
   - Refactoring UI s. 41–42: ingen grå text på färgad botten – en ton av bottens egen kulör.
   - Refactoring UI s. 171–184: ljus ovanifrån, fem skuggnivåer i två lager. s. 237: färre kantlinjer.
   - Grid Systems (Müller-Brockmann) s. 11: ju färre olika bildstorlekar, desto lugnare intryck.
   - Laws of UX: Fitts (klickytor ≥ 44 px), Hick (en primär handling per skärm), Von Restorff (ett framhävt kort).
   - Building a StoryBrand s. 133: direkt CTA + en mindre framträdande övergångs-CTA bredvid.
*/

/* ---------- typsnitt (egen server, inga anrop till Google) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/outfit-300.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/outfit-400.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/outfit-500.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
  /* marinblå (varumärke #0f2a3d, text #10243a) */
  /* mörka ytor: exakt den gamla sajtens blå (uppmätt 2026-10-15), Emma vill ha den */
  --navy-950: #0d171c; --navy-900: #111d22; --navy-800: #13222a; --navy-700: #162730; --navy-600: #1b3240;
  --navy-500: #2c4d66; --navy-400: #5b7389; --navy-300: #8fa3b5; --navy-200: #c9d2da; --navy-100: #e6ebf0;
  /* guld (varumärke #b58b52). Guldtext på ljus botten = --gold-700, och bara på ytor ljusare än #f5efe6 */
  --gold-100: #faf3e6; --gold-200: #f5deb3; --gold-300: #d9bd86; --gold-400: #d0ae71; --gold-500: #b58b52;
  --gold-600: #9a7442; --gold-700: #86692b; --gold-800: #6b5322;
  /* ljusa ytor: vitare än tidigare beige */
  --paper: #fffdf9; --cream-50: #fbf8f3; --cream-100: #f6f1e9; --cream-200: #efe7da;
  --line: #e9e1d5; --line-strong: #d8cbb8;
  --ink: #10243a; --ink-2: #3d4a5a; --ink-3: #5b6672;
  /* på marinblått */
  --on-navy: #f6f1e8; --on-navy-2: #c9d2da; --on-navy-gold: #d0ae71; --on-navy-line: rgba(246, 241, 232, .14);
  /* platshållare – medvetet utanför varumärket så att de aldrig misstas för design */
  --ph-fg: #6b4300; --ph-bg: #fff1cc; --ph-line: #c98a00;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t12: .75rem; --t14: .875rem; --t16: 1rem; --t18: 1.125rem; --t20: 1.25rem; --t24: 1.5rem;
  --t30: 1.875rem; --t36: 2.25rem; --t48: 3rem; --t60: 3.75rem; --t72: 4.5rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-rund: 999px;

  --sk-xs: 0 1px 2px rgba(16, 36, 58, .06);
  --sk-sm: 0 1px 3px rgba(16, 36, 58, .08), 0 1px 2px rgba(16, 36, 58, .05);
  --sk-md: 0 6px 16px -4px rgba(16, 36, 58, .10), 0 2px 4px rgba(16, 36, 58, .05);
  --sk-lg: 0 18px 40px -12px rgba(16, 36, 58, .18), 0 4px 10px rgba(16, 36, 58, .05);
  --sk-xl: 0 32px 70px -20px rgba(10, 24, 38, .42), 0 8px 18px rgba(10, 24, 38, .10);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --snabb: 180ms; --mellan: 260ms;

  --sidhuvud: 72px;
  --ram: 1200px;
  --kant: 20px;
}
@media (min-width: 768px) { :root { --kant: 32px; } }

/* ---------- grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--sidhuvud) + var(--s4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
@media (min-width: 768px) { body { font-size: var(--t18); } }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
picture img { width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold-200); color: var(--navy-900); }
:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; border-radius: 4px; }
.sektion--navy :focus-visible, .sh :focus-visible, .sf :focus-visible, .hero :focus-visible { outline-color: var(--gold-400); }
main:focus { outline: none; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
h1 { font-size: clamp(var(--t48), 2.2rem + 3.2vw, var(--t72)); line-height: 1.04; }
h2 { font-size: clamp(var(--t36), 1.7rem + 2vw, var(--t60)); line-height: 1.08; }
h3 { font-size: var(--t24); line-height: 1.2; }
@media (min-width: 768px) { h3 { font-size: var(--t30); } }
p + p { margin-top: var(--s4); }
h1 + p, h2 + p, h2 + .brodtext, h2 + .faktarad, .brodtext + .fragor { margin-top: var(--s5); }
.accent { font-style: italic; color: var(--gold-700); }
.sektion--navy .accent, .hero .accent, .band .accent { color: var(--gold-400); }
.ingress { font-size: var(--t20); line-height: 1.6; color: var(--ink-2); font-weight: 300; max-width: 34em; }
@media (min-width: 768px) { .ingress { font-size: var(--t24); line-height: 1.55; } }
.brodtext { max-width: 34em; color: var(--ink-2); }
.liten { font-size: var(--t14); color: var(--ink-3); }
.ogonbryn { display: inline-flex; align-items: center; gap: var(--s3); font-family: var(--sans); font-size: var(--t12); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-700); margin-bottom: var(--s5); }
.ogonbryn::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero .ogonbryn, .sektion--navy .ogonbryn, .band .ogonbryn { color: var(--on-navy-gold); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.ram { width: 100%; max-width: calc(var(--ram) + 2 * var(--kant)); margin-inline: auto; padding-inline: var(--kant); }
.ram--smal { max-width: calc(800px + 2 * var(--kant)); }
.sektion { padding-block: clamp(var(--s8), 8vw, var(--s10)); position: relative; }
.sektion--cream { background: var(--cream-100); }
.sektion--navy { background: var(--navy-800); color: var(--on-navy); }
.sektion--navy .brodtext, .sektion--navy .ingress { color: var(--on-navy-2); }
.sektion--tat { padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.sektion__huvud { max-width: 46rem; margin-bottom: clamp(var(--s7), 5vw, var(--s8)); }
.sektion__huvud > p:not(.ogonbryn) { margin-top: var(--s5); }
.sektion__huvud--center { margin-inline: auto; text-align: center; }
.sektion__huvud--center .ogonbryn { justify-content: center; }
.sektion__fot { margin-top: var(--s7); }
.sektion__fot.liten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.rutnat { display: grid; gap: var(--s5); }
@media (min-width: 768px) {
  .rutnat--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .rutnat--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .rutnat--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .rutnat--3 { gap: var(--s5); }
  .rutnat--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.delad { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 960px) {
  .delad { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s9); }
  .delad--omvand { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .delad--lika { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delad--topp { align-items: start; }
}

/* ---------- knappar ---------- */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--r-md); border: 1.5px solid transparent; font-family: var(--sans); font-size: var(--t16); font-weight: 500;
  letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 1.2;
  transition: background-color var(--snabb) var(--ease), border-color var(--snabb) var(--ease), color var(--snabb) var(--ease),
    transform var(--snabb) var(--ease), box-shadow var(--snabb) var(--ease); }
.knapp:hover { transform: translateY(-1px); }
.knapp:active { transform: translateY(0); }
.knapp--primar { background: var(--navy-800); color: var(--on-navy); box-shadow: var(--sk-sm), inset 0 1px 0 rgba(255, 255, 255, .08); }
.knapp--primar:hover { background: var(--navy-600); box-shadow: var(--sk-md), inset 0 1px 0 rgba(255, 255, 255, .08); }
.knapp--guld { background: var(--gold-500); color: var(--navy-900); box-shadow: 0 1px 2px rgba(10, 24, 38, .3), inset 0 1px 0 rgba(255, 255, 255, .25); }
.knapp--guld:hover { background: var(--gold-400); }
.knapp--sekundar { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.knapp--sekundar:hover { border-color: var(--navy-800); background: var(--paper); }
.knapp--sekundar-mork { background: transparent; color: var(--on-navy); border-color: rgba(246, 241, 232, .32); }
.knapp--sekundar-mork:hover { border-color: var(--on-navy); background: rgba(246, 241, 232, .06); }
.knapp--liten { min-height: 44px; padding: 0 var(--s4); font-size: var(--t14); }
.knapp__ikon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.textlank { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 500; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--gold-500); padding-bottom: 2px; min-height: 44px; }
.textlank__ikon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--snabb) var(--ease); }
.textlank:hover .textlank__ikon { transform: translateX(3px); }
.sektion--navy .textlank, .band .textlank { color: var(--on-navy); border-color: var(--gold-400); }

.cta { display: grid; gap: var(--s4); margin-top: var(--s6); }
.cta__knappar { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cta__not { display: flex; align-items: center; gap: var(--s2); font-size: var(--t14); color: var(--ink-3); margin: 0; }
.cta__bock { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gold-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cta--mork .cta__not { color: var(--on-navy-2); }
.cta--mork .cta__bock { stroke: var(--gold-400); }
.cta--center { justify-items: center; text-align: center; }
.cta--center .cta__knappar { justify-content: center; }
@media (max-width: 479px) { .cta__knappar .knapp { flex: 1 1 auto; padding: 0 var(--s4); } .cta__not { align-items: flex-start; } }

.ikon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- hoppa till innehållet ---------- */
.hoppa { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--gold-500); color: var(--navy-900);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-weight: 500; text-decoration: none; }
.hoppa:focus { top: var(--s3); }

/* ---------- sidhuvud ---------- */
.sh { position: sticky; top: 0; z-index: 50; background: #111d22; color: var(--on-navy);
  border-bottom: 1px solid var(--on-navy-line); transition: box-shadow var(--mellan) var(--ease), background-color var(--mellan) var(--ease); }
.sh.is-skrollad { box-shadow: 0 10px 30px -12px rgba(5, 12, 20, .55); }
.sh__inre { display: flex; align-items: center; gap: var(--s5); height: var(--sidhuvud); }
.sh__logga { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; margin-right: auto; min-height: 44px; }
.sh__monogram { width: 36px; height: 36px; }
.sh__ordmarke { width: 98px; height: auto; margin-top: 2px; }
.sh__nav, .sh__slut { display: none; }
.nav { display: flex; align-items: center; gap: var(--s1); }
.nav__punkt { position: relative; display: flex; align-items: center; }
.nav__lank { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); font-size: var(--t14);
  letter-spacing: .02em; color: var(--on-navy-2); text-decoration: none; transition: color var(--snabb) var(--ease); }
.nav__lank::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 8px; height: 1.5px; background: var(--gold-400);
  transform: scaleX(0); transform-origin: left; transition: transform var(--mellan) var(--ease); }
.nav__lank:hover, .nav__lank.is-aktiv { color: var(--on-navy); }
.nav__lank:hover::after, .nav__lank.is-aktiv::after { transform: scaleX(1); }
.nav__punkt--drop .nav__lank { padding-right: var(--s1); }
.nav__vaxla { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 44px; padding: 0; margin-right: var(--s1);
  background: none; border: 0; color: var(--on-navy-2); cursor: pointer; }
.nav__chevron { width: 16px; height: 16px; transition: transform var(--mellan) var(--ease); }
.nav__punkt--drop.is-oppen .nav__chevron { transform: rotate(180deg); }
.drop { position: absolute; top: calc(100% + 6px); left: -8px; width: 340px; padding: var(--s3); background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--sk-xl); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--snabb) var(--ease), transform var(--snabb) var(--ease), visibility 0s linear var(--snabb); }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__punkt--drop:hover .drop, html:not(.js) .nav__punkt--drop:focus-within .drop, .nav__punkt--drop.is-oppen .drop {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__punkt--drop.is-stangd .drop { opacity: 0; visibility: hidden; transform: translateY(6px); }
.drop__lank { display: grid; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r-md); text-decoration: none; transition: background-color var(--snabb) var(--ease); }
.drop__lank:hover, .drop__lank[aria-current] { background: var(--cream-100); }
.drop__titel { font-weight: 500; font-size: var(--t16); }
.drop__beskr { font-size: var(--t14); color: var(--ink-3); }
.drop__alla { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s2); padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line); font-size: var(--t14); font-weight: 500; color: var(--ink); text-decoration: none; min-height: 44px; }
.drop__alla .ikon { width: 18px; height: 18px; color: var(--gold-600); transition: transform var(--snabb) var(--ease); }
.drop__alla:hover .ikon { transform: translateX(3px); }
.sprak { display: inline-flex; padding: 3px; border-radius: var(--r-rund); border: 1px solid var(--on-navy-line); }
.sprak__val { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 var(--s2);
  border-radius: var(--r-rund); font-size: var(--t12); font-weight: 500; letter-spacing: .1em; color: var(--on-navy-2); text-decoration: none; }
.sprak__val[aria-current] { background: rgba(246, 241, 232, .12); color: var(--on-navy); }
.sprak__val:hover { color: var(--on-navy); }

/* mobilmeny: <details> fungerar utan JavaScript */
.mm > summary { list-style: none; }
.mm > summary::-webkit-details-marker { display: none; }
.mm__knapp { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--on-navy-line); cursor: pointer; font-size: var(--t14); font-weight: 500; letter-spacing: .04em; color: var(--on-navy); }
.mm__streck { position: relative; width: 18px; height: 1.5px; background: currentColor; transition: background-color var(--snabb); }
.mm__streck::before, .mm__streck::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform var(--mellan) var(--ease); }
.mm__streck::before { top: -6px; } .mm__streck::after { top: 6px; }
.mm[open] .mm__streck { background: transparent; }
.mm[open] .mm__streck::before { transform: translateY(6px) rotate(45deg); }
.mm[open] .mm__streck::after { transform: translateY(-6px) rotate(-45deg); }
.mm__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--sidhuvud)); max-height: calc(100dvh - var(--sidhuvud));
  overflow-y: auto; overscroll-behavior: contain; background: var(--navy-900); border-top: 1px solid var(--on-navy-line);
  min-height: calc(100vh - var(--sidhuvud)); min-height: calc(100dvh - var(--sidhuvud));
  padding: var(--s5) var(--kant) var(--s7); box-shadow: 0 30px 50px -20px rgba(5, 12, 20, .6); }
.mm__lista > li { border-bottom: 1px solid var(--on-navy-line); }
.mm__lank { display: flex; align-items: center; min-height: 56px; font-family: var(--serif); font-size: var(--t30); color: var(--on-navy); text-decoration: none; }
.mm__lank.is-aktiv { color: var(--on-navy-gold); }
.mm__under { padding: 0 0 var(--s4) var(--s4); display: grid; gap: var(--s1); }
.mm__under .drop__lank { padding: var(--s2) var(--s3); }
.mm__under .drop__titel { color: var(--on-navy); }
.mm__under .drop__beskr { color: var(--on-navy-2); }
.mm__under .drop__lank:hover, .mm__under .drop__lank[aria-current] { background: rgba(246, 241, 232, .06); }
.mm__fot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 1024px) {
  .sh__nav { display: block; }
  .sh__slut { display: flex; align-items: center; gap: var(--s4); margin-left: var(--s3); }
  .mm { display: none; }
  .sh__logga { margin-right: var(--s5); }
  .sh__nav { margin-left: auto; }
}
@media (min-width: 1280px) { .nav { gap: var(--s2); } .sh__ordmarke { width: 112px; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; color: var(--on-navy); isolation: isolate;
  background:
    radial-gradient(70% 60% at 75% 50%, rgba(196, 162, 101, .04) 0%, transparent 70%),
    radial-gradient(50% 70% at 20% 80%, rgba(27, 50, 64, .6) 0%, transparent 60%),
    linear-gradient(175deg, #111d22 0%, #13222a 40%, #162730 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__trad { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: 22%; pointer-events: none; opacity: .45; }
@media (max-width: 1023px) { .hero__trad { display: none; } }
.hero__inre { display: grid; gap: var(--s8); padding-block: clamp(var(--s8), 9vw, var(--s10)) clamp(var(--s9), 10vw, var(--s11)); }
@media (min-width: 1024px) { .hero__inre { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s9); } }
@media (min-width: 1024px) and (max-width: 1179px) { .hero--start .hero__inre { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center; } .hero--start .kollage { width: min(100%, 360px); } .hero--start h1 { font-size: clamp(44px, 4.4vw, 56px); } }
.hero h1 { color: var(--on-navy); max-width: 13em; text-wrap: balance; }
.hero__ingress { margin-top: var(--s5); font-size: var(--t20); line-height: 1.6; font-weight: 300; color: var(--on-navy-2); max-width: 32em; }
@media (min-width: 768px) { .hero__ingress { font-size: var(--t24); line-height: 1.5; } }
.hero--sida .hero__inre { padding-block: clamp(var(--s7), 7vw, var(--s9)) clamp(var(--s8), 8vw, var(--s10)); }
.hero--kompakt .hero__inre { grid-template-columns: minmax(0, 1fr); padding-block: clamp(var(--s7), 6vw, var(--s9)); }
.hero--kompakt h1 { max-width: 16em; }
.hero__bild { position: relative; justify-self: center; width: min(100%, 420px); }
.hero__bild picture img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-lg); box-shadow: var(--sk-xl); }
.hero__foto { position: relative; }
.hero__foto::after { content: ""; position: absolute; z-index: -1; inset: auto -12px -12px auto; width: 70%; height: 70%;
  border: 1px solid rgba(208, 174, 113, .45); border-radius: var(--r-lg); }
.hero__bildtext { margin-top: var(--s4); font-size: var(--t14); color: var(--on-navy-2); }
.hero__bildtext b { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--t24); color: var(--on-navy); }

.smulor ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s2); font-size: var(--t14); color: var(--on-navy-2); margin-bottom: var(--s3); }
.smulor li + li::before { content: "/"; margin-right: var(--s2); color: var(--navy-400); }
.smulor a { color: var(--on-navy-2); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.smulor ol { align-items: center; }
.smulor a:hover { color: var(--on-navy); text-decoration: underline; text-underline-offset: 3px; }
.smulor [aria-current] { color: var(--on-navy); }

/* ---------- faktaband (överlappar hero, RUI s. 190: lager) ---------- */
.faktaband { position: relative; z-index: 2; margin-top: calc(-1 * var(--s8)); }
.faktaband__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sk-lg); overflow: hidden; }
.faktaband__punkt { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s5); font-size: var(--t14); line-height: 1.45; color: var(--ink-2); }
.faktaband__punkt + .faktaband__punkt { border-left: 1px solid var(--line); }
.faktaband__punkt:nth-child(3) { border-left: 0; }
.faktaband__punkt:nth-child(n+3) { border-top: 1px solid var(--line); }
.faktaband__punkt b { display: block; font-family: var(--serif); font-size: var(--t24); line-height: 1.15; font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums; }
.faktaband__punkt .ikon { color: var(--gold-600); width: 22px; height: 22px; margin-top: 4px; }
@media (min-width: 1024px) {
  .faktaband__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .faktaband__punkt { padding: var(--s6) var(--s5); }
  .faktaband__punkt:nth-child(3) { border-left: 1px solid var(--line); }
  .faktaband__punkt:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 479px) { .faktaband__punkt { padding: var(--s4); } .faktaband__punkt .ikon { display: none; } }

/* ---------- faktarad (tjänstesidornas hero) ---------- */
.faktarad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 30rem; margin-top: var(--s6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faktarad__cell { padding: var(--s4) var(--s4) var(--s4) 0; }
.faktarad__cell + .faktarad__cell { padding-left: var(--s4); border-left: 1px solid var(--line); }
.faktarad dt { font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.faktarad dd { margin-top: var(--s1); font-family: var(--serif); font-size: var(--t24); line-height: 1.15; font-weight: 500; font-variant-numeric: lining-nums; }
.faktarad dd span { display: block; margin-top: var(--s1); font-family: var(--sans); font-size: var(--t14); line-height: 1.4; color: var(--ink-3); font-weight: 400; }
.faktarad--mork { border-color: var(--on-navy-line); }
.faktarad--mork .faktarad__cell + .faktarad__cell { border-color: var(--on-navy-line); }
.faktarad--mork dt { color: var(--on-navy-gold); }
.faktarad--mork dd { color: var(--on-navy); }
.faktarad--mork dd span { color: var(--on-navy-2); }
@media (max-width: 599px) {
  .faktarad { grid-template-columns: 1fr; }
  .faktarad__cell, .faktarad__cell + .faktarad__cell { padding: var(--s3) 0; border-left: 0; }
  .faktarad__cell + .faktarad__cell { border-top: 1px solid var(--line); }
  .faktarad--mork .faktarad__cell + .faktarad__cell { border-top-color: var(--on-navy-line); }
  .faktarad dd { font-size: var(--t20); }
}

/* ---------- kort ---------- */
.kort { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(var(--s5), 3vw, var(--s6)); box-shadow: var(--sk-sm);
  transition: transform var(--mellan) var(--ease), box-shadow var(--mellan) var(--ease), border-color var(--mellan) var(--ease); }
.kort:has(.kort__lank):hover { transform: translateY(-3px); box-shadow: var(--sk-lg); border-color: var(--line-strong); }
.kort__lank { text-decoration: none; }
.kort__lank::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.kort__lank:focus-visible { outline: none; text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 4px; }
.kort:has(.kort__lank:focus-visible) { outline: 2px solid var(--gold-600); outline-offset: 3px; }
.kort__titel { font-size: var(--t30); }
.kort__marke { position: absolute; top: calc(-1 * var(--s3)); left: clamp(var(--s5), 3vw, var(--s6)); padding: var(--s1) var(--s3); border-radius: var(--r-rund);
  background: var(--gold-500); color: var(--navy-900); font-size: var(--t12); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.kort__vem { margin-top: var(--s2); color: var(--ink-2); }
.kort__pris { display: grid; gap: 2px; margin: var(--s5) 0; padding: var(--s4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kort__belopp { font-family: var(--serif); font-size: var(--t36); line-height: 1.1; font-weight: 500; font-variant-numeric: lining-nums; }
.kort__prisnot { font-size: var(--t14); color: var(--ink-3); }
.kort__mer { margin-top: auto; padding-top: var(--s5); display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t16); font-weight: 500; color: var(--ink); }
.kort__mer .ikon { width: 18px; height: 18px; color: var(--gold-600); transition: transform var(--snabb) var(--ease); }
.kort:hover .kort__mer .ikon { transform: translateX(3px); }
.kort--rek { background: var(--navy-800); color: var(--on-navy); border-color: var(--navy-800); box-shadow: var(--sk-lg); }
.kort--rek .kort__vem, .kort--rek .lista li { color: var(--on-navy-2); }
.kort--rek .kort__pris { border-color: var(--on-navy-line); }
.kort--rek .kort__belopp { color: var(--on-navy); }
.kort--rek .kort__prisnot { color: var(--on-navy-2); }
.kort--rek .lista__bock { stroke: var(--gold-400); }
.kort--rek .kort__mer { color: var(--on-navy); }
.kort--rek .kort__mer .ikon { color: var(--gold-400); }
.kort--rek:has(.kort__lank):hover { border-color: var(--navy-600); }
.kort--rek .knapp--primar { background: var(--gold-500); color: var(--navy-900); }
.kort--rek .knapp--primar:hover { background: var(--gold-400); }
.kort__knappar { margin-top: auto; padding-top: var(--s5); display: grid; gap: var(--s3); position: relative; z-index: 2; }
.kort--rek .textlank { color: var(--on-navy); border-color: var(--gold-400); }
@media (min-width: 1024px) { .tjanster .kort--rek { margin-block: calc(-1 * var(--s4)); padding-block: calc(clamp(var(--s5), 3vw, var(--s6)) + var(--s4)); } }

.lista { display: grid; gap: var(--s3); }
.lista li { display: flex; gap: var(--s3); align-items: flex-start; color: var(--ink-2); font-size: var(--t16); line-height: 1.5; }
.lista__bock { width: 20px; height: 20px; margin-top: 2px; stroke: var(--gold-600); stroke-width: 2; }

/* ikonkort (det här får du) */
.ikonkort { display: grid; gap: var(--s3); align-content: start; padding: var(--s6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sektion--cream .ikonkort { box-shadow: var(--sk-xs); }
.ikonkort__ikon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--gold-100); color: var(--gold-700); margin-bottom: var(--s2); }
.ikonkort h3 { font-size: var(--t24); }
.ikonkort p { color: var(--ink-2); font-size: var(--t16); }

/* ---------- steg ---------- */
.steg { display: grid; gap: var(--s6); counter-reset: steg; position: relative; }
.steg__punkt { position: relative; padding-top: var(--s6); }
.steg__punkt::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--line-strong); }
.steg__punkt::after { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px var(--paper); }
.sektion--cream .steg__punkt::after { box-shadow: 0 0 0 4px var(--cream-100); }
.steg__nr { display: block; font-family: var(--serif); font-size: var(--t48); line-height: 1; color: var(--gold-600); font-variant-numeric: lining-nums; margin-bottom: var(--s4); }
.steg__titel { font-size: var(--t24); margin-bottom: var(--s2); }
.steg p { color: var(--ink-2); font-size: var(--t16); max-width: 30em; }
@media (min-width: 768px) {
  .steg { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s6); }
  .steg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gold-500); transform-origin: left;
    transform: scaleX(1); transition: transform 1.4s var(--ease); z-index: 1; }
  .steg__punkt::before { display: none; }
  .steg.vantar::before { transform: scaleX(0); }
  .steg.syns::before { transform: scaleX(1); }
  .steg__punkt::after { z-index: 2; }
}

/* ---------- citat ---------- */
.citat { position: relative; display: flex; flex-direction: column; gap: var(--s5); padding: clamp(var(--s6), 4vw, var(--s7)); background: var(--paper);
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sk-sm); }
.citat__tecken { position: absolute; top: var(--s2); right: var(--s5); font-family: var(--serif); font-size: 120px; line-height: 1; color: var(--gold-300); }
.citat__text { font-family: var(--serif); font-size: var(--t24); line-height: 1.4; color: var(--ink); font-weight: 500; padding-right: var(--s7); }
@media (min-width: 768px) { .citat__text { font-size: var(--t30); line-height: 1.35; } }
.citat__vem { display: flex; align-items: center; gap: var(--s4); margin-top: auto; font-size: var(--t14); color: var(--ink-3); }
.citat__vem b { display: block; font-size: var(--t16); font-weight: 500; color: var(--ink); }
.citat__initial { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--navy-800); color: var(--on-navy); font-family: var(--serif); font-size: var(--t20); }
.citat--tomt { border-style: dashed; border-color: var(--line-strong); box-shadow: none; background: var(--cream-50); }
.citat--tomt .citat__text { font-family: var(--sans); font-size: var(--t16); }

/* ---------- vanliga frågor ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq__punkt { border-bottom: 1px solid var(--line-strong); }
.faq__fraga { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 64px; padding: var(--s4) 0; cursor: pointer;
  list-style: none; font-family: var(--serif); font-size: var(--t24); line-height: 1.25; font-weight: 500; }
.faq__fraga::-webkit-details-marker { display: none; }
.faq__fraga:hover { color: var(--navy-600); }
.faq__ikon { width: 22px; height: 22px; color: var(--gold-600); transition: transform var(--mellan) var(--ease); }
.faq__punkt[open] .faq__ikon { transform: rotate(180deg); }
.faq__svar { padding: 0 var(--s7) var(--s5) 0; color: var(--ink-2); max-width: 40em; }
.faq__svar p + p { margin-top: var(--s3); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__punkt::details-content { height: 0; overflow: clip; transition: height var(--mellan) var(--ease), content-visibility var(--mellan) allow-discrete; }
  .faq__punkt[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .faq__punkt::details-content { transition: none; } }

/* ---------- bild och video ---------- */
.bild { position: relative; }
.bild picture img { border-radius: var(--r-lg); box-shadow: var(--sk-lg); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.bild--ram::before { content: ""; position: absolute; z-index: -1; inset: -16px auto auto -16px; width: 60%; height: 60%; border: 1px solid var(--gold-300); border-radius: var(--r-lg); }
.bild--pekar picture img { object-position: 88% 30%; }
.bild figcaption { margin-top: var(--s4); font-size: var(--t14); color: var(--ink-3); }
.bild figcaption b { display: block; font-family: var(--serif); font-size: var(--t24); font-weight: 500; color: var(--ink); }
.video { width: min(100%, 440px); margin-inline: auto; }
.video__ram { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sk-lg); background: var(--cream-200); }
.video__ram video { width: 100%; aspect-ratio: 960 / 1284; object-fit: cover; }
.video__not { margin-top: var(--s3); font-size: var(--t12); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.video .paus { position: absolute; right: var(--s3); bottom: var(--s3); }

.paus { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 253, 249, .92); color: var(--ink); border: 1px solid rgba(16, 36, 58, .14); box-shadow: var(--sk-sm); }
.paus .ikon { width: 16px; height: 16px; }
.paus__spela { display: none; }
.paus[aria-pressed="true"] .paus__paus { display: none; }
.paus[aria-pressed="true"] .paus__spela { display: block; }
.paus--mork { background: transparent; color: var(--on-navy); border-color: rgba(246, 241, 232, .55); box-shadow: none; }
.paus[hidden] { display: none; }

/* ---------- profilkortet (hero) – ett varv = 10 s ---------- */
.pk-yta { width: min(100%, 420px); justify-self: center; }
.pk { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: var(--s6) var(--s6) var(--s5);
  box-shadow: var(--sk-xl), inset 0 1px 0 rgba(255, 255, 255, .6); font-family: var(--sans); }
.pk__kant { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  transform-origin: left center; transform: scaleX(0); animation: pkKant 10s linear infinite; }
.pk__topp { display: flex; align-items: center; gap: var(--s4); }
.pk__bild { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy-800); color: var(--on-navy); font-family: var(--serif); font-size: var(--t24); }
.pk__vem { display: grid; line-height: 1.2; }
.pk__namn { font-family: var(--serif); font-size: var(--t24); font-weight: 500; }
.pk__ort { font-size: var(--t12); color: var(--ink-3); margin-top: 2px; }
.pk__marke { position: relative; margin-left: auto; align-self: flex-start; height: 24px; min-width: 64px; }
.pk__marke span { position: absolute; right: 0; top: 0; padding: 4px 10px; border-radius: var(--r-rund); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.pk__marke .fore { color: var(--ink-2); background: var(--cream-200); animation: pkMarkeFore 10s linear infinite; }
.pk__marke .efter { color: var(--on-navy); background: var(--navy-800); opacity: 0; animation: pkMarkeEfter 10s linear infinite; }
.pk__rubrik { position: relative; margin-top: var(--s5); min-height: 64px; }
.pk__rubrik .fore, .pk__rubrik .efter { position: absolute; inset: 0 0 auto 0; }
.pk__rubrik .fore { font-size: var(--t16); line-height: 1.5; color: var(--ink-3); animation: pkFore 10s linear infinite; }
.pk__rubrik .fore b { position: relative; display: inline-block; font-weight: 400; }
.pk__rubrik .fore b::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; border-radius: 2px; background: var(--gold-500);
  transform-origin: left center; transform: scaleX(0); animation: pkStryk 10s linear infinite; }
.pk__rubrik .efter { font-family: var(--serif); font-size: 26px; line-height: 1.18; font-weight: 500; color: var(--ink);
  clip-path: inset(0 100% 0 0); animation: pkEfter 10s linear infinite; }
.pk__rubrik .efter em { color: var(--gold-700); }
.pk__lista { display: grid; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pk__lista li { display: grid; grid-template-columns: 20px 96px 1fr; align-items: center; gap: var(--s3); font-size: 13px; color: var(--ink-2); }
.pk__bock { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(16, 36, 58, .22); color: transparent; }
.pk__bock svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pk__streck { height: 7px; border-radius: 4px; background: rgba(16, 36, 58, .13); width: var(--w1); transform-origin: left center; transform: scaleX(var(--s0)); }
.pk__streck--a { --w1: 88%; --s0: .52; } .pk__streck--b { --w1: 96%; --s0: .65; } .pk__streck--c { --w1: 80%; --s0: .48; }
.pk__lista li:nth-child(1) .pk__bock { animation: pkBock1 10s linear infinite; } .pk__lista li:nth-child(1) .pk__streck { animation: pkRad1 10s linear infinite; }
.pk__lista li:nth-child(2) .pk__bock { animation: pkBock2 10s linear infinite; } .pk__lista li:nth-child(2) .pk__streck { animation: pkRad2 10s linear infinite; }
.pk__lista li:nth-child(3) .pk__bock { animation: pkBock3 10s linear infinite; } .pk__lista li:nth-child(3) .pk__streck { animation: pkRad3 10s linear infinite; }
.pk__not { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s4); font-size: var(--t12); letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-2); }
.is-pausad .pk *, .is-pausad .pk *::after, .is-utanfor .pk *, .is-utanfor .pk *::after { animation-play-state: paused !important; }
@keyframes pkStryk { 0%, 15% { transform: scaleX(0); opacity: 1 } 21%, 25% { transform: scaleX(1); opacity: 1 } 29%, 100% { transform: scaleX(1); opacity: 0 } }
@keyframes pkFore { 0%, 24% { opacity: 1 } 29%, 94.5% { opacity: 0 } 99%, 100% { opacity: 1 } }
@keyframes pkEfter { 0%, 29% { clip-path: inset(0 100% 0 0); opacity: 1 } 38%, 89% { clip-path: inset(0 0 0 0); opacity: 1 } 94%, 100% { clip-path: inset(0 0 0 0); opacity: 0 } }
@keyframes pkBock1 { 0%, 45% { background: transparent; border-color: rgba(16,36,58,.22); color: transparent } 48%, 89% { background: #b58b52; border-color: #b58b52; color: #fffdf9 } 94%, 100% { background: transparent; border-color: rgba(16,36,58,.22); color: transparent } }
@keyframes pkRad1 { 0%, 45% { background: rgba(16,36,58,.13); transform: scaleX(var(--s0)) } 49%, 89% { background: rgba(16,36,58,.62); transform: scaleX(1) } 94%, 100% { background: rgba(16,36,58,.13); transform: scaleX(var(--s0)) } }
@keyframes pkBock2 { 0%, 51% { background: transparent; border-color: rgba(16,36,58,.22); color: transparent } 54%, 89% { background: #b58b52; border-color: #b58b52; color: #fffdf9 } 94%, 100% { background: transparent; border-color: rgba(16,36,58,.22); color: transparent } }
@keyframes pkRad2 { 0%, 51% { background: rgba(16,36,58,.13); transform: scaleX(var(--s0)) } 55%, 89% { background: rgba(16,36,58,.62); transform: scaleX(1) } 94%, 100% { background: rgba(16,36,58,.13); transform: scaleX(var(--s0)) } }
@keyframes pkBock3 { 0%, 57% { background: transparent; border-color: rgba(16,36,58,.22); color: transparent } 60%, 89% { background: #b58b52; border-color: #b58b52; color: #fffdf9 } 94%, 100% { background: transparent; border-color: rgba(16,36,58,.22); color: transparent } }
@keyframes pkRad3 { 0%, 57% { background: rgba(16,36,58,.13); transform: scaleX(var(--s0)) } 61%, 89% { background: rgba(16,36,58,.62); transform: scaleX(1) } 94%, 100% { background: rgba(16,36,58,.13); transform: scaleX(var(--s0)) } }
@keyframes pkMarkeFore { 0%, 28% { opacity: 1 } 31%, 94.5% { opacity: 0 } 99%, 100% { opacity: 1 } }
@keyframes pkMarkeEfter { 0%, 29% { opacity: 0; transform: translateY(4px) } 33%, 89% { opacity: 1; transform: none } 94%, 100% { opacity: 0; transform: none } }
@keyframes pkKant { 0%, 37% { transform: scaleX(0) } 44%, 89% { transform: scaleX(1) } 94%, 100% { transform: scaleX(1); opacity: 0 } }
@media (max-width: 479px) { .pk { padding: var(--s5) var(--s5) var(--s4); } .pk__lista li { grid-template-columns: 20px 84px 1fr; } .pk__rubrik .efter { font-size: var(--t24); } }

/* ---------- jämförelsetabell ---------- */
.tabell-yta { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--sk-sm); }
.tabell { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t16); }
.tabell th, .tabell td { padding: var(--s4) var(--s5); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabell thead th { font-family: var(--serif); font-size: var(--t24); font-weight: 500; background: var(--cream-50); }
.tabell thead th.is-rek { background: var(--navy-800); color: var(--on-navy); }
.tabell tbody th { font-weight: 500; color: var(--ink); width: 28%; }
.tabell td { color: var(--ink-2); }
.tabell td.is-rek { background: var(--gold-100); }
.tabell tr:last-child th, .tabell tr:last-child td { border-bottom: 0; }
.tabell .ja { display: inline-flex; gap: var(--s2); align-items: center; color: var(--ink); font-weight: 500; }
.tabell .ja .ikon { width: 18px; height: 18px; stroke: var(--gold-600); stroke-width: 2.2; }
.tabell .nej { color: var(--ink-3); }

/* ---------- nivåer (ghostwriting) ---------- */
.niva { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sk-xs); }
.niva .niva__namn { font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.niva .niva__pris { font-family: var(--serif); font-size: var(--t36); line-height: 1; font-weight: 500; font-variant-numeric: lining-nums; }
.niva .niva__pris span { font-family: var(--sans); font-size: var(--t14); color: var(--ink-3); font-weight: 400; }
.niva .niva__antal { font-weight: 500; }
.niva p { font-size: var(--t14); color: var(--ink-2); }
.prickar { display: flex; gap: 6px; }
.prickar i { width: 10px; height: 10px; border-radius: 50%; background: var(--cream-200); }
.prickar i.is-pa { background: var(--gold-500); }

/* ---------- passar / passar inte ---------- */
.passar { padding: var(--s6); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.passar h3 { font-size: var(--t24); margin-bottom: var(--s4); }
.passar--inte { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.passar--inte .lista__bock { stroke: var(--ink-3); }

/* ---------- band (avslutande CTA) ---------- */
.band { position: relative; overflow: hidden; isolation: isolate; color: var(--on-navy); text-align: center;
  background: radial-gradient(50rem 30rem at 50% 120%, rgba(181, 139, 82, .22), transparent 70%), linear-gradient(170deg, var(--navy-800), var(--navy-950)); }
.band__inre { padding-block: clamp(var(--s9), 10vw, var(--s11)); max-width: 46rem; margin-inline: auto; }
.band h2 { color: var(--on-navy); }
.band p:not(.cta__not):not(.ogonbryn) { margin-top: var(--s5); color: var(--on-navy-2); font-size: var(--t20); font-weight: 300; }
.band .ogonbryn { justify-content: center; }
.trad { position: absolute; z-index: -1; inset: auto 0 12px 0; width: 100%; height: 64px; pointer-events: none; }
@media (max-width: 767px) { .trad { display: none; } }
.trad path, .hero__trad path { fill: none; stroke: var(--gold-500); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 0; }
.trad.vantar path { stroke-dashoffset: 1; }
.trad.syns path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease); }

/* ---------- möt Emma ---------- */
.emma__namn { margin-top: var(--s6); font-family: var(--serif); font-style: italic; font-size: var(--t30); color: var(--gold-700); }
.emma__roll { font-size: var(--t14); color: var(--ink-3); }

/* ---------- kontaktformulär ---------- */
.formular { display: grid; gap: var(--s5); padding: clamp(var(--s5), 4vw, var(--s7)); background: var(--paper); border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--sk-lg); }
.falt { display: grid; gap: var(--s2); }
.falt label { font-size: var(--t14); font-weight: 500; color: var(--ink); }
.falt label span { font-weight: 400; color: var(--ink-3); }
.falt input, .falt select, .falt textarea { width: 100%; min-height: 52px; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1.5px solid var(--navy-400);
  background: var(--paper); font-size: var(--t16); transition: border-color var(--snabb) var(--ease), box-shadow var(--snabb) var(--ease); }
.falt textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.falt select { appearance: none; -webkit-appearance: none; padding-right: var(--s8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386692b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.falt input:hover, .falt select:hover, .falt textarea:hover { border-color: var(--navy-600); }
.falt input:focus, .falt select:focus, .falt textarea:focus { outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 4px rgba(181, 139, 82, .28); }
.falt__hjalp { font-size: var(--t14); color: var(--ink-3); }
.falt__fel { font-size: var(--t14); color: #a3261b; font-weight: 500; }
.falt.is-fel input, .falt.is-fel select, .falt.is-fel textarea { border-color: #a3261b; }
.formular__rad { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .formular__rad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.formular__fot { display: grid; gap: var(--s4); }
.formular__fot .knapp { width: 100%; }
@media (min-width: 640px) { .formular__fot .knapp { width: auto; justify-self: start; } }
.formular__integritet { font-size: var(--t14); color: var(--ink-3); }
.formular__integritet a { color: var(--ink); }
.dold-falt { display: none; }
.kontaktvagar { display: grid; gap: var(--s3); margin-top: var(--s6); }
.kontaktvag { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; transition: border-color var(--snabb) var(--ease), transform var(--snabb) var(--ease); min-height: 64px; }
a.kontaktvag:hover { border-color: var(--gold-500); transform: translateY(-1px); }
.kontaktvag .ikon { color: var(--gold-700); }
.kontaktvag span { display: grid; font-size: var(--t14); color: var(--ink-3); line-height: 1.4; }
.kontaktvag b { font-size: var(--t16); color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

/* ---------- tack-sidan ---------- */
.tackbock { width: 88px; height: 88px; margin-bottom: var(--s6); }
.tackbock circle { fill: none; stroke: var(--gold-500); stroke-width: 1.5; }
.tackbock path { fill: none; stroke: var(--gold-400); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tackbock circle { stroke-dasharray: 1; animation: rita 1s var(--ease) both; }
  .tackbock path { animation: rita .6s .7s var(--ease) both; }
}
@keyframes rita { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- vägval (pausad chatt, 404, tack) ---------- */
.vagval { display: grid; gap: var(--s4); }
@media (min-width: 768px) { .vagval { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vagval .kort { padding: var(--s6); }
.vagval .kort h2, .vagval .kort h3 { font-size: var(--t24); }
.vagval .kort p { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t16); }
.vagval .ikonkort__ikon { margin-bottom: var(--s4); }

/* ---------- långtext (villkor, integritet) ---------- */
.langtext { display: grid; gap: var(--s7); }
@media (min-width: 1024px) { .langtext { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s9); } }
.innehall { align-self: start; padding: var(--s5); border-radius: var(--r-lg); background: var(--cream-50); border: 1px solid var(--line); }
@media (min-width: 1024px) { .innehall { position: sticky; top: calc(var(--sidhuvud) + var(--s5)); } }
.innehall h2 { font-family: var(--sans); font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); margin-bottom: var(--s3); }
.innehall ol { list-style: none; padding: 0; display: grid; gap: 2px; }
.innehall a { display: flex; gap: var(--s2); padding: var(--s1) 0; font-size: var(--t14); color: var(--ink-2); text-decoration: none; min-height: 32px; align-items: center; }
.innehall a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prosa { max-width: 40em; color: var(--ink-2); }
.prosa h2 { font-size: var(--t30); color: var(--ink); margin: var(--s7) 0 var(--s4); }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-size: var(--t24); color: var(--ink); margin: var(--s6) 0 var(--s3); }
.prosa ul { padding-left: var(--s5); margin: var(--s3) 0; }
.prosa li + li { margin-top: var(--s1); }
.prosa li::marker { color: var(--gold-600); }
.prosa a { color: var(--ink); text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
.prosa .uppdaterad { font-size: var(--t14); color: var(--ink-3); }

/* ---------- företagsfakta ---------- */
.foretag { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.foretag div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t16); }
.foretag dt { color: var(--ink-3); }
.foretag dd { color: var(--ink); overflow-wrap: anywhere; }

/* ---------- kompetenser ---------- */
.taggar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.taggar li { padding: var(--s1) var(--s3); border-radius: var(--r-rund); border: 1px solid var(--line-strong); font-size: var(--t14); color: var(--ink-2); }

/* ---------- sidfot ---------- */
.sf { background: var(--navy-950); color: var(--on-navy-2); font-size: var(--t16); }
.sf a { color: var(--on-navy-2); text-decoration: none; }
.sf a:hover { color: var(--on-navy); }
.sf__rutnat { display: grid; gap: var(--s7); padding-block: var(--s9) var(--s7); }
@media (min-width: 768px) { .sf__rutnat { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf__marke { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .sf__rutnat { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } .sf__marke { grid-column: auto; } }
.sf__logga { display: inline-flex; align-items: center; min-height: 44px; }
.sf__logga img { width: 128px; height: auto; }
.sf__payoff { margin-top: var(--s5); font-family: var(--serif); font-size: var(--t30); line-height: 1.2; color: var(--on-navy); }
.sf__beskr { margin-top: var(--s2); }
.sf__motto { text-wrap: balance; margin-top: var(--s5); font-size: var(--t12); letter-spacing: .18em; text-transform: uppercase; color: var(--on-navy-gold); }
.sf__rubrik { font-family: var(--sans); font-size: var(--t12); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-navy-gold); margin-bottom: var(--s4); }
.sf ul { list-style: none; padding: 0; margin: 0; }
.sf__kol ul { display: grid; gap: var(--s1); }
.sf__kol a, .sf__text { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; }
.sf__ikon { width: 18px; height: 18px; color: var(--on-navy-gold); }
.sf__botten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding-block: var(--s5) var(--s6); border-top: 1px solid var(--on-navy-line); font-size: var(--t14); }
.sf__juridik { display: flex; flex-wrap: wrap; gap: var(--s5); }
.sf__juridik a, .sf__cookie { display: inline-flex; align-items: center; min-height: 44px; }
.sf__cookie { background: none; border: 0; padding: 0; color: var(--on-navy-2); cursor: pointer; font-size: var(--t14); }
.sf__cookie:hover { color: var(--on-navy); }

/* ---------- cookiebanner (tar aldrig fokus, täcker inte hero-knapparna) ---------- */
.kaka { position: fixed; z-index: 60; left: var(--s3); right: var(--s3); bottom: var(--s3); padding: var(--s5); background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--sk-xl); border: 1px solid var(--line); }
@media (min-width: 640px) { .kaka { left: auto; right: var(--s5); bottom: var(--s5); width: 380px; } }
.kaka[hidden] { display: none; }
.kaka__titel { font-family: var(--serif); font-size: var(--t24); line-height: 1.2; }
.kaka__text { margin-top: var(--s2); font-size: var(--t14); line-height: 1.55; color: var(--ink-2); }
.kaka__text a { color: var(--ink); }
.kaka__knappar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
@media (prefers-reduced-motion: no-preference) { .kaka:not([hidden]) { animation: upp .4s var(--ease) both; } }
@keyframes upp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- platshållare (syns bara tills Emma fyllt i) ---------- */
.ph { display: inline; padding: 1px 6px; border-radius: 4px; background: var(--ph-bg); color: var(--ph-fg); outline: 1.5px dashed var(--ph-line); outline-offset: 1px;
  font-family: var(--sans); font-size: .85em; font-style: normal; font-weight: 400; line-height: 1.6; letter-spacing: 0; text-transform: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ph__etikett { font-size: .78em; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.citat > .ph { align-self: flex-start; font-size: var(--t12); }



/* ---------- kontaktsidan ---------- */
.hero--overlappad .hero__inre { padding-bottom: calc(clamp(var(--s8), 8vw, var(--s10)) + var(--s9)); }
.sektion--kontakt { padding-top: 0; }
.overlapp { position: relative; z-index: 2; margin-top: calc(-1 * var(--s9)); }
.formular__titel { font-size: var(--t30); }
.formular__ingress { margin-top: var(--s2); color: var(--ink-3); font-size: var(--t16); }
.kontakt-sida { padding-top: var(--s7); }
.kontakt-sida .bild { width: min(100%, 400px); }
.kontakt-sida__titel { font-size: var(--t30); margin-top: var(--s7); }
@media (max-width: 959px) { .kontakt-sida { padding-top: 0; } }

/* ---------- små tillägg ---------- */
.ikonkort a, .passar a, .brodtext a { color: var(--ink); font-weight: 500; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
.h3-stor { font-size: var(--t36); margin-bottom: var(--s5); }
.bakgrund { margin-top: var(--s5); }
.hero--tack .hero__inre { justify-items: start; }
.vagval .kort h3 { margin-top: var(--s2); }
code { font-size: .9em; padding: 1px 5px; border-radius: 4px; background: var(--cream-100); }


/* ---------- surfplatta: tätare kort när tre står i bredd ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .kort { padding: var(--s5); }
  .kort__titel { font-size: var(--t24); }
  .kort__belopp { font-size: var(--t24); white-space: nowrap; }
  .bild, .kontakt-sida .bild { max-width: 440px; }
}

/* ---------- startsidans hero: foto + profilkort i lager ---------- */
.kollage { position: relative; width: min(100%, 460px); justify-self: center; }
.kollage__foto { position: relative; width: 74%; margin-left: auto; }
.kollage__foto::after { content: ""; position: absolute; z-index: -1; inset: -16px -16px auto auto; width: 60%; height: 50%; border: 1px solid rgba(208, 174, 113, .45); border-radius: var(--r-lg); }
.kollage__foto picture img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-lg); box-shadow: var(--sk-xl); }
.kollage .pk-yta { position: relative; width: 80%; margin-top: -28%; }
.kollage .pk__namn, .kollage .pk__ort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kollage .pk__vem { min-width: 0; }
.kollage .pk__not span { display: none; }
.kollage .pk { padding: var(--s5) var(--s5) var(--s4); }
.kollage .pk__bild { width: 44px; height: 44px; font-size: var(--t20); }
.kollage .pk__namn { font-size: var(--t20); }
.kollage .pk__rubrik { margin-top: var(--s4); min-height: 56px; }
.kollage .pk__rubrik .fore { font-size: 13px; }
.kollage .pk__rubrik .efter { font-size: 21px; }
.kollage .pk__lista { margin-top: var(--s4); gap: var(--s2); }
.kollage .pk__lista li { grid-template-columns: 18px 78px 1fr; font-size: 12px; }
@media (max-width: 479px) { .kollage .pk-yta { width: 92%; } }

/* ---------- tre frågor ---------- */
.fragor-yta__intro { font-family: var(--serif); font-size: var(--t24); line-height: 1.3; color: var(--ink); max-width: 22em; }
.fragor-yta .fragor { margin-top: var(--s5); }

/* ---------- ikonlista (utan kort) ---------- */
.ikonlista { display: grid; gap: var(--s6) var(--s7); }
.ikonlista li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); align-items: start; }
.ikonlista__ikon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold-300); color: var(--gold-700); }
.ikonlista h3 { font-size: var(--t24); margin-bottom: var(--s1); }
.ikonlista p { color: var(--ink-2); font-size: var(--t16); max-width: 32em; }
.ikonlista a { color: var(--ink); font-weight: 500; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
@media (min-width: 768px) { .ikonlista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ikonlista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- jämförelsen i mobilen: en lista per tjänst ---------- */
.jmf-mobil { display: grid; gap: var(--s4); }
.jmf { padding: var(--s5); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.jmf--rek { border: 2px solid var(--navy-800); }
.jmf__titel { font-size: var(--t24); margin-bottom: var(--s3); }
.jmf dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t14); }
.jmf dt { color: var(--ink-3); }
.jmf dd { color: var(--ink); }
.jmf .ja .ikon { width: 16px; height: 16px; stroke: var(--gold-600); stroke-width: 2.2; }
.jmf .ja { display: inline-flex; gap: var(--s1); align-items: center; }
@media (max-width: 719px) { .tabell-yta { display: none; } }
@media (min-width: 720px) { .jmf-mobil { display: none; } }

/* ---------- nivåer: enhet ---------- */
.niva .niva__enhet { margin-top: calc(-1 * var(--s2)); font-size: var(--t12); letter-spacing: .04em; color: var(--ink-3); }

/* ---------- kontaktsidans sidokolumn ---------- */
.kontakt-sida__emma { display: flex; align-items: center; gap: var(--s4); }
.avatar { width: 72px; height: 72px; flex: none; }
.avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: var(--sk-sm); }
.kontakt-sida__emma p { display: grid; font-size: var(--t14); color: var(--ink-3); }
.kontakt-sida__emma b { font-family: var(--serif); font-size: var(--t24); font-weight: 500; color: var(--ink); }
.ministeg { display: grid; gap: var(--s4); margin-top: var(--s4); counter-reset: ms; }
.ministeg li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); font-size: var(--t16); color: var(--ink-2); line-height: 1.5; }
.ministeg li::before { counter-increment: ms; content: counter(ms); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy-800); color: var(--on-navy); font-family: var(--serif); font-size: var(--t20); font-variant-numeric: lining-nums; }
.ministeg b { display: block; color: var(--ink); font-weight: 500; }
.cta--center .cta__not { justify-content: center; }

/* ---------- sidhuvud: bokningsknappen syns redan från 600 px ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
  .sh__slut { display: flex; align-items: center; margin-left: auto; }
  .sh__slut .sprak { display: none; }
  .sh__logga { margin-right: 0; }
}


/* ---------- premium: luft, påståenden och centrerade rubriker ---------- */
.sektion--luft { padding-block: clamp(80px, 9vw, 136px); }
.sektion--luft + .sektion--luft { padding-top: 0; }
.sektion--luft .citat { background: var(--cream-100); }
.utsaga { max-width: 52rem; margin-inline: auto; text-align: center; }
.utsaga h2 { font-size: clamp(36px, 1.4rem + 3vw, 64px); line-height: 1.06; text-wrap: balance; }
.utsaga p { margin: var(--s6) auto 0; max-width: 34em; font-size: var(--t20); line-height: 1.6; font-weight: 300; color: var(--ink-2); }
@media (min-width: 768px) { .utsaga p { font-size: var(--t24); } }
.utsaga p.liten { font-size: var(--t14); }
.sektion__fot--center { display: flex; justify-content: center; text-align: center; }
.kontakt-sida__pris { margin-top: var(--s6); font-size: var(--t16); color: var(--ink-2); }


/* =====================================================================
   EFTER KUND- OCH DESIGNGRANSKNINGEN (2026-10-15)
   ===================================================================== */
/* tjänstekorten: tre korta punkter */
.kort__punkter { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s2); font-size: var(--t16); color: var(--ink-2); }
.kort__punkter li { position: relative; padding-left: 20px; }
.kort__punkter li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--gold-500); }
.kort--rek .kort__punkter { color: var(--on-navy-2); }
.kort--rek .kort__punkter li::before { background: var(--gold-400); }
.kort__avrakning { margin: calc(-1 * var(--s3)) 0 var(--s5); font-size: var(--t14); color: var(--ink-3); }
.kort--rek .kort__avrakning { color: var(--on-navy-2); }

/* exempel från flera yrken */
.exempel { margin: clamp(48px, 6vw, 80px) auto 0; max-width: 1040px; }
.exempel__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
@media (min-width: 768px) { .exempel__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.exempel__rad { padding: var(--s5) var(--s6); border-radius: 20px; background: var(--cream-100); }
.exempel__roll { margin: 0; font-size: var(--t12); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); }
.exempel__fore { margin: var(--s2) 0 0; font-size: var(--t14); color: var(--ink-3); }
.exempel__fore s { text-decoration-color: var(--gold-500); text-decoration-thickness: 1.5px; }
.exempel__efter { margin: var(--s2) 0 0; display: flex; gap: var(--s2); align-items: flex-start; font-family: var(--serif); font-size: var(--t24); line-height: 1.25; color: var(--ink); }
.exempel__pil { width: 18px; height: 18px; margin-top: 6px; color: var(--gold-600); flex: none; }
.exempel__not { margin-top: var(--s4); text-align: center; font-size: var(--t14); color: var(--ink-3); }

/* ett stort citat tills det andra finns */
.citat-ett { max-width: 52rem; margin-inline: auto; }
.citat-ett .citat { padding: clamp(40px, 5vw, 72px); }
.citat-ett .citat__text { font-size: clamp(26px, 1.1rem + 1.6vw, 40px); line-height: 1.3; padding-right: 0; }
.citat-ett__plats { max-width: 52rem; margin: var(--s4) auto 0; text-align: center; font-size: var(--t14); }

/* namnskylt på Emmas foto i toppen */
.kollage__namn { position: absolute; top: 14px; left: 14px; margin: 0; padding: 8px 14px; border-radius: 12px; background: rgba(17, 29, 34, .78);
  color: var(--on-navy-2); font-size: 12px; line-height: 1.3; display: grid; }
@supports (backdrop-filter: blur(1px)) { .kollage__namn { background: rgba(17, 29, 34, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
.kollage__namn b { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--on-navy); }
.pk__bild .ikon { width: 26px; height: 26px; }
.kollage .pk__bild .ikon { width: 22px; height: 22px; }

/* Om: berättelsen */
.berattelse { max-width: 40rem; margin: clamp(48px, 6vw, 80px) auto 0; padding-top: var(--s6); border-top: 1px solid var(--line-strong); }
.berattelse__titel { font-size: var(--t30); margin-bottom: var(--s4); }
.berattelse p { font-size: var(--t20); line-height: 1.6; font-weight: 300; color: var(--ink-2); }

/* besiktning: två rutor */
.tvaspalt { display: grid; gap: var(--s5); margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 768px) { .tvaspalt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tvaspalt__ruta { padding: var(--s6); border-radius: 20px; background: var(--cream-100); }
.tvaspalt__ruta h3 { font-size: var(--t24); margin-bottom: var(--s3); }
.tvaspalt__ruta p { color: var(--ink-2); font-size: var(--t16); }

/* profiloptimering: tre ändringar bredvid videon */
.tre-andringar { list-style: none; padding: 0; margin: var(--s5) 0 var(--s5); display: grid; gap: var(--s3); font-size: var(--t20); font-weight: 300; color: var(--ink-2); }
.tre-andringar b { font-family: var(--serif); font-size: var(--t24); font-weight: 500; color: var(--ink); }

/* ghostwriting: exempelinlägg och nivåer */
.inlagg { width: min(100%, 480px); justify-self: center; }
.inlagg__kort { background: var(--paper); border-radius: 20px; padding: var(--s6); box-shadow: var(--sk-lg); }
.inlagg__topp { display: flex; align-items: center; gap: var(--s3); font-size: var(--t14); color: var(--ink-3); }
.inlagg__topp b { display: block; color: var(--ink); font-size: var(--t16); }
.inlagg__bild { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-800); color: var(--on-navy); }
.inlagg__bild .ikon { width: 22px; height: 22px; }
.inlagg__text { margin-top: var(--s5); font-size: var(--t16); line-height: 1.6; color: var(--ink); }
.inlagg__text p + p { margin-top: var(--s3); }
.inlagg__not { margin-top: var(--s3); text-align: center; font-size: var(--t12); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.niva .niva__per { font-size: var(--t14); font-weight: 500; color: var(--ink); }
.niva .niva__text { font-size: var(--t14); color: var(--ink-3); }
@media (max-width: 767px) { .rutnat--4.nivaer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .nivaer .niva { padding: var(--s4); } .nivaer .niva__pris { font-size: var(--t24); } }

/* kontakt, tack, länkrader */
.kontakt-sida__lugn { margin-top: var(--s6); font-size: var(--t16); color: var(--ink-2); }
.lista--stor li { font-size: var(--t18); }
.lankrad { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.sektion__fot--center.lankrad { justify-content: center; }

/* sidhuvud: kompakt bokningsknapp även i mobilen; tjänstesidorna har den redan i undermenyn */
@media (max-width: 599px) {
  .sh__slut { display: flex; align-items: center; margin-left: auto; }
  .sh__slut .sprak { display: none; }
  .sh__boka-lang { display: none; }
  .sh__logga { margin-right: 0; }
  .sh__inre { gap: var(--s3); }
}
@media (min-width: 768px) { .har-undernav .sh__boka { display: none; } }

/* sidfoten i två spalter i mobilen */
@media (max-width: 767px) {
  .sf__rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
  .sf__marke, .sf__kol:last-child { grid-column: 1 / -1; }
}

/* kompakt hero (tjänster, priser, kontakt …): lägre */
.hero--kompakt .hero__inre { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 88px); }
.hero--overlappad.hero--kompakt .hero__inre { padding-bottom: calc(clamp(56px, 6vw, 88px) + var(--s9)); }

/* ---------- tre frågor (startsidan) ---------- */
.fragor { display: grid; gap: var(--s5); margin-top: var(--s6); counter-reset: fr; }
.fragor li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s4); align-items: start; color: var(--ink-2); font-size: var(--t16); line-height: 1.55; }
.fragor li::before { counter-increment: fr; content: counter(fr); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--gold-500); color: var(--gold-700); font-family: var(--serif); font-size: var(--t24); font-variant-numeric: lining-nums; }
.fragor b { display: block; font-family: var(--serif); font-size: var(--t24); font-weight: 500; line-height: 1.2; color: var(--ink); margin-bottom: 2px; }
.faq-intro { margin-top: var(--s5); }


/* ---------- mobil: kompakt banner och hero, så att bannern aldrig täcker huvudknappen ---------- */
@media (max-width: 639px) {
  .kaka { padding: var(--s4); bottom: var(--s2); left: var(--s2); right: var(--s2); }
  .kaka__titel { font-size: var(--t20); }
  .kaka__text { font-size: 13px; line-height: 1.45; }
  .kaka__knappar { margin-top: var(--s3); }
  .hero__inre { padding-top: var(--s7); }
  .hero__ingress { font-size: var(--t18); }
  .hero .cta { margin-top: var(--s5); }
  .faktaband__punkt b { font-size: var(--t20); }
  .bild--ram::before { display: none; }
}
/* små telefoner (iPhone SE/mini): rubriken i tre rader och ögonbrynet på en rad, så att knapparna syns ovanför bannern */
@media (max-width: 380px) {
  .hero h1 { font-size: 2.5rem; }
  .ogonbryn { letter-spacing: .12em; gap: var(--s2); }
  .ogonbryn::before { width: 20px; }
}
@media (max-width: 639px) and (max-height: 720px) {
  .kaka { padding: var(--s3) var(--s4); }
  .kaka__titel { display: none; }
  .kaka__text { margin-top: 0; font-size: 12.5px; }
  .kaka__knappar { margin-top: var(--s2); }
  .kaka__knappar .knapp { min-height: 40px; }
  .hero__inre { padding-top: var(--s6); }
  .hero .ogonbryn { margin-bottom: var(--s4); }
}


/* ---------- utan JavaScript: profilkortet står still i sitt färdiga läge (pausknappen kan inte fungera) ---------- */
html:not(.js) .pk *, html:not(.js) .pk *::after { animation: none !important; }
html:not(.js) .pk__kant { transform: scaleX(1); }
html:not(.js) .pk__rubrik .fore, html:not(.js) .pk__marke .fore { opacity: 0; }
html:not(.js) .pk__rubrik .efter { clip-path: none; }
html:not(.js) .pk__marke .efter { opacity: 1; }
html:not(.js) .pk__bock { background: var(--gold-500); border-color: var(--gold-500); color: var(--paper); }
html:not(.js) .pk__streck { background: rgba(16, 36, 58, .62); transform: none; }
html:not(.js) .paus { display: none; }

/* ---------- mobilmenyn öppen: sidan står still och cookiebannern ligger inte över menyn ---------- */
.mm-oppen { overflow: hidden; }
.mm-oppen .kaka { display: none; }

/* ---------- startsidans hero: pausknappen till vänster, så att bannern i högra hörnet aldrig täcker den ---------- */
.kollage .pk__not { flex-direction: row-reverse; justify-content: flex-end; gap: var(--s3); }


/* =====================================================================
   PREMIUMLAGRET (2026-10-15)
   Grund: webbforskningen (Apple uppmätt: 40–60 ord per skärm, rubriker ~4 ord, 160 px luft, pillerknappar,
   lugna prisrader, smal meny som följer med) + Emmas böcker (Krug s. 77: halvera texten; StoryBrand s. 133:
   samma knapp genom hela sidan; Refactoring UI s. 67: börja med för mycket luft).
   ===================================================================== */
.knapp { border-radius: var(--r-rund); padding: 0 26px; }
.knapp--liten { padding: 0 18px; }
.textlank { border-bottom: 0; padding-bottom: 0; gap: 4px; color: var(--navy-600); }
.textlank:hover { text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 5px; }
.textlank__ikon { width: 16px; height: 16px; stroke-width: 2; }
.sektion__huvud { margin-bottom: clamp(48px, 6vw, 88px); }
.sektion__huvud h2, .fast__huvud h2, .band h2 { text-wrap: balance; }
.sektion__huvud--center h2, .fast__huvud h2 { font-size: clamp(34px, 1.2rem + 2.6vw, 58px); line-height: 1.08; }
.sektion__huvud--center .brodtext { margin-inline: auto; color: var(--ink-3); }

/* tjänsterna som lugna plattor: namn, en rad, diskret pris */
.kort--tjanst:not(.kort--pris) { border: 0; border-radius: 28px; padding: clamp(32px, 3.4vw, 52px); box-shadow: none; min-height: 340px; }
.kort--tjanst:not(.kort--pris):has(.kort__lank):hover { transform: translateY(-2px); box-shadow: var(--sk-md); }
.kort--tjanst:not(.kort--pris) .kort__titel { font-size: clamp(26px, .4rem + 1.9vw, 36px); line-height: 1.08; }
.kort--tjanst:not(.kort--pris) .kort__vem { margin-top: var(--s3); font-size: var(--t20); line-height: 1.45; font-weight: 300; color: var(--ink-2); max-width: 15em; }
.kort__fot { margin-top: auto; padding-top: var(--s7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
@media (min-width: 768px) and (max-width: 1023px) { .tjanster.rutnat--3 { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }
.kort--tjanst:not(.kort--pris) .kort__pris { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
.kort__fot .kort__pris b { font-size: var(--t16); font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums; }
.kort__fot .kort__pris span { font-size: var(--t14); color: var(--ink-3); }
.kort--tjanst:not(.kort--pris) .kort__mer { margin: 0; padding: 0; gap: 2px; color: var(--navy-600); }
.kort--tjanst .kort__mer .ikon { width: 16px; height: 16px; }
.kort--rek .kort__fot .kort__pris b { color: var(--on-navy); }
.kort--rek .kort__fot .kort__pris span { color: var(--on-navy-2); }
.kort--rek.kort--tjanst:not(.kort--pris) .kort__vem { color: var(--on-navy-2); }
.kort--rek.kort--tjanst .kort__mer { color: var(--on-navy); }
.tjanster .kort--rek { margin-block: 0 !important; padding-block: clamp(32px, 3.4vw, 52px) !important; }
.kort--tjanst .kort__marke { left: clamp(32px, 3.4vw, 52px); }
.kort--pris { border: 0; border-radius: 28px; box-shadow: none; padding: clamp(32px, 3.4vw, 48px); }
.citat { border: 0; border-radius: 28px; box-shadow: none; padding: clamp(36px, 4vw, 64px); }
.citat__text { font-size: clamp(24px, 1rem + 1.2vw, 32px); }
.passar { border-radius: 28px; border: 0; padding: clamp(28px, 3vw, 44px); }
.passar--inte { border: 1px solid var(--line-strong); }
.niva { border-radius: 20px; border: 0; box-shadow: none; }
.sektion--luft .niva { background: var(--cream-100); }
.jmf, .tabell-yta { border-radius: 20px; }

@media (max-width: 767px) { .kort--tjanst:not(.kort--pris) { min-height: 0; } .kort__fot { padding-top: var(--s6); } }

/* priskortens bindningsrad */
.kort__ingen { margin: 0; font-size: var(--t14); color: var(--ink-3); }
.kort--rek .kort__ingen { color: var(--on-navy-2); }

/* "Så går det till": rubriken står kvar medan stegen glider förbi */
.fast { display: grid; gap: var(--s7); }
.fast__text { margin-top: var(--s4); color: var(--ink-3); font-size: var(--t18); }
.steg.steg--lodrat { display: grid; grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
.steg.steg--lodrat::before, .steg--lodrat .steg__punkt::before, .steg--lodrat .steg__punkt::after { display: none !important; }
.steg--lodrat .steg__punkt { padding: 28px 0; border-top: 1px solid var(--line-strong); }
.steg--lodrat .steg__nr { font-size: 48px; color: var(--gold-600); margin-bottom: var(--s3); }
.steg--lodrat .steg__titel { font-size: var(--t30); }
.steg--lodrat p { font-size: var(--t18); color: var(--ink-3); }
@media (min-width: 960px) {
  .fast { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s9); align-items: start; }
  .fast__huvud { position: sticky; top: calc(var(--sidhuvud) + var(--s7)); }
  .har-undernav .fast__huvud { top: calc(var(--sidhuvud) + 56px + var(--s7)); }
  .steg--lodrat .steg__nr { font-size: clamp(48px, 2rem + 2vw, 72px); }
  .steg--lodrat .steg__punkt { padding-block: 36px; display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--s6); align-content: start; }
  .steg--lodrat .steg__nr { grid-row: span 2; margin: 0; line-height: .9; }
}

/* avslutningen i ljust: bara toppen är marinblå, resten andas (en mörk yta per sida + sidfoten) */
.band { background: var(--cream-100); color: var(--ink); }
.band h2 { color: var(--ink); font-size: clamp(38px, 1.4rem + 3vw, 68px); line-height: 1.06; }
.band .accent { color: var(--gold-700); }
.band p:not(.cta__not):not(.ogonbryn) { color: var(--ink-3); }
.band .textlank { color: var(--navy-600); }
.band .trad { display: none; }
@media (max-width: 479px) { .cta--center .cta__not { max-width: 22rem; margin-inline: auto; text-align: left; } }

/* smal meny som följer med på tjänstesidorna (Apple: produktnamn, genvägar, Köp) */
:root:has(.har-undernav) { scroll-padding-top: calc(var(--sidhuvud) + 56px + 32px); }
.undernav { position: sticky; top: var(--sidhuvud); z-index: 45; background: rgba(251, 248, 243, .84); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) { .undernav { backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } }
.undernav__inre { display: flex; align-items: center; gap: var(--s5); height: 56px; }
.undernav__titel { margin: 0 auto 0 0; font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1; white-space: nowrap; }
.undernav__lankar { display: flex; gap: var(--s5); font-size: 13px; }
.undernav__lankar a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.undernav__lankar a:hover { color: var(--ink); }
.undernav__boka { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--r-rund); background: var(--navy-800); color: var(--on-navy); font-size: 14px; font-weight: 500; text-decoration: none; }
.undernav__boka:hover { background: var(--navy-600); }
@media (max-width: 767px) { .undernav { display: none; } :root:has(.har-undernav) { scroll-padding-top: calc(var(--sidhuvud) + 16px); } }


/* ---------- framtoning (bara under första skärmen, bara med JS, aldrig vid minskad rörelse) ---------- */
.vantar { opacity: 0; transform: translateY(24px); }
.syns { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.2, .6, .2, 1), transform 1.2s cubic-bezier(.2, .6, .2, 1); transition-delay: var(--d, 0ms); }
.steg.vantar, .trad.vantar, .dok.vantar, .trio.vantar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .vantar { opacity: 1 !important; transform: none !important; }
  .steg.vantar::before { transform: scaleX(1) !important; }
  .trad.vantar path { stroke-dashoffset: 0 !important; }
  /* profilkortet: visa färdiga läget direkt */
  .pk *, .pk *::after { animation: none !important; }
  .pk__kant { transform: scaleX(1); }
  .pk__rubrik .fore, .pk__marke .fore { opacity: 0; }
  .pk__rubrik .efter { clip-path: none; }
  .pk__marke .efter { opacity: 1; }
  .pk__bock { background: var(--gold-500); border-color: var(--gold-500); color: var(--paper); }
  .pk__streck { background: rgba(16, 36, 58, .62); transform: none; }
  .pk__not .paus { display: none; }
}

@media print {
  .sh, .kaka, .band, .paus, .mm, .trad, .hero__trad, .hoppa { display: none !important; }
  body { background: #fff; }
  .hero, .sektion--navy, .kort--rek, .sf { background: none !important; color: #000 !important; }
  .hero *, .kort--rek *, .faktarad--mork *, .sf * { color: #000 !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
  .vantar { opacity: 1 !important; transform: none !important; }
  .kort, .citat, .ikonkort { break-inside: avoid; }
}

/* EFTER BEKRÄFTANDE GRANSKNING */
/* sidhuvudet på smala telefoner (360 px och nedåt): menyknappen visar bara ikonen, ordmärket krymper */
@media (max-width: 389px) {
  .mm__text { display: none; }
  .mm__knapp { padding: 0 var(--s3); }
  .sh__inre { gap: var(--s2); }
  .sh__ordmarke { width: 86px; }
  .sh__monogram { width: 32px; height: 32px; }
}
/* profilkortet i heron: namnet och "illustrerat exempel" får aldrig klippas */
.kollage .pk__namn, .kollage .pk__ort { white-space: normal; overflow: visible; text-overflow: clip; }
/* inga ensamma ord på sista raden */
h1, h2, h3, p, li { text-wrap: pretty; }
.exempel__efter span { text-wrap: balance; }
@media (max-width: 389px) {
  .kollage .pk { padding: var(--s4) var(--s4) var(--s3); }
  .kollage .pk__bild { width: 36px; height: 36px; font-size: var(--t16); }
  .kollage .pk__namn { font-size: 17px; }
}

/* ==========================================================================
   BEIGE BLOCK PÅ VIT SIDA (Emmas val B, 2026-10-16)
   Sidan är vit. Beige används bara för det som ska lyftas: erbjudandet, beviset
   och uppmaningen (RUI s. 46–47, "emphasize by de-emphasizing"). Inga raka kanter
   tvärs över skärmen: blocken är rundade och har luft runt sig (RUI s. 66–67).
   Innehållet i blocken linjerar med innehållet utanför; blocket sticker ut lika
   mycket på båda sidor. Hörnen följer varandra: korten inne i ett block har
   mindre rundning än blocket.
   ========================================================================== */
:root { --yttre: 12px; --blod: 20px; --r-block: 28px; --r-inre: 20px; }
@media (min-width: 768px) { :root { --yttre: 24px; --blod: clamp(32px, 4.5vw, 64px); --r-block: 40px; --r-inre: 24px; } }

.sektion--cream { background: var(--paper); padding-block: clamp(8px, 1.5vw, 20px); }
.hero + .sektion--cream { padding-top: clamp(48px, 6vw, 88px); }
.sektion--cream > .ram {
  width: calc(100% - 2 * var(--yttre));
  max-width: calc(var(--ram) + 2 * var(--blod));
  padding-inline: var(--blod);
  padding-block: clamp(56px, 7vw, 112px);
  background: var(--cream-100);
  border-radius: var(--r-block);
}
.sektion--cream .kort, .sektion--cream .kort--tjanst:not(.kort--pris), .sektion--cream .kort--pris,
.sektion--cream .citat, .sektion--cream .passar, .sektion--cream .inlagg__kort,
.sektion--cream .niva, .sektion--cream .jmf, .sektion--cream .tabell-yta { border-radius: var(--r-inre); }

.band {
  width: calc(100% - 2 * var(--yttre));
  max-width: calc(var(--ram) + 2 * var(--blod));
  margin: 0 auto clamp(80px, 9vw, 136px);
  padding-inline: var(--blod);
  border-radius: var(--r-block);
  background: var(--cream-100);
}
.band__inre { padding-inline: 0; }

/* Innehållet i blocken linjerar med innehållet utanför från 768 px: sidans marginal = blockets
   avstånd till kanten + blockets inre luft. Sidhuvudet följer samma marginal. */
@media (min-width: 768px) {
  :root { --kant: clamp(48px, 5vw, 72px); --yttre: 16px; --blod: calc(var(--kant) - var(--yttre)); }
}
/* beige finns bara i blocken: kort i vita sektioner får vit yta med tunn kant */
.exempel__rad, .tvaspalt__ruta, .sektion--luft .citat, .sektion--luft .niva { background: var(--paper); border: 1px solid var(--line); }
.sektion--cream .video__ram { border-radius: var(--r-inre); }
@media (max-width: 389px) { .sektion--cream .kort--pris { padding-inline: 24px; } }

/* ==========================================================================
   HEM EFTER GRANSKNINGEN (2026-10-16): auktoritet, mindre upprepning, en typskala
   ========================================================================== */
/* en H2-storlek för hela sajten (RUI s. 102) */
:root { --h2: clamp(38px, 1.1rem + 2.8vw, 60px); }
.sektion__huvud--center h2, .fast__huvud h2, .utsaga h2, .band h2, .delad h2, .fraga-ai h2 { font-size: var(--h2); line-height: 1.07; }

/* profilkortet: bara rubriken, spelas en gång och slutar på Efter */
.kollage__foto::after { content: none; }
.pk { padding: var(--s6) var(--s6) var(--s6); }
.pk__rubrik { min-height: 0; display: grid; }
.pk__rubrik .fore, .pk__rubrik .efter { position: static; grid-area: 1 / 1; }
.pk__rubrik .fore b { display: inline; position: static; font-weight: 400;
  background: linear-gradient(var(--gold-500), var(--gold-500)) no-repeat 0 58% / 0% 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pk__rubrik .fore b::after { content: none; }
.pk__rubrik .fore { animation: pkFore1 4.6s ease .6s 1 both; }
.pk__rubrik .fore b { animation: pkStryk1 4.6s ease .6s 1 both; }
.pk__rubrik .efter { animation: pkEfter1 4.6s ease .6s 1 both; }
.pk__marke .fore { animation: pkMarkeFore1 4.6s ease .6s 1 both; }
.pk__marke .efter { animation: pkMarkeEfter1 4.6s ease .6s 1 both; }
.pk__kant { animation: pkKant1 4.6s ease .6s 1 both; }
@keyframes pkStryk1 { 0%, 18% { background-size: 0% 2px } 40%, 100% { background-size: 100% 2px } }
@keyframes pkFore1 { 0%, 46% { opacity: 1 } 54%, 100% { opacity: 0 } }
@keyframes pkEfter1 { 0%, 52% { clip-path: inset(0 100% 0 0) } 80%, 100% { clip-path: inset(0 0 0 0) } }
@keyframes pkMarkeFore1 { 0%, 44% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes pkMarkeEfter1 { 0%, 52% { opacity: 0; transform: translateY(4px) } 60%, 100% { opacity: 1; transform: none } }
@keyframes pkKant1 { 0%, 70% { transform: scaleX(0) } 90%, 100% { transform: scaleX(1) } }
@media (prefers-reduced-motion: reduce) { .pk__rubrik .fore b { background-size: 100% 2px; } }
html:not(.js) .pk__rubrik .fore, html:not(.js) .pk__marke .fore { opacity: 0; }
html:not(.js) .pk__marke .efter { opacity: 1; }

/* mobilens första skärm: kortet syns direkt */
@media (max-width: 639px) {
  .hero--start .hero__inre { gap: var(--s6); }
  .kollage__foto { width: 58%; }
  .kollage .pk-yta { width: 88%; margin-top: -38%; }
}
/* bokningsknappen i sidhuvudet döljs i mobilen så länge heron visar sin egen */
@media (max-width: 599px) {
  html.hero-cta-klar .sh__boka { transition: opacity var(--mellan) var(--ease), visibility var(--mellan); }
  html.har-hero-cta:not(.hero-cta-ute) .sh__boka { opacity: 0; visibility: hidden; }
}
/* profilkortet väntar tills det syns */
html.js .pk-yta:not(.spelar) .pk *, html.js .pk-yta:not(.spelar) .pk *::after { animation-play-state: paused !important; }

/* Rekommenderad: en guldrad inne i kortet, inte en etikett ovanpå */
.kort__marke { position: static; order: -1; margin: 0 0 var(--s3); padding: 0; border-radius: 0; background: none;
  color: var(--gold-400); font-size: var(--t12); font-weight: 500; letter-spacing: .18em; }

/* Kan jag inte bara fråga ChatGPT? */
.fraga-ai { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .fraga-ai { grid-template-columns: 5fr 7fr; gap: var(--s9); } }
.fraga-ai h2 { text-wrap: balance; }
.fraga-ai__svar { display: grid; gap: var(--s5); max-width: 36em; }
.fraga-ai__svar .ingress { margin: 0; }
.fraga-ai__svar .brodtext { margin: 0; }

/* löftena under Så går det till */
.loften { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s3); }
.loften li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); align-items: start; font-size: var(--t16); color: var(--ink-2); }
.loften__bock { width: 18px; height: 18px; margin-top: 3px; color: var(--gold-600); }

/* småfel */
.citat-ett .citat__text { padding-right: var(--s7); }
.cta--center .cta__not { justify-content: center; }
.sf__botten { border-top: 0; position: relative; align-items: center; }
.sf__botten::before { content: ""; position: absolute; top: 0; left: var(--kant); right: var(--kant); height: 1px; background: var(--on-navy-line); }
.exempel__fore { font-size: var(--t15, 15px); }

/* Rekommenderad-raden får inte förskjuta korten bredvid: de andra korten får samma luft upptill */
.kort__marke { line-height: 20px; }
@media (min-width: 768px) {
  .rutnat--3:not(.tjanster):has(.kort__marke) > .kort:not(:has(.kort__marke))::before { content: ""; flex: none; height: calc(20px + var(--s3)); }
}
@media (min-width: 1024px) {
  .tjanster.rutnat--3:has(.kort__marke) > .kort:not(:has(.kort__marke))::before { content: ""; flex: none; height: calc(20px + var(--s3)); }
}
/* utsagan vänsterställs i mobilen, där centrerad text blir många korta rader */
@media (max-width: 599px) { .utsaga { text-align: left; } .utsaga p { margin-inline: 0; } }

.citat__tjanst { display: block; margin-top: 2px; font-size: var(--t12); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); }
@media (max-width: 599px) { .citat__tjanst { text-transform: none; letter-spacing: 0; font-size: var(--t14); } }

/* ==========================================================================
   HEM, RUNDA 2 (2026-10-17)
   ========================================================================== */
/* rubrikskalan: mellanrubrikerna mindre, så att H1 och avslutningen blir topparna (RUI s. 102, Laws of UX s. 85) */
:root { --h2: clamp(34px, 1rem + 2vw, 48px); }
h1 { font-size: clamp(var(--t48), 2.2rem + 3.6vw, 80px); }
.band h2 { font-size: clamp(38px, 1.2rem + 2.6vw, 56px); }
.fast__text { color: var(--ink-2); }

/* profilkortet: före står kvar överstruket ovanför efter, så att poängen syns även när animationen är slut */
.pk__rubrik { display: grid; gap: var(--s2); }
.pk__rubrik .fore { grid-area: auto; grid-row: 1; font-size: var(--t14); }
.pk__rubrik .efter { grid-area: auto; grid-row: 2; }
@keyframes pkFore1 { 0%, 46% { opacity: 1 } 60%, 100% { opacity: .55 } }
html:not(.js) .pk__rubrik .fore { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .pk__rubrik .fore { opacity: .55 !important; } }
.kollage .pk__rubrik .fore { font-size: 13px; }

/* mobilen: kortet täcker inte ansiktet */
@media (max-width: 639px) {
  .kollage__namn { display: none; }
  .kollage__foto { width: 72%; }
  .kollage .pk-yta { width: 88%; margin-top: -14%; }
}

/* citatet utan låda i lådan: stort, fritt, med hängande citattecken (RUI s. 221) */
.sektion--citat > .ram { padding-block: clamp(48px, 5vw, 72px); }
.sektion--citat .citat-ett { max-width: 56rem; margin-inline: 0; }
.sektion--citat .citat { background: none; border: 0; box-shadow: none; padding: 0 0 0 clamp(0px, 4vw, 56px); }
.sektion--citat .citat__tecken { left: 0; right: auto; top: -.18em; font-size: clamp(72px, 6vw, 112px); color: var(--gold-500); }
.sektion--citat .citat-ett .citat__text { padding: 0; }
.sektion--citat .citat-ett__plats { margin-inline: 0; text-align: left; padding-left: clamp(0px, 4vw, 56px); }
@media (max-width: 599px) {
  .sektion--citat .citat { padding-top: 56px; }
  .sektion--citat .citat__tecken { top: -8px; font-size: 80px; }
}

/* Så går det till i mobilen: stegen först, löftena sist */
@media (max-width: 959px) {
  .fast:has(.loften) { display: flex; flex-direction: column; gap: 0; }
  .fast:has(.loften) .fast__huvud { display: contents; }
  .fast:has(.loften) > .steg { order: 2; margin-top: var(--s7); }
  .fast:has(.loften) .loften { order: 3; margin-top: var(--s7); }
}

/* testa själv */
.testa { max-width: 40rem; margin: var(--s6) auto 0; text-align: center; font-family: var(--serif); font-size: var(--t24); line-height: 1.35; color: var(--ink); }
@media (max-width: 599px) { .testa { text-align: left; } }

/* småputs */
.kort__punkter li::before { height: 2px; top: calc(.72em - .5px); }
.steg--lodrat .steg__nr { font-size: 48px; }
@media (min-width: 960px) { .steg--lodrat .steg__nr { font-size: 48px; margin-top: -.12em; } }
.cta--center .cta__not { text-align: center; }
@media (max-width: 479px) { .cta--center .cta__not { align-items: center; } }

/* H1 på Hem: en mening per rad, och aldrig större än att den första meningen ryms på en rad */
@media (min-width: 1024px) { .hero--start h1 .h1-rad { display: block; } }
@media (min-width: 1180px) { .hero--start h1 { font-size: clamp(54px, 4.9vw, 72px); } }
@media (min-width: 1024px) and (max-width: 1179px) { .hero--start h1 { font-size: clamp(52px, 5.2vw, 60px); } .band h2 { font-size: 48px; } }
.pk__rubrik .fore { opacity: .7; }
@keyframes pkFore1 { 0%, 46% { opacity: 1 } 60%, 100% { opacity: .7 } }
html:not(.js) .pk__rubrik .fore { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .pk__rubrik .fore { opacity: .7 !important; } }

/* ChatGPT-avsnittet: några av Emmas riktiga frågor (ur hennes frågeformulär) */
.fragor-ai { margin-top: var(--s2); padding-top: var(--s5); border-top: 1px solid var(--line); }
.fragor-ai__rubrik { font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); margin-bottom: var(--s3); }
.fragor-ai ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.fragor-ai li { font-family: var(--serif); font-size: var(--t24); line-height: 1.3; color: var(--ink); }
.fragor-ai li::before { content: "– "; color: var(--gold-500); }

/* ==========================================================================
   OM EKRIA (2026-10-18): redaktionellt tvåspaltsavsnitt för berättelsen
   ========================================================================== */
.redaktionell { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 900px) { .redaktionell { grid-template-columns: 5fr 7fr; gap: var(--s9); } }
.redaktionell h2 { text-wrap: balance; }
.redaktionell__text { display: grid; gap: var(--s5); max-width: 36em; }
.redaktionell__text > p { margin: 0; }

/* Om Ekria, efter designgranskningen */
.hero--sida .hero__foto::after { content: none; }
@media (max-width: 639px) { .hero--sida .hero__bild { width: 72%; justify-self: start; } }
.redaktionell__sida { display: grid; gap: var(--s7); align-content: start; }
.redaktionell__text .brodtext { font-size: var(--t18); line-height: 1.7; }
.foretag--kompakt { border-top: 0; gap: var(--s5); }
.foretag--kompakt div { grid-template-columns: 1fr; gap: 4px; padding: 0; border-bottom: 0; }
.foretag--kompakt dt { font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.foretag--kompakt dd { font-size: var(--t16); line-height: 1.55; }
.skillnad { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s7); }
@media (min-width: 768px) { .skillnad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s9); } }
.skillnad__punkt h3 { font-size: var(--t30); line-height: 1.15; }
.skillnad__punkt h3::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: var(--s4); background: var(--gold-500); }
.skillnad__punkt p { margin-top: var(--s3); font-size: var(--t18); font-weight: 300; line-height: 1.65; color: var(--ink-2); max-width: 28em; }
.skillnad__bevis { margin-top: var(--s8); padding-top: var(--s7); border-top: 1px solid var(--line-strong); }
.skillnad__bevis .citat { background: none; border: 0; box-shadow: none; padding: 0 0 0 clamp(0px, 4vw, 56px); max-width: 52rem; }
.skillnad__bevis .citat__tecken { left: 0; right: auto; top: -.18em; font-size: clamp(64px, 5vw, 96px); color: var(--gold-500); }
.skillnad__bevis .citat__text { font-size: clamp(22px, 1rem + 1vw, 30px); padding: 0; }
@media (max-width: 599px) { .skillnad__bevis .citat { padding-top: 48px; } .skillnad__bevis .citat__tecken { top: -8px; font-size: 72px; } }
/* bandets bockrad i mobilen: bocken följer den centrerade texten */
@media (max-width: 479px) {
  .cta--center .cta__not { display: block; text-wrap: balance; }
  .cta--center .cta__bock { display: inline-block; vertical-align: -3px; margin-right: 6px; }
}

/* ==========================================================================
   GLOBALT SYSTEM (2026-10-18): lugnare sidhuvud, rullgardin med pris, sidfot som avslutning,
   färre rörelser, guldlinje i stället för ikoncirklar
   ========================================================================== */
/* sidhuvud */
.sh { border-bottom-color: transparent; transition: transform .4s var(--ease), box-shadow var(--mellan) var(--ease); }
.sh.sh--dold { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .sh { transition: none; } }
.sprak { border: 0; padding: 0; gap: 0; }
.sprak__val { min-width: 0; min-height: 44px; padding: 0 var(--s2); background: none !important; font-size: 13px; letter-spacing: .1em; }
.sprak__val { border-radius: 0; position: relative; }
.sprak__val + .sprak__val::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--on-navy-line); }
.sprak__val[aria-current] { color: var(--on-navy); }
.sprak__val:not([aria-current]) { color: var(--on-navy-2); }
@media (min-width: 1024px) {
  .sh__logga { margin-right: var(--s4); }
  .sh__slut { gap: var(--s3); margin-left: var(--s2); }
  .nav__lank { padding: 0 10px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .sh__ordmarke { width: 88px; } .sh__monogram { width: 32px; height: 32px; } .sh__boka-lang { display: none; }
  .nav__lank { padding: 0 8px; } .sh__slut { gap: var(--s2); } .sh__logga { margin-right: var(--s2); }
}
.utan-boka .sh__boka { visibility: hidden !important; }
.mm__knapp { border-color: transparent; padding-inline: var(--s2); }
/* rullgardinen: nummer, namn och pris */
.drop { width: 320px; }
.drop__lank { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; column-gap: var(--s3); row-gap: 2px; }
.drop__pris { grid-column: 2; }
.drop__nr { font-family: var(--serif); font-size: var(--t16); color: var(--gold-600); font-variant-numeric: lining-nums; }
.drop__titel { font-family: var(--serif); font-size: var(--t20); font-weight: 500; }
.drop__pris { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mm__under .drop__nr { color: var(--gold-400); }
.mm__under .drop__pris { color: var(--on-navy-2); }
/* sidfot */
.sf { background: #111d22; }
.sf__logga { gap: var(--s3); }
.sf__monogram { width: 36px; height: 36px; }
.sf__payoff { font-size: clamp(32px, 1.2rem + 2vw, 48px); line-height: 1.1; max-width: 9em; }
.sf__payoff::after { content: ""; display: block; width: 48px; height: 1px; margin-top: var(--s5); background: var(--gold-500); }
@media (min-width: 768px) { .sf__rutnat { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } .sf__marke { grid-column: auto; } }
.sf__tjanst { display: flex; justify-content: space-between; gap: var(--s4); width: 100%; }
.sf__pris { color: var(--on-navy-2); opacity: .75; font-size: var(--t14); white-space: nowrap; }
.sf__alla { color: var(--gold-400) !important; }
@media (max-width: 767px) { .sf__rutnat { grid-template-columns: 1fr; } }
/* rörelse: ingen lyftning, kortare och lugnare framtoning */
.knapp:hover, .kort:has(.kort__lank):hover, .kort--tjanst:not(.kort--pris):has(.kort__lank):hover, a.kontaktvag:hover { transform: none; }
.vantar { transform: translateY(12px); }
.syns { transition: opacity .65s cubic-bezier(.2, .6, .2, 1), transform .65s cubic-bezier(.2, .6, .2, 1); }
/* ikonlistor: en guldlinje i stället för ikoncirklar (samma språk som Om Ekria) */
.ikonlista li { grid-template-columns: 1fr; gap: 0; }
.ikonlista__ikon { display: none; }
.ikonlista h3::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: var(--s4); background: var(--gold-500); }
.ikonlista h3 { font-size: var(--t24); }
.ikonlista p { font-size: var(--t18); font-weight: 300; line-height: 1.65; }
/* formulär: lättare fält */
.falt input, .falt select, .falt textarea { border: 1px solid var(--line-strong); background-color: var(--paper); }
.falt input:hover, .falt select:hover, .falt textarea:hover { border-color: var(--navy-400); }

/* ==========================================================================
   DOKUMENTEN (2026-10-18): leveransen som ett riktigt ark på tjänstesidorna.
   Papper med brevhuvud, två ark bakom, ljus snett ovanifrån och guldpennans understrykning.
   ========================================================================== */
.dok-yta { width: min(100%, 440px); justify-self: center; margin: 0; }
.dok { position: relative; isolation: isolate; }
.dok__ark, .dok__lager { border-radius: 3px; }
.dok__lager { position: absolute; inset: 0; z-index: -1; background: #efe8dc;
  box-shadow: 0 1px 1px rgba(5, 12, 18, .2), 0 24px 48px -20px rgba(5, 12, 18, .6); transition: transform 1.1s var(--ease); }
.dok__lager--1 { transform: translate(14px, 10px) rotate(2.4deg); background: #f3ede3; }
.dok__lager--2 { transform: translate(-10px, 18px) rotate(-3deg); }
.dok__ark { position: relative; padding: 34px 34px 30px; color: var(--ink);
  background-color: #fffdf8;
  background-image:
    radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(176, 150, 112, .08)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(5, 12, 18, .25), 0 12px 24px -8px rgba(5, 12, 18, .35), 0 48px 90px -30px rgba(5, 12, 18, .7); }
.dok__brev { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #e6dccd; }
.dok__monogram { width: 20px; height: 20px; flex: none; }
.dok__ordmarke { width: 64px; height: auto; opacity: .9; }
.dok__typ { margin-left: auto; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.dok__titel { margin-top: 22px; font-family: var(--serif); font-size: 34px; line-height: 1.05; font-weight: 500; letter-spacing: -.01em; }
.dok__meta { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.dok__meta:empty { display: none; }
.dok__not { margin-top: var(--s6); font-size: var(--t12); letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-2); text-align: center; }

/* guldpennan */
.dok-penna { position: relative; white-space: nowrap; }
.penna { position: absolute; left: -3%; bottom: -7px; width: 106%; height: 11px; overflow: visible; }
.penna path { fill: none; stroke: var(--gold-500); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dok.vantar .penna path, .trio.vantar .penna path { stroke-dashoffset: 1; }
.dok.syns .penna path { transition: stroke-dashoffset .9s cubic-bezier(.6, .1, .3, 1) .9s; }

/* besiktningen: åtgärder med effekt */
.dok-prio__huvud { display: flex; justify-content: space-between; margin-top: 22px; padding-bottom: 8px; border-bottom: 1px solid #e6dccd;
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.dok-prio li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid #eee6da; }
.dok-prio li:last-child { border-bottom: 0; padding-bottom: 0; }
.dok-prio li:nth-child(n + 4) { opacity: .55; }
.dok-prio__nr { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--gold-600); font-variant-numeric: lining-nums; }
.dok-prio__text { display: grid; gap: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.dok-prio__text b { font-size: 15px; font-weight: 500; color: var(--ink); }
.dok-effekt { display: inline-flex; gap: 3px; align-self: center; }
.dok-effekt i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gold-500); }
.dok-effekt--3 i, .dok-effekt--2 i:nth-child(-n + 2), .dok-effekt--1 i:first-child { background: var(--gold-500); }

/* profiloptimeringen: färdiga texter */
.dok-text { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e6dccd; }
.dok-text__etikett { font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.dok-text__fore { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.dok-text__fore s { text-decoration-color: rgba(181, 139, 82, .8); text-decoration-thickness: 1.5px; }
.dok-text__ny { margin-top: 6px; font-family: var(--serif); font-size: 23px; line-height: 1.22; font-weight: 500; color: var(--ink); }
.dok-text__ny em { font-style: italic; color: var(--gold-700); }
.dok-text__ny .dok-penna { white-space: normal; }
.dok-text__ny .penna { bottom: -6px; }
.dok-text__brod { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.dok-text--sist .dok-text__brod { color: var(--ink); }

/* ghostwriting: månadens plan */
.dok-plan { margin-top: 20px; border-top: 1px solid #e6dccd; }
.dok-plan__rad { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #eee6da; }
.dok-plan__rad:last-child { border-bottom: 0; padding-bottom: 0; }
.dok-plan__dag { display: grid; justify-items: start; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); line-height: 1.1; }
.dok-plan__dag b { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: 0; color: var(--ink); font-variant-numeric: lining-nums; }
.dok-plan__titel { font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.dok-plan__titel .dok-penna { white-space: normal; }
.dok-plan__status { font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.dok-plan__rad--klar .dok-plan__status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--navy-500); vertical-align: 1px; }
.dok-plan__rad--vantar .dok-plan__status { padding: 4px 9px; border-radius: 999px; background: var(--gold-100); color: var(--gold-800); }
.dok-plan__rad--skrivs { opacity: .55; }

/* laddning: arken fälls ut och pennan drar sitt streck (aldrig vid minskad rörelse, se JS) */
.dok.vantar .dok__lager { transform: none; }
.dok.vantar .dok__ark { transform: translateY(10px); }
.dok.syns .dok__ark { transition: transform 1.1s var(--ease); }

@media (max-width: 599px) {
  .dok-yta { width: min(100%, 380px); }
  .dok__ark { padding: 26px 22px 22px; }
  .dok__titel { font-size: 28px; }
  .dok__lager--1 { transform: translate(8px, 8px) rotate(2deg); } .dok__lager--2 { transform: translate(-6px, 12px) rotate(-2.4deg); }
  .dok-text__ny { font-size: 20px; }
}

/* Tjänster: tre ark bredvid varandra, vem som skriver under varje */
.trio { margin: 0; width: min(100%, 560px); justify-self: center; }
.trio__rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 18px; }
.trio__del { display: grid; gap: var(--s4); }
.trio__ark { transition: transform 1.1s var(--ease); }
.trio__del--01 .trio__ark { transform: rotate(-2.5deg) translateY(22px); }
.trio__del--02 { position: relative; z-index: 1; }
.trio__del--02 .trio__ark { transform: translateY(-6px); }
.trio__del--03 .trio__ark { transform: rotate(2.5deg) translateY(22px); }
.trio.vantar .trio__ark { transform: none; }
.dok__ark--mini { padding: 18px 16px 20px; height: 268px; overflow: hidden; }
.dok__ark--mini::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0), #fbf7ef 85%); }
.dok__ark--mini .dok__brev { gap: 5px; padding-bottom: 9px; }
.dok__ark--mini .dok__monogram { width: 13px; height: 13px; }
.dok__ark--mini .dok__ordmarke { width: 40px; }
.dok__ark--mini .dok__typ { display: none; }
.dok__ark--mini .dok__titel { margin-top: 14px; font-size: 21px; }
.dok-mini { margin-top: 10px; display: grid; gap: 7px; counter-reset: m; }
.dok-mini li { display: grid; grid-template-columns: 14px 1fr; gap: 4px; padding-bottom: 7px; border-bottom: 1px solid #eee6da; font-size: 10.5px; line-height: 1.35; color: var(--ink-2); }
.dok-mini li::before { counter-increment: m; content: counter(m); font-family: var(--serif); font-size: 13px; line-height: 1; color: var(--gold-600); }
.dok-mini__ny { margin-top: 10px; font-family: var(--serif); font-size: 15px; line-height: 1.2; font-weight: 500; }
.dok-mini__brod { margin-top: 8px; font-size: 10.5px; line-height: 1.5; color: var(--ink-2); }
.trio__vem { margin-top: var(--s8); display: grid; gap: 2px; justify-items: center; text-align: center; font-size: var(--t14); color: var(--on-navy); }
.trio__vem span { font-family: var(--serif); font-size: var(--t20); color: var(--on-navy-gold); }
@media (max-width: 1023px) { .trio { width: min(100%, 520px); } }
@media (max-width: 599px) {
  .trio__rad { gap: 10px; }
  .dok__ark--mini { padding: 12px 10px 14px; height: 200px; }
  .trio__vem { margin-top: var(--s7); }
  .dok__ark--mini .dok__titel { font-size: 16px; margin-top: 10px; }
  .dok-mini li, .dok-mini__brod { font-size: 8.5px; }
  .dok-mini__ny { font-size: 12px; }
  .trio__vem { font-size: var(--t12); }
  .trio__vem span { font-size: var(--t16); }
}

/* ==========================================================================
   LJUS INLEDNING (2026-10-18): uppslagssidor (Priser, Fråga EkriAI, 404, juridik)
   ========================================================================== */
.hero--papper { color: var(--ink); background: var(--paper); }
.hero--papper::before { content: none; }
.hero--papper h1 { color: var(--ink); }
.hero--papper .hero__ingress { color: var(--ink-2); }
.hero--papper .ogonbryn { color: var(--gold-700); }
.hero--papper .smulor ol, .hero--papper .smulor a { color: var(--ink-3); }
.hero--papper .smulor [aria-current] { color: var(--ink); }
.hero--papper .hero__inre, .hero--papper.hero--kompakt .hero__inre { padding-block: clamp(56px, 7vw, 112px) clamp(32px, 4vw, 56px); }
.hero--papper + .sektion--cream { padding-top: 0; }
.sektion--efter-papper { padding-top: clamp(16px, 2vw, 32px); }

/* liten status ovanför rubriken (Fråga EkriAI) */
.statuschip { display: flex; width: fit-content; align-items: center; gap: 10px; margin-bottom: var(--s6); padding: 8px 14px 8px 12px; border-radius: var(--r-rund);
  border: 1px solid var(--line-strong); background: var(--cream-50); font-size: var(--t14); color: var(--ink-2); }
.statuschip__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px rgba(181, 139, 82, .18); }

/* stor siffra (404) */
.stor-siffra { justify-self: end; margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(120px, 16vw, 240px); line-height: .8;
  letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px var(--gold-500); font-variant-numeric: lining-nums; }
@media (max-width: 1023px) { .stor-siffra { display: none; } }

/* numrerade vägar vidare (404, Tack) */
.vagar { border-top: 1px solid var(--line); }
.vagar li { border-bottom: 1px solid var(--line); }
.vag { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: var(--s4); align-items: center; padding: var(--s5) var(--s2);
  color: var(--ink); text-decoration: none; transition: background-color var(--snabb) var(--ease); }
.vag:hover { background: var(--cream-50); }
.vag:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; border-radius: var(--r-sm); }
.vag__nr { font-family: var(--serif); font-size: var(--t20); color: var(--gold-600); font-variant-numeric: lining-nums; }
.vag__text { display: grid; gap: 2px; }
.vag__titel { font-family: var(--serif); font-size: var(--t30); font-weight: 500; line-height: 1.15; }
.vag__beskr { font-size: var(--t16); color: var(--ink-3); }
.vag__pil { width: 22px; height: 22px; color: var(--gold-600); transition: transform var(--snabb) var(--ease); }
.vag:hover .vag__pil { transform: translateX(4px); }
.vagar__rubrik { margin-top: var(--s9); margin-bottom: var(--s5); font-size: var(--t30); }

/* Kontakt: Emmas foto i stället för avataren */
.kontakt-sida__foto { margin: 0; }
.kontakt-sida__foto picture img { width: min(100%, 400px); aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 30%; border-radius: var(--r-xl); box-shadow: var(--sk-lg); }
.kontakt-sida__foto figcaption { margin-top: var(--s4); max-width: 26em; font-size: var(--t16); color: var(--ink-3); line-height: 1.5; }
.kontakt-sida__foto figcaption b { display: block; font-family: var(--serif); font-size: var(--t24); font-weight: 500; color: var(--ink); }
@media (max-width: 959px) { .kontakt-sida__foto picture img { width: min(100%, 320px); } }

/* Om: det pekande fotot, beskuret kring Emma */
.bild--pekar img { object-position: 72% 30% !important; }
.hero--papper .accent { color: var(--gold-600); }
.lista--centrerad { width: fit-content; margin-inline: auto; }
.vagar__rubrik { text-align: center; }

/* ==========================================================================
   VÄLJAREN (Tjänster, "Var står du just nu?"): situation till vänster, svaret till höger
   ========================================================================== */
.valjare { margin-top: var(--s6); border-top: 1px solid var(--line-strong); }
.val { border-bottom: 1px solid var(--line-strong); }
.val__lank { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; column-gap: var(--s4); row-gap: var(--s3); align-items: start;
  padding: var(--s6) var(--s3); color: var(--ink); text-decoration: none; border-radius: var(--r-md); transition: background-color var(--snabb) var(--ease); }
.val__lank:hover { background: rgba(255, 253, 249, .7); }
.val__lank:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }
.val__nr { grid-row: 1 / span 2; padding-top: 6px; font-family: var(--serif); font-size: var(--t20); line-height: 1; color: var(--gold-700); font-variant-numeric: lining-nums; }
.val__situation { font-family: var(--serif); font-size: clamp(24px, 1rem + 1.2vw, 32px); font-weight: 500; line-height: 1.2; text-wrap: balance; }
.val__svar { grid-column: 2; display: grid; gap: 4px; }
.val__namn { font-size: var(--t14); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); }
.val__losning { font-size: var(--t18); color: var(--ink-2); line-height: 1.5; }
.val__pris { font-size: var(--t16); color: var(--ink); font-variant-numeric: tabular-nums; }
.val__pil { grid-column: 3; grid-row: 1; align-self: center; width: 22px; height: 22px; color: var(--gold-600); transition: transform var(--snabb) var(--ease); }
.val__lank:hover .val__pil { transform: translateX(4px); }
@media (min-width: 900px) {
  .val__lank { grid-template-columns: 48px minmax(0, 1.15fr) minmax(0, 1fr) 24px; column-gap: var(--s7); align-items: center; padding-block: var(--s7); }
  .val__nr { grid-row: auto; padding-top: 0; align-self: center; }
  .val__svar { grid-column: 3; }
  .val__pil { grid-column: 4; }
}

/* Priser: en enda rad om konsultationen under korten (textgranskning 18/10) */
.kort-not { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s6); font-size: var(--t14); color: var(--ink-3); text-align: center; }

/* ==========================================================================
   DESIGNGRANSKNING 2 (2026-10-18): en skala, en linjering, färre upprepningar
   ========================================================================== */
/* rubrikskala: H1 72, H2 48 i sektioner, 56 i avslutningen */
h1 { font-size: clamp(var(--t48), 2.2rem + 3.2vw, 72px); }
h2 { font-size: var(--h2); line-height: 1.08; }
.sektion__huvud--center h2, .fast__huvud h2, .utsaga h2, .delad h2, .fraga-ai h2 { font-size: var(--h2); }

/* en linjering: allt vänsterställt mot samma kant, bara avslutningsblocket centreras */
.sektion__huvud--center { margin-inline: 0; text-align: left; }
.sektion__huvud--center .ogonbryn { justify-content: flex-start; }
.sektion__huvud--center .brodtext { margin-inline: 0; }
.utsaga, .utsaga .brodtext, .utsaga p { text-align: left; margin-inline: 0; }
.ram--smal { max-width: calc(var(--ram) + 2 * var(--kant)); }
.ram--smal > * { max-width: 800px; }
.sektion__fot--center, .sektion__fot--center.lankrad { justify-content: flex-start; text-align: left; }
.vagar__rubrik { text-align: left; }
.hero--papper + .sektion { padding-top: clamp(16px, 2vw, 32px); }

/* kundcitatet: centrerat och lika brett som texten */
.sektion--citat .citat-ett { max-width: 52rem; margin-inline: auto; }
.sektion--citat .citat { padding: clamp(56px, 6vw, 80px) 0 0; text-align: center; }
.sektion--citat .citat__tecken { left: 50%; right: auto; transform: translateX(-50%); top: -.12em; }
.sektion--citat .citat__vem { justify-content: center; text-align: left; }
.sektion--citat .citat-ett__plats { text-align: center; padding-left: 0; }

/* Profiloptimering: videon utan beige ram på beige botten; nyckelordet i samma typsnitt som meningen */
.sektion--cream .video__ram { background: none; box-shadow: none; }
.tre-andringar b { font-family: var(--sans); font-size: inherit; font-weight: 500; }

/* foton mot marinblått: en hårlinje så att mörka kläder inte smälter in i bakgrunden */
.hero .hero__bild picture img, .hero .kollage__foto img { outline: 1px solid rgba(255, 255, 255, .08); outline-offset: -1px; }

/* Tjänster: siffrorna under arken som riktiga siffror, närmare arken */
.trio__vem span { font-variant-numeric: lining-nums; }
.trio__vem { margin-top: var(--s7); }

/* rullgardinen: stramare rader */
.drop__lank { padding: 10px var(--s4); }
.drop__titel { line-height: 1.15; }

/* sidfotens logga: monogrammets inbyggda luft kompenseras så att E:et linjerar med devisen */
.sf__logga .sf__monogram { width: 48px; height: 48px; margin-left: -13px; }
.sf__logga img:not(.sf__monogram) { width: 120px; }

/* glappet mellan avslutningsblocket och sidfoten */
.band { margin-bottom: var(--s8); }

/* Ghostwriting: nivåpriserna i marinblått som alla andra priser */
.niva .niva__pris { color: var(--ink); }
.inlagg__bild { background: var(--cream-200); color: var(--ink); font-family: var(--serif); font-size: var(--t20); font-weight: 500; }

/* Passar dig om: en ruta, två spalter, hårlinje emellan */
.passar-ruta { display: grid; gap: var(--s6); padding: clamp(28px, 3vw, 44px); border-radius: var(--r-inre); background: var(--paper); }
.passar-ruta h3 { font-size: var(--t24); margin-bottom: var(--s4); }
.passar-ruta__del--inte .lista__bock { stroke: var(--ink-3); }
.passar-ruta a { color: var(--ink); font-weight: 500; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
@media (min-width: 768px) {
  .passar-ruta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; }
  .passar-ruta__del + .passar-ruta__del { padding-left: clamp(28px, 3vw, 48px); margin-left: clamp(28px, 3vw, 48px); border-left: 1px solid var(--line); }
}
@media (max-width: 767px) { .passar-ruta__del + .passar-ruta__del { padding-top: var(--s6); border-top: 1px solid var(--line); } }

/* Kontakt: stegen under formuläret i vänsterspalten, fotot följer med i högerspalten */
.kontakt-steg { margin-top: var(--s7); max-width: 34rem; }
.kontakt-steg .kontakt-sida__titel { margin-top: 0; }
@media (min-width: 960px) {
  .sektion--kontakt .delad { grid-template-areas: "form foto" "steg foto"; align-items: start; }
  .sektion--kontakt .formular { grid-area: form; }
  .sektion--kontakt .kontakt-sida { grid-area: foto; position: sticky; top: calc(var(--sidhuvud) + var(--s6)); }
  .sektion--kontakt .kontakt-steg { grid-area: steg; }
}
/* stegen på Kontakt: samma guldsiffror som "Så går det till" på övriga sidor */
.ministeg li::before { content: "0" counter(ms); width: auto; height: auto; border-radius: 0; background: none; color: var(--gold-700);
  font-size: var(--t24); line-height: 1; padding-top: 2px; }

/* mobil: kortare startsida */
@media (max-width: 767px) {
  .exempel__lista { grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--s3); padding-bottom: var(--s3); scrollbar-width: thin; }
  .exempel__rad { scroll-snap-align: start; }
  .exempel__lista:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 4px; border-radius: var(--r-md); }
  .kort--tjanst:not(.kort--pris) .lista { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .tjanster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tjanster > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.jmf--rek { border: 1px solid var(--gold-500); }

/* efterkontroll 18/10 */
.kort__avrakning { margin: var(--s4) 0 0; }
.niva__per--tom { min-height: 1.5em; }
.exempel { margin-inline: 0; max-width: none; }
.exempel__not, .testa { text-align: left; margin-inline: 0; }

/* Hem, ChatGPT-avsnittet: frågorna Emma ställer (hennes kursmaterial om klientintervjuer + The Mom Test s. 13) */
.fragekort { margin: 0; padding-left: var(--s5); border-left: 1px solid var(--gold-500); }
.fragekort__rubrik { font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.fragekort__lista { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); counter-reset: fk; }
.fragekort__lista li { display: grid; grid-template-columns: 28px 1fr; align-items: baseline; font-family: var(--serif); font-size: clamp(22px, 1rem + .6vw, 26px); line-height: 1.25; color: var(--ink); }
.fragekort__lista li::before { counter-increment: fk; content: counter(fk); font-size: var(--t18); color: var(--gold-700); font-variant-numeric: lining-nums; }

/* ==========================================================================
   CV (2026-10-19): CV-dokumentet, paketet, studentpriset, fyra tjänster i jämförelsen
   ========================================================================== */
.dok__ark--cv { padding: 0; overflow: hidden; }
.cv__huvud { padding: 26px 30px 22px; background: var(--navy-800); color: var(--on-navy); }
.cv__namn { font-family: var(--serif); font-size: 30px; line-height: 1.05; font-weight: 500; }
.cv__titel { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-gold); }
.cv__kontakt { margin-top: 10px; font-size: 11.5px; color: var(--on-navy-2); }
.cv__kropp { display: grid; gap: 18px; padding: 22px 30px 28px; }
.cv__rubrik { padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid #e6dccd; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.cv__text { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.cv__roll { font-size: 14px; font-weight: 500; color: var(--ink); }
.cv__roll span { font-weight: 400; color: var(--ink-3); }
.cv__lista { display: grid; gap: 6px; margin-top: 8px; }
.cv__lista li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.cv__lista li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 1px; background: var(--gold-500); }
.cv__lista .dok-penna { white-space: normal; }
.dok-yta--cv .dok__lager--1 { transform: translate(24px, -24px) rotate(2.2deg); }
.dok-yta--cv.dok.vantar .dok__lager--1, .dok-yta--cv .dok.vantar .dok__lager--1 { transform: none; }
.dok__sprak { position: absolute; top: 6px; right: 16px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
@media (max-width: 599px) {
  .cv__huvud { padding: 20px 22px 18px; } .cv__kropp { padding: 18px 22px 22px; } .cv__namn { font-size: 26px; }
  .dok-yta--cv .dok__lager--1 { transform: translate(14px, -20px) rotate(2deg); }
}

/* CV-sidan: det du ser och det systemet kan läsa */
.ats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.ats__del { display: grid; gap: var(--s3); min-width: 0; }
.ats__etikett { font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.ats__mall { display: grid; grid-template-columns: 38% 1fr; min-height: 230px; border-radius: 4px; overflow: hidden; background: var(--paper);
  box-shadow: 0 1px 1px rgba(16, 36, 58, .1), 0 14px 30px -14px rgba(16, 36, 58, .35); }
.ats__sida { display: grid; align-content: start; gap: 8px; padding: 14px 10px; background: #2c4d66; }
.ats__foto { width: 34px; height: 34px; border-radius: 50%; background: #c9d2da; }
.ats__sida .ats__liten { color: #e6ebf0; }
.ats__stapel { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden; }
.ats__stapel::after { content: ""; position: absolute; inset: 0 auto 0 0; background: #d0ae71; }
.ats__stapel--1::after { width: 80%; } .ats__stapel--2::after { width: 60%; } .ats__stapel--3::after { width: 90%; }
.ats__huvud { display: grid; align-content: start; gap: 8px; padding: 14px 12px; }
.ats__namn { font-family: var(--serif); font-size: 17px; line-height: 1.1; color: var(--ink); }
.ats__liten { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ats__rad { height: 5px; border-radius: 3px; background: rgba(16, 36, 58, .12); }
.ats__rad--kort { width: 70%; }
.ats__last { min-height: 230px; margin: 0; padding: 14px; border-radius: 4px; background: var(--cream-100); border: 1px dashed var(--line-strong);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.ats__fel { color: #a3412a; }
.ats__not { grid-column: 1 / -1; font-size: var(--t12); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 479px) { .ats { grid-template-columns: minmax(0, 1fr); } }

/* Hem: raden om CV under tjänstekorten */
.tjanster__cv { margin-top: var(--s6); max-width: 46rem; font-size: var(--t16); color: var(--ink-2); }
.tjanster__cv a { color: var(--ink); font-weight: 500; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }

/* Priser: CV och paketet bredvid varandra, studentpriset under */
.tjanster--cv { align-items: stretch; }
.kort--paket .kort__marke { color: var(--gold-700); }
.student { display: grid; gap: var(--s5); margin-top: var(--s7); padding: clamp(24px, 3vw, 36px); border-radius: var(--r-inre); background: var(--cream-100); }
.student__titel { font-size: var(--t24); margin-bottom: var(--s2); }
.student__text p { font-size: var(--t16); color: var(--ink-2); max-width: 36em; }
.student__priser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: 0; }
.student__priser div { display: grid; gap: 2px; }
.student__priser dt { font-size: var(--t14); color: var(--ink-3); }
.student__priser dd { margin: 0; font-family: var(--serif); font-size: var(--t24); font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums; }
@media (min-width: 900px) { .student { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .student__priser { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Tjänster: jämförelsen har fyra kolumner */
.tabell { min-width: 760px; }
.trio__vem span { font-family: var(--serif); font-size: var(--t18); }

/* kontrollgranskningen 2026-10-19 */
@media (min-width: 768px) and (max-width: 1023px) {
  .tjanster.rutnat--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin-inline: 0; }
  .tjanster.rutnat--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sf__tjanst { flex-wrap: wrap; gap: 0 var(--s3); }
  .sf__pris { white-space: normal; }
  .trio__rad { gap: 26px; }
  .trio__del--01 .trio__ark { transform: rotate(-1.5deg) translateY(18px); }
  .trio__del--03 .trio__ark { transform: rotate(1.5deg) translateY(18px); }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  .trio__rad { gap: 26px; }
  .trio__del--01 .trio__ark { transform: rotate(-1.5deg) translateY(18px); }
  .trio__del--03 .trio__ark { transform: rotate(1.5deg) translateY(18px); }
}
@media (max-width: 767px) { .kort--tjanst:not(.kort--pris) .kort__punkter { display: none; } }
.kort__knappar .textlank { white-space: nowrap; }
.ministeg li::before { align-self: start; }
.vagar__rubrik { font-size: var(--h2); }
.kort-not { justify-content: flex-start; text-align: left; }

/* efterkontroll CV-bygget 2026-10-19 */
@media (min-width: 768px) {
  .tjanster--cv:has(.kort__marke) > .kort:not(:has(.kort__marke))::before { content: ""; flex: none; height: calc(20px + var(--s3)); }
}
.sektion--cream .student { background: var(--paper); }
@media (min-width: 900px) { .student__priser { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.student__priser div { align-content: end; }
/* Tjänster: trion behöver bredd; under 1180 px står den under texten */
@media (max-width: 1179px) {
  .hero--sida:has(.trio) .hero__inre { grid-template-columns: minmax(0, 1fr); }
  .hero--sida:has(.trio) .trio { justify-self: start; }
}
.trio__ark { min-width: 0; }
.dok__ark--mini { overflow: hidden; }
/* CV-sidan: den engelska versionen sticker upp till höger, minimallen klipper inga ord */
.dok-yta--cv .dok__lager--1 { transform: translate(22px, -28px) rotate(-1.6deg); }
@media (max-width: 599px) { .dok-yta--cv .dok__lager--1 { transform: translate(12px, -22px) rotate(-1.4deg); } }
.ats__mall .ats__liten { font-size: 8.5px; letter-spacing: .04em; overflow-wrap: anywhere; }
/* CV-sidan: minimallens etiketter får aldrig klippas (Emma 2026-10-19). Vanliga bokstäver, ingen spärrning, får radbrytas hela ord. */
.ats__mall .ats__liten { font-size: 9.5px; letter-spacing: 0; text-transform: none; overflow-wrap: normal; word-break: normal; hyphens: manual; line-height: 1.25; }
.ats__sida, .ats__huvud { min-width: 0; }
.ats__mall { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
/* under 1180 px står jämförelsen under texten, så att minimallen får bredd */
@media (max-width: 1179px) { .delad:has(.ats) { grid-template-columns: minmax(0, 1fr); } .delad:has(.ats) .ats { max-width: 640px; } }

/* Hem: CV som eget brett kort under de tre LinkedIn-korten */
.kort--bred { margin-top: var(--s5); display: grid; gap: var(--s5); align-items: start; padding: clamp(28px, 3vw, 44px); }
.kort--bred .kort__ogon { margin-bottom: var(--s2); font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); }
.kort--bred .kort__punkter { margin: 0; }
.kort--bred .kort__pris { margin: 0; }
.kort--bred .kort__paket { margin-top: var(--s2); font-size: var(--t14); color: var(--ink-3); }
.kort--bred .kort__mer { padding-top: var(--s4); }
@media (min-width: 900px) {
  .kort--bred { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); gap: var(--s7); align-items: center; }
}
.kort--bred { min-height: 0; padding-block: clamp(28px, 2.6vw, 40px); }
.kort--bred .kort__pris { display: grid; gap: 2px; }
.kort--bred .kort__pris b { font-size: var(--t18); font-weight: 500; color: var(--ink); }
.kort--bred .kort__pris span { font-size: var(--t14); color: var(--ink-3); }
/* frågorna på Hem: inga siffror (det är ett urval, inte hela listan) */
.fragekort__lista li { grid-template-columns: 22px 1fr; }
.fragekort__lista li::before { content: ""; width: 10px; height: 1.5px; align-self: center; background: var(--gold-500); }
.fragekort__fler { margin-top: var(--s3); font-family: var(--serif); font-style: italic; font-size: var(--t20); color: var(--ink-3); }
.kort--tjanst.kort--bred:not(.kort--pris) { min-height: 0; padding-block: clamp(28px, 2.6vw, 40px); }

/* ==========================================================================
   LOOPAR (2026-10-19): profilkortet och guldpennan spelas om och om igen, med paus
   ========================================================================== */
.pk__rubrik .fore { animation: pkForeL 9s ease .6s infinite both; }
.pk__rubrik .fore b { animation: pkStrykL 9s ease .6s infinite both; }
.pk__rubrik .efter { animation: pkEfterL 9s ease .6s infinite both; }
.pk__marke .fore { animation: pkMarkeForeL 9s ease .6s infinite both; }
.pk__marke .efter { animation: pkMarkeEfterL 9s ease .6s infinite both; }
.pk__kant { animation: pkKantL 9s ease .6s infinite both; }
@keyframes pkStrykL { 0%, 12% { background-size: 0% 2px } 28%, 90% { background-size: 100% 2px } 94%, 100% { background-size: 0% 2px } }
@keyframes pkForeL { 0%, 32% { opacity: 1 } 38%, 92% { opacity: 0 } 98%, 100% { opacity: 1 } }
@keyframes pkEfterL { 0%, 36% { clip-path: inset(0 100% 0 0); opacity: 1 } 52%, 86% { clip-path: inset(0 0 0 0); opacity: 1 } 92%, 100% { clip-path: inset(0 0 0 0); opacity: 0 } }
@keyframes pkMarkeForeL { 0%, 32% { opacity: 1 } 36%, 92% { opacity: 0 } 97%, 100% { opacity: 1 } }
@keyframes pkMarkeEfterL { 0%, 36% { opacity: 0; transform: translateY(4px) } 42%, 88% { opacity: 1; transform: none } 92%, 100% { opacity: 0; transform: none } }
@keyframes pkKantL { 0%, 50% { transform: scaleX(0); opacity: 1 } 62%, 86% { transform: scaleX(1); opacity: 1 } 92%, 100% { transform: scaleX(1); opacity: 0 } }
.pk-yta { position: relative; }
.pk-yta > .paus { position: absolute; right: var(--s3); bottom: var(--s3); width: 32px; height: 32px; }
.pk-yta > .paus .ikon { width: 12px; height: 12px; }

/* guldpennan: ritas, ligger kvar, tonas ut, ritas igen */
.dok.syns .penna path { transition: none; animation: pennaL 8s ease .9s infinite both; }
@keyframes pennaL { 0% { stroke-dashoffset: 1; opacity: 1 } 12% { stroke-dashoffset: 0; opacity: 1 } 84% { stroke-dashoffset: 0; opacity: 1 } 92% { stroke-dashoffset: 0; opacity: 0 } 94%, 100% { stroke-dashoffset: 1; opacity: 0 } }
.is-pausad .penna path { animation-play-state: paused !important; }
.dok-yta { position: relative; }
.dok-yta > .paus { position: absolute; right: 0; bottom: -52px; width: 32px; height: 32px; }
.dok-yta > .paus .ikon { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .penna path { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .pk-yta > .paus, .dok-yta > .paus { display: none; }
}
/* jämförelsen: fyra lika breda kolumner */
.tabell { table-layout: fixed; }
.tabell thead td:first-child { width: 17%; }

/* ==========================================================================
   NATTEN 2026-10-19/20: design- och kundgranskningen
   ========================================================================== */
/* tabellen bara där den får plats; korten två och två i surfplatta */
@media (max-width: 1179px) { .tabell-yta { display: none; } .jmf-mobil { display: grid; } }
@media (min-width: 720px) and (max-width: 1179px) { .jmf-mobil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tabell__marke, .jmf__marke { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: var(--t12); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-gold); }
.jmf__marke { color: var(--gold-700); }
/* formuläret: fälten i samma rad hoppar inte när ett fel visas */
.formular__rad { align-items: start; }
#formular { scroll-margin-top: calc(var(--sidhuvud) + var(--s5)); }
/* profilkortet: gamla rubriken ligger kvar överstruken ovanför den nya */
.pk__rubrik { gap: var(--s2); }
.pk__rubrik .fore, .pk__rubrik .efter { grid-area: auto; }
.pk__rubrik .fore { animation: pkForeL2 9s ease .6s infinite both; }
.pk__rubrik .fore b { animation: pkStrykL2 9s ease .6s infinite both; }
.pk__rubrik .efter { animation: pkEfterL2 9s ease .6s infinite both; }
.pk__marke .fore { animation: pkMarkeForeL2 9s ease .6s infinite both; color: var(--ink); }
.pk__marke .efter { animation: pkMarkeEfterL2 9s ease .6s infinite both; }
@keyframes pkStrykL2 { 0%, 8% { background-size: 0% 2px } 22%, 92% { background-size: 100% 2px } 98%, 100% { background-size: 0% 2px } }
@keyframes pkForeL2 { 0%, 24% { opacity: 1 } 30%, 92% { opacity: .5 } 98%, 100% { opacity: 1 } }
@keyframes pkEfterL2 { 0%, 30% { clip-path: inset(0 100% 0 0); opacity: 1 } 44%, 90% { clip-path: inset(0 0 0 0); opacity: 1 } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0 } }
@keyframes pkMarkeForeL2 { 0%, 26% { opacity: 1 } 30%, 92% { opacity: 0 } 97%, 100% { opacity: 1 } }
@keyframes pkMarkeEfterL2 { 0%, 30% { opacity: 0; transform: translateY(4px) } 36%, 90% { opacity: 1; transform: none } 94%, 100% { opacity: 0; transform: none } }
html:not(.js) .pk__rubrik .fore { opacity: .5; }
html:not(.js) .pk__rubrik .fore b { background-size: 100% 2px; }
/* exemplen på Hem: ett guldstreck i stället för en pil (pilen betyder länk på resten av sajten) */
.exempel__pil { display: none; }
.exempel__efter::before { content: ""; flex: none; width: 14px; height: 1.5px; margin-top: .85em; background: var(--gold-500); }
/* sidfoten i surfplatta: varumärket överst, två spalter, priserna på samma rad */
@media (min-width: 768px) and (max-width: 1023px) {
  .sf__rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf__marke { grid-column: 1 / -1; }
  .sf__tjanst { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); }
  .sf__pris { white-space: nowrap; }
}
/* Hem: två meningar, två rader, i alla bredder */
.hero--start h1 .h1-rad { display: block; }
/* Passar dig om: kolumnerna direkt på beige, inget extra kort */
.passar-ruta { background: transparent; padding: 0; }
/* Om: fotot i full bredd i mobilen */
@media (max-width: 639px) { .hero--sida .hero__bild { width: 100%; } }
/* raden under knapparna i mobilen: bocken hänger vid texten */
@media (max-width: 479px) {
  .cta--center .cta__not { display: flex; justify-content: center; align-items: flex-start; gap: var(--s2); text-align: left; text-wrap: pretty; }
  .cta--center .cta__bock { margin: 3px 0 0; }
}
/* pausknapparna: 44 px att trycka på */
.pk-yta > .paus, .dok-yta > .paus { width: 44px; height: 44px; }
/* CV-jämförelsen: ingen röd färg */
.ats__fel { color: var(--gold-700); text-decoration: line-through; }
/* studentpriset vid priset */
.tjanster__student { margin-top: var(--s5); max-width: 46rem; font-size: var(--t16); color: var(--ink-2); }
.tjanster__student a { color: var(--ink); font-weight: 500; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
@media (max-width: 479px) { .cta--center .cta__not { width: fit-content; max-width: 20em; margin-inline: auto; } }

/* kontrollgranskningen av natten */
[hidden] { display: none !important; }
@media (max-width: 767px) { .nivaer .niva__namn { min-height: 3.3em; min-height: 2lh; } }
@media (min-width: 720px) { .jmf-mobil .jmf:not(.jmf--rek)::before { content: "\00a0"; display: block; margin-bottom: 4px; font-size: var(--t12); } }
.tabell thead th { vertical-align: bottom; }
.faktarad dd .faktarad__student { display: block; margin-top: 2px; color: var(--gold-700); }
.faktarad--mork dd .faktarad__student { color: var(--on-navy-gold); }
@media (prefers-reduced-motion: no-preference) { html.js .pk-yta .pk { padding-bottom: calc(var(--s6) + 40px); } }
.exempel__efter::before { margin-top: .72em; }

/* ==========================================================================
   VANLIGA FRÅGOR (2026-10-19): frågorna i grupper, EkriAI längst ner
   ========================================================================== */
.faq-grupp__titel { margin: var(--s9) 0 var(--s4); font-size: var(--t30); }
.faq-grupp__titel:first-child { margin-top: 0; }
.ekriai-ruta { display: grid; gap: var(--s7); align-items: center; padding: var(--s7) var(--s5); border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sk-sm); }
@media (min-width: 900px) { .ekriai-ruta { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: var(--s8); gap: var(--s8); } }
.ekriai-ruta .statuschip { margin-bottom: var(--s5); }
.ekriai-ruta h2 { max-width: 16em; }
.ekriai-ruta .brodtext { margin-top: var(--s4); max-width: 34em; }
.ekriai-ruta .lankrad { margin-top: var(--s6); align-items: center; }
.ekriai-ruta__chatt { display: grid; gap: var(--s4); padding: var(--s5); border-radius: var(--r-lg); background: var(--cream-100); opacity: .72; }
.ekriai-ruta__bubbla { justify-self: start; max-width: 85%; padding: var(--s3) var(--s4); border-radius: var(--r-md) var(--r-md) var(--r-md) 4px; background: var(--paper); color: var(--ink-2); font-size: var(--t14); }
.ekriai-ruta__falt { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px 6px 6px var(--s4); border-radius: var(--r-rund); background: var(--paper); border: 1px dashed var(--line-strong); color: var(--ink-3); font-size: var(--t14); }
.ekriai-ruta__skicka { display: inline-flex; flex: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--cream-200); color: var(--ink-3); }
.ekriai-ruta__skicka .ikon { width: 16px; height: 16px; }
.ekriai-ruta__falt > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* granskningen av Vanliga frågor */
.sektion--sist { margin-bottom: var(--s8); }
.faq-grupp__titel { margin-top: clamp(var(--s7), 7vw, var(--s9)); }
@media (max-width: 599px) { .ekriai-ruta__chatt { display: none; } }
.ekriai-ruta .brodtext a { color: var(--ink); text-decoration-color: var(--gold-500); text-underline-offset: 3px; }

/* ==========================================================================
   INFÖR PUBLICERINGEN 2026-10-19: design- och kundpanelens fynd
   ========================================================================== */
/* profilkortet på Hem: pausknappen utanför kortet, ingen tom botten, större text */
@media (prefers-reduced-motion: no-preference) { html.js .pk-yta .pk { padding-bottom: var(--s5); } }
.pk-yta > .paus { right: 0; bottom: -54px; }
.kollage .pk__rubrik .fore { font-size: var(--t14); }
.kollage .pk__rubrik .efter { font-size: 23px; }
@media (min-width: 1024px) and (max-width: 1179px) { .kollage .pk-yta { margin-top: -20%; } }

/* ett och samma prisformat på korten */
.kort__fot .kort__pris b, .kort--bred .kort__pris b { font-family: var(--serif); font-size: var(--t30); font-weight: 500; line-height: 1.1; letter-spacing: 0; }
.kort__fot .kort__pris span, .kort--bred .kort__pris span { margin-top: 2px; }
.val__pris { font-family: var(--serif); font-size: var(--t20); }

/* surfplattan: det ensamma kortet får två spalter i stället för att sträckas ut */
@media (min-width: 768px) and (max-width: 1023px) {
  .tjanster.rutnat--3 > .kort:last-child:nth-child(odd) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); align-content: start; }
  .tjanster.rutnat--3 > .kort:last-child:nth-child(odd) > * { grid-column: 1; }
  .tjanster.rutnat--3 > .kort:last-child:nth-child(odd) > :is(.kort__punkter, .lista) { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin: 0; }
  .tjanster.rutnat--3 > .kort:last-child:nth-child(odd)::before { display: none; }
  .tjanster.rutnat--3 > .kort:last-child:nth-child(odd) .kort__knappar .knapp { width: auto; }
}

/* slutblocken: marinblå med guldknapp, som avslutningen på gamla sajten */
.band { background: var(--navy-900); color: var(--on-navy); }
.band h2 { color: var(--on-navy); }
.band .accent { color: var(--gold-400); }
.band p:not(.cta__not):not(.ogonbryn) { color: var(--on-navy-2); }
.band .cta__not { color: var(--on-navy-2); }
.band .cta__bock { color: var(--gold-400); }
.band .textlank { color: var(--on-navy); border-color: var(--gold-400); }
.band .knapp--primar { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.band .knapp--primar:hover { background: var(--gold-400); border-color: var(--gold-400); }
.band .knapp--sekundar { background: transparent; color: var(--on-navy); border-color: rgba(246, 241, 232, .55); }
.band .knapp--sekundar:hover { border-color: var(--on-navy); }
.band__pris { margin-top: var(--s5); font-family: var(--serif); font-size: var(--t24); font-variant-numeric: lining-nums; color: var(--gold-300) !important; font-weight: 500 !important; }

/* menyn: en rad om vad tjänsten är */
.drop__beskr { grid-column: 2; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.mm__under .drop__beskr { color: var(--on-navy-2); }

/* priskorten: beställ direkt som en diskret länk */
.kort__knappar .kort__direkt { justify-self: center; margin: -4px 0 var(--s2); padding: 0; border: 0; font-size: var(--t14); font-weight: 400; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 3px; }
.kort--rek .kort__knappar .kort__direkt { color: var(--on-navy-2); }

/* mobilen: krämblocken går kant i kant, så att korten inuti får plats */
@media (max-width: 599px) {
  .sektion--cream { width: 100%; border-radius: 0; }
}
/* låga skärmar: knapparna i heron hamnar inte i nederkanten */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero--sida .hero__inre { padding-block: var(--s8) var(--s8); }
}

/* ==========================================================================
   EMMAS GENOMGÅNG 19/10 EFTERMIDDAG
   ========================================================================== */
.dok__sprak { display: none; }

/* besiktning och CV: en diskret rad under korten */
.kombi { display: grid; gap: var(--s4) var(--s7); align-items: center; margin-top: var(--s5); padding: var(--s5) var(--s6); border-radius: var(--r-inre, var(--r-lg)); background: var(--paper); border: 1px solid var(--line); }
@media (min-width: 900px) { .kombi { grid-template-columns: minmax(0, 1.4fr) auto auto; } }
.kombi__namn { font-family: var(--serif); font-size: var(--t24); color: var(--ink); line-height: 1.2; }
.kombi__text p:not(.kombi__namn) { margin-top: 4px; font-size: var(--t14); color: var(--ink-2); }
.kombi__pris { display: grid; gap: 2px; }
.kombi__pris b { font-family: var(--serif); font-size: var(--t30); font-weight: 500; color: var(--ink); line-height: 1.1; }
.kombi__pris span { font-size: var(--t14); color: var(--ink-3); }
.kombi__lankar { display: grid; gap: var(--s2); justify-items: start; }
.kombi__lankar .kort__direkt { justify-self: start; margin: 0; }
.kombi__pris b, .student__priser dd, .kort__pris b { font-variant-numeric: lining-nums; }
.kombi__lankar .kort__direkt { font-size: var(--t14); font-weight: 400; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 3px; border: 0; padding: 0; min-height: 0; }
@media (min-width: 1024px) { .tjanster .kort--pris .kort__vem { min-height: 3.3em; min-height: 2lh; } }

/* ==========================================================================
   TREDJE GRANSKNINGEN 19/10 KVÄLL
   ========================================================================== */
/* profilkortet: före-läget är kort, den nya rubriken kommer efter cirka en sekund */
@keyframes pkStrykL2 { 0%, 3% { background-size: 0% 2px } 12%, 92% { background-size: 100% 2px } 98%, 100% { background-size: 0% 2px } }
@keyframes pkForeL2 { 0%, 12% { opacity: 1 } 16%, 92% { opacity: .5 } 98%, 100% { opacity: 1 } }
@keyframes pkEfterL2 { 0%, 14% { clip-path: inset(0 100% 0 0); opacity: 1 } 28%, 90% { clip-path: inset(0 0 0 0); opacity: 1 } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0 } }
@keyframes pkMarkeForeL2 { 0%, 12% { opacity: 1 } 15%, 92% { opacity: 0 } 97%, 100% { opacity: 1 } }
@keyframes pkMarkeEfterL2 { 0%, 15% { opacity: 0; transform: translateY(4px) } 20%, 90% { opacity: 1; transform: none } 94%, 100% { opacity: 0; transform: none } }
/* samma siffror överallt */
.val__pris, .niva__pris, .faktarad dd, .kort__belopp, .kort__pris b, .student__priser dd, .band__pris, .tabell td, .jmf dd, .vag__beskr { font-variant-numeric: lining-nums; }
/* priskorten: rubriken är länken */
.kort__lank--titel { color: inherit; text-decoration: none; }
.kort__lank--titel:hover { text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 4px; }
/* ghostwriting-nivåerna: en knapp per nivå */
.niva__val { margin-top: var(--s4); font-size: var(--t14); }
/* kontakt: sammanfattning, kryssrutor, guldknapp, ingen Boka i sidhuvudet på bokningssidan */
.bestall-sum { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--cream-100); border: 1px solid var(--line); font-size: var(--t14); color: var(--ink); font-variant-numeric: lining-nums; }
.falt--kryss { display: grid; gap: var(--s3); }
.kryss { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); align-items: start; font-size: var(--t14); line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.kryss input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy-800); }
.sida--contact .sh__boka { display: none; }
.formular__fot .knapp--guld { min-width: min(100%, 260px); justify-content: center; }
/* låga laptopskärmar: heron och knapparna får plats */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero--sida h1 { font-size: clamp(44px, 4.6vw, 56px); }
  .hero--sida .hero__ingress { margin-top: var(--s4); }
}
.falt .kryss { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); align-items: start; margin: 0; font-weight: 400; }
.falt .kryss input { margin-top: 3px; }

/* ==========================================================================
   DE ELVA SOM STOD KVAR (19/10 KVÄLL)
   ========================================================================== */
/* Tjänster: jämförelsen är hopfälld under 1180 px, där den annars blir fyra långa listor */
@media (min-width: 1180px) { .jmf-fall { display: none; } }
.jmf-fall__knapp { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); max-width: 34rem; margin-inline: auto; min-height: 52px;
  padding: var(--s3) var(--s5); border: 1px solid var(--line-strong); border-radius: var(--r-rund); background: var(--paper); color: var(--ink);
  font-weight: 500; cursor: pointer; list-style: none; }
.jmf-fall__knapp::-webkit-details-marker { display: none; }
.jmf-fall__knapp::after { content: "+"; font-size: 22px; line-height: 1; color: var(--gold-700); }
.jmf-fall[open] .jmf-fall__knapp::after { content: "\2013"; }
.jmf-fall__knapp:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; }
.jmf-fall[open] .jmf-mobil { margin-top: var(--s5); }

/* Vanliga frågor: rubriken till vänster och frågorna till höger på dator, så att högerhalvan inte står tom */
@media (min-width: 1024px) {
  .ram--smal.faq-grupper { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s9); row-gap: clamp(var(--s7), 6vw, var(--s9)); align-items: start; }
  .ram--smal.faq-grupper > * { max-width: none; }
  .faq-grupper > .faq-grupp__titel { grid-column: 1; margin: 0; }
  .faq-grupper > .faq-grupp__titel + * { grid-column: 2; }
}

/* Tack: förberedelserna och vägarna vidare bredvid varandra */
.tack-delar { display: grid; gap: var(--s8); }
.tack-del { min-width: 0; }
.tack-del .sektion__huvud--center { text-align: left; margin-inline: 0; }
@media (max-width: 959px) { .tack-delar { max-width: calc(800px + 2 * var(--kant)); } }
@media (min-width: 960px) {
  .tack-delar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s9); align-items: start; }
  .tack-delar .vagar__rubrik { margin-top: 0; }
}

/* 404: den stora konturtecknade siffran syns även i mobil, ovanför rubriken */
@media (max-width: 1023px) {
  .stor-siffra { display: block; order: -1; justify-self: start; font-size: clamp(96px, 28vw, 150px); -webkit-text-stroke-width: 1.2px; margin-bottom: var(--s4); }
}

/* juridiken: innehållsförteckningen visar var du är; i mobil fälls den ihop bakom en knapp (ekria.js) */
.innehall a[aria-current] { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--gold-500); padding-left: var(--s3); }
.innehall__knapp { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: var(--s2);
  padding: var(--s2) 0; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: var(--t14); font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; }
.innehall__knapp::after { content: "+"; font-size: 20px; line-height: 1; color: var(--gold-700); }
.innehall__knapp[aria-expanded="true"]::after { content: "\2013"; }
.innehall__knapp:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; }

/* villkoren: ångerformuläret som ett ifyllbart block */
.prosa .angerformular { margin-top: var(--s4); padding: var(--s3) var(--s6); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); }
.prosa .angerformular p { margin: 0; padding: var(--s3) 0; border-bottom: 1px dashed var(--line-strong); }
.prosa .angerformular p:last-child { border-bottom: 0; }

/* Hem: yrkesexemplen visar i mobil att man kan svepa */
.exempel__svep { display: none; }
@media (max-width: 767px) {
  .exempel__svep { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--s2); font-weight: 500; color: var(--gold-700); }
  .exempel__svep .ikon { width: 14px; height: 14px; }
}

/* ==========================================================================
   EXEMPLEN BYTER ARK (Emma 19/10 kväll: "premium och inte lagga")
   ========================================================================== */
/* Tre ark per tjänst ("fade through"): det översta glider undan åt vänster med en lätt lutning och tonas bort. Under
   ligger nästa ark, helt täckande men med texten dold, och reser sig ur bunten. Texten tonas fram först när det förra
   arket är borta, så två texter syns aldrig över varandra. Bara transform och opacity animeras (grafikkortet); vilket
   ark som ligger överst (arkLag) byts i en egen stegvis animation, bara när det inte syns. */
.cv-rullar, .blad-rullar { display: grid; }
.dok__ark--cv { overflow: visible; }
.cv-rullar > :nth-child(1), .blad-rullar > :nth-child(1) { z-index: 3; --ark-d: -1.5s; }
.cv-rullar > :nth-child(2), .blad-rullar > :nth-child(2) { z-index: 2; --ark-d: -16.5s; }
.cv-rullar > :nth-child(3), .blad-rullar > :nth-child(3) { z-index: 1; --ark-d: -9s; }
.cv-rullar > .cv-ex, .blad-rullar > .blad { grid-area: 1 / 1; position: relative; transform-origin: 50% 60%; will-change: transform, opacity;
  animation: arkFlytt 22.5s cubic-bezier(.2, .8, .2, 1) infinite both, arkTona 22.5s linear infinite both, arkLag 22.5s step-end infinite both;
  animation-delay: var(--ark-d); }
.cv-rullar > .cv-ex > .cv__huvud > *, .cv-rullar > .cv-ex > .cv__kropp, .blad-rullar > .blad > * {
  will-change: opacity; animation: arkText 22.5s linear infinite both; animation-delay: var(--ark-d); }
.cv-rullar > .cv-ex { border-radius: 3px; overflow: hidden; background-color: #fffdf8;
  background-image: radial-gradient(120% 70% at 12% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(176, 150, 112, .08)); }
/* tidslinjen per ark (22,5 s, ett ark i taget i 7,5 s): 0 % = det förra arket börjar glida undan.
   I sekunder: nästa reser sig 0–1,1 s; texten tonas fram 0,35–0,65 s; arket glider undan vid 7,5 s och tonas bort 7,65–7,85 s. */
@keyframes arkFlytt {
  0% { transform: translate3d(0, 0, 0) scale(.965); }
  5% { transform: translate3d(0, 0, 0) scale(1); }
  33.333% { transform: translate3d(0, 0, 0) scale(1); animation-timing-function: cubic-bezier(.25, .6, .3, 1); }
  36.111% { transform: translate3d(-8%, -10px, 0) rotate(-3deg) scale(1.01); }
  36.2%, 100% { transform: translate3d(0, 0, 0) scale(.965); }
}
@keyframes arkTona {
  0%, 34% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  34.889% { opacity: 0; }
  41% { opacity: 0; }
  41.111%, 100% { opacity: 1; }
}
@keyframes arkText {
  0%, 1.556% { opacity: 0; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
  2.889% { opacity: 1; }
  41% { opacity: 1; }
  41.111%, 100% { opacity: 0; }
}
/* 2 = nästa (under det översta), 3 = överst, 1 = underst */
@keyframes arkLag { 0% { z-index: 2; } 5.333% { z-index: 3; } 37.511% { z-index: 1; } 72.222% { z-index: 2; } 100% { z-index: 2; } }
/* den som läser kan stanna bytet: muspekaren över arket, eller ett tryck på det i mobil */
.dok-yta:hover :is(.cv-rullar, .blad-rullar) *, .dok-yta:hover :is(.cv-rullar, .blad-rullar) { animation-play-state: paused; }
/* utan JavaScript och med minskad rörelse ligger det första arket stilla överst */
html:not(.js) :is(.cv-rullar > *, .cv-rullar > .cv-ex > .cv__huvud > *, .cv-rullar > .cv-ex > .cv__kropp, .blad-rullar > *, .blad-rullar > .blad > *) { animation: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  :is(.cv-rullar > *, .cv-rullar > .cv-ex > .cv__huvud > *, .cv-rullar > .cv-ex > .cv__kropp, .blad-rullar > *, .blad-rullar > .blad > *) { animation: none; will-change: auto; }
}

/* ==========================================================================
   DESIGNGRANSKNINGEN 19/10 KVÄLL
   ========================================================================== */
/* Tjänster: jämförelseknappen står i linje med rubriken */
.jmf-fall__knapp { margin-inline: 0; }
/* inga ensamma ord sist i stycken */
.band p, .brodtext, .hero__ingress, .kort__vem, .ingress { text-wrap: pretty; }
/* Hem: svep-tipset på en egen rad, i linje med texten */
@media (max-width: 767px) { .exempel__svep { display: flex; width: fit-content; margin: var(--s2) 0 0; } }
/* Tack: spalterna börjar på samma höjd */
.tack-delar .sektion__huvud { margin: 0 0 var(--s5); }
.tack-delar h2 { margin-top: 0; font-size: var(--t30); }
/* 404 i mobil: den stora siffran räcker, ögonbrynet "Fel 404" upprepar den inte */
@media (max-width: 1023px) {
  .hero--papper:has(.stor-siffra) .ogonbryn { display: none; }
  .stor-siffra { margin-bottom: 0; }
}
/* Priser 1024–1179: kortrubriken (med hårt bindestreck) får plats */
@media (min-width: 1024px) and (max-width: 1179px) { .kort--pris .kort__titel { font-size: var(--t24); } }
/* Tjänster-trion: namnen får brytas, men raden under står i linje i alla tre spalterna */
.trio__rad { grid-template-rows: auto auto auto; }
.trio__del { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.trio__vem { display: contents; }
.trio__vem > span:first-child { align-self: end; margin-top: var(--s7); text-align: center; line-height: 1.15; }
.trio__vem > .trio__vem-text { display: block; margin-top: 4px; text-align: center; font-size: var(--t14); color: var(--on-navy); font-family: var(--sans); }
@media (max-width: 599px) { .trio__vem > .trio__vem-text { font-size: var(--t12); } }
/* mobilmenyn: SV/ENG och Boka-knappen ryms på en vanlig mobilskärm */
@media (max-width: 767px) {
  .mm__lank { min-height: 50px; font-size: var(--t24); }
  .mm__under { padding-bottom: var(--s2); gap: 0; }
  .mm__under .drop__lank { padding: 6px var(--s3); }
  .mm__fot { margin-top: var(--s4); }
}

/* paketen: vad kunden sparar står direkt under priset; beloppet i guld (det kunden vinner) */
.kort__spar { display: block; margin-top: 6px; font-size: var(--t14); line-height: 1.45; color: var(--ink-2); }
.kort__spar b { font-weight: 500; color: var(--gold-700); font-variant-numeric: lining-nums; }

/* slutgranskningen: inga ensamma ord sist i stycken och listor; juridiken med läsbar radlängd (Refactoring UI: 45–75 tecken) */
p, li, dd { text-wrap: pretty; }
.langtext .prosa { max-width: 36em; }

/* prissidan: paketet är mitt förslag i CV-raden (mörkt kort som profiloptimeringen) */
.kort--rek .kort__spar { color: var(--on-navy-2); }
.kort--rek .kort__spar b { color: var(--on-navy-gold); }
/* studentpriserna bakom en knapp; texten om rabatten står kvar */
.student--hopfalld { grid-template-columns: minmax(0, 1fr); }
.student__knapp { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 4px; }
.student__knapp::-webkit-details-marker { display: none; }
.student__knapp::after { content: "+"; display: inline-block; font-size: 20px; line-height: 1; color: var(--gold-700); }
.student__fler[open] .student__knapp::after { content: "\2013"; }
.student__knapp:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; border-radius: var(--r-sm); }
.student__fler .student__priser { margin-top: var(--s4); }
@media (min-width: 900px) { .student--hopfalld .student__priser { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* paketkortets etikett på mörkt kort: ljus guldton (kontrast minst 4,5:1) */
.kort--rek.kort--paket .kort__marke { color: var(--on-navy-gold); }

/* Tjänster: fyra lappar (CV och personligt brev tillagd); i mobil två och två */
.trio.trio--fyra { width: min(100%, 600px); }
.trio--fyra .trio__rad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trio--fyra .trio__del--01 .trio__ark { transform: rotate(-3deg) translateY(22px); }
.trio--fyra .trio__del--02 { position: relative; z-index: 1; }
.trio--fyra .trio__del--02 .trio__ark { transform: rotate(-1deg) translateY(-6px); }
.trio--fyra .trio__del--03 { position: relative; z-index: 1; }
.trio--fyra .trio__del--03 .trio__ark { transform: rotate(1deg) translateY(-6px); }
.trio--fyra .trio__del--04 .trio__ark { transform: rotate(3deg) translateY(22px); }
.trio--fyra.vantar .trio__ark { transform: none; }
.trio--fyra .dok__ark--mini { padding: 14px 12px 16px; height: 236px; }
.trio--fyra .dok__ark--mini .dok__titel { font-size: 18px; margin-top: 12px; }
.trio--fyra .dok-mini li, .trio--fyra .dok-mini__brod { font-size: 9.5px; }
.trio--fyra .dok-mini__ny { font-size: 13.5px; }
.trio--fyra .trio__vem > span:first-child { font-size: var(--t18); }
@media (max-width: 599px) {
  .trio--fyra .trio__rad { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0 14px; }
  .trio--fyra .trio__del--01 .trio__ark { transform: rotate(-2deg) translateY(6px); }
  .trio--fyra .trio__del--02 .trio__ark { transform: rotate(1.5deg); }
  .trio--fyra .trio__del--03 .trio__ark { transform: rotate(-1.5deg) translateY(6px); }
  .trio--fyra .trio__del--04 .trio__ark { transform: rotate(2deg); }
  .trio--fyra .trio__del--03 .trio__vem > span:first-child, .trio--fyra .trio__del--04 .trio__vem > span:first-child { margin-top: var(--s5); }
  .trio--fyra .dok__ark--mini { height: 210px; padding: 12px 10px 14px; }
  .trio--fyra .dok__ark--mini .dok__titel { font-size: 16px; }
  .trio--fyra .dok-mini li, .trio--fyra .dok-mini__brod { font-size: 9px; }
  .trio--fyra .dok-mini__ny { font-size: 12.5px; }
  .trio--fyra .trio__vem > span:first-child { font-size: var(--t16); }
}
/* Tjänster: med fyra lappar får heron en jämnare spaltindelning från 1180 px, så att lapparna inte blir för smala */
@media (min-width: 1180px) { .hero--sida:has(.trio--fyra) .hero__inre { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); } .trio.trio--fyra { width: min(100%, 640px); } }

/* ångerfunktionen: formuläret i samma stil som kontaktsidan */
.formular.angra { display: grid; gap: var(--s5); }
.formular.angra .formular__fot { display: flex; }