/* Typsnittet hostas lokalt i stället för att hämtas från fonts.googleapis.com.
   Den externa länken var renderingsblockerande: webbläsaren fick öppna en
   uppkoppling mot en främmande domän och vänta in svaret innan sidan kunde
   målas. Nu ligger filen i assets/fonts/ och hämtas från samma värd som
   allt annat.

   Snittet är Space Grotesk. Filen är EN variabel fil med EN enda axel,
   wght 300–700 (avläst i fvar-tabellen: min 300, default 300, max 700).
   Någon breddaxel finns inte, så font-stretch sätts aldrig. Hela viktskalan
   ligger i samma fil, alltså räcker en enda regel med viktintervall –
   separata regler per vikt hade laddat samma fil om och om igen.

   Axeln tar slut vid 700. Vikter över 700 finns alltså inte att hämta i
   filen; ber stilmallen om 800 syntetiserar webbläsaren en falsk fetstil
   genom att förtjocka konturerna. Därför är 700 den tyngsta vikt som
   används någonstans i den här filen.

   font-display: swap gör att texten syns direkt i reservsnittet (system-ui)
   och byts när filen är inne, i stället för att vara osynlig under hämtningen.

   Relativ url() nedan löses mot STILMALLENS plats (repots rot), inte mot
   sidans, så samma sökväg fungerar även från /fredrik och /thom. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Bohagsbolaget.se – stilmall
   Färger, typsnitt och stil hämtade från befintliga www.kastar.se:
   - Mörk petrol #0E3A44 som sektionsbakgrund med vit text (hero, "varför oss", footer)
   - Krämvita mellansektioner #FAF5EF med svarta versala rubriker
   - ORANGE knappar #E8862E (nästan raka hörn, versal fet text, vit text)
   - Sekundärknapp: krämvit med mörk text
   - Space Grotesk överallt, med axeln wght 300–700. H1/H2 versala,
     vikt 700 – axelns toppvikt, alltså ingen syntetisk fetstil.
   ========================================================================== */

:root {
  /* Palett från www.kastar.se (custom-palette-1, HSL→hex) */
  --petrol:       #0E3A44;  /* sektionsbakgrund mörk */
  --petrol-rgb:   14, 58, 68; /* samma färg som --petrol, för overlay med alfa */
  --petrol-deep:  #092F38;  /* footer / djupare ton */
  --petrol-black: #00242E;
  --orange:       #E8862E;  /* knappfärg (secondary-tonen på sidan) */
  /* Orange text på ljus botten. #E8862E ger bara 2,66:1 mot vitt och
     2,46:1 mot krämvitt – under gränsen. #A85610 ger 5,25:1 mot vitt
     och 4,84:1 mot krämvitt och klarar därmed 4,5:1 på båda bottnarna.
     Gäller bara TEXT; orange som ifylld knappfärg är oförändrad.
     Två orangea toner finns, inga fler – se Färgpalett i CLAUDE.md. */
  --orange-ink:   #A85610;
  --bg:           #FAF5EF;  /* krämvit sektionsbakgrund */
  --bg-card:      #FFFFFF;
  --line:         #E5DED6;

  --ink:          #111111;  /* svarta rubriker på ljus botten */
  --body-c:       #3A4A50;
  /* Grå brödtext. Förra tonen #647177 klarade vitt och krämvitt, men gav
     bara 4,21:1 mot den varmare ytfärgen #F1EAE0 i faktarutan (.legal-note)
     – underkänt. #5B6A70 ger 5,61:1 mot vitt, 5,18:1 mot krämvitt #FAF5EF
     och 4,70:1 mot #F1EAE0. Den mörkare tonen valdes just för att även
     klara ytfärgen #F1EAE0, så 4,5:1 håller på alla tre bottnarna. */
  --muted:        #5B6A70;
  --on-dark:      #FFFFFF;
  --on-dark-body: #E7EEF0;

  --radius-btn:   4px;      /* nästan raka hörn som originalet */
  --radius-card:  10px;
  --shadow:  0 8px 20px rgba(0, 36, 46, 0.08);
  --maxw:    1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--body-c);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; }
/* Rubriker i vikt 700 – Space Grotesks tyngsta vikt, eftersom axeln slutar
   där – och tajt satta med -.02em. Graderna skruvades en gång ned för att
   rubrikerna inte skulle spräcka layouten, och de ligger kvar. Versala
   etiketter och knapptexter har kvar sin positiva spärrning; den negativa
   gäller bara det som väger 700. */
h1, h2, h3, h4 { letter-spacing: -.02em; }
h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.16;
}
h2 {
  font-size: clamp(1.45rem, 2.9vw, 2.05rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.22;
}
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
p  { margin: 0 0 1rem; }
/* Länkar står på ljus botten, där #A85610 klarar 5,25:1 mot vitt och
   4,84:1 mot krämvitt. Länkar på mörk botten sätter sin egen färg
   (.nav a, .footer-col a, .footer-bottom a, .footer-legal a) och
   påverkas inte. */
a  { color: var(--orange-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Färg ensam räcker inte som signal för en länk i löptext: kravet är 3:1 mot
   omgivande text och mejllänken låg på 1,75:1. Understrykning löser det utan
   att röra färgen. Avgränsat till <p> inuti <main>, så knappar, navigering,
   sidfot och kortsidorna inte påverkas – de är redan visuellt urskiljbara. */
body:not(.kort-sida) main p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2.5px;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Basfallet är en etikett på krämvit sektionsbotten, där --orange bara
   ger 2,46:1. Mörka lägen sätter om färgen själva: .hero .eyebrow och
   .section-alt .eyebrow. */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .063em;
  font-size: .82rem;
  font-weight: 500;
  color: var(--orange-ink);
  margin: 0 0 .5rem;
}

/* ---------- Fokus (tangentbord) ---------- */
/* Samma ring överallt. Orange syns både mot krämvitt och mot petrol. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* Skip-link. Får INTE döljas med display:none eller visibility:hidden –
   då plockas den ur tabbordningen och går inte att nå med tangentbord.
   Den flyttas därför utanför skärmen med position:absolute och hämtas
   tillbaka vid :focus. z-index 100 lägger den över den klistrade
   headern (z-index 50) och den mobila knappraden (z-index 60). */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--petrol-deep);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-btn);
}
.skip:focus {
  left: .5rem;
  top: .5rem;
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* Visuellt dold text som ändå läses upp av skärmläsare, t.ex. en rubrik som
   bara behövs för dokumentets struktur. display:none och visibility:hidden
   duger INTE – de tar bort elementet ur tillgänglighetsträdet, så uppläsaren
   hoppar över det. Elementet krymps därför till 1×1 px och klipps bort med
   clip-path, men finns kvar i flödet. (Flyttad hit från priskalkylator-
   sektionen, där den låg tidigare, och moderniserad från clip: rect().) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Knappar (orange, versala, nästan raka hörn) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .95rem 1.9rem;
  border-radius: var(--radius-btn);
  font-weight: 500; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .0625em;
  border: 2px solid transparent;
  cursor: pointer;
  /* Namngivna egenskaper, aldrig "all" – annars animeras även
     layoutvärden och knappen kan hoppa. */
  transition: background-color 150ms ease,
              color 150ms ease,
              border-color 150ms ease,
              box-shadow 150ms ease,
              transform 100ms ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Fysiskt nedtryck. Ligger efter :hover så den vinner medan musen är nere. */
.btn:active { transform: translateY(1px); }
/* Medan formuläret skickas: knappen dämpas och slutar reagera på hover */
.btn:disabled { opacity: .65; cursor: progress; transform: none; box-shadow: none; }
/* Petroltext på orange, inte vit. Vit ger 2,66:1 och underkänns;
   #092F38 mot #E8862E ger 5,34:1. Hovringen byter INTE bakgrund – den
   mörkare hovringstonen vi hade förut hamnade på 4,35:1 med petroltext
   och föll under gränsen, och är nu borta ur paletten. I stället lyfts
   knappen och skuggan fördjupas, så kontrasten är densamma i alla lägen.
   Skuggan går i knappens egen orange – bara primärknappen bär tyngd.
   rgba(232,134,46) är samma färg som --orange, ingen ny kulör. */
.btn-primary { background: var(--orange); color: var(--petrol-deep); box-shadow: 0 2px 10px rgba(232,134,46,.30); }
.btn-primary:hover { background: var(--orange); color: var(--petrol-deep); box-shadow: 0 6px 18px rgba(232,134,46,.42); transform: translateY(-1px); }
.btn-primary:active { box-shadow: 0 2px 10px rgba(232,134,46,.30); }
.btn-light { background: var(--bg); color: var(--petrol-deep); }
.btn-light:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--petrol); }
.btn-ghost:hover { background: var(--petrol); color: #fff; }
/* Kantad knapp: samma form, storlek och radie som de fyllda, men med
   genomskinlig botten och orange ram. Används för "Visa kort", som inte
   ska konkurrera med den fyllda skicka-knappen i samma sektion. */
.btn-outline { background: transparent; color: var(--orange-ink); border-color: var(--orange); }
.btn-outline:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
/* Pilen glider fram vid hover, texten står stilla – samma grepp som på
   tjänstekorten. */
.btn .btn-pil { display: inline-block; transition: transform 150ms ease; }
.btn:hover .btn-pil { transform: translateX(4px); }
.btn-sm { padding: .6rem 1.2rem; font-size: .82rem; }
.btn-block { width: 100%; }

/* ---------- Header (mörk petrol med vit text, som över hero:n) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--petrol);
  border-bottom: 1px solid rgba(255,255,255,.08);
  /* Namngivna egenskaper, inte "all" – annars animeras även layoutvärden */
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Glaseffekt när sidan scrollats förbi 50px. Klassen sätts av script.js. */
.site-header.scrolled {
  background: rgba(var(--petrol-rgb), .85);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Scroll-indikator längst upp i headern. Bredden styrs av --scroll-progress
   (0–1) som script.js sätter på headern. */
.site-header::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--orange);
  transform: scaleX(var(--scroll-progress, 0)); transform-origin: left center;
  pointer-events: none;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
/* Logotypen är delad: maskoten är en bild, ordmärket och taglinen är riktig
   text. Då kan taglinen sättas i läsbar storlek och renderas skarpt i stället
   för att skalas ned till oläslighet i en bildfil.
   maskot-transp.png är beskuren tight och har petrolplattan (#0E3A44) inbakad i
   samma ton som header och sidfot, så den smälter in utan synlig ruta. */
.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand:hover { text-decoration: none; }
.brand-mark { display: block; height: 52px; width: auto; }
.brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-name {
  font-weight: 700; font-size: 30px; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--bg); white-space: nowrap;
}
.brand-tld { color: var(--orange); }
/* Taglinen får vara bredare än ordmärket ovanför. */
.brand-tagline {
  font-weight: 500; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bg); opacity: .8; white-space: nowrap;
}
/* Kortformen används bara i headern på små skärmar */
.tag-short { display: none; }
.site-footer .brand-tagline { font-size: 12px; }

.nav { display: flex; align-items: center; gap: 1.7rem; }
.nav a { color: var(--bg); font-weight: 500; font-size: .95rem; position: relative; }
.nav a:hover { color: var(--orange); text-decoration: none; }
/* Understrykning som växer ut från mitten vid hover. Länkarna är fullt synliga
   från start – linjen är det enda som animeras. */
.nav a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -5px; height: 2px;
  background: var(--orange); transition: left .2s ease, right .2s ease;
}
.nav a:hover::after { left: 0; right: 0; }
/* Högre specificitet än .btn-primary, så färgen måste sättas om även
   här – annars är menyknappen den enda som står kvar på vit text. */
.nav .nav-cta { color: var(--petrol-deep); }
.nav .nav-cta:hover { color: var(--petrol-deep); }
/* Knappen i menyn ska inte ha understrykning */
.nav .nav-cta::after { content: none; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: background-color .2s ease, transform .2s ease; }

/* ---------- Hero (foto + mörk petrol-overlay, vit versal rubrik) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Sista utvägen: laddar varken film eller posterbild står texten mot solid
     petrol, precis som förut. */
  background-color: var(--petrol);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
}
/* Stillbilden fyller hela sektionen och ligger underst. Motivet ligger på
   bildens högra halva och rubriken på den vänstra, så beskärningen hålls åt
   höger – då är det det tomma vänsterpartiet som offras först när skärmen
   smalnar, aldrig motivet. */
/* Parallax-lagret. Det är LAGRET som script.js transformerar, aldrig bilden.
   Skälet: object-fit: cover räknas om mot elementets EGEN storlek, så en
   scale() lagd på själva <img> hade tänjt motivet i stället för att zooma
   det. Lagret bär därför positioneringen och bilden fyller bara ut lagret.
   will-change: transform lyfter lagret till ett eget kompositlager, så att
   rullningen inte tvingar fram en ommålning av resten av sektionen.
   Gradientlagren .hero::before och .hero::after ligger kvar på själva
   sektionen och står alltså stilla – mörkerlagret följer inte med i
   transformen. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}
.hero-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}
/* Lokalt mörkerlager, målat före gradienten och i samma skikt. Den nya
   stillbilden är ljusare i övre vänstra hörnet än filmen var, så etiketten och
   punktraden tappade kontrast. Radialen mörkar hörnet där etikett och rubrik
   står, den lodräta tonen nederkanten där punktraden står, och båda tonar ut
   mot mitten och höger så att kartongerna och säckkärran inte påverkas.
   Etikettens orange och ::after-gradienten är därför orörda. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(150% 100% at 0% 0%,
      rgba(9, 47, 56, .55) 0%,
      rgba(9, 47, 56, .28) 45%,
      rgba(9, 47, 56, 0) 85%),
    linear-gradient(to top,
      rgba(9, 47, 56, .42) 0%,
      rgba(9, 47, 56, 0) 22%);
}

/* Sidans ursprungliga hero-filter, oförändrat, men flyttat från
   background-image på .hero till ett eget lager – annars hamnar det bakom
   filmen. Gradienten är nästan solid där texten står och tunnas ut åt höger,
   så motivet syns utan att kontrasten mot den vita rubriken tappar. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(var(--petrol-rgb), .96) 0%,
    rgba(var(--petrol-rgb), .88) 40%,
    rgba(var(--petrol-rgb), .55) 100%);
}
/* Containern håller full bredd så hero-texten börjar vid samma vänsterkant som
   loggan och sektionerna nedanför. Textkolumnen begränsas i stället på .hero-copy –
   tidigare låg max-width på containern, vilket centrerade hela hero:n. */
.hero-inner { display: block; position: relative; z-index: 2; }
.hero-copy  { max-width: 760px; }
/* Rubriken är en lång uppräkning – något mindre grad än sidans övriga h1 så
   den inte tar hela hero-ytan, särskilt på mobil. Taket sänktes från 2.6rem
   när magasinering lades till: rad två är då 843 px bred vid 2.6rem men bara
   760 px står till buds, så raden bröts. 2.3rem ger 746 px och ryms med
   marginal, och är fortfarande långt över den undre gränsen på 34 px. */
.hero h1 { color: #fff; font-size: clamp(1.65rem, 3.7vw, 2.3rem); }
/* ---------- Sista orden i hero-rubriken ----------
   Orange gradient klippt i texten, plus en mjuk glöd. color sätts före
   gradientreglerna: klarar webbläsaren inte background-clip: text står
   texten kvar i vanlig Bohagsbolaget-orange i stället för att bli osynlig.
   Fem färgstopp: texten är vit och cream, med ett smalt orange band mellan
   35 och 65 procent. Bandet sveper över bokstäverna som ett varmt ljus.
   Glöden bakom texten är fortfarande orange och ger samma varma sken runt
   de vita bokstäverna. */
.hero-gradient {
  color: var(--bg);
  background: linear-gradient(115deg,
              #FAF5EF 0%,
              #FFFFFF 35%,
              #E8862E 50%,
              #FFFFFF 65%,
              #FAF5EF 100%);
  background-size: 250% 250%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Exakt tre varv, och stannar sedan i utgångsläget. Rörelse som pågår
     längre än fem sekunder skulle annars behöva gå att pausa. */
  animation: gradient-shift 5s ease 3 forwards;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* Glöden används bara här på hela sidan. */
.hero-glow {
  text-shadow: 0 0 50px rgba(232,134,46,.55),
               0 0 100px rgba(232,134,46,.35),
               0 0 140px rgba(217,115,26,.25);
}

/* Runda punkter mellan orden i hero-rubriken. Punkten är tyngre och sitter
   högre än mittpunkten, så den får mindre grad och lyfts optiskt till mitten
   av versalhöjden. Värdena är i em och följer därför med i alla brytpunkter. */
.hero h1 .prick {
  font-size: .58em;
  /* Värdet är uppmätt för Space Grotesk, som sidan åter är satt i: punktens
     bläck låg 3–9 px över baslinjen vid rubrikens grad, medan versalhöjden
     var 30 px. Lyftet 0.373em av punktens egen grad flyttade den till 15 px,
     alltså exakt mitten av versalhöjden. Måtten är i em och följer därför
     med i alla brytpunkter. */
  vertical-align: .373em;
}

/* Håller ihop "– utan krångel" så raden aldrig bryts efter tankstrecket */
.nowrap { white-space: nowrap; }

/* Rubrikens andra rad hålls ihop på en rad – men bara där det finns bredd för
   det. Under 900 px får orden bryta fritt, annars svämmar rubriken över kanten
   på mobil. Radbrytningarna mellan raderna kommer från <br> i markupen. */
@media (min-width: 901px) {
  .hero-rad2 { white-space: nowrap; }
}
/* Etiketten står mot fotot, och ovanför mörkerlagret ligger .hero::after –
   därför kan ingen gradientjustering styra vad som lyser igenom bakom den.
   Egen solid platta i stället: #E8862E mot #092F38 ger 5,34:1 vid varje
   bredd, oberoende av bild och glöd. Typsnitt, grad, versaler och
   bokstavsmellanrum ärvs oförändrat från .eyebrow. */
.hero .eyebrow {
  display: inline-block;
  background: var(--petrol-deep);
  color: var(--orange);
  padding: 6px 12px;
  border-radius: 999px;
  position: relative;
  z-index: 2;
}
.hero-copy .lead { color: var(--on-dark-body); font-size: 1.12rem; max-width: 46ch; }
.lead { font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.75rem 0 1.5rem; }
/* Hero har två knappar. Under 480px bryter de annars till två rader med olika
   bredd, vilket ser ojämnt ut – här staplas de i stället i full bredd. */
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; padding: 0; margin: 0; color: var(--on-dark-body); font-weight: 600; font-size: .92rem; }

/* ---------- Sektioner: ljus (kräm) och mörk (petrol) varvas ---------- */
.section { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--petrol); }
/* Ljus rytm: två intilliggande ljusa sektioner får aldrig dela botten, annars
   försvinner gränsen mellan dem. Varje ljus sektion får därför en av dessa två
   uttryckligen, i stället för att ärva body. Petrolsektioner står utanför
   växlingen och nollställer den. Vita kort (.calc, .card, .faq-post, .trust,
   .contact-form) har egen ram eller skugga och syns på båda bottnarna – utom
   .trust, som saknar ram och därför alltid ska stå på krämvit. */
.section-cream { background: var(--bg); }
.section-white { background: var(--bg-card); }
.section-alt h2, .section-alt h3 { color: #fff; }
.section-alt p { color: var(--on-dark-body); }
.section-alt .eyebrow { color: var(--orange); }
.section-head { max-width: 700px; margin: 0 auto 2.75rem; text-align: center; }
.section-head h2 { margin: 0 0 .5rem; }
.section-head .lead { color: var(--muted); }
/* På mörk sektion skulle den dämpade grå tonen ovan bli oläslig */
.section-alt .section-head .lead { color: var(--on-dark-body); }

/* ---------- Tjänstekort (vita kort på kräm) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
/* Tjänsterna ligger 4x3 – omdömena använder samma .cards och ska inte följa med.
   grid-auto-rows: 1fr gör alla rader lika höga, så korten blir lika höga även
   när texterna är olika långa. */
.cards-services { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
/* Surfplatta: två i bredd. Fyra kort blir för smala redan strax över 1000px. */
@media (max-width: 1060px) {
  .cards-services { grid-template-columns: repeat(2, 1fr); }
}
.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 0; overflow: hidden; box-shadow: var(--shadow); text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,36,46,.12); }
/* height:auto krävs – annars slår height-attributet på <img> igenom som
   presentationshint och kopplar bort aspect-ratio, så bilden blir 900px hög. */
.card-img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.card-body { padding: 1.75rem 2rem 2rem; }

/* ---------- Klickbara tjänstekort med informationspanel ---------- */
.cards-services .card { cursor: pointer; }
/* Inline, inte flex: då flödar pilen med texten och hamnar direkt efter sista
   ordet även när raden bryts, i stället för att ligga kvar längst till höger. */
.card-cta {
  display: inline-block; text-align: center;
  margin-top: 1.1rem; padding: 0; background: none; border: 0;
  font: inherit; font-size: .8rem; font-weight: 500; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--orange-ink); cursor: pointer;
}
/* Bara pilen rör sig – texten står stilla. */
.card-cta span { display: inline-block; margin-left: .35rem; transition: transform 150ms ease; }
.cards-services .card:hover .card-cta span,
.card-cta:hover span,
.card-cta:focus-visible span { transform: translateX(4px); }

.panel {
  width: min(640px, calc(100% - 2rem));
  max-width: none; max-height: 88vh;
  padding: 0; border: 0; border-radius: var(--radius-card);
  background: var(--bg-card); color: var(--body-c);
  box-shadow: 0 24px 60px rgba(0, 36, 46, .28);
}
.panel::backdrop { background: rgba(0, 36, 46, .55); }
/* Långa paneler scrollar inuti sig själva, aldrig sidan bakom */
.panel-inner { max-height: 88vh; overflow-y: auto; padding: clamp(1.5rem, 4vw, 2.25rem); text-align: left; }
.panel-close {
  position: absolute; top: .4rem; right: .6rem;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 1.9rem; line-height: 1; color: var(--muted);
  transition: color 150ms ease, transform 100ms ease;
}
.panel-close:hover { color: var(--ink); }
.panel-close:active { transform: translateY(1px); }
.panel-title {
  margin: 0 2.5rem .25rem 0;
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.panel h4 {
  margin: 1.6rem 0 .4rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--orange-ink);
}
.panel p { margin: 0 0 .75rem; font-size: .95rem; line-height: 1.7; }
.panel-list { margin: 0 0 .75rem; padding-left: 1.15rem; font-size: .95rem; line-height: 1.7; }
.panel-list li { margin-bottom: .2rem; }
.panel-btn { margin-top: 1.4rem; }
.panel-note { margin: 1.1rem 0 0; font-size: .8rem; font-weight: 300; line-height: 1.6; color: var(--muted); }
.card h3 { margin-bottom: .5rem; }
.card p { margin: 0; }

/* ---------- "Varför välja oss" (mörk sektion, orange konturikoner) ---------- */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; max-width: 940px; margin: 0 auto; }
.feature { display: flex; gap: 1.1rem; align-items: flex-start; }
.feature-icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 6px;
  background: transparent; border: 2px solid var(--orange); color: var(--orange);
  display: grid; place-items: center; font-size: 1.3rem;
  overflow: hidden;
}
/* Ikonbilden fyller hela rutan innanför ramen. height:100% krävs – annars slår
   height-attributet igenom som presentationshint och bilden blir 240px hög. */
.feature-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 4px; }
.feature h3 { margin: 0 0 .3rem; font-size: 1.15rem; color: #fff; }
.feature p { margin: 0; }

/* ---------- FAQ (dragspel på <details>, ingen JavaScript) ---------- */
/* Samma ljusa botten som kontaktsektionen. */
.faq { max-width: 820px; margin: 0 auto; }
.faq-post {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin-bottom: .6rem;
  overflow: hidden;
}
.faq-post[open] { box-shadow: var(--shadow); }
/* list-style: none tar bort webbläsarens egen triangel; ::-webkit-details-marker
   behövs för äldre Safari. */
.faq-fraga {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  list-style: none; cursor: pointer;
  font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--ink);
  transition: background-color 150ms ease, color 150ms ease;
}
.faq-fraga::-webkit-details-marker { display: none; }
.faq-fraga:hover { background: var(--bg); color: var(--orange-ink); }
/* Pilen är två kanter som bildar en vinkel. Den pekar nedåt när frågan är
   stängd och roterar uppåt när den öppnas. */
.faq-tecken {
  flex: 0 0 auto; width: 9px; height: 9px; margin-right: 5px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}
.faq-post[open] .faq-tecken { transform: rotate(-135deg); }
.faq-svar { padding: 0 1.25rem 1.25rem; }
.faq-svar p { margin: 0; font-size: .95rem; line-height: 1.75; color: var(--body-c); }

@media (max-width: 560px) {
  .faq-fraga { padding: .95rem 1rem; font-size: .95rem; }
  .faq-svar { padding: 0 1rem 1.1rem; }
}

/* ---------- Prisvisning (belopp, RUT-etikett, prislista, långdistans) ---------- */
/* Komponenten används både i vita paneler (<dialog class="panel">) och direkt
   i krämvita sektioner. Därför sätts ingen egen bakgrund någonstans här –
   allt vilar på den botten som råkar ligga under. */
.pris {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
/* Ordningen låses explicit i stället för att lita på markupen. Beloppet ska
   alltid läsas först, etiketten därefter och ordinariepriset sist, oavsett
   hur raderna råkar hamna i HTML vid en framtida ändring. */
.pris__netto  { order: 1; }
.pris__badge  { order: 2; }
.pris__brutto { order: 3; }

/* Beloppet är kortets tyngdpunkt. 1.9rem mot bruttots .82rem ger kvoten
   1.9 / .82 = 2,32 – kravet är minst 2,2, så det finns marginal. Ändras den
   ena graden måste den andra följa med, annars faller kvoten under gränsen. */
.pris__netto {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--orange-ink);
}
/* Enheten är underordnad beloppet och skalas därför i em, inte rem – då
   följer den med automatiskt om beloppet ändrar grad. */
.pris__enhet {
  font-size: .55em;
  font-weight: 700;
  letter-spacing: 0;
  color: inherit;
}

/* Etiketten är en länk till villkoren, inte en knapp. Petrol på ljus orange
   botten i stället för orange text – orange på orange skulle inte nå 4,5:1. */
.pris__badge {
  display: inline-block;
  align-self: flex-start;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(232, 134, 46, .18);
  color: var(--petrol);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}
/* Bara bottnen mörknar vid hover – texten byter aldrig färg, så kontrasten
   kan inte försämras av interaktionen. Fokusringen kommer från sidans
   globala :focus-visible och ska inte överstyras här. */
.pris__badge:hover { background: rgba(232, 134, 46, .3); text-decoration: none; }
.pris__badge--fast { background: rgba(110, 123, 129, .16); color: var(--body-c); }
.pris__badge--fast:hover { background: rgba(110, 123, 129, .26); }
/* Ex moms är samma neutrala etikett som Fast pris – den talar om priskonvention,
   inte om avdrag, och ska därför inte bära den orangea avdragsbottnen. */
.pris__badge--moms { background: rgba(110, 123, 129, .16); color: var(--body-c); }
.pris__badge--moms:hover { background: rgba(110, 123, 129, .26); }

/* INGEN genomstrykning. Ett överstruket pris läses som rea, och ordinariepriset
   gäller fortfarande för den som inte har RUT – att stryka över det vore
   vilseledande. Storleken och den dämpade tonen räcker för att visa vad som
   är huvudpriset. */
.pris__brutto {
  font-size: .82rem;
  color: var(--muted);
}

/* ---- Prislista: rad med tjänstenamn till vänster och pris till höger ---- */
.prisrad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
/* Sista raden får ingen linje – annars ser listan avhuggen ut mot det som
   kommer efter. */
.prislista .prisrad:last-child { border-bottom: 0; }
.prisrad__namn { color: var(--ink); font-size: 1rem; line-height: 1.5; }

@media (max-width: 560px) {
  /* Namn och pris får inte plats bredvid varandra utan att beloppet krymper
     eller namnet bryts i småbitar. Staplade i stället, priset direkt under
     namnet och allt vänsterställt. */
  .prisrad {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
  }
}

/* ---- Långdistanstabell ---- */
.langd-tabell { display: grid; gap: 0; }
.langd-rad {
  display: grid;
  grid-template-columns: 1.7fr .8fr 1fr 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.langd-tabell .langd-rad:last-child { border-bottom: 0; }
.langd-rad--rubrik {
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
/* RUT-priset är det tal folk letar efter, så det får samma vikt och färg som
   beloppet i .pris och lyfts över de övriga cellerna. */
.langd-netto { font-size: 1.15rem; font-weight: 700; color: var(--orange-ink); }

@media (max-width: 700px) {
  /* Fyra kolumner ryms inte utan att texten antingen krymper till oläslighet
     eller drar upp horisontell scroll. Varje rad blir i stället ett litet
     kort där cellerna får sina etiketter ur data-etikett – rubrikraden
     behövs då inte längre. */
  .langd-tabell { gap: .75rem; }
  .langd-rad--rubrik { display: none; }
  .langd-rad {
    grid-template-columns: 1fr;
    gap: .2rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
  }
  .langd-tabell .langd-rad:last-child { border: 1px solid var(--line); }
  .langd-rad span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
  }
  /* Etiketten först i cellen. Den krymper före värdet, så även 320px räcker. */
  .langd-rad span::before {
    content: attr(data-etikett);
    flex: 0 1 auto;
    min-width: 0;
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
  }
  /* Första cellen är sträckan och står som rubrik i kortet – den behöver
     ingen etikett bredvid sig. */
  .langd-rad span:first-child {
    display: block;
    margin-bottom: .35rem;
    color: var(--ink);
    font-weight: 700;
  }
  .langd-rad span:first-child::before { content: none; }
}

/* ---- Villkorsblock som etiketterna länkar till ---- */
/* section[id] längre ned sätter redan scroll-margin-top: 90px, vilket räcker
   med gott om marginal mot headerns 68px. Upprepas inte här. */
/* Villkoren är numera ett underavsnitt sist i ROT och RUT-sektionen, inte en
   egen sektion. Toppmarginalen skiljer det från knappen ovanför. */
.villkor {
  max-width: 780px;
  margin: 3rem auto 0;
  color: var(--body-c);
  line-height: 1.8;
}
.villkor h3 { margin-bottom: .6rem; }
/* Villkoren rymmer flera underrubriker – nästa rubrik behöver luft mot
   stycket ovanför. */
.villkor h3 + p ~ h3 { margin-top: 2.2rem; }

/* ---------- Kontakt (ljus sektion, vitt formulärkort) ----------
   Bakgrunden kommer från .section-cream i markupen, inte härifrån. */
#kontakt h2, #kontakt h3 { color: var(--ink); }
#kontakt p { color: var(--body-c); }
/* Krämvit botten: --orange ger 2,46:1, --orange-ink 4,84:1. */
#kontakt .eyebrow { color: var(--orange-ink); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-info .lead { max-width: 42ch; color: var(--body-c); }
.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.1rem; }
.contact-list li { display: grid; gap: .1rem; }
.ci-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .063em; color: var(--orange-ink); font-weight: 500; }
.contact-list a, .contact-list span { color: var(--ink); }
.contact-list a { font-size: 1.05rem; font-weight: 700; }
/* Två telefonnummer under samma etikett behöver lite mer luft än radgapet */
.contact-list li a + a { margin-top: .3rem; }
/* Kortknappen ska vara lika bred som sin text, inte hela kolumnen, och
   behålla knappstorleken – .contact-list a sätter annars 1.05rem. */
.contact-list .btn { justify-self: start; margin-top: .6rem; font-size: .92rem; }
/* .contact-list a sätter färgen på alla länkar – kortknappen ska behålla
   sin orange text och bli vit först när den fylls vid hover. */
.contact-list .btn-outline { color: var(--orange-ink); }
.contact-list .btn-outline:hover { color: #fff; }
.contact-list .btn + a { margin-top: 1rem; }

.contact-form {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 2rem; box-shadow: var(--shadow);
}
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 500; font-size: .88rem; margin-bottom: .35rem; color: var(--ink); }
.field input, .field textarea {
  width: 100%; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-btn);
  font: inherit; color: var(--ink); background: #fff; transition: border-color .15s;
}
.field input:focus, .field textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,134,46,.18); }
.form-alt { text-align: center; font-size: .9rem; font-weight: 300; color: var(--muted); margin: 1rem 0 0; }

/* Bekräftelse/fel efter att formuläret skickats */
.form-status {
  margin: 1rem 0 0; padding: .85rem 1rem;
  border-radius: var(--radius-btn);
  font-size: .93rem; font-weight: 600; line-height: 1.45;
}
.form-status.is-ok    { background: #E7F3EC; border: 1px solid #B7DCC6; color: #1B5E38; }
.form-status.is-error { background: #FCEDE6; border: 1px solid #F0C4AB; color: #8A3A12; }

/* ---------- Footer (mörk petrol som originalet) ---------- */
.site-footer { background: var(--petrol); color: var(--on-dark-body); padding: 3.5rem 0 1.5rem; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer-brand p { margin-top: .75rem; max-width: 32ch; color: #B9C9CE; }
.footer-col h3 { color: #fff; margin-bottom: .75rem; font-size: .95rem; font-weight: 500; text-transform: uppercase; letter-spacing: .063em; }
.footer-col a, .footer-col span { display: block; color: var(--on-dark-body); margin-bottom: .4rem; }
.footer-col a:hover { color: var(--orange); }
/* Små textlänkar till de digitala visitkorten, under kontaktuppgifterna */
.footer-col .footer-kort { font-size: .85rem; font-weight: 300; color: #9FB3B9; }
.footer-col a + .footer-kort { margin-top: .7rem; }
.footer-col .footer-kort + .footer-kort { margin-top: .2rem; }
/* Tjänstekolumnen är andra barnet i .footer-inner (första är .footer-brand).
   Vid hover glider en orange pil in från vänster och länken flyttar in lika
   långt, så pilen hamnar där texten började. */
.footer-inner .footer-col:nth-child(2) a {
  position: relative;
  transition: transform .2s ease, color .2s ease;
}
.footer-inner .footer-col:nth-child(2) a::before {
  content: '→'; position: absolute; left: -18px; top: 0;
  color: var(--orange); opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.footer-inner .footer-col:nth-child(2) a:hover { transform: translateX(18px); color: var(--orange); }
.footer-inner .footer-col:nth-child(2) a:hover::before { opacity: 1; transform: translateX(0); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2.25rem; padding-top: 1.25rem; font-size: .85rem; font-weight: 300; color: #9FB3B9; }
.footer-bottom a { color: #9FB3B9; text-decoration: underline; }
.footer-bottom a:hover { color: #fff; }

/* Företagsinformation längst ned i sidfoten */
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 2rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: var(--on-dark-body);
  opacity: .75;
  text-align: center;
}
.footer-legal p { margin: 0 0 .25rem; }
.footer-legal .orter { white-space: nowrap; }
.footer-legal a { color: inherit; text-decoration: underline; }
.footer-legal a:hover { color: #fff; }
.footer-credit { margin-top: .75rem; }

/* Textsidor (integritetspolicy) */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { margin-bottom: 1.5rem; overflow-wrap: break-word; }
.legal h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
.legal p, .legal li { color: var(--body-c); }
.legal ul { padding-left: 1.25rem; margin: .5rem 0; }
.legal li { margin-bottom: .35rem; }
.legal .updated { font-size: .85rem; font-weight: 300; color: var(--muted); }
/* Avvikande, mindre ruta för friskrivningar sist på en textsida */
.legal-note {
  margin: 2.5rem 0 0;
  padding: 1.1rem 1.35rem;
  background: #F1EAE0;
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-btn);
}
.legal-note p { margin: 0; font-size: .85rem; font-weight: 300; line-height: 1.65; color: var(--muted); }

/* ---------- Responsivt ---------- */
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  /* Tjänsterna behåller 2x2 på surfplatta – de går till en kolumn först på mobil */
  .cards-services { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Navigeringen går över till hamburgare tidigare än resten av layouten:
   brand-blocket är 384px brett och menyraden ~500px, så de får inte plats
   bredvid varandra under ~960px – då uppstår horisontell scroll i stället. */
@media (max-width: 1000px) {
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--petrol); border-bottom: 1px solid rgba(255,255,255,.1);
    padding: .5rem 20px 1rem; box-shadow: var(--shadow);
    transform: translateY(-120%); transition: transform .25s ease; pointer-events: none;
  }
  .nav.open { transform: translateY(0); pointer-events: auto; }
  .nav a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  /* I den utfällda mobilmenyn har länkarna redan avdelare – ingen understrykning */
  .nav a::after { content: none; }
  .nav .nav-cta { margin-top: .75rem; border-bottom: 0; }
  .nav-toggle { display: flex; }
}

/* Under 520px krymper brand-blocket och headerns tagline går över till
   kortformen, så att allt får plats bredvid hamburgaren utan att wrappa. */
@media (max-width: 520px) {
  .brand-mark { height: 38px; }
  .brand-name { font-size: 22px; }
  .site-header .brand-tagline { font-size: 9px; }
  .site-header .tag-full { display: none; }
  .site-header .tag-short { display: inline; }
  /* Sidfoten behåller taglinen i full längd, men 12px blir 349px bred och
     spräcker 360px-skärmen – därför samma nedskalning som headern. */
  .site-footer .brand-tagline { font-size: 9px; }
}

/* Ordmärket är riktig text, aldrig en bild, och "Bohagsbolaget.se" är en
   sammansättning. Under och vid 480px bryts den där fogen sitter:

       BOHAGS
       BOLAGET.SE

   Markupen har ett .brand-ord per led, utan blanksteg mellan spanarna, så
   leden flyter ihop till en enda rad så länge .brand-name är inline – det
   är läget över 480px, där white-space: nowrap dessutom garanterar en rad.
   Här görs .brand-name i stället till en flexkolumn: varje .brand-ord blir
   ett flexobjekt och därmed en egen rad. Ingen text dupliceras och inget
   döljs – samma noder, bara en annan radbrytning.

   line-height 1.04 håller ihop de två raderna: 2 × 1.04 × 22px = 45,8px,
   plus 3px gap och 9px tagline ger 57,8px, vilket ryms i headerns 68px.
   Med normal radhöjd hade blocket blivit ~66px och tryckt mot kanterna.

   .brand behåller align-items: center. Maskoten är 38px och textblocket
   57,8px, så maskoten centreras optiskt mot de två raderna; flex-start
   hade tryckt upp den i linje med enbart översta raden.

   Graden ligger kvar på 22px från 520px-steget. Uppmätt i den variabla
   filen vid wght 700 är "BOLAGET.SE" 5,578em efter spärrningen -.02em,
   alltså 123px vid 22px – smalare än headerns tagline (~160px vid 9px),
   som därmed styr brand-blockets bredd. På 320px lämnar maskot 38px +
   gap 10px + 160px tagline + 40px containerpadding + ~40px hamburgare
   drygt 30px luft, så ordmärket tränger inte undan menyknappen. Någon
   ytterligare nedskalning av .brand-name behövs alltså inte. */
@media (max-width: 480px) {
  .site-header .brand-name,
  .site-footer .brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1.04;
  }
}

/* Under 360px räcker inte 9px heller – hela varumärkesraden blir bredare än
   containern och drog upp horisontell scroll på 320px-skärmar. Ett steg till
   ned, så ryms den utan att uppräkningen behöver brytas mitt itu. */
@media (max-width: 360px) {
  .site-footer .brand-tagline { font-size: 8px; letter-spacing: .03em; }
}

/* ==========================================================================
   Priskalkylator – interaktiv lastbil
   ========================================================================== */

.section-price .lead { color: var(--body-c); }
.section-price .lead strong { color: var(--orange-ink); }

/* Samlad avdragsnot överst i prissektionen. Ligger inuti .section-head, som är
   centrerad, så noten centreras på samma sätt och hålls smalare än raden runt
   62 tecken för läsbarhet. Dämpad och mindre än .lead: den ska läsa som en
   underrad till rubriken, inte konkurrera med den. Länken står på krämvit
   botten och använder därför --orange-ink. */
.pris-avdragsnot {
  max-width: 62ch; margin: .9rem auto 0;
  text-align: center; font-size: .88rem; line-height: 1.6; color: var(--muted);
}
.pris-avdragsnot a { color: var(--orange-ink); text-decoration: underline; }

.calc {
  max-width: 900px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.calc-truck { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2rem; align-items: center; }
/* Utan detta blir kolumnen lika bred som fotots naturliga 1600px (grid-items
   har min-width:auto = min-content) och hela kortet spränger sidan. */
.calc-truck > * { min-width: 0; }
.truck-photo{
  position: relative;
  /* Skåpets insida i procent av bildens mått (foto 1600x893). Justera dessa
     fyra tills den orange ytan ligger exakt innanför skåpets kanter — inget
     annat behöver ändras.
     Uppmätt i källbilden 1600x893 (nu bil-ny-1000.webp): vänster x=557,
     höger x=1438, topp y=171, botten y=623. */
  --box-left: 34.81%;
  --box-right: 89.88%;
  --box-top: 19.15%;
  --box-bottom: 69.76%;
}
.truck-photo img{ width:100%; max-width:100%; height:auto; display:block; border-radius:6px; }
.truck-load{
  position:absolute;
  left: var(--box-left);
  width: calc(var(--box-right) - var(--box-left));
  top: var(--box-top);
  height: calc(var(--box-bottom) - var(--box-top));
  overflow:hidden;
  pointer-events:none;
}
.truck-load::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height: var(--fill, 0%);
  background: rgba(232,134,46,.55);
  border-top: 3px solid rgba(217,115,26,.95);
  transition: height .45s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce){
  .truck-load::after{ transition:none; }
}

.calc-readout { display: grid; gap: .15rem; }
.calc-label {
  justify-self: start;
  background: var(--petrol); color: #fff;
  font-weight: 500; font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .35rem .85rem; border-radius: 4px;
  margin-bottom: .4rem;
}
.calc-vol  { font-weight: 700; color: var(--ink); font-size: 1rem; }
.calc-from { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; margin-top: .5rem; }
.calc-price {
  font-size: clamp(2rem, 4.4vw, 2.7rem); font-weight: 700; letter-spacing: -.02em; color: var(--orange-ink);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.calc-desc { color: var(--body-c); font-size: .95rem; margin-top: .35rem; }

/* Reglage */
.calc-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 99px; margin: 2rem 0 1rem;
  background: linear-gradient(to right, var(--orange) 0%, var(--orange) var(--pct,40%), var(--line) var(--pct,40%), var(--line) 100%);
  cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--orange); border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0,36,46,.28); cursor: grab;
}
.calc-range::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; border: 4px solid #fff;
  background: var(--orange); box-shadow: 0 2px 8px rgba(0,36,46,.28); cursor: grab;
}

/* --steg sätts av script.js efter antalet steg i TIERS */
.calc-steps { display: grid; grid-template-columns: repeat(var(--steg, 6), 1fr); gap: .4rem; }
.calc-steps button {
  font: inherit; font-size: .78rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .03em; padding: .5rem .25rem; cursor: pointer;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px;
  transition: background-color 150ms ease,
              color 150ms ease,
              border-color 150ms ease,
              transform 100ms ease;
}
.calc-steps button:hover { border-color: var(--orange); color: var(--orange-ink); }
.calc-steps button:active { transform: translateY(1px); }
.calc-steps button.active { background: var(--petrol); border-color: var(--petrol); color: #fff; }

.btn-calc { width: 100%; margin-top: 1.5rem; }

/* Trust-rad – ljusare platta som läser som en egen enhet */
.trust {
  max-width: 900px; margin: 1.75rem auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  background: var(--bg-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 1.75rem clamp(1.25rem, 3vw, 2rem);
}
.trust-item { text-align: center; }
.trust-icon { color: var(--orange); margin-bottom: .6rem; }
.trust-icon svg { width: 30px; height: 30px; }
.trust-item h3 {
  margin: 0 0 .3rem;
  font-size: .82rem; font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase; letter-spacing: .05em;
  line-height: 1.35; color: var(--ink);
}
.trust-item p { margin: 0; font-size: .88rem; font-weight: 300; line-height: 1.55; color: var(--muted); }

/* Så går det till */
/* Samma 900px som .calc och .trust – hela prissektionen delar kant */
.steps { max-width: 900px; margin: 3rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { text-align: center; padding: 0 1rem; }
/* Samma resonemang som .btn-primary: vit på orange ger 2,66:1 och underkänns,
   petroltext (#092F38 mot #E8862E) ger 5,34:1. Bakgrunden är oförändrad. */
.step-num {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto .9rem;
  border-radius: 50%; background: var(--orange); color: var(--petrol-deep);
  font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em;
}
.step h3 { margin-bottom: .4rem; font-size: 1.1rem; }
.step p  { margin: 0; color: var(--body-c); }

.price-note {
  max-width: 720px; margin: 2.5rem auto 0; text-align: center;
  font-size: .85rem; font-weight: 300; color: var(--muted); line-height: 1.6;
}
/* Två noter efter varandra i en panel hör ihop – den andra ska inte få hela
   toppmarginalen en gång till. */
.panel .price-note + .price-note { margin-top: .4rem; }

/* ==========================================================================
   Scroll-animationer
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Sticky ring-bar (mobil)
   ========================================================================== */
.mobile-bar { display: none; }

@media (max-width: 860px) {
  /* På mobil går texten över hela bredden – då räcker inte en gradient åt
     höger. Originalets lodräta variant, oförändrad. */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(var(--petrol-rgb), .92) 0%,
      rgba(var(--petrol-rgb), .88) 100%);
  }

  .calc-truck { grid-template-columns: 1fr; gap: 1.25rem; }
  .calc-steps { grid-template-columns: repeat(3, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }

  body { padding-bottom: 68px; }
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(14,58,68,.97); backdrop-filter: blur(8px);
    box-shadow: 0 -4px 20px rgba(0,36,46,.25);
  }
  .mobile-bar a {
    display: flex; align-items: center; justify-content: center;
    padding: .8rem .5rem; border-radius: var(--radius-btn);
    font-weight: 500; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em;
    text-decoration: none;
    transition: background-color 150ms ease, transform 100ms ease;
  }
  .mobile-bar a:hover { text-decoration: none; }
  .mobile-bar a:active { transform: translateY(1px); }
  /* Samma resonemang som .btn-primary: vit på orange ger 2,66:1,
     petroltext 5,34:1. */
  .mb-call  { background: var(--orange); color: var(--petrol-deep); }
  .mb-quote { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
}

/* Tumme, inte muspekare: varje knapp är minst 44px hög på smal skärm. */
@media (max-width: 700px) {
  .btn,
  .btn-sm,
  .calc-steps button,
  .panel-close,
  .nav-toggle,
  .mobile-bar a { min-height: 44px; }
  /* Strecken ska stå mitt i den högre ytan, inte klistras uppåt. */
  .nav-toggle { justify-content: center; }
  /* Pil-länken behåller sitt läge: marginalen minskar lika mycket
     som paddingen växer, så texten står kvar där den stod. */
  .card-cta { min-height: 44px; margin-top: .6rem; padding: .5rem 0 0; }
}

@media (max-width: 560px) {
  /* "Integritetspolicy" är ett enda långt ord som annars är bredare än
     containern och drar upp horisontell scroll på mobil. */
  .legal h1 { font-size: 1.7rem; }
  /* De tre punkterna hamnar på var sin rad här – tätare radavstånd så att
     sista raden inte hamnar bakom den fasta ring-baren vid sidans topp. */
  .hero-badges { gap: .5rem 1rem; }
  .trust { grid-template-columns: 1fr; gap: 1.35rem; }
  .cards-services { grid-template-columns: 1fr; }
}

/* Ankarlänkar ska inte hamna bakom den fasta headern: den är 68px hög, och
   90px ger marginal ovanför målet. Rubriker med id omfattas också, eftersom
   ett underavsnitt kan bära ankaret på sin rubrik i stället för på sektionen. */
section[id], h2[id], h3[id] { scroll-margin-top: 90px; }

/* ==========================================================================
   Reducerad rörelse – stänger av alla animationer och övergångar på sidan.
   Ligger sist i filen så den vinner över allt ovanför.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Gradienten och glöden i hero-rubriken ligger kvar – det är bara
     rörelsen som ska bort. */
  .hero-gradient { animation: none !important; background-position: 0% 50%; }
  /* Skyddsnät. script.js sätter normalt aldrig någon stil alls när reducerad
     rörelse är påslaget – raderna nedan finns bara ifall en inline-transform
     skulle ha hunnit sättas innan mediavillkoret slog till. */
  .hero-media { transform: none !important; }
  .hero-inner { opacity: 1 !important; pointer-events: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}