/* ==========================================================================
   LACKVAKTEN AB — designsystem
   Uppmätt live från rokumaruichi.tokyo (601 Inc.), kompletterat med
   knappbehandlingen från playsuperlative.com. Mätta värden märkta [mätt].

   Systemets tre regler, och de är hela poängen:
     1. EN textfärg. Ingen ljusramp. Hierarki byggs av storlek, inte av grått.
     2. EN liten grad (13px versalt) till allt gränssnitt — meny, etiketter,
        räknare, knappar. Enda hoppet i skalan är displaygraden, som är enorm.
     3. NOLL hörnradie. Ingen fylld knapp. Inga kort med ram.
   ========================================================================== */

:root{
  /* [mätt] 601 kör tre ytor och ingenting mer. Här med logotypens guld. */
  --void:      #070706;   /* [mätt-motsv] #090909 — botten */
  --band:      #100E09;   /* varm nästan-svart för varannan sektion */
  --concrete:  #3A3227;   /* [mätt-motsv] #4f4d3c — används EN gång, i slutbandet */

  --gold:      #E7DCBE;   /* [mätt-motsv] #ece4b4 — ALL text, allt gränssnitt */
  --gold-deep: #C9A85F;   /* logotypens guld — linjer och fyllning vid hover */

  /* [mätt] övergångar är långsamma och avsiktliga, inte 0,2 s standard.
     601: background/color 1.7s cubic-bezier(.14,1,.34,1).
     Nedkortat till 1.1s här — knappar ska hinna svara. */
  --ease:  cubic-bezier(.14,1,.34,1);
  --t:     1.1s;
  --ease-in: cubic-bezier(.66,0,.34,1);   /* [mätt] för opacity/transform */
  --t-in:  1.2s;                          /* [mätt] */

  --pad: 2.4rem;
}

/* [mätt-metod] vw-baserad rot mot 1440, som i FORNO. Typografin skalar
   proportionellt i stället för att klampas till gröt vid varje brytpunkt. */
html{ font-size:1vw; }
@media (max-width:1100px){ html{ font-size:1.45vw; } }
@media (max-width:700px){  html{ font-size:2.9vw;  } }

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--void);
  color:var(--gold);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:13px;                /* [mätt] allt gränssnitt är 13px */
  line-height:1.7;               /* [mätt] 22.1px / 13px */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }

::selection{ background:var(--gold); color:var(--void); }

/* ─────────────────────────────────────────────────────────── typografi ── */

/* Display: graverade versaler, som logotypens ordbild. */
.d{
  font-family:Cinzel,"Times New Roman",serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.012em;
  line-height:.86;               /* [mätt-metod] displayrader ska sitta ihop */
  margin:0;
}
.d1{ font-size:7.6rem; }         /* 109px @1440 */
.d2{ font-size:4.6rem; }         /*  66px */
.d3{ font-size:2.9rem; }         /*  42px */
.d4{ font-size:1.7rem; line-height:1.1; letter-spacing:0; }

/* vw-roten ensam räcker inte på telefon — displaygraderna måste ner i steg,
   annars blir en lång svensk rubrik bredare än skärmen. */
@media (max-width:700px){
  .d1{ font-size:3.5rem; line-height:.92; }
  .d2{ font-size:2.7rem; line-height:.95; }
  .d3{ font-size:2.1rem; }
  .d4{ font-size:1.5rem; }
}

/* Siffran som byggsten, inte som bricka på ett kort. [mätt] 230–280px hos 601 */
.num{
  font-family:Cinzel,serif; font-weight:400;
  font-size:13rem; line-height:.74; letter-spacing:-.05em;
  color:var(--gold-deep);
  display:block;
}
.num--sm{ font-size:6.4rem; }
@media (max-width:900px){ .num{ font-size:5.4rem; } }

/* Allt gränssnitt: en enda grad. */
.lbl{
  font-size:13px; text-transform:uppercase; letter-spacing:.13em;
  line-height:1; margin:0;
}
.meta{ font-size:13px; letter-spacing:.02em; opacity:.55; }

/* Brödtext får en grad till, inget mer. */
.txt{ font-size:15px; line-height:1.7; max-width:46ch; margin:0 0 1.1em; }
.txt:last-child{ margin-bottom:0; }
.txt--wide{ max-width:60ch; }

/* ────────────────────────────────────────────────────────────── layout ── */

.wrap{ padding-inline:var(--pad); }
.wrap--mid{ max-width:78rem; margin-inline:auto; padding-inline:var(--pad); }

section{ position:relative; }
.band{ padding-block:9rem; }
.band--tight{ padding-block:5.5rem; }

/* Rotstorleken skalar med skärmens BREDD (1vw), men hur rymligt något känns
   styrs av höjden. På en smal, hög telefon blir 9rem därför oproportionerligt:
   [mätt] 98 px över plus 88 px under gav 186 px tomt mellan varje sektion på
   en skärm som bara är 812 px hög — nästan en fjärdedel av rutan tom mellan
   varje textblock. På 1440 px breda skärmar är samma mått 130 px och känns
   rätt, så det är bara mobilen som behöver dras in. */
@media (max-width:700px){
  .band{ padding-block:5rem; }
  .band--tight{ padding-block:3.2rem; }
  .close{ padding-block:5rem; }
}
.band--alt{ background:var(--band); }

/* Hårfina linjer i stället för kortramar. [mätt] 601 saknar kort helt. */
.rule{ height:1px; background:var(--gold); opacity:.18; border:0; margin:0; }

/* ───────────────────────────────────────────────────────────── header ── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; gap:2rem;
  padding:1.6rem var(--pad);
  color:var(--gold);
}
/* INGEN mix-blend-mode. Den satt här förut och gjorde menyraden läsbar mot
   både mörk studio och ljus verkstad utan platta — men den bröt sönder
   position:fixed i iOS Safari.
   [tittat] på iPhone hamnade hela raden 170–280 px ned på sidan direkt vid
   inladdning, med en remsa av hjältebilden ovanför. Att menyn låg rätt så fort
   man öppnade den var ledtråden: .nav.is-open slår av blandningen.
   Orsaken är att ett element med mix-blend-mode komponeras separat, och då
   mäter Safari dess topp mot fel vy medan adressfältet fäller ihop.

   I stället ligger en mörk toning bakom raden när sidan är i topp. Den gör
   guldet läsbart mot vilken hjältebild som helst — våra är ljusa på tre av
   fyra sidor — och den tonas bort när plattan kommer in vid scroll.

   Både toningen och plattan ligger i pseudoelement bakom innehållet.
   .nav har z-index 80 och bildar därmed en egen staplingskontext, så ett
   negativt z-index stannar innanför raden och hamnar aldrig bakom sidan. */
.nav::after{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(to bottom, rgba(7,7,6,.82), rgba(7,7,6,.46) 62%, rgba(7,7,6,0));
  transition:opacity .32s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--void);
  border-bottom:1px solid rgba(231,220,190,.18);
  opacity:0; transition:opacity .32s var(--ease);
}
/* Skuggan är bältet till toningens hängslen. Dekalsidans hjältebild är en vit
   studiovägg, och där ligger guldet farligt nära bakgrunden i ljushet även med
   toning. Mot mörka hjältebilder märks skuggan inte alls. */
.nav:not(.is-stuck){ text-shadow:0 1px 10px rgba(7,7,6,.75); }

.nav.is-stuck{ text-shadow:none; }
.nav.is-stuck::before{ opacity:1; }
.nav.is-stuck::after{ opacity:0; }   /* plattan tar över, toningen behövs inte */

.nav__brand{ display:flex; align-items:center; gap:.9rem; flex:none; }
.nav__mark{ width:3.4rem; height:1.1rem; flex:none; display:block; }
.nav__brand b{
  font-family:Cinzel,serif; font-weight:400;
  font-size:1.15rem; letter-spacing:.22em; text-transform:uppercase;
}
.nav__brand i{ font-style:normal; font-size:13px; letter-spacing:.16em; opacity:.6; }

.nav__links{ display:flex; align-items:center; gap:0; margin-left:auto; }
/* [mätt] 12px vertikal / 21px horisontell padding, understruken vid hover */
.nav__links a{
  padding:12px 21px;
  font-size:13px; text-transform:uppercase; letter-spacing:.13em;
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease);
}
.nav__links a:hover,
.nav__links a.is-current{ border-bottom-color:currentColor; }

.nav__cta{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav__tel{
  padding:12px 21px; font-size:13px; text-transform:uppercase; letter-spacing:.13em;
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease);
}
.nav__tel:hover{ border-bottom-color:currentColor; }
.nav__telIcon{ display:none; width:16px; height:16px; }

.nav__burger{
  display:none; width:34px; height:34px; flex:none; padding:0; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__burger span{ display:block; width:18px; height:1px; background:currentColor; position:relative; }
.nav__burger span::before,.nav__burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:currentColor;
  transition:transform .5s var(--ease), top .3s var(--ease);
}
.nav__burger span::before{ top:-6px; }
.nav__burger span::after{  top:6px;  }
.nav.is-open .nav__burger span{ background:transparent; }
.nav.is-open .nav__burger span::before{ top:0; transform:rotate(45deg); }
.nav.is-open .nav__burger span::after{  top:0; transform:rotate(-45deg); }

@media (max-width:1000px){
  .nav{ color:var(--gold); gap:1rem; }
  /* Samma riktningsregel som på stora skärmar: svart på väg ned, genomskinlig
     på väg upp. Toningen bakom raden gör guldet läsbart mot ljusa hjältebilder
     även då.

     Är menyn öppen behövs ingen toning: .nav__links har en egen svart platta
     som täcker hela skärmen. */
  .nav.is-open::after{ opacity:0; }
  .nav__cta{ order:2; margin-left:auto; }
  .nav__burger{ display:flex; order:3; }
  .nav__tel{ padding:8px; }
  .nav__tel span{ display:none; }
  .nav__telIcon{ display:block; }
  .nav__links{
    position:fixed; inset:5.6rem 0 auto 0;
    flex-direction:column; align-items:flex-start;
    background:var(--void); padding:1rem var(--pad) 2rem; margin:0;
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav.is-open .nav__links{ opacity:1; pointer-events:auto; transform:none; }
  .nav__links a{
    width:100%; padding:1.1rem 0; font-size:1.5rem; letter-spacing:.1em;
    border-bottom:1px solid rgba(231,220,190,.18);
  }
  .nav__links a:hover,.nav__links a.is-current{ border-bottom-color:rgba(231,220,190,.18); }
}

/* ────────────────────────────────────────────────────────────── knapp ── */
/* [mätt] Superlative: genomskinlig, 1px ram, NOLL radie, ingen fylld CTA. */

/* Knapp direkt efter en displayrubrik behöver egen luft. Displaygraderna har
   line-height .86, alltså mindre än teckenhöjden, så radboxen slutar ovanför
   där bokstäverna faktiskt slutar — en svans i "?" eller "j" hamnar praktiskt
   taget på knappramen. Det syns på 8 ställen över 5 sidor.

   Regeln sitter på syskonkombinationen i stället för i varje mall, så den
   gäller även knappar som läggs till senare. */
.d + .btn, .d + .btnrow{ margin-top:2.8rem; }

.btn{
  display:inline-block;
  padding:1.15rem 2.6rem;
  border:1px solid currentColor;
  border-radius:0;
  font-size:13px; text-transform:uppercase; letter-spacing:.13em; line-height:1;
  background:transparent;
  cursor:pointer;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.btn:hover{ background:var(--gold); color:var(--void); }
.btn--solid{ background:var(--gold); color:var(--void); }
.btn--solid:hover{ background:transparent; color:var(--gold); }

.btnrow{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* På mobil staplas knapparna i stället för att radbrytas.

   [mätt] med radbrytning blev resultatet olika på varje sida: två knappar som
   nätt och jämnt fick plats hamnade kompakt till höger, medan ett par tecken
   längre etikett gjorde att de bröt och fyllde hela bredden. Vänstermarginalen
   varierade mellan 2 och 160 px i samma typ av sektion. Det läser som slump,
   inte som en avsikt.

   Allt ställs VÄNSTER. På stora skärmar sitter knapparna i en egen kolumn till
   höger om texten och högerställningen binder ihop kolumnerna. På mobil
   staplas kolumnerna, och då står knapparna kvar till höger under en
   vänsterställd rubrik och vänsterställd brödtext — det läser som ett fel.

   Sidledsställningen styrs av align-items när riktningen är column;
   justify-content flyttas då till höjdled och slutar verka, så inline-stilen
   justify-content:flex-end som gäller på stora skärmar blir verkningslös här
   utan att behöva tas bort. */
@media (max-width:700px){
  .btnrow{ flex-direction:column; align-items:flex-start; }
}

/* Textlänk: bara understrykning, ingen pil-i-cirkel. */
.tl{
  display:inline-block; font-size:13px; text-transform:uppercase; letter-spacing:.13em;
  padding-bottom:.35rem; border-bottom:1px solid currentColor;
  transition:opacity var(--t) var(--ease);
}
.tl:hover{ opacity:.6; }

/* ─────────────────────────────────────────────────────────── scrubscen ── */

.scrub{ position:relative; }
.scrub__sticky{
  position:sticky; top:0;

  /* Två rader, och ordningen är hela poängen.

     `svh` är den lilla vyn — skärmen som den ser ut när adressfältet ÄR
     framme. Det är rätt mått i iOS Safari: `vh` räknar mot den stora vyn,
     alltså skärmen med adressfältet dolt, så en scen på 100vh sticker ut
     under fältet och nederkanten klipps tills man skrollat.

     Men `svh` kom först i iOS 15.4. En webbläsare som inte kan enheten
     kastar hela deklarationen — och utan reserven blir scenen då bara
     `min-height`, alltså 391 px i stället för helskärm. Därför står `vh`
     först och skrivs över av `svh` där den finns. */
  height:100vh;
  height:100svh;

  min-height:36rem;
  overflow:hidden; display:flex; align-items:flex-end;
}
.stage{ position:absolute; inset:0; background:#000; }
.stage__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.stage__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(7,7,6,.92) 0%, rgba(7,7,6,.3) 40%, rgba(7,7,6,0) 70%);
}

/* Platshållare: en rad text uppe till höger, inget mer. */
.stage__ph{
  position:absolute; inset:0; padding:7rem var(--pad) 0;
  display:flex; flex-direction:column; align-items:flex-end; gap:.9rem;
  text-align:right;
  background:#0A0908;
}
.stage.is-live .stage__ph{ display:none; }
.stage__phtext{ font-size:13px; letter-spacing:.02em; opacity:.5; max-width:30ch; margin:0; }
.stage__meter{ width:14rem; height:1px; background:rgba(231,220,190,.2); }
.stage__meter i{ display:block; height:100%; width:0; background:var(--gold-deep); }
.stage__count{ font-size:13px; letter-spacing:.13em; opacity:.5; font-variant-numeric:tabular-nums; }

.scrub__text{ position:relative; z-index:3; width:100%; padding:0 var(--pad) 3.4rem; }

/* Texten tonas ut när sekvensen börjar spela.

   Utan detta ligger rubriken kvar över hela scrubben, och eftersom den är stor
   och sitter mitt i bilden hamnar den rakt över det sekvensen ska visa —
   loggan på dörren, stenen mot filmen. [mätt] på dekalsidan: loggan landar på
   y 369–558, rubriken på y 464–730. 94 px rakt över varandra.

   Rubriken är påståendet, sekvensen är beviset. De behöver inte synas
   samtidigt. --p sätts av scrub.js och är 0–1 genom sektionen.

   Faktorn är satt efter den tidigaste händelsen på sajten, inte efter vad som
   känns lagom. [mätt] träffen på ppf-sidan ligger vid p 0.27 och loggan på
   dekalsidan blir läsbar vid p 0.38. 4.5 tar texten till noll vid p 0.22 och
   klarar därmed båda; 2.8 gjorde det inte — då låg rubriken kvar på 18 %
   opacitet precis när stenen slog i.

   var(--p,0) gör att viloläget är fullt synligt: utan JS, utan sekvens eller
   innan första bildrutan ritats står texten kvar som vanligt. */
.scrub__text{
  opacity:calc(1 - var(--p,0) * 4.5);
  transform:translateY(calc(var(--p,0) * -1.6rem));
}
/* visibility, inte bara pointer-events: en genomskinlig länk går fortfarande
   att tabba till, och då hoppar fokus till något ingen ser. Vid 0.34 är
   texten nere på några procents opacitet, så bytet syns inte. */
.scrub.is-deep .scrub__text{ pointer-events:none; visibility:hidden; }

/* Slöjan finns för att göra texten läsbar. När texten är borta behövs den
   inte lika mycket — men en del blir kvar, annars glänser nedre kanten. */
.stage__veil{ opacity:calc(1 - var(--p,0) * .55); }

/* Rubriken stiger upp bakom en mask. Driven av en klass, inte av @keyframes:
   en pausad CSS-animation (dold flik, sparläge, strypt renderare) fastnar i
   sitt startläge och låser rubriken osynlig. Med klass + transition är
   viloläget alltid "synlig", och startläget sätts bara när JS finns. */
/* Versala Ä, Å och Ö sticker upp över radboxen vid line-height .86.
   Masken får därför extra luft upptill, som dras tillbaka med negativ
   marginal så att raderna fortfarande sitter tätt. Utan detta kapas
   prickarna — och rubriken läser "VAGEN AR HARDARE". */
.hero__title .l{ display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em; }
.hero__title .l > span{
  display:block;
  transition:transform 1.2s var(--ease-in);      /* [mätt] 1.2s */
}
html.js-hero .hero__title .l > span{ transform:translateY(104%); }
html.js-hero .hero__title.is-in .l > span{ transform:none; }
.hero__title .l:nth-child(2) > span{ transition-delay:.03s; }  /* [mätt] stegning .03s */
.hero__title .l:nth-child(3) > span{ transition-delay:.06s; }

.scrub__cue{
  position:absolute; right:var(--pad); bottom:1rem; z-index:4;
  font-size:13px; text-transform:uppercase; letter-spacing:.13em; opacity:.5;
  transition:opacity .8s var(--ease);
}
.scrub.is-past .scrub__cue{ opacity:0; }

/* ───────────────────────────────────────────────────────────── USP-rad ── */
/* Premium · självläkande · 10 års garanti — de tre köpargumenten, permanent. */

.usp{ border-block:1px solid rgba(231,220,190,.18); background:var(--band); }
.usp__row{
  list-style:none; margin:0; padding:1.4rem 0;
  display:flex; flex-wrap:wrap; gap:1rem 3.2rem; align-items:center;
  font-size:13px; text-transform:uppercase; letter-spacing:.16em;
}
.usp__row li{ display:flex; align-items:center; gap:1rem; }
.usp__row li::before{ content:""; width:5px; height:5px; background:var(--gold-deep); flex:none; }
.usp__row a{ border-bottom:1px solid rgba(231,220,190,.35); padding-bottom:.2rem; }
.usp__row a:hover{ border-bottom-color:currentColor; }

/* ──────────────────────────────────────────────────────── vägvisaren ── */
/* Tre ingångar: privatperson, företag, bilhandlare. Företagen ska hitta
   sin väg på under en sekund — det är de som drar in pengarna. */

.route{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(231,220,190,.18);
  border-bottom:1px solid rgba(231,220,190,.18);
}
.route > a{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:3.4rem 2.4rem 3rem;
  border-right:1px solid rgba(231,220,190,.18);
  transition:background var(--t) var(--ease);
}
.route > a:last-child{ border-right:0; }
.route > a:hover{ background:rgba(231,220,190,.04); }
/* height:auto tillsammans med aspect-ratio. Bilderna har ett height-attribut,
   och ett sådant mappas till en CSS-höjd som gör aspect-ratio verkningslös —
   samma fälla som slog till på stillbilderna tidigare. */
.route__img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  background:#0C0B08; margin-bottom:2.4rem;
  transition:opacity var(--t) var(--ease);
}
.route > a:hover .route__img{ opacity:.86; }
.route__n{
  font-family:Cinzel,serif; font-size:4.4rem; line-height:.8;
  color:var(--gold-deep); margin-bottom:2rem;
}
.route h3{ margin:0 0 1rem; }
.route p{ margin:0 0 2.2rem; font-size:15px; line-height:1.6; max-width:30ch; }
.route .tl{ margin-top:auto; }
@media (max-width:900px){
  .route{ grid-template-columns:1fr; }
  .route > a{ border-right:0; border-bottom:1px solid rgba(231,220,190,.18); padding:2.6rem 0; }
  .route > a:last-child{ border-bottom:0; }
}

/* ─────────────────────────────────────────────────────── instagramflöde ── */
/* Kvadratiska rutor, inte sajtens vanliga 16:9. Instagram beskär allt mot
   kvadrat i sitt eget rutnät, och en avlång ruta hade klippt bort toppen och
   botten av varje bild som kunden redan komponerat en gång.

   Gapet är 1 px mot en ljus bakgrund, alltså samma hårfina linje som resten
   av sajten ritar sina avdelare med — inga kort, ingen rundning, ingen ram. */

.ig{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(231,220,190,.18); }
.ig__item{
  position:relative; aspect-ratio:1/1; background:#0C0B08; overflow:hidden;
  display:block;
}
.ig__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity var(--t) var(--ease), transform .6s var(--ease);
}
/* Bara en aning. Bilderna är kundens egna jobb och ska inte dansa. */
a.ig__item:hover img, a.ig__item:focus-visible img{ opacity:.82; transform:scale(1.03); }
a.ig__item:focus-visible{ outline:1px solid var(--gold); outline-offset:-1px; }

/* Bara hela rader. Faller ett inlägg bort — ett bortfiltrerat, eller en bild
   som inte gick att hämta — blir det fem kvar, och femman ensam på andra raden
   ser ut som ett hål i rutnätet. Regeln väljer den ruta som INLEDER en rad och
   samtidigt ligger bland de sista, alltså en rad som inte blir full, och
   gömmer den och allt efter.

   Antalet kolumner skiljer sig åt mellan brytpunkterna, så villkoret måste
   göra det också: sex inlägg minus ett ger tre rutor på dator och fyra på
   mobil. */
@media (min-width:821px){
  .ig__item:nth-child(3n+1):nth-last-child(-n+2),
  .ig__item:nth-child(3n+1):nth-last-child(-n+2) ~ .ig__item{ display:none; }
}
@media (max-width:820px){
  .ig{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ig__item:nth-child(2n+1):last-child{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ig__item img{ transition:opacity var(--t) var(--ease); }
  a.ig__item:hover img, a.ig__item:focus-visible img{ transform:none; }
}

/* ────────────────────────────────────────────── roll-väljare i formulär ── */
/* Privatperson / företag / bilhandlare styr vilka fält som visas — annars
   får man samma tunna lead från alla tre. */

.roles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--gold); }
.roles label{
  position:relative; cursor:pointer;
  padding:1.1rem .6rem; text-align:center;
  font-size:13px; text-transform:uppercase; letter-spacing:.13em;
  border-right:1px solid var(--gold);
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.roles label:last-child{ border-right:0; }
/* `.roles label input` och inte `.roles input`: `.field input` längre ned i
   filen sätter width:100% och har SAMMA specificitet, så den vann på
   ordningen. Radioknappen blev då 254 px bred i stället för 0 och sköt ut
   [mätt] kontaktsidan 47 px utanför fönstret vid 820 px — trots att den är
   osynlig. Extra klassen i väljaren räcker för att vända det.

   Det är samma fälla som noteras vid `.form [data-roll]` nedan. Allt som
   ska vinna över `.field`-reglerna måste vara mer specifikt, inte bara
   skrivet först. */
.roles label input{ position:absolute; opacity:0; width:0; height:0; }
/* .is-picked sätts av JS — :has() ensamt räcker inte i äldre Safari. */
.roles label:has(input:checked),
.roles label.is-picked{ background:var(--gold); color:var(--void); }
.roles label:has(input:focus-visible){ outline:1px solid var(--gold); outline-offset:3px; }
@media (max-width:560px){
  .roles{ grid-template-columns:1fr; }
  .roles label{ border-right:0; border-bottom:1px solid var(--gold); }
  .roles label:last-child{ border-bottom:0; }
}
/* Fältgrupper som växlar med rollen. Måste vara mer specifika än .field och
   .field--row, som båda sätter display:grid längre ned i filen. */
.form [data-roll]{ display:none; }
.form [data-roll].is-on{ display:grid; }

/* ───────────────────────────────────────────────── numrerad indexrad ── */
/* Ersätter kortrutnätet. Rad, hårfin linje, jättesiffra, framramad bild.  */

.idx{ border-top:1px solid rgba(231,220,190,.18); }
.idx__row{
  display:grid;
  /* 14rem, inte 13. Siffrorna sätts i 13rem Cinzel och "2" är bredare än
     "1" och "3" — [mätt] 192 px mot 187, alltså 5 px utanför sin kolumn.
     Ett tal som spiller ut ur sin ruta ser ut som ett fel, inte som en
     designdetalj. */
  grid-template-columns:14rem minmax(0,1fr) 22rem;
  gap:3rem; align-items:start;
  padding:3.4rem 0;
  border-bottom:1px solid rgba(231,220,190,.18);
  transition:background var(--t) var(--ease);
}
a.idx__row:hover{ background:rgba(231,220,190,.035); }
.idx__row > :first-child{ align-self:start; }
.idx__body .txt{ margin-top:1.2rem; }
.idx__more{ margin-top:1.8rem; }
.idx__media{
  aspect-ratio:4/3; overflow:hidden; background:#0C0B08;
  border:1px solid rgba(231,220,190,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; letter-spacing:.13em; text-transform:uppercase; opacity:.45;
}
.idx__media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){
  .idx__row{ grid-template-columns:1fr; gap:1.6rem; }
  .idx__media{ order:-1; aspect-ratio:16/9; }
}

/* Enkel indexlista utan bild (målgrupper, fakta). */
.list{ border-top:1px solid rgba(231,220,190,.18); }
.list__row{
  display:grid; grid-template-columns:6rem minmax(0,20rem) minmax(0,1fr) auto;
  gap:2.4rem; align-items:baseline;
  padding:2.2rem 0; border-bottom:1px solid rgba(231,220,190,.18);
  transition:background var(--t) var(--ease);
}
a.list__row:hover{ background:rgba(231,220,190,.035); }
.list__n{ font-family:Cinzel,serif; font-size:1.5rem; letter-spacing:.02em; color:var(--gold-deep); }
/* Garantiraderna har en garantitid i första kolumnen i stället för ett
   löpnummer. "Livstidsgaranti" ryms inte i 6 rem, så den kolumnen är bredare
   här — och tiden är sidans viktigaste uppgift, så den får sättas i display-
   snittet i stället för som en liten siffra. */
/* 18rem: "Kant vid bagageutrymmet" mäter [mätt] 233 px och rymdes inte i
   16rem = 230. Marginalen är tilltagen så att kundens egna benämningar går
   att byta utan att måttet måste räknas om. */
.list--garanti .list__row{ grid-template-columns:18rem minmax(0,1fr); }
.list--garanti .list__n{ font-size:1.7rem; color:var(--gold); line-height:1.15; }

/* Prisraderna: paketnamn, vad som ingår, och priset ytterst till höger.
   Priset sätts i displaysnittet som garantitiderna — det är den uppgift
   besökaren letar efter, och den ska gå att hitta genom att läsa nedför
   högerkanten utan att läsa en enda innehållsrad. */
.list--pris .list__row{ grid-template-columns:9rem minmax(0,1fr) 11rem; }
.list--pris .list__n{ font-size:1.7rem; color:var(--gold); }
.pris{
  font-family:Cinzel,serif; font-size:1.45rem; color:var(--gold);
  text-align:right; white-space:nowrap;
}
.pris small{ display:block; font-family:inherit; font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; opacity:.5; margin-bottom:.3rem; }

@media (max-width:820px){
  /* Priset får inte hamna sist under en lång innehållsrad — då måste man läsa
     hela paketet för att se vad det kostar. Det flyttas upp bredvid namnet. */
  .list--pris .list__row{ grid-template-columns:minmax(0,1fr) auto; gap:.6rem 1.4rem; }
  .list--pris .list__n{ grid-column:1; }
  .list--pris .pris{ grid-column:2; grid-row:1; text-align:right; }
  .list--pris .txt{ grid-column:1 / -1; }
}

@media (max-width:820px){
  .list__row{ grid-template-columns:4rem 1fr; gap:.6rem 1.4rem; }
  .list__row > :nth-child(3){ grid-column:2; }
  .list__row > :nth-child(4){ grid-column:2; }
  .list--garanti .list__row{ grid-template-columns:1fr; }
  .list--garanti .list__row > *{ grid-column:1; }
}

/* ───────────────────────────────────────────────────────── uppställning ── */

.cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5rem; align-items:start; }
/* .cols--offset används till TVÅ olika saker, och det är därför måttet är
   känsligt:

   A) Sektionsrubrik — liten etikett i smala kolumnen, stor rubrik i den breda.
   B) Delad text — rubrik och knapp i smala kolumnen, brödtext i den breda.

   Rubriken svämmade ur i fall B, där den sitter i den SMALA kolumnen. Att
   bredda kolumnen löste det men sköt samtidigt rubriken i fall A allt längre
   åt höger, så att den lossnade från etiketten ovanför och brödtexten under.
   Måttet är därför tillbaka på 26rem, och i stället är det rubriken i den
   smala kolumnen som fått en storlek som ryms där. Se .cols--offset > div
   längre ned. */
.cols--offset{ grid-template-columns:minmax(0,29rem) minmax(0,1fr); column-gap:6rem; row-gap:2rem; }

/* Sektionsrubrik som ligger som DIREKT barn (mönster A) spänner över båda
   kolumnerna i stället för att sitta i den högra.

   Förut låg etiketten över och innehållet under vid vänstermarginalen medan
   rubriken började 504 px in — [mätt] på 21 av sajtens sektioner. Rubriken
   hörde alltså varken ihop med sin egen etikett eller med texten den
   inleder, och det syntes värst där rubriken går på fyra rader.

   Mönster B rörs inte: där ligger rubriken inuti en <div> och matchas inte
   av barnväljaren. */
.cols--offset > .d{ grid-column:1 / -1; }

/* Rubrik i den smala kolumnen (fall B). d2 är 66 px, och vid den storleken är
   "annonsplats" 451 px brett — kolumnen är 374. Ett ord som inte får plats
   bryts inte, det rinner ut över brödtexten bredvid. [mätt] 7 av sajtens 65
   rubriker gjorde det.

   Bördan delas: kolumnen går från 26 till 29rem (374 → 417 px) och rubriken
   från 4.6 till 4.1rem (66 → 59 px). Då hamnar "annonsplats" på 403 px med
   14 px marginal, samtidigt som rubriken i den BREDA kolumnen bara flyttas
   43 px åt höger i stället för 101. Att bara bredda kolumnen lossade rubriken
   från sin etikett; att bara krympa texten hade kostat 18 % av storleken.

   Avstavning provades först och förkastades — webbläsaren saknar svenska
   mönster och bröt mitt i stavelser: "Vindrut-an", "fordonsf-lotta". */
.cols--offset > div:first-child .d2{ font-size:4.1rem; }

/* Skyddsnät. Byter kunden en rubrik mot något med ett ännu längre ord ska det
   brytas fult snarare än läggas ovanpå intilliggande text. Utlöses inte av
   något innehåll som finns i dag. */
.d{ overflow-wrap:break-word; }
@media (max-width:900px){ .cols,.cols--offset{ grid-template-columns:1fr; gap:2.6rem; } }

/* Punktlista: bara indrag och en linje, ingen bock i en ruta. */
.pts{ list-style:none; margin:0; padding:0; }
.pts li{
  padding:1.05rem 0; border-bottom:1px solid rgba(231,220,190,.18);
  font-size:15px; line-height:1.6;
}
.pts li:first-child{ border-top:1px solid rgba(231,220,190,.18); }
.pts b{ font-weight:400; letter-spacing:.06em; text-transform:uppercase; font-size:13px; display:block; margin-bottom:.3rem; }

/* ────────────────────────────────────────────────────────────── FAQ ── */

.faq{ border-top:1px solid rgba(231,220,190,.18); }
.faq__item{ border-bottom:1px solid rgba(231,220,190,.18); }
.faq__q{
  width:100%; cursor:pointer; text-align:left;
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding:1.9rem 0;
  font-family:Cinzel,serif; font-size:1.5rem; text-transform:uppercase; letter-spacing:.01em;
  transition:opacity var(--t) var(--ease);
}
.faq__q:hover{ opacity:.6; }
.faq__sign{ font-size:13px; letter-spacing:.13em; flex:none; }
.faq__sign::after{ content:"+"; }
.faq__item.is-open .faq__sign::after{ content:"−"; }
.faq__a{ overflow:hidden; height:0; }
.faq__a > div{ padding-bottom:2rem; font-size:15px; line-height:1.7; max-width:62ch; }

/* ──────────────────────────────────────────────────────── före/efter ── */

.compare{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  border:1px solid rgba(231,220,190,.18); background:#0C0B08;
  cursor:ew-resize; touch-action:none; user-select:none;
}
.compare__half{ position:absolute; inset:0; }
/* position:absolute, inte bara storlek. Platshållaren under är absolut
   positionerad, och positionerade element målas ovanpå element som ligger
   kvar i flödet — oavsett ordning i koden. En statisk bild hamnade därför
   UNDER sin egen platshållare, så det stod "Foto: omärkt bil" tvärs över
   fotot. Nu är båda positionerade och den som kommer sist i koden vinner. */
.compare__half img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Utan detta startar webbläsarens EGEN bilddragning så fort man tar tag i
   reglaget: en genomskinlig kopia av fotot följer med muspekaren och halva
   bilden markeras blå. user-select på .compare räcker inte — bilddragning är
   ett separat beteende. pointer-events:none flyttar dessutom greppet till
   behållaren, som är den som lyssnar på pointerdown. */
.compare img{
  -webkit-user-drag:none;
  user-select:none; -webkit-user-select:none;
  pointer-events:none;
}
.compare__half--after{ clip-path:inset(0 0 0 var(--x,50%)); }
/* Platshållarna ligger i VAR SITT HÖRN, inte mitt i sin halva. Båda halvorna
   är lika breda och ligger ovanpå varandra, så två centrerade texter hamnar på
   exakt samma plats och läses som en enda obegriplig rad tvärs över delaren.
   Det syntes på solfilmssidan när bilderna saknades. */
.compare__ph{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:flex-start; padding-inline:2.4rem;
  font-size:13px; letter-spacing:.13em; text-transform:uppercase; opacity:.4; background:#0C0B08;
}
.compare__half--after .compare__ph{ background:#151208; opacity:.55; justify-content:flex-end; }
.compare__handle{ position:absolute; top:0; bottom:0; left:var(--x,50%); width:1px; background:var(--gold); pointer-events:none; }
.compare__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.6rem; height:2.6rem; border:1px solid var(--gold); border-radius:100%;
  background:var(--void); display:flex; align-items:center; justify-content:center; font-size:13px;
}
/* Etiketterna ligger UTANFÖR .compare, i en omslutande ruta. På dator läggs de
   tillbaka över bilden med absolut position; på mobil får de bara falla ned
   under den. Vore de kvar inuti .compare gick det inte — den har overflow:hidden
   och fast bildformat, så ingenting kan hamna nedanför bilden. */
.compare-box{ position:relative; }
.compare__legend{
  position:absolute; top:1rem; left:1rem; right:1rem; margin:0;
  display:flex; justify-content:space-between; gap:1rem;
  font-size:13px; text-transform:uppercase; letter-spacing:.13em; opacity:.75;
  pointer-events:none;   /* greppet ska gå att ta även under etiketten */

  /* Skuggan syns bara där den behövs. Bilderna under är olika ljusa i hörnen:
     [mätt] 20 gråsteg i solfilmsbilden men 177 i dekalbilden, där bilen står
     mot en vit studiovägg — där försvann den ljusa texten nästan helt. Mot
     mörk lack märks skuggan inte alls. */
  text-shadow:0 1px 7px rgba(0,0,0,.9);
}

/* ──────────────────────────────────────────────────────────────── bild ── */
/* Helbredds stillbild med en bildtext under. Används på sidor som saknar
   scrubsekvens — b2b-sidorna, som annars är ren text, och garantisidan.

   Ingen ram och ingen rundning: sajten har hårfina linjer i stället för kort,
   och bilden får ligga direkt mot bakgrunden som allt annat. Bildtexten är
   samma 13px versaler som all annan uistorlek på sajten. */
.shot{ margin:0; }
.shot__img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  background:#0C0B08;
}
.shot__cap{
  display:block; margin-top:1.2rem;
  font-size:13px; text-transform:uppercase; letter-spacing:.13em; opacity:.5;
}

/* ──────────────────────────────────────────────────── träffytor mobil ── */
/* [mätt] på 375 px var sidfotens länkar 15 px höga, brödtextens 16 och
   ordmärket i sidhuvudet 22. Apple och Google anger 44 px som minsta
   träffyta; under ungefär 40 börjar man missa med tummen.

   Två tekniker, och valet beror på om länken har grannar rakt under sig:

   GRANNAR → riktig padding, och mellanrummet dras ned lika mycket. Ytan växer
   utan att ytorna överlappar varandra. Överlappande träffytor är värre än små:
   då träffar man fel länk utan att förstå varför.

   ENSAM → ett ::after som sträcker ut ytan utan att röra layouten. Menyn
   räknar med sin höjd — .nav__links börjar på 5.6rem — så där får inget
   verkligt mått ändras.

   Måtten är i PIXLAR, inte rem. Texten de omger är satt i fasta 13 och 15 px,
   medan rem skalar med skärmbredden: [mätt] vid 600 px blev 1.1rem hela 19 px
   och träffytan lade sig över raden ovanför. Paddingen ska följa texten, inte
   fönstret. */
@media (max-width:700px){
  /* Etiketterna under bilden i stället för över den. En 16:9-ruta är bara
     drygt 180 px hög på en telefon, så "Oskyddad lack" och "Skyddad lack"
     hamnade rakt över bilens tak och stötte nästan ihop på mitten. */
  .compare__legend{
    position:static; margin-top:1.1rem;
    font-size:12px; letter-spacing:.1em; opacity:.5;
    text-shadow:none;      /* mot sidans egen bakgrund behövs ingen */
  }
}

/* ───────────────────────────────────────────────────────────── formulär ── */

.form{ display:grid; gap:1.6rem; }
.field{ display:grid; gap:.55rem; }
.field > label{ font-size:13px; text-transform:uppercase; letter-spacing:.13em; opacity:.55; }
.field input,.field select,.field textarea{
  width:100%; background:transparent; color:var(--gold);
  border:0; border-bottom:1px solid rgba(231,220,190,.28); border-radius:0;
  padding:.75rem 0; font-family:inherit; font-size:15px; line-height:1.5;
  transition:border-color var(--t) var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23E7DCBE' stroke-width='1'/></svg>");
  background-repeat:no-repeat; background-position:right .3rem center;
}
.field textarea{ min-height:8rem; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--gold); opacity:.3; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--gold); }
.field__hint{ font-size:13px; opacity:.45; }

/* Varning när bilderna tillsammans överskrider Netlifys tak. Den måste synas
   utan att likna sidans guldtext — annars läses den som ännu en hjälprad. */
.field__fel{
  display:block; margin-top:.7rem;
  font-size:13px; line-height:1.5;
  color:#e9a7a7;
  border-left:2px solid #e9a7a7; padding-left:.9rem;
}
.field input[type="file"]{ padding:.6rem 0; font-size:13px; letter-spacing:.06em; cursor:pointer; }
.field input[type="file"]::file-selector-button{
  font:inherit; font-size:13px; text-transform:uppercase; letter-spacing:.13em;
  margin-right:1.2rem; padding:.6rem 1.2rem;
  border:1px solid var(--gold); border-radius:0; background:transparent; color:var(--gold);
  cursor:pointer; transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.field input[type="file"]::file-selector-button:hover{ background:var(--gold); color:var(--void); }
/* minmax(0,1fr), inte 1fr. Ett rutnätsspår har min-content som undre gräns,
   och ett <input> har en inbyggd minsta bredd ur sitt size-attribut — här
   254 px. Två sådana spår plus mellanrum blev bredare än behållaren, och
   [mätt] sköt ut kontaktsidan 47 px utanför fönstret vid 820 px bredd, med
   vågrät skrollning som följd. width:100% på fältet hjälper inte: spåret är
   redan för brett. */
.field--row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.6rem; }
@media (max-width:560px){ .field--row{ grid-template-columns:1fr; } }

.check{ display:flex; gap:1rem; align-items:flex-start; font-size:13px; line-height:1.6; cursor:pointer; opacity:.75; }
.check input{
  width:15px; height:15px; flex:none; margin:2px 0 0; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  border:1px solid var(--gold); border-radius:0; background:transparent; position:relative;
}
.check input:checked{ background:var(--gold); }

/* ── träffytor på pekskärm ──────────────────────────────────────────────
   `hover:none` och inte en bredd. Det är fingret som behöver ytan, inte den
   smala skärmen: en surfplatta i liggande läge är 1024 px bred och styrs
   ändå med tummen, medan ett smalt fönster på en dator har muspekare och
   inte behöver något extra.

   Måtten i PIXLAR, inte rem. Texten i fälten är satt i fasta pixlar, så en
   padding i rem skalar med rotstorleken medan texten står still — och då
   ändras höjden åt fel håll. Det var precis så knapparna sprack vid 600 px
   förra gången.

   [mätt] före: fält och knappar 40 px höga vid 375 px skärm. Apple anger 44
   som minsta träffyta, Google 48 dp. 40 går att träffa, men inte med marginal
   i en bil på en parkering, vilket är precis där den här sidan öppnas. */
@media (hover:none){
  .field input, .field select, .field textarea{ padding-block:11px; }
  .field textarea{ min-height:120px; }
  .btn{ padding-block:15px; }
  /* Rutan sitter redan i en label som omsluter hela texten, så träffytan är
     hela stycket. Det här är för att den ska gå att SE och sikta på. */
  .check input{ width:20px; height:20px; margin-top:1px; }

  /* Länkarna. [mätt] vid 768 px var textlänkarna bara 25-30 px höga, för den
     gamla regeln satt i en @media (max-width:700px) — en surfplatta i
     porträtt föll alltså mellan stolarna trots att den styrs med tummen.
     Lodrät padding på ett inline-element flyttar inte raden, bara träffytan. */
  main p a:not(.tl):not(.btn), main dd a, main li a:not(.btn),
  .faq__a a, .usp__row a{ padding-block:12px; }
  .foot ul a{ display:block; padding-block:13px; }
  .tl{ padding-top:15px; }

  /* Menyraden är satt i 13 px och blir för låg i sig. Ett ::after ger ytan
     utan att flytta något i layouten. */
  .nav__brand, .nav__tel, .nav__burger{ position:relative; }
  .nav__brand::after, .nav__tel::after, .nav__burger::after{
    content:""; position:absolute; inset:-11px -6px;
  }
}

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__msg{ display:none; font-size:13px; line-height:1.6; padding:1rem 0; border-top:1px solid currentColor; }
.form__msg.is-on{ display:block; }
.form__msg--ok{ color:var(--gold); }
.form__msg--err{ color:var(--gold-deep); }

.info{ border-top:1px solid rgba(231,220,190,.18); }
.info > div{
  display:grid; grid-template-columns:11rem minmax(0,1fr); gap:1.6rem;
  padding:1.2rem 0; border-bottom:1px solid rgba(231,220,190,.18);
}
.info dt{ font-size:13px; text-transform:uppercase; letter-spacing:.13em; opacity:.5; }
.info dd{ margin:0; font-size:15px; }
@media (max-width:560px){ .info > div{ grid-template-columns:1fr; gap:.3rem; } }

/* ────────────────────────────────────────────────────────── slutband ── */
/* [mätt] 601 använder sin "greyscale concrete" som EN avvikande yta. */

.close{ background:var(--concrete); color:var(--gold); padding-block:9rem; }

/* ─────────────────────────────────────────────────────────────── sidfot ── */

.foot{ border-top:1px solid rgba(231,220,190,.18); padding-block:4.5rem 2rem; }
.foot__logo{ width:16rem; height:auto; margin-bottom:1.6rem; }
/* Samma fälla som .field--row: utan minmax(0,…) kan spåren inte krympa under
   sitt innehålls min-content, och en lång e-postadress i kontaktkolumnen
   skjuter ut hela sidfoten. Ingen synlig skillnad i dag — det här är för att
   det inte ska gå sönder när uppgifterna byts mot kundens riktiga. */
.foot__top{ display:grid; grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:3rem; padding-bottom:3.4rem; }
.foot h4{ font-size:13px; text-transform:uppercase; letter-spacing:.13em; opacity:.5; margin:0 0 1.2rem; font-weight:400; font-family:inherit; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot a{ font-size:13px; letter-spacing:.02em; border-bottom:1px solid transparent; transition:border-color var(--t) var(--ease); }
.foot a:hover{ border-bottom-color:currentColor; }
.foot__bot{
  border-top:1px solid rgba(231,220,190,.18); padding-top:1.6rem;
  display:flex; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
  font-size:13px; opacity:.5;
}
@media (max-width:860px){ .foot__top{ grid-template-columns:1fr 1fr; } }

/* Sidfoten på telefon.

   [mätt] den var 1276 px hög på en skärm som är 844 — halvannan skärm sidfot.
   Tre saker bidrog:

   1. `.foot ul{ gap:0 }` låg i mobilblocket LÄNGRE UPP i filen och förlorade
      mot basregelns `gap:.7rem` på ordningen. Samma fälla som med .field och
      rollväljaren: lika specifika regler avgörs av vem som står sist, inte av
      vem som står i en mediefråga. Därför bor mobilreglerna här nere nu.
   2. Träffytan på 13 px över och under gav 49 px höga rader. 11 px räcker —
      raden blir 45 px, alltså fortfarande över de 44 som Apple och Google
      anger som minsta träffyta.
   3. Kolumnerna lades på varandra redan vid 520 px. Vid 390 px får två
      kolumner 170 px var, och den längsta posten ("PPF / lackskyddsfilm")
      mäter 130 px — det ryms. Enspalt behövs först på riktigt smala skärmar.

   Tillsammans halveras höjden utan att något blir svårare att träffa. */
@media (max-width:700px){
  .foot ul{ gap:0; }
  .foot ul a{ display:block; padding-block:11px; }
  .foot h4{ margin-bottom:.6rem; }
  .foot__top{ gap:2.4rem 1.6rem; padding-bottom:2.4rem; }
}
@media (max-width:380px){ .foot__top{ grid-template-columns:1fr; } }

/* ────────────────────────────────────────────────────────────── reveal ── */
/* [mätt] opacity 1.2s cubic-bezier(.66,0,.34,1), stegning .03s */

.rv{ opacity:0; transform:translateY(10px); transition:opacity var(--t-in) var(--ease-in), transform var(--t-in) var(--ease-in); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.03s } .rv-d2{ transition-delay:.06s } .rv-d3{ transition-delay:.09s } .rv-d4{ transition-delay:.12s }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .hero__title .l > span{ transform:none; animation:none; }
  html{ scroll-behavior:auto; }
}

.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:var(--void); padding:1rem 1.4rem; }
.skip:focus{ left:0; }
:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }


/* ───────────────────────────────────────────── paketbilder (frontpaket) ── */
/* Samma bil fyra gånger, med olika ytor tonade i guld. Se tools/paketbild.py
   för varför det är EN render och fyra efterbehandlingar, och inte fyra
   genereringar. */

.pkt__rad{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2.4rem 3rem; margin-top:2.4rem;
}
.pkt{ margin:0; }
.pkt__bild{
  /* Ingen fast bildkvot här. Bilderna har teckenförklaringen inbakad nere till
     vänster, och object-fit:cover hade kunnat klippa av den. De fyra har samma
     mått, så rutnätet blir jämnt ändå. */
  display:block; width:100%; height:auto;
  background:#0C0B08; border:1px solid rgba(231,220,190,.14);
}
.pkt__txt{ margin-top:1.1rem; font-size:14px; line-height:1.6; opacity:.7; }
.pkt__txt b{
  display:block; font-weight:400; opacity:1; color:var(--gold-deep);
  font-size:13px; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:.35rem;
}
@media (max-width:700px){ .pkt__rad{ grid-template-columns:1fr; gap:2.2rem; } }