/* =============================================================
   JOSG – GEMENSAM DESIGN (alla sidor, <html class="ny">)
   Läggs ovanpå style.css. Allt innehåll och alla funktioner är desamma; bara utseendet ändras.

   Färger:  djup petrol (topp, avslutning, footer) · ljus yta däremellan · svart text · orange i detaljer
   Typsnitt: Inter överallt; Playfair kursiv bara på framhävda ord (som tidigare)
   Rörelse: vågorna i toppen och i avslutningen, språkbandet, kontorsbilder i fönster, steglinjen.
            All text står still. Hovring 0,2 s. Allt stilla vid "minska rörelse".
   ============================================================= */
.ny {
  --b-djup: #03393E; --b-ljus: #CFE3E4;
  --b-yta: #F7F8F6; --b-text: #121515; --b-grafit: #4D5554; --b-linje: #DCE3E2;
  --b-ton: #FFF1DA; --b-ton-text: #8A4B00;
  --b-kurva: cubic-bezier(.4,0,.2,1); --b-in: cubic-bezier(.22,1,.36,1);
  --b-hörn: 12px;
}

/* ---------- Grund ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.ny body { background: var(--b-yta); color: var(--b-text); }
.ny .section { background: transparent; }
.ny .section-tint { background: #fff; }
.ny.js .reveal { opacity: 1; transform: none; transition: none; }          /* text står still på alla sidor */
.ny .section h2:not(.cv-steg-titel):not(.cv-sheet *):not(.policy *) { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 500; color: var(--b-text); }
.ny .section-lead { color: var(--b-grafit); }

/* ---------- Meny ---------- */
.ny .header { background: var(--b-djup); }
.ny .header.scrolled { border-bottom-color: rgba(255,255,255,.12); }
.ny .nav-link::after { transition: transform .3s var(--b-in); }

/* ---------- Knappar och KA-knappar ---------- */
.ny .btn { border-radius: var(--b-hörn); transition: transform .2s var(--b-kurva), background-color .2s var(--b-kurva), border-color .2s var(--b-kurva); }
.ny .btn:hover { transform: translateY(-2px); }
.ny .btn .icon { transition: transform .2s var(--b-kurva); }
.ny .btn:hover .icon { transform: translateX(3px); }
[dir="rtl"].ny .btn:hover .icon { transform: translateX(-3px); }
.ny .btn-outline { border-color: var(--b-text); color: var(--b-text); }
.ny .btn-outline:hover { background: var(--b-text); color: #fff; }
.ny .ka-chip { border-radius: var(--b-hörn); }
.ny .hero-color .ka-chip, .ny .page-hero .ka-chip { background: rgba(255,255,255,.07); }
/* KA-knappar på ljus botten */
.ny .ka-chips-light .ka-chip { background: #fff; border-color: var(--b-linje); color: var(--b-text); }
.ny .ka-chips-light .ka-chip small { color: var(--b-grafit); }
.ny .ka-chips-light .ka-chip strong { color: var(--b-text); }
.ny .ka-chips-light .ka-chip:hover { border-color: var(--b-text); }
.ny .ka-chips-light .ka-chip.copied { background: var(--orange); border-color: var(--orange); }

/* ---------- Siffror i steg: samma ljust orange ring överallt ---------- */
.ny .step-nr, .ny .process-nr {
  display: grid; place-items: center; width: 52px; height: 52px; aspect-ratio: 1; border-radius: 50%; border: 0; box-shadow: none;
  background: var(--b-ton); color: var(--b-ton-text); font: 500 1.35rem/1 var(--font); letter-spacing: -.02em; transform: none;
}
.ny .process li::before, .ny .process li::after { display: none; }
.ny .process li:hover .process-nr { transform: none; }
.ny .choose { background: none; box-shadow: none; padding: 0; }   /* ingen ruta: innehållet i samma linje som resten av sidan */
.ny .choose-steps li { border-bottom: 1px solid var(--b-linje); padding-block: 18px; }
.ny .choose { align-items: start; }
.ny .choose h2 { margin-left: 0; }
.ny .copy-btn { border-radius: var(--b-hörn); }
/* Raka steg: siffran överst till vänster, rubrikens första rad mitt för siffran, samma avstånd till texten i alla steg */
.ny .choose-steps { justify-content: flex-start; }
.ny .choose-steps li { grid-template-columns: 52px minmax(0, 1fr); align-items: start; row-gap: 6px; }
.ny .choose-steps li:first-child { padding-top: 0; }
.ny .choose-steps .step-nr { grid-row: 1 / span 2; align-self: start; }
.ny .choose-steps h3 { line-height: 1.3; padding-top: calc((52px - 1.3em) / 2); }
.ny .choose-steps p { margin: 0; }
/* Skapa CV: hjälptext i språksteget och påminnelse om nivå */
.ny .cv-sprak-hint { margin: -4px 0 12px; }
.ny .cv-sprakfalt select.is-invalid { border-color: #B23E00; box-shadow: 0 0 0 2px rgba(178,62,0,.18); }
.ny .cv-paminn { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--b-ton); color: var(--b-ton-text); font-size: .92rem; line-height: 1.45; }
/* Exempel-CV:t (grått innan man skrivit): tydligt blekare men läsbart (kontrast minst 4,5:1) */
.ny .cv-sheet .cv-exempel, .ny .cv-sheet .cv-exempel-avsnitt > :not(h2) { opacity: .9; }
/* CV-arket börjar i samma höjd som formuläret */
.ny .cv-preview .cv-sheet { margin-top: 0; }

/* ---------- Sidornas topp: samma djupa petrol, sken och vågor som startsidan ---------- */
.ny .hero-color, .ny .page-hero { background: var(--b-djup); color: var(--b-ljus); isolation: isolate; }
.ny .page-hero { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(150px, 15vw, 220px); }
.ny .page-hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.6rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; max-width: 16ch; }
.ny .page-hero .container > * { max-width: 720px; }
.ny .page-hero-lead { color: var(--b-ljus); font-size: clamp(1.1rem, .6vw + 1rem, 1.3rem); }
.ny .page-hero-center .container > * { margin-inline: auto; }
.ny .page-hero .shape, .ny .page-hero .hero-bg, .ny .wave-calm-hero { display: none; }
.ny .page-hero + .section, .ny .page-hero + .section-tint { background: transparent; }

/* Skenet: mjuka ljusfläckar som glider långsamt */
.hero-sken { position: absolute; inset: -15%; z-index: -1; pointer-events: none; }
.hero-sken span { position: absolute; border-radius: 50%; will-change: transform; animation: b-glid 20s ease-in-out infinite alternate; }
.hero-sken span:nth-child(1) { width: 56vw; height: 56vw; right: 0; top: 30%; background: radial-gradient(closest-side, rgba(255,163,0,.55), rgba(255,163,0,0)); }
.hero-sken span:nth-child(2) { width: 42vw; height: 42vw; right: 28vw; bottom: -12%; background: radial-gradient(closest-side, rgba(2,109,117,.95), rgba(2,109,117,0)); animation-duration: 26s; animation-delay: -8s; }
.hero-sken span:nth-child(3) { width: 34vw; height: 34vw; left: -8vw; top: -8%; background: radial-gradient(closest-side, rgba(114,194,193,.28), rgba(114,194,193,0)); animation-duration: 32s; animation-delay: -14s; }
.ny .page-hero .hero-sken span:nth-child(1) { width: 40vw; height: 40vw; top: 10%; }
@keyframes b-glid { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(5%,-4%) scale(1.1); } 100% { transform: translate(-4%,3%) scale(.95); } }

/* Vågorna: fyra lager i loggans färger (formerna ritas av js/vagor.js) */
.hero-vagor { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(170px, 20vw, 280px); z-index: -1; pointer-events: none; overflow: hidden; }
.ny .page-hero .hero-vagor { height: clamp(120px, 13vw, 200px); }
.vag { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; will-change: transform; animation: b-vag linear infinite; }
.vag path { fill: currentColor; }
.vag.v1 { color: #0A5B61; animation-duration: 46s; opacity: .9; }
.vag.v2 { color: #72C2C1; height: 78%; animation-duration: 34s; animation-direction: reverse; opacity: .9; }
.vag.v3 { color: var(--orange); height: 54%; animation-duration: 26s; }
.vag.v4 { color: var(--b-yta); height: 30%; bottom: -2px; animation-duration: 20s; animation-direction: reverse; }
@keyframes b-vag { to { transform: translateX(-50%); } }

/* Avslutningen och footern: samma djupa petrol, vågorna som eko */
.ny .final-cta { background: var(--b-djup); padding-top: calc(var(--section) + clamp(80px, 9vw, 140px)); }
.ny .final-cta .wave-calm-cta { display: none; }
.cta-vagor { position: absolute; left: 0; right: 0; top: -1px; height: clamp(120px, 12vw, 190px); overflow: hidden; pointer-events: none; background: var(--b-yta); }
.cta-vagor .vag.v1 { color: var(--orange); opacity: 1; animation-duration: 64s; }
.cta-vagor .vag.v2 { color: #72C2C1; height: 82%; opacity: 1; animation-duration: 52s; }
.cta-vagor .vag.v3 { color: #0A5B61; height: 64%; animation-duration: 44s; }
.cta-vagor .vag.v4 { color: var(--b-djup); height: 44%; animation-duration: 38s; }
.ny .footer { background: var(--b-djup); }

/* ---------- Tvådelad layout: rubriken står kvar till vänster ---------- */
.b-delad { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.b-klistrad { position: sticky; top: 120px; margin-bottom: 0; }
@media (max-width: 900px) { .b-delad { grid-template-columns: 1fr; } .b-klistrad { position: static; margin-bottom: 32px; } }

/* ---------- Kontoren (startsidan och Kontakt) ---------- */
.ny .office { background: none; box-shadow: none; border: 0; overflow: visible; }
.office-bild { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--b-linje); }
.ny .office .office-bild img { width: 100%; height: 118%; aspect-ratio: auto; object-fit: cover; display: block; transform: translate3d(0, var(--fonster, -8%), 0); scale: 1; transition: scale .9s var(--b-in); will-change: transform; }
.ny .office:hover .office-bild img { transform: translate3d(0, var(--fonster, -8%), 0); scale: 1.05; }
.ny .office .text-link { transition: color .2s var(--b-kurva); }
.ny .office:hover .text-link { color: var(--b-text); }
.ny .office h3 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); letter-spacing: -.025em; font-weight: 500; }

/* ---------- Det här får du hjälp med (Rusta och matcha) ---------- */
.tjanster { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--b-text); }
.tjanst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--b-linje); position: relative; }
.tjanst::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; height: 1px; width: 100%; background: var(--b-text); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--b-in); }
[dir="rtl"] .tjanst::after { transform-origin: right; }
.tjanst:hover::after { transform: scaleX(1); }
.tjanst h3 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: -.015em; font-weight: 600; margin: 0; }
.tjanst p { margin: 0; color: var(--b-grafit); font-size: .98rem; }
@media (max-width: 700px) { .tjanst { grid-template-columns: 1fr; } }
.b-allt-detalj .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .b-allt-detalj .process { grid-template-columns: 1fr; } }

/* ---------- Kort, formulär, frågor, team: samma hörn, linjer och färger ---------- */
.ny .contact-form, .ny .cv-form, .ny .cv-steg { border-color: var(--b-linje); border-radius: var(--b-hörn); background: #fff; }
.ny input, .ny textarea, .ny select { border-radius: 8px; }
.ny details { border-color: var(--b-linje); }
.ny .team-avatar { border-radius: 50%; }
.ny .check li::before { color: var(--orange); }

/* ---------- Skapa CV: förhandsvisningen och PDF:en ska se ut exakt som förut ---------- */
.ny .cv-form button, .ny .cv-sektion .btn { font-family: var(--font); }   /* formulärets knappar hade Arial; CV-arket rörs inte */
.ny .cv-steg-titel { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.025em; font-weight: 600; }

/* ---------- Kontakt: Vill du välja oss? – ljus ruta som resten av sidan (inte orange yta) ---------- */
.ny .ka-panel { background: #fff; border: 1px solid var(--b-linje); border-radius: var(--b-hörn); color: var(--b-text); }
.ny .ka-panel h2 { color: var(--b-text); }
.ny .ka-panel p { color: var(--b-grafit); }
.ny .ka-panel .ka-box { background: var(--b-yta); border: 1px solid var(--b-linje); border-radius: var(--b-hörn); }
.ny .ka-panel .ka-box-label { color: var(--b-grafit); }
.ny .ka-panel .ka-box-number { color: var(--b-text); }

/* ---------- Integritetspolicy: lästext, lugnare rubriker ---------- */
.ny .section .policy h2 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.25; letter-spacing: -.015em; font-weight: 600; margin-top: 2.2em; }
.ny .policy { font-size: 1.02rem; }

/* ---------- STARTSIDAN (html.sida-start) ---------- */
.sida-start .hero-color { padding-bottom: clamp(190px, 18vw, 260px); }
.sida-start .hero-color .hero-grid { grid-template-columns: minmax(0, 980px); min-height: 0; }
.sida-start .hero-color h1 { font-size: clamp(2.6rem, 5.6vw, 5.6rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; max-width: 15ch; }
.sida-start .hero-lead { color: var(--b-ljus); font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); }
.sida-start .b-rom .choose-help { text-align: start; margin-top: 22px; color: var(--b-grafit); }
.sida-start .b-ingress { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.55; color: var(--b-text); max-width: 46ch; margin: 0 0 28px; }
/* Hjälptext under KA-numren i toppen och de tre valstegen (rådets granskning 26 okt) */
.sida-start .hero-ka-hjalp { margin: 10px 0 0; font-size: .9rem; color: rgba(255,255,255,.78); }
.sida-start .b-valj-titel { font-size: 1.15rem; font-weight: 600; margin: 0 0 14px; color: var(--b-text); }
.sida-start .b-valj { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; max-width: 52ch; }
.sida-start .b-valj li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.sida-start .b-valj-nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--b-ton); color: var(--b-ton-text); font-weight: 600; font-size: .95rem; }
.sida-start .b-valj p { margin: 4px 0 0; color: var(--b-grafit); line-height: 1.5; }
@media (max-width: 900px) { .sida-start .hero-color .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .sida-start .hero-color h1 { font-size: clamp(2.2rem, 9.4vw, 2.9rem); } .sida-start .hero-color .hero-grid { padding-top: 20px; } }
@media (max-width: 370px) { .ny .ka-chips { flex-wrap: wrap; } }

/* Allt börjar med dig – fyra steg i rad, förbundna av en våglinje (js/resa.js) */
.sida-start .b-allt h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.resa { position: relative; }
.resa-vag { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.resa-streck { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; }
.resa-ritad { fill: none; stroke: #fff; stroke-width: 12; }
.resa-prick { fill: var(--orange); opacity: 0; transition: opacity .25s; filter: drop-shadow(0 0 6px rgba(255,163,0,.55)); }
/* När pricken kommer fram till ett steg: ringen gör en mjuk puls */
.steg.framme .steg-nr { animation: resa-framme .9s var(--b-in) 1; }
@keyframes resa-framme {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,163,0,.45); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); box-shadow: 0 0 0 18px rgba(255,163,0,0); }
}
.resa-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; z-index: 1; }
.steg { position: relative; padding-inline: clamp(16px, 2.4vw, 36px); }
.steg:first-child { padding-inline-start: 0; }
.steg + .steg::before { content: ""; position: absolute; inset-inline-start: 0; top: calc(clamp(72px, 7vw, 96px) + 24px); bottom: 0; width: 1px; background: var(--b-linje); }
.steg-nr { display: grid; place-items: center; width: clamp(72px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--b-ton); color: var(--b-ton-text); font: 500 clamp(1.8rem, 2.8vw, 2.4rem)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: clamp(28px, 3vw, 40px); }
.steg h3 { font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; margin: 0 0 16px; max-width: 13ch; }
.steg p { margin: 0; color: var(--b-grafit); font-size: 1rem; line-height: 1.6; max-width: 30ch; }
@media (max-width: 900px) {
  .resa-lista { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .steg, .steg:first-child { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; padding: 0; }
  .steg + .steg::before { display: none; }
  .steg-nr { width: 64px; grid-row: span 2; margin: 0; font-size: 1.6rem; }
  .steg h3 { max-width: none; }
}

/* Vi talar ditt språk – språken glider som ett band; stannar vid mus över eller tryck (js/sprakband.js) */
.sida-start .b-sprak { background: #fff; overflow: hidden; }
.sida-start .languages { display: block; }
.sida-start .languages-text { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.b-band { position: relative; direction: ltr; margin-inline: calc(50% - 50vw); padding-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.b-band .lang-bubbles { max-width: none; justify-self: auto; display: flex; flex-wrap: nowrap; gap: clamp(36px, 5vw, 80px); width: max-content; margin: 0; padding: 8px 0; list-style: none; animation: b-band 70s linear infinite; }
.b-band.pausad .lang-bubbles, .b-band:hover .lang-bubbles { animation-play-state: paused; }
.b-band .lb { all: unset; display: flex; flex-direction: column; gap: 6px; }
.b-band .lb::before, .b-band .lb::after { display: none; }
.b-band .lb span { font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 1; letter-spacing: -.03em; font-weight: 500; color: var(--b-text); }
.b-band .lb:nth-child(3n+2) span { color: var(--petrol); }
.b-band .lb small { font-size: .85rem; color: var(--b-grafit); }
@keyframes b-band { to { transform: translateX(-50%); } }

/* ---------- Minska rörelse: allt står stilla ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-sken span, .vag, .steg.framme .steg-nr { animation: none; }
  .tjanst::after, .ny .btn, .ny .btn .icon, .ny .office .office-bild img { transition: none; }
  .ny .office:hover .office-bild img { scale: 1; }
  .b-band .lang-bubbles { animation: none; flex-wrap: wrap; width: auto; }
  .b-band { -webkit-mask-image: none; mask-image: none; padding-top: 0; margin-inline: 0; }
}

/* Footer: raden om uppdraget på egen rad under de andra */
.ny .footer-bottom { flex-wrap: wrap; row-gap: 10px; }
.ny .footer-uppdrag { flex-basis: 100%; }

/* ---------- Ring-knapp vid menyn (26 okt) ---------- */
.header-ring { order: 4; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 14px; border-radius: 50%; background: var(--orange); color: var(--b-text); flex-shrink: 0; transition: transform .2s, background .2s; }
.header-ring .icon { width: 18px; height: 18px; }
.header-ring:hover { transform: scale(1.06); }
.header-ring:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ny .menu-toggle { order: 5; }
@media (max-width: 900px) { .header-ring { margin-left: 4px; margin-right: 6px; } }
/* ---------- Raka kanter (26 okt): avsnitt med smal textspalt får rubriken i samma spalt ---------- */
#ats .ats-head, #ats .ats-text, #ats .ats-guide { max-width: 720px; margin-inline: auto; text-align: start; }
#ats .ats-head .section-lead { margin-inline: 0; }
.ny #valj .choose-help { text-align: start; }
/* KA-numren i toppen på mobil: vänsterställda i samma linje som texten, två lika breda knappar (26 okt) */
@media (max-width: 640px) {
  .ny .hero-ka { text-align: start; }
  .ny .ka-chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; justify-content: stretch; }
  .ny .ka-chip { justify-content: center; min-width: 0; }
}
@media (max-width: 370px) { .ny .ka-chips { grid-template-columns: minmax(0, 1fr); } }
/* Formulär: "skickas"-besked när FormSubmit är långsam (neutral, inte felröd) */
.ny .form-error.is-info { background: var(--b-ton); color: var(--b-ton-text); }