/* Norrsken Bilvård. Tokens från brand-spec.md 2026-09-17. Svart scen, lack som ljus, blått pekar. */
:root {
  --natt: #0B0C0E;
  --kol: #15181C;
  --kol-ljus: #1C2026;
  --frost: #F4F6F8;
  --dis: #9AA6B2;
  --bla: #2F9BDB;
  --bla-mork: #2384BD;
  --linje: #232A32;
  --ljus: #E3E5E9;
  --ljus-yta: #D9DCE1;
  --ljus-band: #EEF0F3;
  --ljus-linje: #C9CED4;
  --grafit: #4A535C;
  --rubrik: "Sora", "Segoe UI", system-ui, sans-serif;
  --brod: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --radie: 4px;
  --wrap: 1160px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sektion: clamp(56px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--natt); color: var(--frost);
  font-family: var(--brod); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; max-width: 68ch; }
h1, h2, h3, h4 { font-family: var(--rubrik); margin: 0; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 600; }
h3 { font-size: 1.375rem; font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--bla); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--bla); color: var(--natt); }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.wrap.smal { width: min(760px, 100% - 40px); }
.sektion { padding-block: var(--sektion); }
.sektion.kol { background: var(--kol); }
.etikett { font-family: var(--brod); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dis); display: block; margin-bottom: 14px; }
.etikett.bla { color: var(--bla); }
.rubrik-rad { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(28px, 4vw, 44px); }
.rubrik-rad p { color: var(--dis); }
.ingress { color: var(--dis); font-size: 1.1rem; margin-top: 12px; }
.hoppa { position: absolute; left: -999px; top: 8px; background: var(--bla); color: var(--natt); padding: 12px 16px; z-index: 100; border-radius: var(--radie); }
.hoppa:focus { left: 8px; }
.visuellt-dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Knappar */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  background: var(--bla); color: var(--natt); font-family: var(--brod); font-weight: 600; font-size: 15px; letter-spacing: .02em;
  border: 1px solid var(--bla); border-radius: var(--radie); cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.knapp:hover { background: var(--bla-mork); border-color: var(--bla-mork); transform: translateY(-1px); }
.knapp:active { transform: translateY(0); }
.knapp--tom { background: transparent; color: var(--frost); border-color: rgba(244, 246, 248, .28); }
.knapp--tom:hover { background: rgba(244, 246, 248, .06); border-color: var(--frost); }
.knapp--stor { min-height: 56px; padding: 0 30px; font-size: 16px; }
.lank { color: var(--bla); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.lank svg { transition: transform .18s var(--ease); }
.lank:hover svg { transform: translateX(4px); }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; padding-block: 14px;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.komprimerad { background: rgba(11, 12, 14, .88); color: var(--frost); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linje); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logga { display: block; width: 168px; padding-block: 4px; transform-origin: left center; transition: transform .3s var(--ease); }
.nav.komprimerad .nav-logga { transform: scale(.84); }
.nav-lankar { display: flex; align-items: center; gap: 32px; }
.nav-lankar a { font-weight: 500; font-size: 15px; color: var(--dis); padding: 6px 0; position: relative; transition: color .18s; }
.nav-lankar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bla); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.nav-lankar a:hover, .nav-lankar a[aria-current] { color: var(--frost); }
.nav-lankar a[aria-current]::after, .nav-lankar a:hover::after { transform: scaleX(1); }
.nav-lankar a.knapp { min-height: 44px; padding: 0 20px; margin-left: 8px; color: var(--natt); }
.nav-lankar .knapp::after { display: none; }
.nav-lankar a.knapp:hover { color: var(--natt); }
.meny-knapp { display: none; background: none; border: 0; color: var(--frost); width: 48px; height: 48px; cursor: pointer; align-items: center; justify-content: center; border-radius: var(--radie); }
.meny-knapp svg { width: 28px; height: 28px; }

/* Mobilmeny: helskärm som tonar in, länkarna kommer radvis, tonar ut lika lugnt */
.mobilmeny { position: fixed; inset: 0; z-index: 60; visibility: hidden; opacity: 0; transition: opacity .32s var(--ease), visibility 0s linear .32s; }
.mobilmeny[open] { visibility: visible; opacity: 1; transition: opacity .32s var(--ease), visibility 0s; }
.mobilmeny .bak { position: absolute; inset: 0; background: var(--natt); }
.mobilmeny .panel {
  position: absolute; inset: 0; background: var(--natt);
  padding: 22px 24px 32px; display: flex; flex-direction: column;
  transform: translateY(-10px); transition: transform .38s var(--ease);
}
.mobilmeny[open] .panel { transform: none; }
.mobilmeny nav a { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.mobilmeny[open] nav a { opacity: 1; transform: none; }
.mobilmeny[open] nav a:nth-child(1) { transition-delay: .08s; } .mobilmeny[open] nav a:nth-child(2) { transition-delay: .13s; } .mobilmeny[open] nav a:nth-child(3) { transition-delay: .18s; } .mobilmeny[open] nav a:nth-child(4) { transition-delay: .23s; } .mobilmeny[open] nav a:nth-child(5) { transition-delay: .28s; }
.mobilmeny .kontakt, .mobilmeny > .panel > .knapp { opacity: 0; transition: opacity .4s var(--ease) .32s; }
.mobilmeny[open] .kontakt, .mobilmeny[open] > .panel > .knapp { opacity: 1; }
.mobilmeny .topp { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; min-height: 48px; }
.mobilmeny .topp .nav-logga { width: 128px; padding: 0; }
.mobilmeny .stang { background: none; border: 0; color: var(--frost); width: 48px; height: 48px; border-radius: var(--radie); cursor: pointer; display: grid; place-items: center; margin-right: -10px; }
.mobilmeny .stang svg { width: 26px; height: 26px; stroke-width: 1.6; }
.mobilmeny nav a { display: block; padding: 16px 0; font-family: var(--rubrik); font-size: 2rem; font-weight: 600; border-bottom: 1px solid var(--linje); }
.mobilmeny nav a[aria-current] { color: var(--bla); }
.mobilmeny .knapp { margin-top: auto; width: 100%; }
.mobilmeny .kontakt { margin-top: 20px; color: var(--dis); font-size: 14px; line-height: 1.7; }

/* Hero: ljus scen som referensen, bred yta, bilen stor till höger */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(140px, 13vw, 190px); background: var(--ljus); color: var(--natt); }
.hero-yta { width: min(1360px, 100% - 64px); margin-inline: auto; }
.hero-scen { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: paint; }
.vattenmarke { position: absolute; left: 4%; top: 44%; transform: translateY(-50%); font-family: var(--rubrik); font-weight: 700; font-size: clamp(4rem, 15.5vw, 15.5rem); line-height: 1; letter-spacing: -.03em; color: rgba(255, 255, 255, .42); white-space: nowrap; user-select: none; max-width: 100%; }
.hero-topp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 48px; align-items: start; padding-bottom: clamp(8px, 2vw, 32px); }
.hero-rubrik { font-size: clamp(3rem, 7.4vw, 7rem); line-height: 1; }
.hero-rubrik .rad > span { white-space: nowrap; }
.hero-rubrik .rad { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-rubrik .rad > span { display: block; }
.hero-rubrik em { font-style: normal; color: var(--bla); }
.hero-sida { padding-top: clamp(16px, 2.6vw, 40px); padding-left: clamp(0px, 4vw, 64px); }
.hero-text { font-size: 1.15rem; color: var(--grafit); max-width: 38ch; }
.hero-lank { margin-top: 18px; font-size: 1.05rem; min-height: 44px; }
.hero-bil { position: relative; z-index: 1; margin-top: clamp(-170px, -12vw, -10px); padding-bottom: clamp(24px, 3vw, 48px); transform: translateY(var(--p, 0)); }
.hero-bil-inre { position: relative; width: 60%; margin-left: auto; margin-right: -1%; }
.hero-bil img { width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 26px 28px rgba(0, 0, 0, .28)); animation: rulla-in 1.4s var(--ease) .3s both; }
.hero-skugga { position: absolute; left: 6%; right: 6%; bottom: 3%; height: 12%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35), transparent 70%); filter: blur(10px); z-index: 0; }
@keyframes rulla-in { from { transform: translateX(90px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stig { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tona { from { opacity: 0; } to { opacity: 1; } }
@keyframes marke { from { opacity: 0; scale: 1.03; } to { opacity: 1; scale: 1; } }
/* Entrén: naven tonar in, rubriken radvis (main.js), ordet bakom svävar in, text och länk stiger, bilen rullar in, baren sist */
body.ljus-hero .nav { animation: tona .8s var(--ease) both; }
.hero .vattenmarke { animation: marke 1.6s var(--ease) .15s both; }
.hero-text { animation: stig .9s var(--ease) .45s both; }
.hero-lank { animation: stig .9s var(--ease) .6s both; }
.hero-skugga { animation: tona 1.2s var(--ease) .9s both; }
.hero-bar .hero-yta > * { animation: stig .8s var(--ease) both; }
.hero-bar .hero-yta > *:nth-child(1) { animation-delay: .9s; } .hero-bar .hero-yta > *:nth-child(2) { animation-delay: 1s; } .hero-bar .hero-yta > *:nth-child(3) { animation-delay: 1.1s; }
.hero-bar { margin-top: 0; position: relative; z-index: 2; border-top: 1px solid var(--ljus-linje); background: var(--ljus-yta); }
.hero-bar .hero-yta { display: flex; flex-wrap: wrap; }
.hero-bar .hero-yta > * { display: flex; align-items: center; gap: 14px; padding: 20px 40px 20px 0; margin-right: 40px; border-right: 1px solid var(--ljus-linje); color: var(--grafit); }
.hero-bar .hero-yta > *:last-child { border-right: 0; margin-right: 0; }
.hero-bar .hero-yta > * > span { display: grid; gap: 2px; }
.hero-bar .etikett { margin: 0; font-size: 11px; color: var(--grafit); }
.hero-bar strong { font-weight: 600; font-size: 15px; color: var(--natt); }
.hero-bar a:hover strong { color: var(--bla); }

/* Nav över ljus hero: mörk text och mörk logga tills naven komprimeras */
body.ljus-hero .nav:not(.komprimerad) { color: var(--natt); background: var(--ljus); }
body.ljus-hero .nav:not(.komprimerad) .wrap { width: min(1360px, 100% - 64px); }
body.ljus-hero .nav:not(.komprimerad) .nav-lankar a { color: var(--grafit); }
body.ljus-hero .nav:not(.komprimerad) .nav-lankar a:hover, body.ljus-hero .nav:not(.komprimerad) .nav-lankar a[aria-current] { color: var(--natt); }
body.ljus-hero .nav:not(.komprimerad) .nav-lankar a.knapp { color: var(--natt); }
body.ljus-hero .nav:not(.komprimerad) .meny-knapp { color: var(--natt); }
body.ljus-hero .nav:not(.komprimerad) .nav-logga img.logga-ljus { display: block; }
body.ljus-hero .nav:not(.komprimerad) .nav-logga img.logga-mork { display: none; }
.nav-logga img.logga-ljus { display: none; }
.mobilmeny .nav-logga img.logga-ljus { display: none !important; } .mobilmeny .nav-logga img.logga-mork { display: block !important; }

/* Vattenmärke bakom sektionsrubriker */
.med-marke { position: relative; overflow: hidden; }
.med-marke::before { content: attr(data-marke); position: absolute; right: -2%; top: 8px; font-family: var(--rubrik); font-weight: 700; font-size: clamp(5rem, 15vw, 14rem); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(244, 246, 248, .06); pointer-events: none; user-select: none; }

/* Före och efter */
.fore-efter { position: relative; aspect-ratio: 1168 / 880; max-width: 980px; margin-inline: auto; overflow: hidden; background: transparent; --pos: 50%; user-select: none; touch-action: pan-y; }
.fore-efter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fore-efter::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 10%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45), transparent 70%); filter: blur(12px); z-index: -1; }
.fore-efter-sektion { position: relative; }
.fore-efter.foto { aspect-ratio: 4 / 3; border-radius: var(--radie); background: var(--kol); }
.fore-efter.foto img { object-fit: cover; }
.fore-efter.foto::after { display: none; }
.fore-efter.foto .linje { top: 0; bottom: 0; }
.fore-efter.foto .tag { top: 16px; color: var(--frost); background: rgba(8, 10, 14, .72); border-radius: 4px; }
.fore-efter .efter { clip-path: inset(0 0 0 var(--pos)); }
.fore-efter .linje { position: absolute; top: 4%; bottom: 4%; left: var(--pos); width: 2px; background: var(--frost); transform: translateX(-1px); pointer-events: none; }
.fore-efter .handtag { position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--frost); color: var(--natt); display: grid; place-items: center; pointer-events: none; box-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.fore-efter .handtag svg { width: 22px; height: 22px; }
.fore-efter .tag { position: absolute; top: 12%; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 6px 10px; color: var(--dis); pointer-events: none; }
.fore-efter .tag.v { left: 16px; } .fore-efter .tag.h { right: 16px; }
.fore-efter input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.fore-efter input[type=range]:focus-visible + .linje { outline: 2px solid var(--bla); }
.fore-efter-text { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-top: 28px; }
.fore-efter-text p { color: var(--dis); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.par figure { margin: 0; position: relative; border-radius: var(--radie); overflow: hidden; background: var(--kol); }
.par figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.par figcaption { position: absolute; left: 16px; top: 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 6px 10px; background: rgba(11, 12, 14, .7); border-radius: var(--radie); }
.par figure:last-child figcaption { background: var(--bla); color: var(--natt); }

/* Tjänster */
.tjanst-grupp + .tjanst-grupp { margin-top: clamp(40px, 6vw, 72px); }
.tjanst-grupp header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px 48px; margin-bottom: 28px; align-items: end; }
.tjanst-grupp header p { color: var(--dis); }
.kort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tjanst-grupp .kort-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tjanst-grupp .kort-grid .tjanst-kort { max-width: 560px; }
.tjanst-grupp .kort-grid:has(.tjanst-kort:nth-child(3)) .tjanst-kort { max-width: none; }
.tjanst-kort {
  --kort-x: 28px; --kort-topp: 28px;
  background: var(--kol); border: 1px solid var(--linje); border-radius: var(--radie);
  padding: var(--kort-topp) var(--kort-x) 24px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.tjanst-kort:hover { transform: translateY(-3px); border-color: rgba(47, 155, 219, .5); }
.tjanst-kort .vis { position: relative; margin: calc((var(--kort-topp) + 1px) * -1) calc((var(--kort-x) + 1px) * -1) 10px; border-radius: var(--radie) var(--radie) 0 0; overflow: hidden; height: 220px; background: var(--natt); }
.tjanst-kort .vis > img, .tjanst-kort .vis > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tjanst-kort .vis .vis-text { position: absolute; left: 12px; bottom: 12px; font-size: 12px; letter-spacing: .04em; color: var(--frost); background: rgba(8, 10, 14, .72); padding: 5px 9px; border-radius: 4px; pointer-events: none; }
.tjanst-kort .vis .fore-efter.liten { aspect-ratio: auto !important; height: 220px; max-width: none; border-radius: 0; }
.tjanst-kort .vis .fore-efter.liten .handtag { width: 38px; height: 38px; }
.tjanst-kort .vis .fore-efter.liten .tag { top: 10px; font-size: 11px; padding: 4px 7px; }
.tjanst-kort .vis .fore-efter.liten .tag.v { left: 10px; } .tjanst-kort .vis .fore-efter.liten .tag.h { right: 10px; }
.tjanst-kort .topp { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.tjanst-kort h3 { font-size: 1.25rem; }
.tjanst-kort .tid { font-size: 13px; color: var(--dis); white-space: nowrap; padding-top: 4px; }
.tjanst-kort p { color: var(--dis); font-size: 15px; }
.tjanst-kort ul { color: var(--dis); font-size: 14px; display: grid; gap: 5px; }
.tjanst-kort li { padding-left: 16px; position: relative; }
.tjanst-kort li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--bla); }
.tjanst-kort .botten { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--linje); }
.tjanst-kort .botten .lank { white-space: nowrap; }
.pris { font-family: var(--rubrik); font-weight: 600; font-size: 1.8rem; color: var(--bla); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.pris small { font-family: var(--brod); font-size: 13px; font-weight: 500; color: var(--dis); margin-right: 6px; letter-spacing: 0; }
.pris s { color: var(--dis); font-size: 14px; font-family: var(--brod); font-weight: 400; margin-left: 8px; }
.tjanst-kort--konsult { border-style: dashed; }

/* Konsultation */
.konsult { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px 72px; align-items: center; }
.konsult .steg { display: grid; gap: 0; counter-reset: s; border-top: 1px solid var(--linje); }
.konsult .steg li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 0; padding: 18px 0; border-bottom: 1px solid var(--linje); }
.konsult .steg li::before { grid-row: 1 / span 2; }
.konsult .steg strong, .konsult .steg span { grid-column: 2; }
.konsult .steg li::before { content: counter(s, decimal-leading-zero); font-family: var(--rubrik); font-weight: 600; color: var(--bla); font-size: 1.1rem; padding-top: 2px; }
.konsult .steg strong { display: block; font-family: var(--rubrik); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.konsult .steg span { color: var(--dis); font-size: 15px; }
.konsult .knappar { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.prisrad { display: grid; gap: 10px; }
.prisrad li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linje); }
.prisrad li span:last-child { font-family: var(--rubrik); font-weight: 600; color: var(--bla); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prisrad .not { display: block; font-size: 14px; color: var(--dis); border: 0; padding-top: 6px; }

/* Galleri */
.galleri { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; gap: 12px; }
.galleri figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radie); background: var(--kol); }
.galleri img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.galleri figure:hover img { transform: scale(1.04); }
.galleri figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; font-size: 13px; color: var(--frost); background: linear-gradient(transparent, rgba(11, 12, 14, .82)); transform: translateY(6px); transition: transform .3s var(--ease); }
.galleri figure:hover figcaption { transform: none; }
.galleri .stor { grid-column: span 4; grid-row: span 2; }
.galleri .medel { grid-column: span 2; grid-row: span 2; }
.galleri .liten { grid-column: span 2; }
.galleri-sida { grid-auto-rows: 260px; }

/* Om */
.om { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.om .bild { border-radius: var(--radie); overflow: hidden; background: var(--kol); }
.om .bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.om p + p { margin-top: 16px; }
.om p { color: var(--dis); }
.om p.ljus { color: var(--frost); font-size: 1.1rem; }
.siffror { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--linje); }
.siffror strong { display: block; font-family: var(--rubrik); font-size: 2rem; font-weight: 600; color: var(--frost); font-variant-numeric: tabular-nums; }
.siffror span { font-size: 14px; color: var(--dis); }

/* Boka */
.boka-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px 64px; align-items: start; }
form.boka { display: grid; gap: 18px; }
/* Stegvis bokning */
fieldset.steg { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
fieldset.steg + fieldset.steg { margin-top: 22px; }
fieldset.steg legend { padding: 0; font-family: var(--rubrik); font-weight: 600; font-size: 1.5rem; line-height: 1.2; margin-bottom: 18px; outline: 0; }
form.stegvis fieldset.steg + fieldset.steg { margin-top: 0; }
form.stegvis fieldset.steg[hidden] { display: none; }
.steg-topp { display: grid; gap: 10px; }
.steg-rad { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.steg-nr { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--dis); }
.steg-bak { background: none; border: 0; color: var(--frost); font: inherit; font-size: 14px; font-weight: 500; min-height: 44px; padding: 0 0 0 22px; cursor: pointer; position: relative; transition: color .18s, transform .18s; }
.steg-bak::before { content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.steg-bak:hover { color: var(--bla); transform: translateX(-2px); }
.steg-bak:focus-visible { outline: 2px solid var(--bla); outline-offset: 4px; border-radius: 2px; }
.steg-matare { height: 3px; background: var(--linje); border-radius: 2px; overflow: hidden; }
.steg-matare span { display: block; height: 100%; background: var(--bla); transform-origin: left center; transform: scaleX(0); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.steg-summa { min-height: 1.5em; font-size: 14px; color: var(--dis); }
.steg-fot { display: flex; justify-content: flex-start; margin-top: 6px; }
.valkort-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.valkort { position: relative; display: block; padding: 20px; border: 1px solid var(--linje); border-radius: var(--radie); background: var(--kol); cursor: pointer; transition: border-color .18s, transform .18s cubic-bezier(.22, 1, .36, 1); }
.valkort.stor { padding: 26px 22px; min-height: 148px; }
.valkort:hover { border-color: rgba(47, 155, 219, .55); transform: translateY(-2px); }
.valkort:active { transform: translateY(0) scale(.99); }
.valkort input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.valkort:has(input:checked) { border-color: var(--bla); }
.valkort:has(input:focus-visible) { outline: 2px solid var(--bla); outline-offset: 3px; }
.valkort strong { display: block; font-family: var(--rubrik); font-weight: 600; font-size: 1.15rem; }
.valkort small { display: block; color: var(--dis); font-size: 14px; line-height: 1.5; margin-top: 6px; }
@keyframes steg-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes steg-in-bak { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes steg-del { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
fieldset.steg.in { animation: steg-in .42s cubic-bezier(.22, 1, .36, 1) both; }
fieldset.steg.in-bak { animation: steg-in-bak .42s cubic-bezier(.22, 1, .36, 1) both; }
fieldset.steg.in > :not(legend), fieldset.steg.in-bak > :not(legend) { animation: steg-del .45s cubic-bezier(.22, 1, .36, 1) both; }
fieldset.steg.in > :nth-child(2), fieldset.steg.in-bak > :nth-child(2) { animation-delay: .06s; }
fieldset.steg.in > :nth-child(3), fieldset.steg.in-bak > :nth-child(3) { animation-delay: .12s; }
fieldset.steg.in > :nth-child(4), fieldset.steg.in-bak > :nth-child(4) { animation-delay: .18s; }
fieldset.steg.in > :nth-child(n+5), fieldset.steg.in-bak > :nth-child(n+5) { animation-delay: .24s; }
@media (max-width: 560px) { .valkort-rad { grid-template-columns: 1fr; } .valkort.stor { min-height: 0; } .steg-fot .knapp { width: 100%; } }
@media (prefers-reduced-motion: reduce) { fieldset.steg.in, fieldset.steg.in-bak, fieldset.steg.in > *, fieldset.steg.in-bak > * { animation: none; } .steg-matare span { transition: none; } }
.vald-tjanst { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 20px; border: 1px solid rgba(47, 155, 219, .5); border-radius: var(--radie); background: var(--kol); }
.vald-tjanst .etikett { display: block; margin-bottom: 6px; }
.vald-tjanst strong { display: block; font-family: var(--rubrik); font-weight: 600; font-size: 1.15rem; }
.vald-tjanst .vald-pris { display: block; color: var(--dis); font-size: 14px; margin-top: 2px; }
.vald-tjanst .vald-pris s { margin-left: 8px; opacity: .7; }
.vald-tjanst .lank { min-height: 44px; display: inline-flex; align-items: center; }
.typval { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.typval label { position: relative; display: block; padding: 16px 18px; border: 1px solid var(--linje); border-radius: var(--radie); background: var(--kol); cursor: pointer; transition: border-color .18s; }
.typval label:hover { border-color: rgba(47, 155, 219, .5); }
.typval input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.typval input:checked + span::before { background: var(--bla); box-shadow: inset 0 0 0 3px var(--kol); }
.typval input:focus-visible + span { outline: 2px solid var(--bla); outline-offset: 12px; border-radius: 2px; }
.typval label > span { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.typval label > span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--dis); margin-top: 3px; transition: background .18s; }
.typval strong { display: block; font-family: var(--rubrik); font-weight: 600; }
.typval small { color: var(--dis); font-size: 13px; display: block; margin-top: 2px; }
.falt { display: grid; gap: 6px; }
.falt label { font-size: 14px; font-weight: 500; }
.falt label .hint { display: block; color: var(--dis); font-weight: 400; font-size: 13px; margin-top: 2px; }
.falt input, .falt select, .falt textarea {
  font: inherit; color: var(--frost); background: var(--kol); border: 1px solid var(--linje); border-radius: var(--radie);
  padding: 12px 14px; min-height: 48px; width: 100%; transition: border-color .18s;
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
.falt input:focus, .falt select:focus, .falt textarea:focus { outline: 0; border-color: var(--bla); }
.falt select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239AA6B2' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.falt textarea { min-height: 120px; resize: vertical; }
.falt input::placeholder, .falt textarea::placeholder { color: #5C6670; }
.tva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.samtycke { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--dis); }
.samtycke { min-height: 44px; }
.samtycke input { width: 24px; height: 24px; margin: 0; accent-color: var(--bla); flex: none; }
.samtycke a { color: var(--frost); text-decoration: underline; text-underline-offset: 3px; }
.boka-info { padding: 16px 18px; border: 1px solid var(--linje); background: var(--kol); color: var(--dis); font-size: 15px; border-radius: var(--radie); }
.form-status { min-height: 1.6em; font-size: 15px; color: var(--dis); }
.form-status.ok { color: #6FD3A1; }
.form-status.fel { color: #F08A8A; }
.honung { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.boka-sida { display: grid; gap: 24px; }
.info-kort { background: var(--kol); border: 1px solid var(--linje); border-radius: var(--radie); padding: 26px 28px; }
.info-kort h2, .info-kort h3 { font-size: 1.1rem; margin-bottom: 14px; }
.info-kort dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 15px; }
.info-kort dt { color: var(--dis); }
.info-kort dd { margin: 0; }
.info-kort a { color: var(--frost); }
.info-kort a:hover { color: var(--bla); }
.oppet { display: grid; gap: 8px; font-size: 15px; }
.oppet li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--linje); }
.oppet li span:last-child { font-variant-numeric: tabular-nums; }
.oppet li:last-child { border: 0; padding: 0; }
.karta { border-radius: var(--radie); overflow: hidden; border: 1px solid var(--linje); background: var(--kol); }
.karta iframe { display: block; width: 100%; height: 320px; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }

/* CTA-band */
.cta-band { background: var(--kol); border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.cta-band p { color: var(--dis); margin-top: 8px; }
.cta-band .knappar { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sidhuvud på undersidor */
.sidhuvud { padding: 150px 0 clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--linje); }
.sidhuvud h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.sidhuvud .etikett { display: none; }
.sidhuvud p { color: var(--dis); font-size: 1.1rem; margin-top: 16px; }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--linje); }
.faq details { border-bottom: 1px solid var(--linje); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-family: var(--rubrik); font-weight: 600; font-size: 1.05rem; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--bla); border-bottom: 2px solid var(--bla); transform: rotate(45deg); transition: transform .25s var(--ease); margin-right: 6px; }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 6px; }
.faq details p { color: var(--dis); padding: 0 0 20px; }

/* Footer */
footer { background: var(--natt); border-top: 1px solid var(--linje); padding: clamp(48px, 6vw, 72px) 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px 40px; }
.footer-grid .footer-rubrik { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dis); font-family: var(--brod); font-weight: 600; margin-bottom: 16px; }
.footer-grid ul { display: grid; gap: 4px; font-size: 15px; overflow-wrap: anywhere; }
.footer-grid ul a { display: inline-block; padding-block: 10px; }
.footer-grid li { min-width: 0; }
.footer-grid a:hover { color: var(--bla); }
.footer-grid p { color: var(--dis); font-size: 15px; margin-top: 16px; }
.footer-logga { width: 180px; }
.footer-slut { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linje); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--dis); }
.footer-slut a { padding-block: 12px; display: inline-block; }
.footer-slut a:hover { color: var(--frost); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.synlig { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; }

/* Policy och 404 */
.text-sida { padding-top: 150px; }
.text-sida h2 { font-size: 1.4rem; margin: 36px 0 10px; }
.text-sida p + p { margin-top: 12px; }
.text-sida ul { list-style: disc; padding-left: 22px; color: var(--dis); display: grid; gap: 6px; margin-top: 10px; }

@media (max-width: 1024px) {
  .hero-topp { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 20px 32px; }
  .hero-sida { padding-left: 0; }
  .hero-bil-inre { width: 92%; margin-right: 0; }
  .hero-bil { margin-top: -8px; }
  .galleri { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .galleri .stor { grid-column: span 4; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .konsult, .om, .boka-grid { grid-template-columns: 1fr; }
  .tjanst-grupp header { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav-lankar { display: none; }
  .meny-knapp { display: inline-flex; margin-right: -10px; }
  .nav-logga { width: 124px; }
  .nav.komprimerad .nav-logga { transform: scale(.92); }
  .nav { padding-block: 12px; }
}
@media (max-width: 640px) {
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .hero { padding-top: 104px; min-height: 100svh; display: flex; flex-direction: column; }
  .hero > .hero-yta { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 12px; }
  .hero-bar { margin-top: auto; }
  .hero-yta { width: min(1360px, 100% - 32px); }
  /* Som referensens mobilvy: allt centrerat, bilen under texten */
  .hero-topp { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .hero-rubrik { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .hero-sida { padding: 0; display: grid; justify-items: center; }
  .hero-text { font-size: 15px; line-height: 1.55; max-width: 32ch; }
  .hero-lank { margin-top: 10px; font-size: 15px; min-height: 44px; }
  .hero-bil { margin-top: 0; }
  .hero-bil-inre { width: 94%; margin-inline: auto; max-width: 440px; }
  .hero-bil { padding-bottom: 8px; }
  .hero-bar .hero-yta { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-bar .hero-yta > * { padding: 12px 12px 12px 0; margin-right: 12px; gap: 10px; border-right: 1px solid var(--ljus-linje); border-bottom: 0; }
  .hero-bar .hero-yta > *:nth-child(2) { border-right: 0; margin-right: 0; }
  .hero-bar .hero-yta > *:nth-child(3) { display: none; }
  .hero-bar strong { font-size: 13px; }
  .hero-bar .etikett { font-size: 10px; }
  .vattenmarke { top: 36%; left: 50%; transform: translate(-50%, -50%); font-size: 24vw; }
  .fore-efter { aspect-ratio: 1168 / 880; }
  .fore-efter-text, .par, .tva, .typval, .siffror { grid-template-columns: 1fr; }
  .galleri { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .galleri .stor { grid-column: span 2; grid-row: span 2; }
  .galleri .medel, .galleri .liten { grid-column: span 1; grid-row: span 1; }
  .tjanst-kort { --kort-x: 20px; --kort-topp: 22px; padding: var(--kort-topp) var(--kort-x) 20px; }
  .sidhuvud { padding-top: 120px; }
  .text-sida { padding-top: 120px; }
  .siffror { gap: 20px; }
  .siffror li { display: flex; align-items: baseline; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .oppet li span:last-child { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bil { transform: none !important; }
  .hero-bil img, .hero .vattenmarke, .hero-text, .hero-lank, .hero-skugga, .hero-bar .hero-yta > *, body.ljus-hero .nav { animation: none; }
  .fore-efter { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; overflow: visible; }
  .fore-efter img { position: static; aspect-ratio: 4 / 5; clip-path: none; border-radius: var(--radie); }
  .fore-efter .linje, .fore-efter .handtag, .fore-efter input { display: none; }
  .fore-efter .tag.v { left: 16px; } .fore-efter .tag.h { right: auto; left: calc(50% + 22px); }
  .galleri img, .tjanst-kort, .knapp, .lank svg { transition: none; }
}

.falt[hidden] { display: none; }

/* ---------- Vaxpaketen (Refined, Enhanced, Signature) ---------- */

.paket-sektion .paket-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}
.paket-kort {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 26px 26px;
  border: 1px solid var(--linje, rgba(255,255,255,.14));
  border-radius: 14px;
  background: var(--yta, rgba(255,255,255,.03));
}
.paket-kort--basta {
  border-color: var(--accent, #7EA6D9);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.paket-flagga {
  position: absolute;
  top: -12px;
  left: 26px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent, #7EA6D9);
  color: #0E1116;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.paket-kort h3 { margin: 0; font-size: 26px; letter-spacing: .01em; }
.paket-kort-text { margin: 0; font-size: 15px; line-height: 1.6; opacity: .82; }
.paket-punkter { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.paket-punkter li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
}
.paket-punkter li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #7EA6D9);
}
.paket-pris {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--linje, rgba(255,255,255,.14));
}
.paket-pris s { font-size: 16px; opacity: .55; }
/* "från" före priset, samma som på tjänsterna (Emanuel 27/9). Mindre gap mot
   siffran än mot det överstrukna priset, så de hör ihop. */
.paket-pris em { font-style: normal; font-size: 16px; color: var(--dis); margin-right: -6px; }
.paket-pris strong {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.paket-kort .knapp { width: 100%; text-align: center; justify-content: center; }
.paket-not { margin: 26px 0 0; font-size: 14px; opacity: .72; }

@media (max-width: 900px) {
  .paket-sektion .paket-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; }
  .paket-kort { padding: 30px 22px 22px; }
  .paket-kort h3 { font-size: 23px; }
  .paket-pris strong { font-size: 27px; }
  .paket-not { margin-top: 20px; }
}

/* ---------- Hero-bandet: paket och tjänster som snurrar ---------- */
/* Placeringen kommer från Lukas foto 21/9: den tomma ytan under rubriken,
   till vänster om bilen. På mobil ligger bandet framför bilen, halvgenomskinligt. */

.hero-band {
  position: absolute;
  left: 0;
  bottom: clamp(16px, 3vw, 44px);
  width: min(600px, 44%);
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 88%, transparent);
  animation: tona 1s var(--ease) 1.1s both;
}
.hero-band-spar {
  display: flex;
  width: max-content;
  animation: band-rulla 42s linear infinite;
}
.hero-band:hover .hero-band-spar,
.hero-band:focus-within .hero-band-spar { animation-play-state: paused; }
.hero-band-rad { display: flex; gap: 12px; padding-right: 12px; }

.band-kort {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 210px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--ljus-linje);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--natt);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.band-kort:hover {
  transform: translateY(-3px);
  border-color: var(--bla);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.band-bild {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ljus-yta);
}
.band-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-text { display: grid; gap: 2px; min-width: 0; }
.band-text strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band-text small { font-size: 12px; color: var(--grafit); font-variant-numeric: tabular-nums; }

@keyframes band-rulla {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 900px) {
  /* Framför bilen, men bilen syns igenom. */
  .hero-band {
    left: 0;
    right: 0;
    width: auto;
    bottom: clamp(10px, 4vw, 28px);
  }
  .band-kort {
    width: 178px;
    padding: 8px 12px 8px 8px;
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
    border-color: rgba(255, 255, 255, .8);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  }
  .band-bild { width: 44px; height: 44px; }
  .band-text strong { font-size: 13px; }
  .hero-band-spar { animation-duration: 34s; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-band { animation: none; }
  .hero-band-spar { animation: none; }
  .hero-band { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hero-band-spar { width: auto; }
  .hero-band-rad[aria-hidden="true"] { display: none; }
}

/* ---------- Verkstadssidan (FC Bilverkstad) ---------- */
.verkstad-grid { grid-template-columns: repeat(2, 1fr); }
.verkstad-kort {
  padding: 26px 24px;
  border: 1px solid var(--linje, rgba(255,255,255,.14));
  border-radius: 12px;
  background: var(--yta, rgba(255,255,255,.03));
}
.verkstad-kort h3 { margin: 0 0 8px; font-size: 21px; }
.verkstad-kort p { margin: 0; font-size: 15px; line-height: 1.6; opacity: .82; }
@media (max-width: 760px) { .verkstad-grid { grid-template-columns: 1fr; } }

/* ================================================================
   Punkt 17: tjänstesidan med mer färg. Emanuel valde den ljusa 23/9 2026.
   Ljust sidhuvud och ljus paketsektion, sedan mörkt när tjänsterna kommer.
   ================================================================ */

.tjanster-ljus .sidhuvud {
  background: var(--ljus);
  color: var(--natt);
  border-bottom: 1px solid var(--ljus-linje);
}
.tjanster-ljus .sidhuvud h1 { color: var(--natt); }
.tjanster-ljus .sidhuvud p { color: var(--grafit); }

.tjanster-ljus .paket-sektion {
  background: var(--ljus-band);
  color: var(--natt);
}
.tjanster-ljus .paket-sektion h2,
.tjanster-ljus .paket-sektion .rubrik-rad p { color: var(--natt); }
.tjanster-ljus .paket-kort {
  background: #fff;
  border-color: var(--ljus-linje);
  color: var(--natt);
}
.tjanster-ljus .paket-kort--basta { border-color: var(--bla); box-shadow: 0 18px 44px rgba(11, 12, 14, .12); }
.tjanster-ljus .paket-flagga { background: var(--bla); color: #fff; }
.tjanster-ljus .paket-punkter li::before { background: var(--bla); }
.tjanster-ljus .paket-pris { border-top-color: var(--ljus-linje); }
.tjanster-ljus .paket-pris s { color: var(--grafit); }
.tjanster-ljus .paket-not { color: var(--grafit); }
.tjanster-ljus .paket-sektion .etikett { color: var(--grafit); }

.tjanster-ljus #meny { background: var(--natt); }

.tjanster-ljus .konsult,
.tjanster-ljus .konsult + * { color: inherit; }

/* ---------- Privatperson eller företag, ovanför bokningen ---------- */
.kundval {
  display: inline-flex;
  gap: 4px;
  margin-top: 26px;
  padding: 4px;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: var(--kol);
}
.kundval-knapp {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--dis);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.kundval-knapp { border: 0; background: none; font-family: inherit; cursor: pointer; }
.kundval-knapp.ar-vald { background: var(--frost); color: var(--natt); }
.kundval-knapp:not(.ar-vald):hover { color: var(--frost); background: var(--kol-ljus); }
.kundval-knapp:focus-visible { outline: 2px solid var(--bla); outline-offset: 2px; }
@media (max-width: 480px) {
  .kundval { width: 100%; }
  .kundval-knapp { flex: 1; justify-content: center; padding: 0 12px; }
}

/* Prisraden med text i stället för pris: värdet får radbrytas, annars spränger
   det kolumnen på mobil (white-space: nowrap gäller bara riktiga priser). */
.prisrad--text li span:last-child { white-space: normal; text-align: right; min-width: 0; }
.prisrad--text li span:first-child { min-width: 0; }
@media (max-width: 560px) {
  .prisrad--text li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .prisrad--text li span:last-child { text-align: left; }
}

/* Företagsformuläret är ett vanligt formulär utan steg. Samma utseende som
   bokningens fieldset, men utan webbläsarens standardram runt. */
.boka > fieldset:not(.steg) { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
.boka > fieldset:not(.steg) legend {
  padding: 0;
  font-family: var(--rubrik);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 18px;
  outline: 0;
}

/* ---------- Popup: privat eller företag. Startsidan, efter tre sekunder ---------- */

.popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 140; display: grid; place-items: center; padding: 20px; }
.popup[hidden] { display: none; }
.popup-skarm {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(6, 7, 9, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: tona .28s var(--ease) both;
}
.popup-kort {
  position: relative;
  width: min(520px, 100%);
  padding: 36px 34px 32px;
  border: 1px solid var(--linje);
  border-radius: 14px;
  background: var(--kol);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  animation: popup-in .42s var(--ease) both;
}
.popup-kort h2 { margin: 14px 0 10px; font-size: clamp(1.45rem, 3.4vw, 1.8rem); line-height: 1.2; }
.popup-kort p { margin: 0; color: var(--dis); font-size: 16px; line-height: 1.6; }
.popup-knappar { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.popup-knappar .knapp { flex: 1; justify-content: center; text-align: center; min-width: 150px; }
.popup-x {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; color: var(--dis); cursor: pointer;
  border-radius: 999px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.popup-x:hover { color: var(--frost); background: var(--kol-ljus); }

@keyframes popup-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .popup { align-items: end; padding: 0; }
  .popup-kort { width: 100%; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 30px 22px 26px; }
  .popup-knappar .knapp { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .popup-skarm, .popup-kort { animation: none; }
}
.popup-kort:focus { outline: none; }

/* iOS Safari ger input[type=date] en egen inre bredd som ignorerar width: 100 %
   och sprängde bokningssidan i sidled på mobil. Nollställ utseendet och lås bredden. */
.falt input[type="date"],
.falt input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}
/* Safari centrerar texten i ett tomt datumfält och lägger på egen padding. */
.falt input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.falt input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }
.falt { min-width: 0; }
.boka, .boka fieldset, .boka .tva { min-width: 0; }

/* Paketen ska väga tyngre än de enskilda tjänsterna: eget foto överst,
   samma bredd som kortet och samma hörn som mediet i tjänstekorten. */
.paket-kort { padding-top: 0; overflow: hidden; }
.paket-bild { margin: 0 -26px 20px; height: 190px; background: var(--natt); overflow: hidden; }
.paket-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paket-kort .paket-flagga { top: 168px; left: 26px; }
.paket-kort h3 { margin-top: 6px; }
@media (max-width: 900px) {
  .paket-bild { margin: 0 -22px 18px; height: 168px; }
  .paket-kort .paket-flagga { top: 146px; left: 22px; }
}

/* Handtvätten som märkning på paketbilden. Lukas 27/9: den ska SYNAS att den
   ingår i alla tre, inte bara stå som första punkt i listan. */
.paket-bild { position: relative; }
.paket-tvatt {
  position: absolute;
  /* Höger sida: bästsäljarflaggan sitter nere till vänster på Refined och
     de två krockade. */
  right: 26px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(11, 12, 14, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--frost, #F4F6F8);
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1;
}
.paket-tvatt svg { color: var(--bla, #2F9BDB); flex: none; }
@media (max-width: 900px) { .paket-tvatt { right: 22px; bottom: 10px; font-size: 11.5px; } }

/* ===========================================================================
   BOKNINGENS TJÄNSTEVAL (Emanuel 27/9)
   ---------------------------------------------------------------------------
   Två kolumner med bild på telefonen, Refined inramad med en Populär-tagg,
   och ett ark som glider upp från botten med stor bild och hela
   beskrivningen. Kunden ska veta exakt vad den bokar innan den väljer.
   =========================================================================== */

.valkort--tjanst { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.valkort-bild { display: block; aspect-ratio: 16 / 10; background: var(--natt); overflow: hidden; }
.valkort-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.valkort-text { display: block; padding: 14px 16px 16px; }
/* Tjänst utan egen bild ännu (motortvätten, 27/9): kortet ska se avsiktligt
   ut, inte som en trasig bild. Texten får hela ytan och en dämpad ton. */
.valkort--utanbild { justify-content: center; min-height: 148px;
  background: linear-gradient(160deg, var(--kol), var(--natt)); }
.valkort--utanbild .valkort-text { padding: 18px 16px; }
.valkort--tjanst strong { font-size: 1.02rem; line-height: 1.3; }
.valkort--tjanst small { margin-top: 4px; }

/* Refined: inramad och märkt. */
.valkort--basta { border-color: var(--bla); }
.valkort-flagga {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bla); color: #05243a;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1;
}


/* ---- Arket ------------------------------------------------------------- */

.ark { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.ark[hidden] { display: none; }
.ark-skugga { position: absolute; inset: 0; background: rgba(5, 6, 8, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .28s; }
.ark.ar-oppen .ark-skugga { opacity: 1; }
.ark-kort {
  position: relative; width: min(560px, 100%); max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--kol); border-radius: 22px 22px 0 0;
  transform: translateY(100%); transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}
.ark.ar-oppen .ark-kort { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ark-kort, .ark-skugga { transition: none; }
}
.ark-grepp { position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 99px; background: rgba(244, 246, 248, .28); z-index: 3; }
.ark-stang { position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: rgba(11, 12, 14, .6); color: var(--frost);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; }
.ark-bild { flex: none; aspect-ratio: 16 / 9; background: var(--natt); }
.ark-bild:empty { display: none; }   /* ingen bild ännu → ingen tom ruta */
.ark-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ark-kropp { padding: 20px 22px 4px; overflow-y: auto; }
.ark-kropp h3 { font-family: var(--rubrik); font-size: 1.5rem; margin: 0; }
.ark-pris { color: var(--bla); font-weight: 600; margin: 6px 0 14px; }
.ark-text { color: var(--dis); line-height: 1.6; margin: 0; }
.ark-punkter { list-style: none; margin: 16px 0 0; padding: 0; }
.ark-punkter li { position: relative; padding-left: 20px; margin-bottom: 8px; color: var(--dis); }
.ark-punkter li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 99px; background: var(--bla); }
.ark-punkter:empty { display: none; }
.ark-fot { flex: none; padding: 18px 22px calc(20px + env(safe-area-inset-bottom)); }
.ark-fot .knapp { width: 100%; }

@media (max-width: 560px) {
  /* Tjänstevalet får två kolumner, till skillnad från stegets andra val. */
  .valkort-rad--tjanst { grid-template-columns: 1fr 1fr; gap: 10px; }
  .valkort-text { padding: 11px 12px 13px; }
  .valkort--tjanst strong { font-size: .94rem; }
  .valkort--tjanst small { font-size: 13px; }
  .ark-kort { max-height: 88vh; }
  .ark-kropp h3 { font-size: 1.32rem; }
}

/* ---- Tilläggstjänsten i bokningen (Emanuel 27/9) ------------------------ */
.steg-ingress { color: var(--dis); margin: -6px 0 18px; }
.tillagg-kort {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border: 1px solid var(--linje); border-radius: var(--radie);
  background: var(--kol); cursor: pointer;
  transition: border-color .18s, background .18s;
}
.tillagg-kort:hover { border-color: rgba(47, 155, 219, .55); }
.tillagg-kort:has(input:checked) { border-color: var(--bla); background: rgba(47, 155, 219, .07); }
.tillagg-kort:has(input:focus-visible) { outline: 2px solid var(--bla); outline-offset: 3px; }
.tillagg-kort input { position: absolute; opacity: 0; width: 0; height: 0; }
.tillagg-kryss {
  flex: none; width: 24px; height: 24px; margin-top: 2px;
  display: grid; place-items: center;
  border: 1.5px solid var(--linje); border-radius: 7px;
  color: transparent; transition: background .16s, border-color .16s, color .16s;
}
.tillagg-kort:has(input:checked) .tillagg-kryss { background: var(--bla); border-color: var(--bla); color: #05243a; }
.tillagg-text { flex: 1 1 auto; min-width: 0; }
.tillagg-text strong { display: block; font-family: var(--rubrik); font-size: 1.1rem; }
.tillagg-text small { display: block; color: var(--dis); font-size: 14px; line-height: 1.55; margin-top: 6px; }
.tillagg-pris { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tillagg-pris s { font-size: 14px; opacity: .55; }
.tillagg-pris strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .tillagg-kort { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .tillagg-pris { flex-direction: row; align-items: baseline; gap: 10px; width: 100%;
    justify-content: flex-start; padding-left: 38px; }
}


/* ---- Beskrivning på tjänstekorten i bokningen ---------------------------
   Samma mening som står överst i arket. Tre rader räcker som löfte; resten
   läser man när kortet öppnas. Emanuel 28/9. */

.valkort--tjanst .valkort-txt {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(159, 172, 184, .82);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.valkort--utanbild .valkort-txt { -webkit-line-clamp: 4; }

/* ---- Företagssteget ----------------------------------------------------- */

.steg-not { margin: 14px 0 0; color: var(--dis); font-size: 14px; line-height: 1.55; }
.steg-not a { color: var(--bla); }