/* =============================================================
   JOBB- OCH STUDIEGUIDEN – DESIGNSYSTEM
   Alla färger, storlekar och avstånd styrs härifrån.
   ============================================================= */
:root {
  /* Färger */
  --petrol: #026D75;          /* huvudfärg: rubrikord, länkar, mörka ytor */
  --petrol-dark: #014F55;     /* hover */
  --petrol-tint: #E7F2F2;     /* ljus petrol-yta */
  --orange: #FFA300;          /* accent: huvudknapp + små detaljer (aldrig textfärg på vitt) */
  --orange-dark: #E89400;
  --orange-tint: #FFF3DD;
  --turkos: #72C2C1;
  --persika: #FC7944;
  --teal-tint: #E6F3F3;

  --ink: #1A1A1A;             /* rubriker */
  --text: #4A4A4A;            /* brödtext */
  --muted: #6B6B6B;
  --line: #E7E3DC;            /* tunna linjer */
  --bg: #FFFFFF;
  --bg-tint: #F8F6F2;         /* varm beige, varannan sektion */

  /* Typografi */
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --h1: clamp(2.25rem, 4.6vw + 0.5rem, 3.75rem);   /* 36 → 60px */
  --h2: clamp(1.75rem, 2.4vw + 0.75rem, 2.5rem);   /* 28 → 40px */
  --h3: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);    /* 18 → 20px */
  --body: clamp(1rem, 0.25vw + 0.95rem, 1.125rem); /* 16 → 18px */

  /* Avstånd */
  --container: 1200px;
  --gutter: 20px;
  --section: clamp(72px, 9vw, 120px);

  /* Former */
  --r-btn: 2px;
  --r-card: 0;
  --r-img: 0;
  --shadow: none;
}

/* ===== GRUND ===== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); }
ul, ol { list-style: none; }

h1, h2, h3 { color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: var(--h1); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: var(--h2); font-weight: 750; letter-spacing: -0.03em; }
h3 { font-size: var(--h3); font-weight: 650; line-height: 1.3; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 32px; } }

.section { padding: var(--section) 0; }
.section-tint { background: var(--bg-tint); }
.hero + .section { padding-top: clamp(32px, 4vw, 56px); }

/* Liten etikett ovanför rubriker */
.label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--petrol);
  margin-bottom: 14px;
}
.label-light { color: var(--orange); }

.section-head { max-width: 680px; margin-bottom: 56px; }
.section-lead { margin-top: 18px; font-size: 1.125rem; }
.small { font-size: 0.95rem; color: var(--muted); }

/* Tillgänglighet */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-btn);
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Ikoner */
.icon {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===== KNAPPAR ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-btn);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: var(--ink); }      /* mörk text = god kontrast */
.btn-primary:hover { background: var(--orange-dark); }
.btn-primary .icon { transition: transform .2s; }
.btn-primary:hover .icon { transform: translateX(3px); }
.btn-outline { border-color: var(--petrol); color: var(--petrol); }
.btn-outline:hover { background: var(--petrol); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.95rem; }

.text-link {
  font-weight: 600;
  color: var(--petrol);
  text-decoration: underline;
  text-decoration-color: rgba(2,109,117,.35);
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration-color: var(--petrol); }

/* ===== NAVIGATION ===== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo img { height: 56px; width: auto; }

.nav { display: flex; align-items: center; gap: 28px; }

/* Menylänkarna: ett orange streck dras in vid hover.
   Sidan man står på (aria-current="page") får petrol text och strecket kvar. */
.nav-link {
  position: relative;
  color: var(--ink); text-decoration: none;
  font-weight: 500; font-size: 0.95rem; white-space: nowrap;
  padding: 8px 0;
  transition: color .2s;
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--orange);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.6,0,.2,1);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current="page"] { color: var(--petrol); font-weight: 600; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Ring-knappen längst till höger */
.nav-call { margin-left: 4px; white-space: nowrap; }

.menu-toggle { display: none; }
.nav-extra { display: none; }   /* visas bara i mobilmenyn */

/* ===== SPRÅKVÄLJARE =====
   Medvetet diskret (jordglob + SV/EN, ingen ram) så att den inte
   tävlar med den orange Ring-knappen. */
.logo { order: 1; }
.nav { order: 2; margin-left: auto; }
.lang { order: 3; position: relative; margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line); }
.menu-toggle { order: 4; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 4px;
  background: none; border: none;
  font: 600 0.875rem var(--font); letter-spacing: .04em; color: var(--ink);
  cursor: pointer;
  transition: color .2s;
}
.lang-btn:hover, .lang.is-open .lang-btn { color: var(--petrol); }
.lang-btn .icon { width: 18px; height: 18px; }
.lang-btn .lang-caret { width: 14px; height: 14px; transition: transform .2s; }
.lang.is-open .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 160px;
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 6px 0;
  display: none;
  z-index: 120;
}
.lang.is-open .lang-menu { display: block; }
.lang-menu button {
  display: block; width: 100%;
  padding: 10px 16px;
  background: none; border: none; text-align: left;
  font: 500 0.95rem var(--font); color: var(--ink);
  cursor: pointer;
}
.lang-menu button:hover { background: var(--bg-tint); }
.lang-menu button[aria-current="true"] { font-weight: 700; color: var(--petrol); }
.lang-menu button[aria-current="true"]::after { content: " ✓"; }

/* Arabiska m.fl. läses från höger: spegla det som behövs */
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .lang-menu button { text-align: right; }

/* ===== HERO ===== */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 112px); align-items: center; }
.hero h1 { margin-bottom: 24px; font-size: clamp(2.25rem, 3.8vw + 0.5rem, 3.4rem); }
.hl { color: var(--petrol); }
.hero-lead { font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem); max-width: 520px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  aspect-ratio: 8 / 7;
  object-fit: cover;
  border-radius: var(--r-img);
}
/* Former bakom bilden – samma formspråk som på WordPress-sidan:
   en turkos cirkel och en orange kvadrat, med vit kontur */
.hero-media img { position: relative; z-index: 1; }
.shape { position: absolute; z-index: 0; border: 3px solid #fff; }
.shape-circle {
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: var(--turkos);
  left: -6%; top: -10%;
}
.shape-square {
  width: 30%; aspect-ratio: 1;
  background: var(--orange);
  right: -6%; bottom: -8%;
}
.ka-badge { z-index: 2; }
.ka-badge {
  position: absolute;
  left: -24px; bottom: 28px;
  background: var(--orange);
  color: var(--ink);
  padding: 14px 20px;
}
.ka-badge-label { display: block; font-size: 0.8rem; font-weight: 600; color: #4A3300; }
.ka-badge-label { margin-bottom: 4px; }
.ka-badge-row { display: flex; align-items: baseline; gap: 10px; font-size: 1.15rem; font-weight: 800; color: var(--ink); letter-spacing: 0.02em; line-height: 1.4; }
.ka-badge-row small { width: 46px; font-size: 0.8rem; font-weight: 600; color: #4A3300; letter-spacing: 0; }

/* ===== KARUSELL: DET HÄR FÅR DU HJÄLP MED ===== */
#hjalp .section-head { margin-bottom: 28px; }
.carousel { position: relative; }
.carousel-controls { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 20px; }
@media (min-width: 900px) {
  /* På dator: pilarna i höjd med rubrikens text, uppe till höger */
  .carousel-controls { position: absolute; right: 0; top: -76px; margin: 0; }
}
.carousel-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.carousel-btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.carousel-btn:disabled { opacity: .3; cursor: default; }

.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;                 /* dölj scrollbaren */
  padding: 4px 2px 8px;
  margin: 0 -2px;
  cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel-track.dragging .offer { pointer-events: none; }

/* Korten: bild/färgyta överst, text under (3,3 kort syns på dator) */
.offer {
  flex: 0 0 calc((100% - 60px) / 3.3);
  scroll-snap-align: start;
}
.offer-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  transition: transform .35s ease;
}
.offer:hover .offer-visual { transform: translateY(-4px); }
.offer:hover .offer-art { transform: translateY(-6px) rotate(-6deg); }
.offer-art {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  position: relative; z-index: 1;
  width: 30%; height: auto;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.tone-petrol  { background: var(--petrol); color: #fff; }
.tone-orange  { background: var(--orange); color: var(--ink); }
.tone-turkos  { background: var(--turkos); color: var(--petrol-dark); }
.tone-persika { background: var(--persika); color: #fff; }

.offer-body { padding-right: 8px; }
.offer-body h3 { font-size: 1.125rem; font-weight: 650; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 6px; }
.offer-body p { font-size: 1rem; line-height: 1.55; color: var(--muted); }

/* ===== PROCESS ===== */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.process li { position: relative; }
.process-nr {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: var(--petrol); color: #fff;
  font-weight: 700; font-size: 1.1rem;
  margin-bottom: 22px;
}
/* Linje som binder ihop stegen */
.process li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px; left: 64px; right: -28px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}
.process h3 { margin-bottom: 10px; }
/* Linjen fylls i med petrol när man scrollar dit */
.process li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 24px; left: 64px; right: -28px;
  height: 2px; z-index: 1;
  background: var(--petrol);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.6,0,.2,1) calc(var(--d, 0ms) + 350ms);
}
.process li.in-view::before { transform: scaleX(1); }
.process-nr { position: relative; z-index: 2; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.process li:hover .process-nr { transform: rotate(-8deg) scale(1.08); }

/* ===== SÅ VÄLJER DU OSS ===== */
.choose {
  background: var(--petrol);
  color: rgba(255,255,255,.85);
  padding: clamp(32px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
}
.choose h2 { color: #fff; margin-bottom: 16px; }
.choose h3 { color: #fff; margin-bottom: 6px; }
.choose strong { color: #fff; }

.ka-intro { margin-top: 28px; font-size: 0.95rem; }
.ka-box + .ka-box { margin-top: 12px; }
.ka-box {
  margin-top: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-card);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
}
.ka-box-label { grid-column: 1; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .1em; }
.ka-box-number { grid-column: 1; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; color: #fff; letter-spacing: 0.04em; }
.copy-btn {
  grid-column: 2; grid-row: 1 / 3;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  background: var(--orange); color: var(--ink);
  border: none; border-radius: var(--r-btn);
  font: 600 0.95rem var(--font);
  cursor: pointer;
  transition: background .2s;
}
.copy-btn:hover { background: var(--orange-dark); }
.copy-btn.copied { background: #fff; }

.choose-steps { display: flex; flex-direction: column; justify-content: center; }
/* Siffran och rubriken på samma rad, exakt centrerade mot varandra */
.choose-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 20px;
  row-gap: 4px;
  align-items: center;
  padding: 22px 0;
}
.choose-steps li > div { display: contents; }
.choose-steps .step-nr { grid-column: 1; grid-row: 1; }
.choose-steps h3 { grid-column: 2; grid-row: 1; margin: 0; }
.choose-steps p  { grid-column: 2; grid-row: 2; }
.choose-steps li + li { border-top: 1px solid rgba(255,255,255,.15); }
.step-nr {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 2px solid var(--orange);
  color: var(--orange); font-weight: 700;
}
.choose-help { text-align: center; margin-top: 28px; }
.choose-help a { font-weight: 600; }

/* ===== SPRÅK ===== */
.languages { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: 56px; align-items: center; }
.languages-text h2 { margin-bottom: 18px; }
.languages-text p + p { margin-top: 16px; }
/* Pratbubblor – handritad stil med kontur, som på WordPress-sidan */
.section-languages { background: #FFF8EC; }   /* varm ljus ton, låter färgerna lysa */
.section-languages h2 .teal { color: var(--petrol); }

.bubbles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
}
.bubble {
  position: relative;
  aspect-ratio: 1.7 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 10px 20px;             /* plats för svansen */
  text-align: center;
  line-height: 1.15;
  color: var(--ink);
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.bubble-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  z-index: 0;
}
.bubble.flip .bubble-bg { transform: scaleX(-1); }
.bb-shape {
  stroke: #2F2F2F; stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.bb-shine {
  fill: none; stroke: #2F2F2F; stroke-width: 1.6; stroke-linecap: round;
  opacity: .55;
  vector-effect: non-scaling-stroke;
}
.bubble span, .bubble small { position: relative; z-index: 1; }
.bubble span { font-size: clamp(1.15rem, 1vw + .8rem, 1.5rem); font-weight: 800; letter-spacing: -0.01em; }
.bubble small { font-size: .875rem; color: #3D3D3D; margin-top: 4px; }

/* Färger: exakt varumärkets palett */
.bubble-orange  { fill: var(--orange); }
.bubble-turkos  { fill: var(--turkos); }
.bubble-persika { fill: var(--persika); }
.bubble-petrol  { fill: var(--petrol); color: #fff; }
.bubble-petrol small { color: rgba(255,255,255,.8); }

.bubble:hover { transform: rotate(calc(var(--rot, 0deg) * -1)) translateY(-4px); }

/* Bubblorna poppar in när man scrollar dit */
.js .bubble.reveal { opacity: 0; transform: scale(.6) rotate(calc(var(--rot, 0deg) * 4)); }
.js .bubble.reveal.in-view {
  opacity: 1; transform: rotate(var(--rot, 0deg));
  transition: opacity .4s ease var(--d, 0ms), transform .55s cubic-bezier(.34,1.56,.64,1) var(--d, 0ms);
}
.js .bubble.reveal.in-view:hover { transform: rotate(calc(var(--rot, 0deg) * -1)) translateY(-4px); transition-delay: 0ms; }

/* ===== OM OSS ===== */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.statement {
  font-size: clamp(1.5rem, 2.2vw + 0.6rem, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  border-left: 4px solid var(--orange);
  padding-left: 28px;
}
.about-text > p { font-size: 1.125rem; margin-bottom: 28px; }
.about-points li { padding: 16px 0; border-top: 1px solid var(--line); }
.about-points strong { color: var(--ink); }

/* ===== KONTOR ===== */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.office {
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
}
.office img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.office { overflow: hidden; }
.office:hover img { transform: scale(1.04); }
.office-body { padding: 28px 32px 32px; }
.office h3 { font-size: 1.5rem; margin-bottom: 8px; }
.hours {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 20px;
  margin: 18px 0 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.hours dt { color: var(--muted); }
.hours dd { color: var(--ink); font-weight: 600; }
.office-ka { margin-top: 10px; font-size: 0.95rem; }
.office-ka strong { color: var(--ink); letter-spacing: 0.02em; }

/* ===== AVSLUTANDE CTA ===== */
.final-cta { background: var(--ink); color: rgba(255,255,255,.8); padding: var(--section) 0; text-align: center; }
.final-cta-inner { max-width: 720px; }
.final-cta h2 { color: #fff; margin-bottom: 16px; }
.final-cta strong { color: var(--orange); }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }

/* ===== FOOTER ===== */
.footer { background: var(--bg-tint); padding-top: 64px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-logo { height: 40px; width: auto; margin-bottom: 16px; }
.footer-title { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink); margin-bottom: 14px; }
.footer li { margin-bottom: 8px; }
.footer a { color: var(--text); text-decoration: none; }
.footer a:hover { color: var(--petrol); text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding-top: 20px; padding-bottom: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--muted);
}

/* ===== MJUK INTONING NÄR MAN SCROLLAR ===== */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .btn .icon, .offer, .bubble { transition: none; }
  .js .bubble.reveal { opacity: 1; transform: rotate(var(--rot, 0deg)); }
  .mark { background-size: 100% 0.3em; transition: none; }
  .process li::before { transform: none !important; transition: none !important; }
  .rotator-word { transition: none; }
  .carousel-track { scroll-behavior: auto; }
}


/* =============================================================
   LIV OCH RÖRELSE
   ============================================================= */

/* Roterande ord i huvudrubriken */
.rotator {
  display: block;
  position: relative;
  height: 1.1em;
  overflow: hidden;
  color: var(--orange);
}
.rotator-word {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .7s ease;          /* mjuk fade in / fade out */
}
.rotator-word.is-active { opacity: 1; }

/* Vågor – samma signatur som på visitkorten */
.hero-color { padding-bottom: clamp(110px, 12vw, 180px); }
.wave {
  position: absolute; left: 0; right: 0;
  width: 100%; height: clamp(60px, 8vw, 120px);
  display: block;
  pointer-events: none;
}
.wave-hero { bottom: -1px; z-index: 1; }
.wave-orange { fill: var(--orange); }
.wave-bg { fill: #fff; }                         /* samma färg som sektionen under */
.final-cta { position: relative; padding-top: calc(var(--section) + clamp(50px, 7vw, 100px)); }
.wave-cta { top: -1px; }
.wave-top { fill: var(--bg-tint); }              /* samma färg som sektionen ovanför (kontoren) */

/* Markerade ord i rubriker – en färgpenna drar över ordet när det syns */
.mark {
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.3em;
  transition: background-size .8s cubic-bezier(.6,0,.2,1) .35s;
  padding: 0 2px;
}
.mark-teal { background-image: linear-gradient(var(--turkos), var(--turkos)); }
.in-view .mark, .no-js .mark { background-size: 100% 0.3em; }
.hl-orange { color: var(--orange); }

/* =============================================================
   FÄRG: sektioner med starkare färg
   ============================================================= */
/* Hero i petrol – det första man ser */
.hero-color { background: var(--petrol); color: rgba(255,255,255,.88); position: relative; overflow: hidden; }
.hero-color .container { position: relative; z-index: 1; }
.hero-color h1 { color: #fff; }
.hero-color .hl { color: var(--orange); }
.text-link-light { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.text-link-light:hover { text-decoration-color: #fff; }

/* Språk på ljus turkos */


/* "Vad är Rusta och matcha?" i orange */
.choose { background: var(--orange); color: #3A2A00; }
.choose .label-light { color: #5C3D00; }
.choose h2, .choose h3, .choose strong { color: var(--ink); }
.choose h2 { margin-left: -0.05em; }   /* optisk justering: V:et ser annars indraget ut */
.ka-box { background: #fff; border-color: transparent; }
.ka-box-label { color: var(--muted); }
.ka-box-number { color: var(--ink); }
.copy-btn { background: var(--ink); color: #fff; }
.copy-btn:hover { background: var(--petrol); }
.copy-btn.copied { background: var(--petrol); color: #fff; }
.choose-steps li + li { border-top-color: rgba(26,26,26,.15); }
.step-nr { border-color: var(--ink); color: var(--ink); }

/* Avslutning i mörk petrol, ramar in sidan tillsammans med heron */
.final-cta { background: var(--petrol-dark); }

/* =============================================================
   UNDERSIDOR
   ============================================================= */
/* Sidans topp: petrol yta, rubrik, ingress och vågen under */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--petrol); color: rgba(255,255,255,.88);
  padding: clamp(48px, 6vw, 96px) 0 clamp(110px, 12vw, 170px);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; max-width: 820px; font-size: clamp(2.25rem, 3.4vw + 0.6rem, 3.25rem); margin-bottom: 20px; }
.page-hero h1 .hl { color: var(--orange); }
.page-hero-lead { max-width: 640px; font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem); }
.page-hero .hero-actions { margin-top: 32px; }
/* Cirkel + kvadrat med vit kontur, samma formspråk som startsidan */
.page-hero .shape-circle { width: clamp(140px, 18vw, 260px); left: auto; right: 14%; top: 18%; }
.page-hero .shape-square { width: clamp(90px, 11vw, 160px); right: 6%; bottom: 30%; }
.page-hero + .section { padding-top: clamp(40px, 5vw, 64px); }

/* Läsvänlig textkolumn */
.prose { max-width: 720px; }
.prose h2 { margin-bottom: 18px; }
.prose h3 { margin: 32px 0 8px; }
.prose p + p { margin-top: 16px; }
.prose ul.check { margin-top: 20px; }

/* Lista med bockar */
.check li { position: relative; padding: 10px 0 10px 36px; border-top: 1px solid var(--line); }
.check li:last-child { border-bottom: 1px solid var(--line); }
.check li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--petrol); border-bottom: 2.5px solid var(--petrol);
  transform: rotate(-45deg);
}
.check strong { color: var(--ink); }

/* Två kolumner: text + ruta */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: start; }

/* Tre steg i rad (process med tre kolumner) */
.process-3 { grid-template-columns: repeat(3, 1fr); }

/* Alla erbjudanden som rutnät i stället för karusell */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 24px; }
.offer-grid .offer { flex: none; }

/* Frågor och svar – fälls ut när man klickar */
.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq + .faq-group-title { margin-top: 64px; }
.faq-group-title { font-size: 1.5rem; margin-bottom: 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  font-size: 1.125rem; font-weight: 650; color: var(--ink); line-height: 1.35;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Plustecknet som blir ett kryss */
.faq summary::after {
  content: ""; flex-shrink: 0;
  width: 36px; height: 36px;
  border: 1.5px solid var(--ink);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat;
  transition: transform .3s, background-color .2s, border-color .2s;
}
.faq summary:hover::after { background-color: var(--orange-tint); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--orange); border-color: var(--orange); }
.faq-answer { padding: 0 60px 28px 0; }
.faq-answer p + p { margin-top: 12px; }

/* Kontaktkort: telefon och mejl */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(28px, 4vw, 44px);
  text-decoration: none;
  transition: transform .25s;
}
.contact-card:hover { transform: translateY(-4px); }
.contact-card .icon { width: 32px; height: 32px; margin-bottom: 18px; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.contact-card:hover .icon { transform: rotate(-10deg) scale(1.1); }
.contact-card-label { font-size: 0.95rem; font-weight: 600; }
.contact-card-value { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.contact-card-note { margin-top: 8px; font-size: 0.95rem; }
.contact-card.tone-orange .contact-card-label, .contact-card.tone-orange .contact-card-note { color: #4A3300; }
.contact-card.tone-petrol { color: rgba(255,255,255,.85); }
.contact-card.tone-petrol .contact-card-value { color: #fff; }

/* Ruta med KA-nummer på ljus bakgrund */
.ka-panel { background: var(--orange); color: #3A2A00; padding: clamp(28px, 4vw, 44px); }
.ka-panel h2, .ka-panel h3 { color: var(--ink); }
.ka-panel h3 { margin-bottom: 4px; }

/* Avslutningens våg när sektionen ovanför är vit */
.final-cta.after-white .wave-top { fill: #fff; }

/* =============================================================
   SURFPLATTA (under 1024px)
   ============================================================= */
@media (max-width: 1024px) {
  .process { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .process li::after, .process li::before { display: none; }
  .offer { flex-basis: calc((100% - 40px) / 2.3); }
  .hero-grid { gap: 40px; }
  .choose { grid-template-columns: 1fr; }
  .languages, .about { grid-template-columns: 1fr; gap: 40px; }
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .process-3 { grid-template-columns: 1fr 1fr; }
  .page-hero .shape { opacity: .35; }
}

/* =============================================================
   MOBIL MENY (under 900px)
   ============================================================= */
@media (max-width: 900px) {
  .header-inner { height: 72px; }
  .logo img { height: 46px; }

  /* Språkväljaren står bredvid menyknappen */
  .lang { margin-left: auto; margin-right: 4px; padding-left: 0; border-left: none; }

  .menu-toggle {
    display: grid; place-items: center;
    width: 48px; height: 48px; margin-right: -8px;
    background: none; border: none; cursor: pointer;
  }
  .menu-toggle-bar, .menu-toggle-bar::before, .menu-toggle-bar::after {
    display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
    position: relative; transition: transform .25s, background .25s;
  }
  .menu-toggle-bar::before, .menu-toggle-bar::after { content: ""; position: absolute; left: 0; }
  .menu-toggle-bar::before { top: -7px; }
  .menu-toggle-bar::after { top: 7px; }
  .menu-open .menu-toggle-bar { background: transparent; }
  .menu-open .menu-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

  /* Menyn fäller ut under sidhuvudet och fyller skärmen */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - 72px); height: calc(100dvh - 72px);
    overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    padding: 8px var(--gutter) 32px;
    border-top: 1px solid var(--line);
    display: none;
  }
  .menu-open .nav { display: flex; animation: menyIn .3s cubic-bezier(.2,.7,.2,1); }
  .header.menu-open { background: #fff; }

  .nav-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0;
    font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em;
    border-bottom: 1px solid var(--line);
  }
  /* Strecket blir en liten pil till höger */
  .nav-link::after,
  .nav-link:hover::after,
  .nav-link[aria-current="page"]::after {
    position: static;
    width: 9px; height: 9px;
    background: none;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-right: 6px;
    transition: transform .2s;
  }
  .nav-link:hover::after { transform: translateX(4px) rotate(45deg); }
  .nav-link[aria-current="page"] { box-shadow: inset 4px 0 0 var(--orange); padding-left: 16px; }

  .nav-call { margin: 28px 0 0; width: 100%; min-height: 56px; font-size: 1.05rem; }
  .nav-extra { display: block; margin-top: 28px; text-align: center; font-size: 0.95rem; color: var(--muted); }
  .nav-extra a { color: var(--petrol); font-weight: 600; }

  html.meny-oppen { overflow: hidden; }   /* sidan bakom scrollar inte */
}
@keyframes menyIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-open .nav { animation: none; } }

/* =============================================================
   MOBIL (under 640px)
   ============================================================= */
@media (max-width: 640px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .hero-actions .btn { width: 100%; }
  .shape-circle { left: -4%; top: -7%; }
  .shape-square { right: -3%; bottom: -5%; }
  .hero-media img { aspect-ratio: 4 / 3; }
  .ka-badge { left: 12px; bottom: 12px; padding: 10px 16px; }
  .ka-badge-row { font-size: 1rem; }


  .section-head { margin-bottom: 36px; }
  .process, .offices { grid-template-columns: 1fr; }
  .offer { flex-basis: 78%; }
  .carousel-controls { margin-bottom: 16px; }
  .process { gap: 32px; }
  .process li { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; }
  .process-nr { grid-row: 1 / 3; margin-bottom: 0; }
  .process li:not(:last-child)::after {
    display: block;
    top: 56px; bottom: -28px; left: 23px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px);
  }
  .process li:not(:last-child)::before {
    display: block;
    top: 56px; bottom: -28px; left: 23px; right: auto; width: 2px; height: auto;
    transform: scaleY(0); transform-origin: top;
  }
  .process li.in-view::before { transform: scaleY(1); }

  .ka-box { grid-template-columns: 1fr; }
  .copy-btn { grid-column: 1; grid-row: auto; margin-top: 12px; justify-content: center; }

  .bubbles { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .bubble:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .office-body { padding: 22px 24px 26px; }
  .final-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  .process-3, .offer-grid, .contact-cards { grid-template-columns: 1fr; }
  .page-hero .shape { display: none; }
  .faq summary { font-size: 1.05rem; padding: 20px 0; }
  .faq-answer { padding-right: 0; }
}


/* =============================================================
   SIDHUVUD I PETROL
   Sidhuvudet sitter ihop med den petrolfärgade toppen.
   Loggan är vit med orange J (images/logo-vit.png).
   Vill du tillbaka till vitt sidhuvud: ta bort hela detta block
   och byt logo-vit.png till logo.png i sidhuvudet på varje sida.
   ============================================================= */
.header { background: var(--petrol); -webkit-backdrop-filter: none; backdrop-filter: none; }
.header.scrolled { border-bottom-color: rgba(255,255,255,.15); }
.logo img { height: 60px; }

/* Menylänkar och språkval i vitt */
@media (min-width: 901px) {
  .nav-link, .nav-link[aria-current="page"] { color: #fff; }
}
.lang { border-left-color: rgba(255,255,255,.25); }
.lang-btn { color: #fff; }
.lang-btn:hover, .lang.is-open .lang-btn { color: var(--orange); }

/* Toppen börjar direkt under sidhuvudet, lite mindre luft behövs */
.hero { padding-top: clamp(24px, 4vw, 64px); }
.page-hero { padding-top: clamp(32px, 4.5vw, 72px); }

/* Mobil: vit menyknapp, sidhuvudet förblir petrol när menyn är öppen */
@media (max-width: 900px) {
  .logo img { height: 48px; }
  .header.menu-open { background: var(--petrol); }
  .menu-toggle-bar, .menu-toggle-bar::before, .menu-toggle-bar::after { background: #fff; }
  .menu-open .menu-toggle-bar { background: transparent; }
}


/* =============================================================
   VÅGOR SOM PÅ VISITKORTET
   Orange och petrol korsar varandra och är lite genomskinliga,
   så att man ser färgerna genom varandra där de möts.
   Samma våg används under toppen (vänd upp och ner) och
   ovanför avslutningen (spegelvänd, som visitkortets baksida).
   Genomskinligheten styrs med opacity nedan (1 = helt täckande).
   ============================================================= */
.wave { height: clamp(80px, 10vw, 150px); overflow: visible; }
.wv-orange { fill: var(--orange); opacity: .8; }
.wv-petrol { fill: var(--petrol); opacity: .78; }

.wave-hero { transform: scaleY(-1); }
.wave-hero .wv-base { fill: #fff; }
.wave-hero .wv-solid { fill: var(--petrol); }

.wave-cta { transform: scaleX(-1); }
.wave-cta .wv-base { fill: var(--bg-tint); }
.final-cta.after-white .wave-cta .wv-base { fill: #fff; }
.wave-cta .wv-solid { fill: var(--petrol-dark); }
/* Cirkeln och kvadraten i undersidornas topp flyttas upp så att vågen inte skär av dem */
.page-hero .shape-circle { top: 8%; width: clamp(130px, 15vw, 220px); }
.page-hero .shape-square { bottom: 40%; width: clamp(80px, 9vw, 130px); }


/* =============================================================
   VÅRT TEAM (kontaktsidan)
   ============================================================= */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card { display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--bg-tint); }
.team-avatar {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  font-size: 1.6rem; font-weight: 800;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.team-card:hover .team-avatar { transform: rotate(-6deg); }
.team-card h3 { margin-bottom: 4px; }
.team-role { font-size: 0.95rem; color: var(--muted); line-height: 1.45; }
.team-mail {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 0.95rem; font-weight: 600; text-decoration: none; word-break: break-all;
}
.team-mail .icon { width: 18px; height: 18px; }
.team-mail:hover { text-decoration: underline; }
@media (max-width: 1024px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .team { grid-template-columns: 1fr; } .team-card { flex-direction: row; align-items: flex-start; padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .team-avatar { transition: none; } }
.team-avatar { flex-shrink: 0; }

/* Telefon och mejl i teamkorten */
.team-contact { margin-top: 14px; display: grid; gap: 6px; }
.team-contact a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 600; text-decoration: none; word-break: break-all;
}
.team-contact a:hover { text-decoration: underline; }
.team-contact .icon { width: 17px; height: 17px; }

/* =============================================================
   KONTAKTFORMULÄR (kontaktsidan)
   ============================================================= */
.contact-form-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-form-intro h2 { margin-bottom: 18px; }
.contact-form-intro p + p { margin-top: 14px; }
.contact-form { background: #fff; padding: clamp(24px, 4vw, 44px); display: grid; gap: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.req { color: var(--rost, #ED5300); }
.field input, .field select, .field textarea {
  width: 100%;
  font: 400 1rem var(--font); color: var(--ink);
  background: #fff;
  border: 1.5px solid #CFCAC1; border-radius: 0;
  padding: 12px 14px; min-height: 50px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(2,109,117,.18); }
.field .is-invalid, .field input.is-invalid, .field textarea.is-invalid { border-color: #ED5300; }
.field-hint { font-size: 0.875rem; color: var(--muted); }
.field-hint.is-invalid { color: #B23E00; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--petrol); }
.consent.is-invalid span { color: #B23E00; }

.contact-form .btn { justify-self: start; border: none; cursor: pointer; font-family: var(--font); }
.contact-form .btn[disabled] { opacity: .6; cursor: wait; }
.form-error { background: #FDEBE1; color: #8A2E00; padding: 12px 16px; font-size: 0.95rem; }
.form-success { background: var(--petrol); color: rgba(255,255,255,.88); padding: 24px 28px; }
.form-success h3 { color: #fff; margin-bottom: 6px; }
.contact-form.is-sent > :not(.form-success) { display: none; }

@media (max-width: 1024px) { .contact-form-wrap { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .contact-form .btn { justify-self: stretch; }
}
.field-row-wide { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 640px) { .field-row-wide { grid-template-columns: 1fr; } }
/* Vågen under toppen får samma färg som sektionen under (t.ex. beige på kontaktsidan) */
.page-hero:has(+ .section-tint) .wave-hero .wv-base { fill: var(--bg-tint); }
/* Enklare kontaktformulär */
.optional { font-weight: 400; color: var(--muted); }
.form-privacy { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.contact-form { max-width: 560px; }


/* =============================================================
   STOR BAKGRUNDSBILD I TOPPEN (alla sidor)
   Bilden ligger till höger och tonar mjukt ut mot vänster, uppåt
   och nedåt, så att texten alltid står på ren petrolfärg.
   Byt bild per sida i HTML: <div class="hero-bg"><img src="images/...">
   ============================================================= */
.hero-color, .page-hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute; z-index: 0;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  pointer-events: none;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%),
                      linear-gradient(to top, transparent 0%, #000 30%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0%, #000 45%),
                      linear-gradient(to top, transparent 0%, #000 30%, #000 92%, transparent 100%);
          mask-composite: intersect;
}
.page-hero .hero-bg { width: 55%; }
.page-hero .hero-bg img { opacity: .85; }
.hero-color .container, .page-hero .container { position: relative; z-index: 1; }

/* Startsidan: texten tar vänstra halvan, bilden resten */
.hero-color .hero-grid { grid-template-columns: minmax(0, 600px); min-height: clamp(440px, 40vw, 580px); }
.page-hero .container > * { max-width: 620px; }

/* KA-nummer under knapparna på startsidan */
.hero-ka { margin-top: 28px; font-size: .95rem; color: rgba(255,255,255,.85); }
.hero-ka span { display: block; font-size: .8rem; color: rgba(255,255,255,.65); margin-bottom: 2px; }
.hero-ka strong { color: var(--orange); letter-spacing: .02em; }

/* =============================================================
   LUGNARE VÅGOR (alla sidor)
   En orange strimma som smalnar av, ingen genomskinlighet.
   ============================================================= */
.wave-calm {
  position: absolute; left: 0; right: 0;
  width: 100%; height: clamp(36px, 5vw, 76px);
  display: block; pointer-events: none;
}
.wave-calm-hero { bottom: -1px; z-index: 2; }
.wave-calm-cta  { top: -1px; z-index: 2; }
.wave-calm .wc-orange { fill: var(--orange); }
.wave-calm-hero .wc-bg { fill: #fff; }
.page-hero:has(+ .section-tint) .wave-calm-hero .wc-bg { fill: var(--bg-tint); }
.wave-calm-cta .wc-top { fill: var(--bg-tint); }
.final-cta.after-white .wave-calm-cta .wc-top { fill: #fff; }
.hero-color { padding-bottom: clamp(90px, 9vw, 140px); }
.page-hero  { padding-bottom: clamp(80px, 8vw, 130px); }
.final-cta  { padding-top: calc(var(--section) + clamp(30px, 4vw, 60px)); }

/* Mobil: bilden överst, tonar ut nedåt in i texten */
@media (max-width: 900px) {
  .hero-color, .page-hero { padding-top: 0; }
  .hero-bg, .page-hero .hero-bg { position: relative; width: auto; height: 240px; margin-bottom: -16px; }
  .page-hero .hero-bg { height: 200px; }
  .hero-bg img {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 55%);
            mask-image: linear-gradient(to top, transparent 0%, #000 55%);
  }
  .hero-color .hero-grid { min-height: 0; grid-template-columns: 1fr; }
}


/* =============================================================
   DET HÄR FÅR DU HJÄLP MED – tre färgkort + lista
   (ersätter karusellen på startsidan)
   ============================================================= */
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: clamp(48px, 6vw, 72px); }
.ft {
  display: flex; flex-direction: column; justify-content: flex-start;   /* rubrikerna börjar på samma höjd */
  min-height: 0;
  padding: 34px 30px 36px;
  transition: transform .3s ease;
}
.ft:hover { transform: translateY(-4px); }
.ft h3 { color: inherit; font-size: clamp(1.4rem, 1vw + 1rem, 1.65rem); margin-bottom: 12px; }
.ft p  { color: inherit; font-size: 1rem; line-height: 1.6; opacity: .95; }
.ft-petrol { background: var(--petrol); color: #fff; }
.ft-orange { background: var(--orange); color: var(--ink); }
.ft-turkos { background: var(--turkos); color: #0E3B3E; }

.list-title { font-size: 1.25rem; margin-bottom: 18px; }
.mini-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.mini-list li { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.li-ic { flex: 0 0 40px; height: 40px; display: grid; place-items: center; background: var(--petrol-tint); color: var(--petrol); }
.li-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini-list h4 { font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }
.mini-list p { font-size: .975rem; color: var(--text); line-height: 1.55; }

@media (max-width: 900px) {
  .ft-grid { grid-template-columns: 1fr; gap: 14px; }
  .ft { min-height: 0; padding: 26px 22px 28px; }
  .mini-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ft { transition: none; } }


/* =============================================================
   FÄRGKORT I KARUSELL (startsidan) – tre syns i taget
   ============================================================= */
.ft-carousel .offer { flex: 0 0 calc((100% - 40px) / 3); display: flex; }
.ft-carousel .ft { width: 100%; min-height: 0; }   /* alla kort blir lika höga som det högsta */
.ft-carousel .ft:hover { transform: none; }
.ft-persika { background: var(--persika); color: var(--ink); }
@media (max-width: 1024px) { .ft-carousel .offer { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px)  { .ft-carousel .offer { flex-basis: 86%; } .ft-carousel .ft { min-height: 0; } }

/* Pilarna på sidorna av färgkorten (dator), under korten (mobil) */
.ft-carousel .carousel-controls {
  position: absolute; inset: 0; top: 0; right: 0;
  margin: 0; pointer-events: none; z-index: 3;
}
.ft-carousel .carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  pointer-events: auto;
  width: 52px; height: 52px;
  background: #fff; border: 1.5px solid var(--ink);
}
/* Pilarna sitter halvvägs över kortens kant */
.ft-carousel .carousel-btn { width: 46px; height: 46px; }
.ft-carousel .carousel-btn[data-dir="-1"] { left: -23px; }
.ft-carousel .carousel-btn[data-dir="1"]  { right: -23px; }
.ft-carousel .ft { padding-left: 40px; padding-right: 40px; }   /* plats så att pilen inte täcker texten */
.ft-carousel .carousel-btn:disabled { opacity: 0; visibility: hidden; }
.ft-carousel .carousel-btn:hover:not(:disabled) { background: var(--ink); color: #fff; }

/* Mobil: pilarna läggs under korten */
@media (max-width: 640px) {
  .ft-carousel { display: flex; flex-direction: column-reverse; }
  .ft-carousel .carousel-controls {
    position: static; display: flex; justify-content: center; gap: 12px;
    margin-top: 18px; pointer-events: auto;
  }
  .ft-carousel .carousel-btn { position: static; transform: none; }
  .ft-carousel .carousel-btn:disabled { opacity: .3; visibility: visible; }
}

@media (max-width: 640px) { .ft-carousel .ft { padding-left: 22px; padding-right: 22px; } }

/* Pilarna: bara en pil, ingen ruta, bredvid korten */
.ft-carousel .carousel-btn {
  width: 40px; height: 64px;
  background: none; border: none;
  color: var(--ink);
  transition: color .2s, transform .2s;
}
.ft-carousel .carousel-btn .icon { width: 34px; height: 34px; stroke-width: 1.6; }
.ft-carousel .carousel-btn:hover:not(:disabled) { background: none; color: var(--petrol); }
.ft-carousel .carousel-btn[data-dir="-1"] { left: -58px; }
.ft-carousel .carousel-btn[data-dir="1"]  { right: -58px; }
.ft-carousel .carousel-btn[data-dir="-1"]:hover:not(:disabled) { transform: translateY(-50%) translateX(-4px); }
.ft-carousel .carousel-btn[data-dir="1"]:hover:not(:disabled)  { transform: translateY(-50%) translateX(4px); }
.ft-carousel .ft { padding-left: 30px; padding-right: 30px; }
@media (max-width: 1360px) {   /* mindre plats vid sidan: pilen närmare korten */
  .ft-carousel .carousel-btn { width: 30px; }
  .ft-carousel .carousel-btn .icon { width: 28px; height: 28px; }
  .ft-carousel .carousel-btn[data-dir="-1"] { left: -31px; }
  .ft-carousel .carousel-btn[data-dir="1"]  { right: -31px; }
}
@media (max-width: 640px) {
  .ft-carousel .carousel-btn { width: 48px; height: 44px; }
  .ft-carousel .carousel-btn[data-dir="-1"]:hover:not(:disabled),
  .ft-carousel .carousel-btn[data-dir="1"]:hover:not(:disabled) { transform: none; }
  .ft-carousel .ft { padding-left: 22px; padding-right: 22px; }
}


/* Länkar i den orange rutan med stegen */
.choose-steps a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.choose-steps a:hover { text-decoration-thickness: 2px; }

/* Vanlig punktlista (utan bockar) */
.dot-list { list-style: none; margin: 14px 0 18px; }
.dot-list li { position: relative; padding: 6px 0 6px 26px; line-height: 1.55; }
.dot-list li::before { content: ""; position: absolute; left: 6px; top: 16px; width: 8px; height: 8px; background: var(--orange); }


/* =============================================================
   KA-NUMMER I TOPPEN SOM KOPIERA-KNAPPAR
   ============================================================= */
.hero-ka-label { display: block; font-size: .85rem; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.ka-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ka-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff; font: 500 .95rem var(--font);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.ka-chip small { font-size: .85rem; color: rgba(255,255,255,.8); }
.ka-chip strong { color: var(--orange); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; }
.ka-chip .icon { width: 17px; height: 17px; opacity: .8; }
.ka-chip:hover { border-color: var(--orange); background: rgba(255,255,255,.1); }
.ka-chip.copied { background: var(--orange); border-color: var(--orange); }
.ka-chip.copied small, .ka-chip.copied strong { color: var(--ink); }
.ka-chip.copied .icon { color: var(--ink); }
/* Liten ruta ovanför knappen: "Kopierat!" */
.ka-chip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  background: #fff; color: var(--ink);
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  padding: 5px 10px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.ka-chip.copied::after { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .ka-chips { justify-content: center; } .hero-ka { text-align: center; } }
/* "Kopierat!" visas under knappen så att den inte täcker texten */
.ka-chip::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.ka-chip.copied::after { transform: translate(-50%, 0); }
.hero-ka { padding-bottom: 28px; }
@media (max-width: 640px) {
  .ka-chips { flex-wrap: nowrap; gap: 8px; }
  .ka-chip { padding: 0 10px; gap: 7px; font-size: .9rem; }
  .ka-chip strong { font-size: 1rem; }
  .ka-chip .icon { width: 15px; height: 15px; }
}

/* KA-knapparna: lugnare kopierat-läge i turkos, ikonen blir en bock */
.ka-chip .icon-check { display: none; }
.ka-chip.copied { background: rgba(114,194,193,.16); border-color: var(--turkos); }
.ka-chip.copied small { color: rgba(255,255,255,.8); }
.ka-chip.copied strong { color: #fff; }
.ka-chip.copied .icon { color: var(--turkos); opacity: 1; }
.ka-chip.copied .icon:not(.icon-check) { display: none; }
.ka-chip.copied .icon-check { display: block; stroke-width: 2.4; }
.ka-chip::after { background: var(--turkos); color: #0E3B3E; }
/* KA-knapparna utan ram: svag ljus yta, ljusare när man håller musen över */
.ka-chip { border: none; background: rgba(255,255,255,.08); padding: 0 16px; }
.ka-chip:hover { background: rgba(255,255,255,.14); }
.ka-chip.copied { background: rgba(114,194,193,.22); }
/* Ännu mer transparent bakgrund, mindre och diskretare ikon */
.ka-chip { background: rgba(255,255,255,.045); }
.ka-chip:hover { background: rgba(255,255,255,.1); }
.ka-chip .icon { width: 15px; height: 15px; opacity: .55; }
.ka-chip:hover .icon { opacity: .9; }
.ka-chip.copied { background: rgba(114,194,193,.15); }
.ka-chip.copied .icon-check { width: 16px; height: 16px; }


/* =============================================================
   MJUKARE FÄRGER (stora ytor i ljusa toner, full färg bara i detaljer)
   ============================================================= */
:root {
  --orange-tint:  #FFF4E0;   /* ljus ton av orange */
  --petrol-tint2: #E6F0F1;   /* ljus ton av petrol */
  --turkos-tint:  #E5F4F4;   /* ljus ton av turkos */
  --persika-tint: #FFEDE5;   /* ljus ton av persika */
}

/* "Vad är Rusta och matcha?": ljus orange ton i stället för heltäckande orange */
.choose { background: var(--orange-tint); color: var(--text); border-top: 4px solid var(--orange); }
.choose h2, .choose h3, .choose strong { color: var(--ink); }
.choose .ka-intro { color: var(--text); }
.ka-box { background: #fff; border: 1px solid rgba(0,0,0,.06); }
.copy-btn { background: var(--petrol); color: #fff; }
.copy-btn:hover { background: var(--petrol-dark); }
.copy-btn.copied { background: var(--turkos); color: #0E3B3E; }
.choose-steps li + li { border-top-color: rgba(26,26,26,.1); }
.step-nr { background: var(--orange); border-color: var(--orange); color: var(--ink); font-weight: 800; }

/* Färgkorten: ljusa toner med en tunn linje i full färg upptill */
.ft { color: var(--text); border-top: 4px solid; }
.ft h3 { color: var(--ink); }
.ft-petrol  { background: var(--petrol-tint2); border-top-color: var(--petrol); }
.ft-orange  { background: var(--orange-tint);  border-top-color: var(--orange); }
.ft-turkos  { background: var(--turkos-tint);  border-top-color: var(--turkos); }
.ft-persika { background: var(--persika-tint); border-top-color: var(--persika); }
.ft-petrol, .ft-orange, .ft-turkos, .ft-persika { color: var(--text); }


/* =============================================================
   LUGNARE HELHET
   Tre bakgrunder: vitt, beige och petrol. Pratbubblorna i ljusa toner.
   Den orange understrykningen används bara på ett ställe (.mark-keep).
   ============================================================= */
/* 1. Pratbubblorna: ljusa toner, tunnare och mjukare kontur */
.section-languages { background: var(--bg-tint); }
.bb-shape { stroke: #3D4A4B; stroke-width: 1.5; }
.bb-shine { stroke: #3D4A4B; opacity: .35; }
.bubble-orange  { fill: #FFE6BD; }
.bubble-turkos  { fill: #CFEAEA; }
.bubble-persika { fill: #FFDCCD; }
.bubble-petrol  { fill: #D3E5E7; color: var(--ink); }
.bubble-petrol small { color: #3D3D3D; }

/* 2. Understrykningen bara där den har klassen mark-keep */
.mark:not(.mark-keep) { background-image: none !important; padding: 0; }

/* 3. Avslutningen i samma petrol som toppen (färre färger) */
.final-cta { background: var(--petrol); }

/* Inga linjer ovanför rutorna. Ljusa toner av petrol, turkos och persika – inte gul/orange. */
.choose { border-top: none; background: var(--turkos-tint); }
.ft { border-top: none; }
.ft-petrol  { background: var(--petrol-tint2); }
.ft-orange  { background: #EEF3F3; }          /* ljus gråpetrol i stället för gul */
.ft-turkos  { background: var(--turkos-tint); }
.ft-persika { background: var(--persika-tint); }
.step-nr { background: var(--petrol); border-color: var(--petrol); color: #fff; }


/* =============================================================
   ÖPPNARE LAYOUT (färre rutor, mer luft) – startsidan
   ============================================================= */
/* Tre styrkor som öppna spalter */
.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); margin-top: 8px; }
.hl-item { padding-top: 22px; border-top: 2px solid var(--petrol); }
.hl-item h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.55rem); margin-bottom: 12px; }
.hl-item p { color: var(--text); line-height: 1.65; }

/* Utfällbar lista med övrigt stöd */
.more-help { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more-help summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
  padding: 22px 44px 22px 0; position: relative;
  font-weight: 700; font-size: 1.1rem; color: var(--ink);
}
.more-help summary::-webkit-details-marker { display: none; }
.more-help-hint { font-weight: 400; font-size: .95rem; color: var(--muted); }
.more-help summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--petrol); transition: transform .25s;
}
.more-help[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.more-help summary:hover { color: var(--petrol); }
.more-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; padding-bottom: 12px; }
.more-list li { padding: 18px 0; border-top: 1px solid var(--line); }
.more-list h4 { font-size: 1.02rem; color: var(--ink); margin-bottom: 4px; }
.more-list p { font-size: .97rem; color: var(--text); line-height: 1.55; }

/* Rusta och matcha: ingen ruta, bara två spalter */
.choose-open { background: none; padding: 0; }
.choose-open .ka-intro { margin-top: 28px; }
.ka-chips-light .ka-chip { background: var(--petrol-tint2); color: var(--ink); }
.ka-chips-light .ka-chip:hover { background: #D6E7E8; }
.ka-chips-light .ka-chip small { color: var(--muted); }
.ka-chips-light .ka-chip strong { color: var(--petrol); }
.ka-chips-light .ka-chip .icon { color: var(--petrol); }
.ka-chips-light .ka-chip.copied { background: var(--turkos-tint); }
.ka-chips-light .ka-chip.copied strong { color: var(--ink); }
.ka-chips-light .ka-chip::after { top: calc(100% + 8px); bottom: auto; }

/* Kontoren: bild och text direkt på bakgrunden, ingen vit ruta */
.offices-open .office { background: none; box-shadow: none; }
.offices-open .office-body { padding: 22px 0 0; }

@media (max-width: 900px) {
  .highlights { grid-template-columns: 1fr; gap: 28px; }
  .more-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .ka-chips-light { justify-content: flex-start; } }


/* =============================================================
   "JOBB ELLER STUDIER?" – KONTRASTLAYOUT (riktning B)
   ============================================================= */
.bento-intro { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
.bento-intro h2 { font-size: clamp(2.1rem, 3.6vw + .5rem, 3.6rem); line-height: 1.02; letter-spacing: -.035em; }
.bento-intro h2 em { font-style: normal; color: var(--petrol); }
.bento-intro p { font-size: 1.1rem; line-height: 1.65; color: var(--text); }

.bento { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
.bento-big {
  grid-row: 1 / 3; position: relative; overflow: hidden;
  background: var(--petrol); color: rgba(255,255,255,.9);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 52px) clamp(80px, 8vw, 110px);
  min-height: clamp(400px, 38vw, 520px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.bento-big h3 { color: #fff; font-size: clamp(2rem, 2.4vw + 1rem, 2.75rem); line-height: 1.05; margin-bottom: 16px; }
.bento-big p { font-size: 1.15rem; line-height: 1.6; max-width: 460px; }
.bento-quote { position: absolute; top: 20px; left: clamp(24px, 3.5vw, 46px); font-family: Georgia, serif; font-size: clamp(120px, 12vw, 190px); line-height: 1; color: var(--orange); }
.bento-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(44px, 5vw, 70px); }
.bento-wave path { fill: var(--orange); }

.bento-sm { padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.bento-sm h3 { font-size: clamp(1.5rem, 1vw + 1.1rem, 1.8rem); margin-bottom: 12px; }
.bento-sm p { font-size: 1.02rem; line-height: 1.6; color: var(--text); }
.bento-beige { background: var(--bg-tint); }
.bento-white { background: #fff; border: 1px solid var(--line); border-left: none; }

.more-help { margin-top: 28px; }

@media (max-width: 900px) {
  .bento-intro { grid-template-columns: 1fr; gap: 16px; }
  .bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bento-big { grid-row: auto; min-height: 380px; }
  .bento-white { border-left: 1px solid var(--line); border-top: none; }
}
@media (max-width: 900px) {
  .bento-big { justify-content: flex-start; padding-top: 28px; }
  .bento-quote { position: static; font-size: 110px; height: 70px; margin-bottom: 10px; }
}


/* =============================================================
   TJÄNSTER: stor ruta som byter + klickbar lista
   ============================================================= */
.svc { display: grid; grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.svc-stage {
  position: relative; overflow: hidden;
  background: var(--petrol); color: rgba(255,255,255,.9);
  min-height: clamp(420px, 38vw, 540px);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 52px) clamp(90px, 8vw, 120px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.svc-panel { display: none; }
.svc-panel.is-active { display: block; animation: svcIn .7s ease both; }
.svc-panel h3 { color: #fff; font-size: clamp(2rem, 2.4vw + 1rem, 2.9rem); line-height: 1.05; margin-bottom: 16px; }
.svc-panel p { font-size: 1.15rem; line-height: 1.6; max-width: 480px; }
@keyframes svcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.svc-list { list-style: none; display: flex; flex-direction: column; justify-content: center; padding: 12px 0 12px clamp(24px, 3.5vw, 48px); }
.svc-list button {
  position: relative; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font: 600 1.05rem var(--font); color: var(--muted);
  padding: 11px 0 11px 22px;
  border-bottom: 1px solid var(--line);
  transition: color .2s;
}
.svc-list li:first-child button { border-top: 1px solid var(--line); }
.svc-list button::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px;
  background: var(--line); transform: translateY(-50%); transition: background .2s, width .3s;
}
.svc-list button:hover { color: var(--ink); }
.svc-list button[aria-selected="true"] { color: var(--ink); }
.svc-list button[aria-selected="true"]::before { background: var(--orange); width: 12px; }
/* Tunn tidslinje under den aktiva raden visar när rutan byter */
.svc-list button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--petrol); transform-origin: left; transform: scaleX(0);
  animation: svcTimer var(--svc-time, 5s) linear forwards;
}
.svc.is-paused .svc-list button[aria-selected="true"]::after { animation-play-state: paused; }
.svc.is-manual .svc-list button[aria-selected="true"]::after { display: none; }
@keyframes svcTimer { to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; }
  .svc-stage { min-height: 340px; justify-content: flex-start; padding-top: 28px; }
  .svc-list { padding: 18px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-panel.is-active { animation: none; }
  .svc-list button[aria-selected="true"]::after { display: none; }
}
/* Ingen tidslinje under den aktiva tjänsten – bara den orange pricken */
.svc-list button[aria-selected="true"]::after { display: none; }

/* Tjänsterutan i ljus ton så att den inte krockar med den petrolfärgade toppen */
.svc-stage { background: var(--bg-tint); color: var(--text); }
.svc-panel h3 { color: var(--ink); }
.svc-panel h3::after { content: ""; display: block; width: 48px; height: 3px; background: var(--petrol); margin-top: 14px; }
.svc-panel h3::after { display: none; }
.svc-stage { justify-content: center; }


/* =============================================================
   TYPSNITT SOM I LOGGAN
   - Rubriker och text: Inter (samma som "OSG" i loggan), medelvikt i rubriker
   - Framhävda ord: Playfair Display (samma som loggans J)
   Ta bort blocket om ni vill tillbaka till tidigare utseende.
   ============================================================= */
h1, h2, .svc-panel h3, .bento-intro h2, .final-cta h2 { font-weight: 600; letter-spacing: -0.02em; }
h1 { font-weight: 600; letter-spacing: -0.025em; }
.rotator, .bento-intro h2 em, .hl, .hl-orange, h2 em {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400; font-style: italic; letter-spacing: 0;
}


/* =============================================================
   SPRÅK: enkla pratbubblor i rutnät (3 x 3, alla i linje)
   ============================================================= */
.lang-bubbles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 16px; }
.lb {
  position: relative; display: flex; flex-direction: column;
  padding: 16px 20px 15px;
  background: #fff; color: var(--ink);
  transition: transform .25s ease;
}
.lb span { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.lb small { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.lb::after { content: ""; position: absolute; bottom: -10px; width: 0; height: 0; border-bottom: 10px solid transparent; }
.lb-l::after { left: 18px;  border-left: 12px solid #fff; }
.lb-r::after { right: 18px; border-right: 12px solid #fff; }
.lb-r { align-items: flex-end; text-align: right; }
.lb-t { background: var(--turkos-tint); }
.lb-t.lb-l::after { border-left-color: var(--turkos-tint); }
.lb-t.lb-r::after { border-right-color: var(--turkos-tint); }
.lb-p { background: var(--petrol); color: #fff; }
.lb-p small { color: rgba(255,255,255,.75); }
.lb-p.lb-l::after { border-left-color: var(--petrol); }
.lb-p.lb-r::after { border-right-color: var(--petrol); }
.lb:hover { transform: translateY(-3px); }
@media (max-width: 640px) {
  .lang-bubbles { grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
  .lb { padding: 12px 12px 11px; }
  .lb span { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .lb { transition: none; } }
/* Språkbubblorna: smalare rutnät, centrerad text, inga tomma ytor */
.lang-bubbles { max-width: 560px; justify-self: end; width: 100%; gap: 24px 14px; }
.lb, .lb-r { align-items: center; text-align: center; padding: 18px 12px 16px; }
.lb span { font-size: 1.2rem; }
.lb-l::after { left: 22px; }
.lb-r::after { right: 22px; }
@media (max-width: 900px) { .lang-bubbles { justify-self: stretch; max-width: none; } }


/* =============================================================
   DESIGNGENOMGÅNG (balans, rytm, enhet)
   Bakgrundsrytm: petrol → vitt → beige → vitt → beige → vitt → petrol
   ============================================================= */
/* Rusta och matcha på beige: vänsterspalten följer med när man scrollar (balans) */
#rusta-och-matcha .choose-open { align-items: start; }
#rusta-och-matcha .choose-intro { position: sticky; top: 110px; }
#rusta-och-matcha .ka-chips-light .ka-chip { background: #fff; }
#rusta-och-matcha .ka-chips-light .ka-chip:hover { background: var(--petrol-tint2); }
/* Kontoren på vitt */
#kontakt .office { background: none; }
/* Tjänsterutan: mindre tomrum (proportion) */
.svc-stage { min-height: clamp(340px, 30vw, 420px); }
/* Samma framhävning överallt (enhet): Playfair kursiv i petrol, på mörk botten orange */
h2 em { color: var(--petrol); }
.final-cta h2 em, .hero-color h2 em { color: var(--orange); }
@media (max-width: 1024px) { #rusta-och-matcha .choose-intro { position: static; } }

/* Mindre skärmar: tjänstelistan som små knappar bredvid varandra i stället för en lång lista */
@media (max-width: 900px) {
  .svc-list { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 18px 0 0; }
  .svc-list li { flex: 0 0 auto; }
  .svc-list button,
  .svc-list li:first-child button {
    width: auto; border: none;
    background: var(--bg-tint);
    padding: 9px 14px 9px 28px;
    font-size: .92rem;
  }
  .svc-list button::before { left: 12px; width: 7px; height: 7px; }
  .svc-list button[aria-selected="true"] { background: var(--petrol-tint2); }
  .svc-list button[aria-selected="true"]::before { width: 7px; }
}
@media (max-width: 900px) { .svc-list { justify-content: flex-start; } }

/* Tjänsterutan byter färgton för varje tjänst (ljusa toner av turkos, persika och petrol – ingen grå) */
.svc-stage { background: var(--turkos-tint); transition: background-color .6s ease; }
.svc-stage:has(.svc-panel:nth-of-type(3n+2).is-active) { background: var(--persika-tint); }
.svc-stage:has(.svc-panel:nth-of-type(3n+3).is-active) { background: #DCEBEC; }
/* Vågen följer med i en starkare ton av samma färg */
.svc-stage .bento-wave path { transition: fill .6s ease; fill: var(--turkos); }
.svc-stage:has(.svc-panel:nth-of-type(3n+2).is-active) .bento-wave path { fill: var(--persika); }
.svc-stage:has(.svc-panel:nth-of-type(3n+3).is-active) .bento-wave path { fill: var(--petrol); }

/* Tjänsterutan i de EXAKTA färgerna från utformningen (inga ljusa toner)
   1 turkos #72C2C1 · 2 persika #FC7944 · 3 petrol #026D75, sedan börjar det om */
.svc-stage { background: #72C2C1; color: #12393B; }
.svc-stage .svc-panel h3 { color: #0B2E30; }
.svc-stage .bento-wave path { fill: #026D75; }

.svc-stage:has(.svc-panel:nth-of-type(3n+2).is-active) { background: #FC7944; color: #2A1206; }
.svc-stage:has(.svc-panel:nth-of-type(3n+2).is-active) .svc-panel h3 { color: #1A1A1A; }
.svc-stage:has(.svc-panel:nth-of-type(3n+2).is-active) .bento-wave path { fill: #FFA300; }

.svc-stage:has(.svc-panel:nth-of-type(3n+3).is-active) { background: #026D75; color: rgba(255,255,255,.92); }
.svc-stage:has(.svc-panel:nth-of-type(3n+3).is-active) .svc-panel h3 { color: #fff; }
.svc-stage:has(.svc-panel:nth-of-type(3n+3).is-active) .bento-wave path { fill: #FFA300; }

/* Tjänsterna UTAN ruta: vit bakgrund, rubriken och vågen följer färgerna.
   Rubriken använder en läsbar ton av färgen (turkos och persika är för ljusa som text på vitt). */
.svc-stage,
.svc-stage:has(.svc-panel:nth-of-type(3n+2).is-active),
.svc-stage:has(.svc-panel:nth-of-type(3n+3).is-active) {
  background: transparent; color: var(--text);
  padding-left: 0; min-height: clamp(300px, 26vw, 380px);
}
.svc-stage .svc-panel h3 { color: #2E8F8E; font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem); }           /* turkos, mörkare för läsbarhet */
.svc-stage:has(.svc-panel:nth-of-type(3n+2).is-active) .svc-panel h3 { color: #D9531C; }             /* persika/rost */
.svc-stage:has(.svc-panel:nth-of-type(3n+3).is-active) .svc-panel h3 { color: #026D75; }             /* petrol */
.svc-stage .svc-panel p { color: var(--text); }
/* Vågen i exakt färg under texten */
.svc-stage .bento-wave { height: 26px; }
.svc-stage .bento-wave path { fill: #72C2C1; }
.svc-stage:has(.svc-panel:nth-of-type(3n+2).is-active) .bento-wave path { fill: #FC7944; }
.svc-stage:has(.svc-panel:nth-of-type(3n+3).is-active) .bento-wave path { fill: #026D75; }
/* Vågen direkt under texten i stället för långt ner */
.svc-stage { justify-content: center; padding-bottom: 0; }
.svc-stage .bento-wave { position: static; display: block; width: min(480px, 100%); height: 22px; margin-top: 28px; }

/* =============================================================
   ÅTERSTÄLLT: färgkorten i "Jobb eller studier?" som de var
   (hela färger från loggan, ingen kantlinje)
   ============================================================= */
.ft { border-top: none; }
.ft h3, .ft p { color: inherit; }
.ft-petrol  { background: var(--petrol);  color: #fff; }
.ft-orange  { background: var(--orange);  color: var(--ink); }
.ft-turkos  { background: var(--turkos);  color: #0E3B3E; }
.ft-persika { background: var(--persika); color: var(--ink); }

/* =============================================================
   FÖR ARBETSGIVARE: lugnare sida
   Anställningsstöd i en ljus ruta bredvid "Ett samarbete…",
   formuläret direkt under stegen.
   ============================================================= */
.stod-box { background: var(--petrol-tint2); padding: clamp(28px, 3vw, 40px); }
.stod-box h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.5rem); margin-bottom: 14px; }
.stod-box p { margin-bottom: 14px; }
.stod-box .small { color: var(--muted, #5b6466); }
.fa-form { margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid rgba(0,0,0,.08); }
/* När sista ytan är beige: tunn linje så att sidfoten inte flyter ihop */
main > .section-tint:last-child { border-bottom: 1px solid rgba(0,0,0,.08); }