/* Renaly — byggd av Webbpiloten, augusti 2026.
   Formspråket godkändes av Veronika på demon 25/8: lugna, klassiska
   färger (varmgrått, mörkbrunt, brons), Playfair Display + DM Sans,
   inget grönt, inget skrikigt. Höj hantverket, aldrig identiteten. */

:root {
  color-scheme: light; /* dialoger/formulärfält ärver annars systemfärger */
  --grund: #fafafa;
  --text: #363230;
  --dampad: #7d746e;
  --mork: #2b2724;
  /* Stora morka ytor (sidfot, CTA-sektion) ligger pa en EGEN variabel.
     Veronika ville ha det ljusare langst ner, men samma varde anvands av
     knappar och kort - ljusar man variabeln rakt av tappar knapparna sin
     tyngd mot ljus bakgrund. */
  --mork-yta: #5f5548;   /* ljusare igen 31/8 (Veronika ville ha mer): 33 % ljushet, vit text 7,0:1 - val over AA */
  --linje: #e7e2dc;
  --kort: #ffffff;
  --sand: #f1ece5;
  --brons: #a0784a;
  /* Veronikas onskemal 2026-08-26: lite bla. Dampad skifferbla som
     tal den varmgra paletten. Uppmatt kontrast 6,40 mot grunden.
     Bronsen ar kvar som varm accent; blan bar processen och
     trygghetstecknen, sa de tva aldrig slass om samma roll. */
  --bla: #3f5f7d;
  --bla-ljus: #eef2f6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--grund);
  color: var(--text);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.ram { max-width: 1160px; margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
h3 { font-size: 1.25rem; }
/* Arver rubrikens vikt i stallet for att satta en egen. Med en variabel
   kursiv finns hela skalan, och da ska den kursiva halvan av en mening
   vaga exakt lika mycket som den upprutta. */
/* Veronika 2026-08-29: "jag skulle vilja att du andrar texten sa att den
   blir samma skrivstil". Med skrivstil menade hon KURSIV - den lutande
   texten. Hon vill att hela rubriken ser likadan ut, alltsa rak text
   rakt igenom. Galler alla 32 rubrikerna pa sajten, inte bara heron:
   hennes bifogade skarmbilder visade flera av h2-rubrikerna.

   <em> BEHALLS i HTML:en. Betoningen ska finnas kvar for skarmlasare
   och for Google - det ar bara det visuella lutandet som tas bort.
   Samma monster som markeringen pa webbpiloten.se. */
em.skrivstil { font-style: normal; font-weight: inherit; }

.etikett {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  /* Veronikas bla trad 31/8: 6,7:1 pa vitt, 5,7:1 pa sand - val over AA */
  color: var(--bla); font-weight: 500; display: block; margin-bottom: 14px;
}
.mork .etikett { color: #b7aca2; }
.hero .etikett { color: #ccd6e2; }

/* ---------------------------------------------------------------- topp */
.topp {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje);
}
.topp .ram { display: flex; align-items: center; gap: 24px; height: 82px; }
/* Märket är kundens logotypFIL sedan 2026-08-25 — aldrig text i vårt
   typsnitt. Elias riktning: SUPER TYDLIG. Uppmätt 31/8: gamla sajten
   visade loggan 181x64, vår 165x58 - Elia SÅG skillnaden pa kansla.
   Darfor 65 px nu, strax STORRE an gamla, aldrig mindre an kundens
   forra sajt. */
.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke img { display: block; height: 65px; width: auto; }
footer.fot .marke img { height: 72px; }
@media (max-width: 760px) {
  .marke img { height: 52px; }
  footer.fot .marke img { height: 58px; }
}
.topp nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.topp nav a { color: var(--text); text-decoration: none; font-size: 15px; }
/* Bade "page" (man star PA sidan) och "true" (man ar i avsnittet, eller
   pa en undersida som hor hemma under lanken). Tjanster pekar pa en
   sektion, inte pa en egen sida, och fick darfor aldrig markeringen. */
.topp nav a[aria-current] { color: var(--brons); }

/* Ring-knappen: alltid synlig, alltid klickbar. */
.ringpiller {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--mork); color: #fff; text-decoration: none;
  padding: 11px 22px; border-radius: 999px; font-weight: 500; font-size: 15px;
  white-space: nowrap;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}
.ringpiller:hover { transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgb(43 39 36 / .45); }
.ringpiller svg { width: 15px; height: 15px; }
.ringpiller.ljus { background: #fff; color: var(--mork); }
/* .topp nav a är mer specifik än .ringpiller och målade annars texten
   mörkgrå på mörk knapp. */
.topp nav a.ringpiller { color: #fff; }

/* ---------------------------------------------------------------- hero */
.hero { background: linear-gradient(168deg, #48505a 0%, #4f5863 70%, #58626e 100%); color: #fff; padding: 88px 0 76px; }
.hero.lag { padding: 68px 0 58px; }
.hero h1 { color: #fff; max-width: 14em; }
.hero p.ingress { color: #e6ebf1; max-width: 30em; margin: 28px 0 40px; font-size: 19px; line-height: 1.6; }
.knapprad { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sekundar {
  display: inline-flex; align-items: center; padding: 11px 24px;
  border: 1px solid #ffffff55; border-radius: 999px; color: #fff;
  text-decoration: none; font-size: 15px;
  transition: border-color .3s ease, background .3s ease;
}
.sekundar:hover { border-color: #ffffffaa; background: rgb(255 255 255 / .08); }
/* Förtroenderaden direkt under knapparna: svaret på "kan jag lita på
   dem?" ska stå där frågan uppstår, inte i sidfoten. */
.bevisrad { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; padding: 0; list-style: none; }
/* Varje bevis ar en ODELBAR enhet: radbryts det INUTI en punkt
   ("vi skoter / ansokan") ser det trasigt ut. Raden far brytas mellan
   punkter, aldrig inne i en. Uppmatt 31/8: nowrap pa RADEN klamde
   i stallet sonder orden - detta ar ratta varianten. */
.bevisrad li { white-space: nowrap; }
.bevisrad li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #eae3db; }
.bevisrad svg { width: 15px; height: 15px; color: var(--bla); flex: none; }
/* Pa heron ligger bockarna mot ljus brun. --bla ger 1,10:1 dar, alltsa
   osynligt. Ljusare bla halller Veronikas farg men blir lasbar: 4,72:1.
   Uppmatt 2026-08-27. Overallt annars star --bla kvar oforandrad. */
.hero .bevisrad svg { color: #bcd2e6; }

/* --------------------------------------------------------------- sektioner */
.sektion { padding: 72px 0; }
.mork { background: var(--mork-yta); color: #fff; }
.mork h2 { color: #fff; }
.mork p.dov { color: #cfc7bf; max-width: 32em; margin: 18px 0 28px; }
.sand { background: var(--sand); }

.kolumner { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 38px; }
/* auto-fit later ANTALET KORT bestamma bredden: gruppen "For ditt hem"
   har tre kort och blev 360 px breda, medan "For ert foretag" har tva och
   blev 549 px. Samma kort, samma skarm, olika storlek. Tjanstesektionen
   far darfor ett fast antal spar sa grupperna delar rutnat. */
.kolumner--tjanster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .kolumner--tjanster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kolumner--tjanster { grid-template-columns: 1fr; } }
.kort {
  background: var(--kort); border: 1px solid var(--linje); border-radius: 16px;
  padding: 26px 26px 24px; text-decoration: none; color: var(--text);
  display: block;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s cubic-bezier(.22, 1, .36, 1),
              border-color .35s ease;
}
.kort:hover { transform: translateY(-5px);
  box-shadow: 0 22px 44px -20px rgb(43 39 36 / .32);
  border-color: color-mix(in srgb, var(--brons) 45%, var(--linje)); }
.kort h3 { margin: 14px 0 8px; }
.kort p { color: var(--dampad); font-size: 15px; }
.kort .ikon { width: 46px; height: 46px; color: var(--brons); }
.kort .pil { margin-top: 16px; font-size: 14px; color: var(--brons); font-weight: 500; }
.grupprubrik { margin-top: 40px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--dampad); font-weight: 500; }
.grupprubrik:first-of-type { margin-top: 34px; }
.grupprubrik + .kolumner { margin-top: 16px; }

/* ------------------------------------------------------------ rut-raknare */
.rut { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 820px) { .rut { grid-template-columns: 1fr; } }
.rutkort { background: var(--mork); color: #fff; border-radius: 20px; padding: 34px 32px; }
.rutkort .etikett { color: #b7aca2; }
.rutkort label { display: block; font-size: 15px; color: #cfc7bf; margin: 16px 0 8px; }
.rutkort input[type=range] { width: 100%; accent-color: var(--brons); }
.rutkort .kvm { font-family: "Playfair Display", serif; font-size: 2rem; }
.rutrad { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: #cfc7bf; padding: 7px 0; border-bottom: 1px solid #ffffff1c; }
.rutrad.summa { border: none; padding-top: 16px; color: #fff; align-items: baseline; }
.rutrad.summa b { font-family: "Playfair Display", serif; font-size: 2.4rem; font-weight: 600; }
.rutnot { font-size: 13px; color: #a2978d; margin-top: 14px; }

/* Prisfaktorerna: ersatte räknaren 2026-08-25 när Veronika ville avvakta
   med publicerade priser. Samma visuella tyngd, samma transparens, men
   svaret på "vad kostar det" är VAD SOM STYR priset i stället för en
   siffra. Avväpnar "det beror på" innan kunden hinner tänka det. */
.faktorer { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.faktorer li {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 2px; font-size: 15px; color: #e6dfd8;
  border-bottom: 1px solid #ffffff12;
}
.faktorer li:last-child { border-bottom: none; }
.faktorer li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-radius: 50%; background: var(--brons);
}
.prisfaktorer-not { font-size: 13px; color: #a2978d; margin-top: 12px; }

/* Tillvalen: kryssrutor som uppdaterar priset direkt. Stor träffyta,
   hela raden är klickbar. Används inte just nu (räknaren är pausad),
   behålls så den kan läggas tillbaka utan CSS-arbete. */
.tillval { margin-top: 18px; border-top: 1px solid #ffffff1c; padding-top: 6px; }
.tillval .rubrik { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #b7aca2; margin: 10px 0 4px; }
.tillval label {
  display: flex; align-items: center; gap: 11px; margin: 0;
  padding: 9px 2px; font-size: 15px; color: #e6dfd8; cursor: pointer;
}
.tillval input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--brons); flex: none;
}
.tillval .pris { margin-left: auto; color: #b7aca2; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------- bildplatser
   En bildplats är tom tills Renaly skickat sitt eget material. Tom visar
   den VILKEN bild som ska ligga där, så luckan blir en beställning i
   stället för ett hål. Fyll genom att lägga en <img> inuti figuren, då
   släcks platshållaren av sig själv (:empty matchar inte längre).

   Aldrig stockbilder, aldrig AI-bilder. Kundens gamla sajt hade det och
   det syntes: klockor utan siffror, påhittad text på bokryggar. */
.bildplats {
  position: relative;
  margin: 0;
  border-radius: 16px;
  /* clip, INTE hidden: overflow hidden gor figuren till scroll-container,
     och da mater parallaxens view()-timeline bildens lage INUTI figuren
     (dar den aldrig rors) i stallet for i fonstret. Uppmatt 31/8:
     translateY lag fast pa 0 tills detta byttes. clip klipper likadant
     (aven mot border-radius) men skapar ingen scroll-container. */
  overflow: clip;
  background: var(--sand);
  /* Två fällor som båda gav sidledsscroll vid 360 px:

     1. Rutnätsceller har min-width: auto, alltså min-content som golv.
        minmax(0,1fr) låser SPÅRET, inte innehållet. Därav min-width: 0.
     2. min-height: 180px HÄR tillsammans med aspect-ratio: 1/1 nedan
        tvingade rutan till 180 px hög, och kvadraten gjorde då bredden
        180 px i ett 151 px-spår. Höjden styrde bredden. Varje bildplats
        har redan en aspect-ratio, så min-height behövs inte alls. */
  min-width: 0;
}
.bildplats img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 1.08 ger 4 % marginal per sida - parallaxen nedan glider ±3.5 %
     och visar darfor aldrig en kant. */
  transform: scale(1.08);
}
/* Parallax - CSS scroll-driven, noll JS. Bara transform, och bara i
   webblasare med view()-stod; ovriga far en stilla bild. Animationen
   ager img:s transform sjalv, sa den krockar aldrig med ridan (som
   klipper FIGUREN, inte bilden). */
@supports (animation-timeline: view()) {
  .bildplats img {
    animation: bildglid linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
@keyframes bildglid {
  from { transform: scale(1.08) translateY(3.5%); }
  to   { transform: scale(1.08) translateY(-3.5%); }
}
/* Kommentarer räknas inte som barn, så en figur med bara en kommentar
   inuti matchar fortfarande :empty. */
/* I produktion döljs tomma bildplatser helt. De är beställningar till
   kunden, inte innehåll, och en streckad tom ruta på pengarsidan läser
   som ett hål. ?bygg=1 (liv.js sätter .bygglage) visar dem igen. */
.bildplats:empty { display: none; }
html.bygglage .bildplats:empty {
  display: grid;
  place-items: center;
  /* Utan align-content sträcks de två raderna (ikon + text) ut över hela
     höjden, så i en hög ruta hamnade ikonen i mitten och texten långt ner.
     center grupperar dem i stället som ett par. */
  align-content: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--brons) 45%, transparent);
  background: color-mix(in srgb, var(--sand) 70%, transparent);
}
.bildplats:empty::before {
  content: "";
  width: 30px; height: 30px;
  background: currentColor;
  color: var(--brons);
  -webkit-mask: var(--kameraikon) center / contain no-repeat;
  mask: var(--kameraikon) center / contain no-repeat;
}
.bildplats:empty::after {
  content: attr(data-vad);
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--dampad);
  max-width: 100%;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* Galleriets rutor är små på mobil: mindre luft och text där. */
.galleri .bildplats:empty { padding: 14px; }
.galleri .bildplats:empty::after { font-size: 12.5px; }
@media (min-width: 760px) {
  .galleri .bildplats:empty { padding: 22px; }
  .galleri .bildplats:empty::after { font-size: 13.5px; }
}
:root {
  --kameraikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h3.2l1.4-2.2h8.8l1.4 2.2H21v10H3z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E");
}
/* På mörk botten byter platshållaren ton, annars försvinner den. */
.bildplats.pa-mork:empty {
  border-color: color-mix(in srgb, var(--brons) 60%, transparent);
  background: rgb(255 255 255 / .04);
}
.bildplats.pa-mork:empty::after { color: #b7aca2; }

/* Heron: text och bild sida vid sida på skärm, staplat på mobil. */
.heroram { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
/* Kvadratisk, inte stående. En 4:5-ruta blev 640 px hög bredvid en
   textspalt på 520 och tog över hela heron medan den är tom. */
.heropic { aspect-ratio: 1 / 1; }
@media (max-width: 900px) {
  .heroram { grid-template-columns: 1fr; gap: 28px; }
  .heropic { aspect-ratio: 16 / 10; }
}

/* Galleriet: två spalter på mobil, fyra på skärm. */
.galleri {
  display: grid; gap: 14px; margin-top: 34px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.galleri .bildplats { aspect-ratio: 1 / 1; }
@media (min-width: 760px) {
  /* TRE kolumner sedan teamkortet togs bort 2026-08-27. Lamnas den pa
     fyra star ett tomt hal till hoger. Antalet spar MASTE folja antalet
     kort, se webb-bygg om lasta spar. */
  .galleri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* Enskild bild på en tjänstesida: bred och låg. */
.bandbild { margin-top: 34px; aspect-ratio: 3 / 2; }
/* 3:2 sedan 2026-08-27. Veronikas foton ar STAENDE 3024x4032; en
   21:9-beskarning ur dem kastar bort 68 procent av hojden och kapar
   bade tak och golv. 3:2 behaller rummet. */
@media (max-width: 620px) { .bandbild { aspect-ratio: 3 / 2; } }

/* ---------------------------------------------------------------- steg */
.steg { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 38px; }
.steg .nr { font-family: "Playfair Display", serif; font-size: 2.6rem; color: var(--bla); }
.steg h3 { margin: 6px 0 6px; }
.steg p { color: var(--dampad); font-size: 15px; }
/* Klickbara steg (Elias önskemål 25/8). Hover finns inte på pekskärm,
   så tryckbarheten bärs av en SYNLIG handlingsrad i varje steg — aldrig
   av en hover-effekt ensam. */
.steg a { display: block; color: inherit; text-decoration: none; }
.stegpil { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--brons); }
.steg a:hover h3 { color: var(--brons); }

/* ---- Fortroende-sektionen (31/8): gamla sajtens basta layout, var
   version. Tvaspalt: text + putsad bild till vanster, fortroende-rader
   med runda morka bockbrickor och hairline-avdelare till hoger. Ersatte
   ett auto-fit-grid med trasig rytm (ensam femte rad, halva ytan tom). */
.fortro { display: grid; grid-template-columns: .94fr 1.06fr; gap: 64px;
  align-items: start; }
.fortro-ingress { margin-top: 4px; color: var(--dampad); max-width: 30em; }
.fortro-bild { margin: 30px 0 0; aspect-ratio: 3 / 2; }
.fortrolista { list-style: none; margin-top: 42px; padding: 0; }
.fortrolista li { display: flex; gap: 16px; align-items: flex-start;
  padding: 19px 0; border-bottom: 1px solid var(--linje); }
.fortrolista li:first-child { padding-top: 0; }
.fortrolista li:last-child { border-bottom: 0; }
.fortrolista .brick { flex: none; width: 34px; height: 34px;
  border-radius: 50%; background: var(--bla); color: #fff;
  display: grid; place-items: center; margin-top: 1px; }
.fortrolista .brick svg { width: 15px; height: 15px; }
.fortrolista .fortext { font-size: 15.5px; color: var(--dampad);
  line-height: 1.65; }
.fortrolista .fortext strong { display: block; color: var(--text);
  font-size: 16.5px; margin-bottom: 3px; }
/* Fyllnadslinjen (Elia 31/8): ralsen mellan brickorna fylls i takt
   med SCROLLEN, at bada hall - scroll-lankad, inte tidsstyrd, sa den
   backar nar man scrollar upp. Negativt z-index lagger linjen bakom
   brickorna (de ar opaka cirklar), sa fyllnaden ser ut att vandra fran
   bricka till bricka. Utan view()-stod: bara den svaga ralsen. */
.fortrolista { position: relative; }
.fortrolista::before, .fortrolista::after { content: ""; position: absolute;
  z-index: -1; left: 16px; top: 18px; bottom: 26px; width: 2px; }
.fortrolista::before { background: var(--linje); }
.fortrolista::after { background: var(--bla); transform: scaleY(0);
  transform-origin: top; }
@supports (animation-timeline: view()) {
  .fortrolista::after { animation: ralsfyll linear both;
    animation-timeline: view(); animation-range: cover 5% cover 65%; }
}
@keyframes ralsfyll { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 900px) {
  .fortro { grid-template-columns: 1fr; gap: 8px; }
  .fortrolista { margin-top: 18px; }
}

/* ---------------------------------------------------------------- listor */
.bock { list-style: none; margin-top: 26px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bock li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.bock svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--brons); }

/* Områdena: stillsamma chips, inga länkar att förväxla med knappar. */
.omraden { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; list-style: none; }
.omraden li { background: var(--kort); border: 1px solid var(--linje); border-radius: 999px; padding: 8px 18px; font-size: 15px; }

/* ---------------------------------------------------------------- omdömen */
.citat { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 38px; }
.citat blockquote { background: var(--kort); border: 1px solid var(--linje); border-radius: 16px; padding: 26px; font-size: 15.5px; }
.citat footer { margin-top: 14px; color: var(--dampad); font-size: 14px; font-style: normal; }
.citat footer b { color: var(--text); font-weight: 600; }
.kallnot { margin-top: 22px; font-size: 14px; color: var(--dampad); }
.kallnot a { color: var(--brons); }

/* ---------------------------------------------------------------- faq */
.faq { margin-top: 34px; max-width: 46em; }
.faq details { border-bottom: 1px solid var(--linje); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 34px 18px 0;
  font-weight: 500; font-size: 17px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
/* EN markör, EN författare: plusset ritas bara här, aldrig i HTML:en. */
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); color: var(--brons);
  font-size: 22px; font-weight: 400; transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--dampad); max-width: 42em; }

/* ---------------------------------------------------------------- formulär */
.kontaktyta { display: grid; gap: 40px; grid-template-columns: 1fr 1.2fr; align-items: start; margin-top: 38px; }
@media (max-width: 860px) { .kontaktyta { grid-template-columns: 1fr; } }
.kontaktfakta p { margin-bottom: 14px; }
.kontaktfakta a { color: var(--text); }
/* Samma specificitetsfälla som i sidhuvudet: .kontaktfakta a vinner
   över .ringpiller och målade numret mörkbrunt på mörk knapp — nästan
   osynligt. Upptäckt av Elia 25/8. Kontrasttestet i granska.py vaktar
   nu HELA klassen av det här felet. */
.kontaktfakta a.ringpiller { color: #fff; }
.formular { background: var(--kort); border: 1px solid var(--linje); border-radius: 20px; padding: 30px 28px; }
.falt { margin-bottom: 16px; }
.falt label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dampad); margin-bottom: 6px; }
.falt input, .falt select, .falt textarea {
  width: 100%; border: 1px solid var(--linje); border-radius: 10px;
  padding: 11px 13px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--grund);
}
.falt input:focus-visible, .falt select:focus-visible, .falt textarea:focus-visible,
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bla); outline-offset: 2px;
}
.falt textarea { min-height: 110px; resize: vertical; }
/* minmax(0,1fr): 1fr har annars min-content som golv och långa värden
   trycker ut spalten till sidledsscroll. */
.faltrad { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Nar tvakolumnsraden staplas blir grid-gap ETT AVSTAND TILL ovanpa
   faltens egen margin-bottom, sa luften mellan falten hoppade 30/16/16/30
   px pa mobil. Nollad har: .falt margin-bottom bar hela rytmen ensam,
   precis som pa skrivbord. */
@media (max-width: 480px) { .faltrad { grid-template-columns: 1fr; gap: 0; } }
.skicka {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--mork); color: #fff; border: 0; border-radius: 999px;
  padding: 13px 28px; font: inherit; font-weight: 500; font-size: 16px;
  cursor: pointer; white-space: nowrap;
}
.formstatus { margin-top: 14px; font-size: 15px; display: none; }
.formstatus.ok { display: block; color: #2e6b46; }
.formstatus.fel { display: block; color: #9b3b2e; }

/* ---------------------------------------------------------------- fot */
footer.fot { background: var(--mork-yta); color: #cfc7bf; padding: 54px 0 40px; font-size: 15px; }
footer.fot .marke { color: #fff; }
footer.fot a { color: #fff; }
.fotrad { display: flex; flex-wrap: wrap; gap: 34px; justify-content: space-between; align-items: flex-start; }
.fotnav { list-style: none; display: grid; gap: 8px; }
.fotnav a { text-decoration: none; }
.fotnav a:hover { text-decoration: underline; }
.fotrubrik { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #a2978d; margin-bottom: 12px; }
.fotbotten { margin-top: 34px; padding-top: 20px; border-top: 1px solid #ffffff22; font-size: 13.5px; color: #a2978d; display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ----------------------------------------------------------- mobilmenyn
   Menylänkarna i sidhuvudet är dolda på mobil (.dold-mobil) — utan meny
   fanns då ingen väg till kontaktformuläret alls. Uppmärksammat av Elia
   2026-08-25: ringkunder klarade sig, offertkunder var fast. */
.meny-knapp { display: none; }
.mobilmeny { display: none; }

@media (max-width: 760px) {
  .topp nav { gap: 10px; }

  /* Vid 360 px rymdes inte logga + nummerpill + menyknapp: 36 px
     sidledsscroll. Pillret blir en rund ikonknapp på de minsta
     skärmarna — numret finns ändå alltid i ringlisten längst ner.
     font-size 0 döljer texten; aria-label bär namnet. */
  @media (max-width: 430px) {
    .marke img { height: 48px; }
    .topp nav a.ringpiller { font-size: 0; gap: 0; padding: 13px; }
    .topp nav a.ringpiller svg { width: 18px; height: 18px; }
  }

  .meny-knapp {
    display: inline-flex; flex-direction: column;
    justify-content: center; align-items: center; gap: 5px;
    width: 46px; height: 46px;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .meny-knapp span {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--text);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
  }
  .meny-knapp[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .meny-knapp[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .meny-knapp[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobilmeny {
    position: fixed; inset: 82px 0 0 0; z-index: 49;
    background: var(--grund);
    display: flex; flex-direction: column;
    padding: 18px 22px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .28s cubic-bezier(.22, 1, .36, 1),
                transform .28s cubic-bezier(.22, 1, .36, 1),
                visibility 0s .28s;
  }
  .mobilmeny.oppen {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
  }
  .mobilmeny a {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.65rem; font-weight: 500;
    color: var(--text); text-decoration: none;
    padding: 16px 2px; border-bottom: 1px solid var(--linje);
  }
  .mobilmeny a[aria-current] { color: var(--brons); }
  .mobilmeny a.ringpiller {
    font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 500;
    color: #fff; border-bottom: 0; margin-top: 22px;
    justify-content: center; padding: 14px 22px;
  }
  /* Sidan ska inte glida bakom en öppen meny. */
  body.meny-oppen { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .meny-knapp span, .mobilmeny { transition: none; }
}

/* --------------------------------------------------- mobilens ringlist */
.mobilring {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--grund) 62%, transparent);
  display: none;
}
.mobilring a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--mork); color: #fff; text-decoration: none;
  height: 54px; border-radius: 999px; font-weight: 500; font-size: 16px;
  box-shadow: 0 12px 30px -12px rgb(43 39 36 / .45);
}

@media (max-width: 760px) {
  /* Träffytor. Uppmätt: telefon- och mejllänkarna i sidfoten och på
     kontaktsidan var 20 px höga, alltså hälften av vad en tumme behöver.
     De ser ut som länkar och fungerar med mus, men missas på mobilen där
     nästan alla besökare finns. Fångat av knapptest.py, inte av ögat. */
  .fotnav { gap: 0; }
  /* NEGATIV MARGINAL = tryckytan finns men syns inte i layouten.
     Utan den vaxer varje LANK 24 px medan grannar som bara ar text star
     kvar, och raden blir skev. Uppmatt: "Hemsida av Webbpiloten" sjonk
     9 px under sina grannar i sidfoten, och styckena i kontaktrutan fick
     tre olika radavstand. Samma familj som byggtrygg-buggen: hojden hor
     till RADEN, aldrig till lanken. Se skill webb-bygg 17. */
  /* TVA SORTERS LANKAR, TVA SORTERS TRYCKYTA.

     En lank som ar HELA RADEN (sidfotens meny) far vaxa: padding gor
     raden hogre och det ar bara bra.

     En lank som star INNE I en textrad far daremot inte rora layouten
     alls. Ger man den padding sjunker den under sina grannar (uppmatt
     9 px), och ger man den negativ marginal stiger den i stallet
     (uppmatt 11 px, mitt eget forsta forsok). Losningen ar en osynlig
     traffyta med ::after: den ligger utanfor flodet, sa textraden star
     helt stilla medan tummen anda far sina 44 px.
     Samma familj som byggtrygg-buggen, se skill webb-bygg 17. */
  .fotnav a {
    display: inline-block;
    padding: 12px 0;
    line-height: 1.25;
  }
  .kontaktfakta a[href^="tel:"]:not(.ringpiller),
  .kontaktfakta a[href^="mailto:"],
  .fotbotten a {
    position: relative;
  }
  .kontaktfakta a[href^="tel:"]:not(.ringpiller)::after,
  .kontaktfakta a[href^="mailto:"]::after,
  .fotbotten a::after {
    content: "";
    position: absolute;
    inset: -12px -4px;
  }
  .kontaktfakta p { margin-bottom: 4px; }

  .mobilring { display: block; }
  body { padding-bottom: 84px; }
  .topp nav a.dold-mobil { display: none; }
  /* Taglinen radbröts till tre rader på smal skärm. Märket klarar sig
     utan underrad där. */
  .marke small { display: none; }
  /* Mobil-scrolldiet: halverad sektionsluft enbart på mobil. */
  .sektion { padding: 46px 0; }
  .hero { padding: 64px 0 54px; }
}

/* ------------------------------------------------ material & liv (25/8) */

/* Varm glöd i heron: djup utan en enda bild. Ligger bakom innehållet. */
.hero { position: relative; overflow: hidden; }
.hero .ram { position: relative; z-index: 1; }
.hero::before {
  content: ""; position: absolute; pointer-events: none;
  top: -30%; right: -15%; width: 75%; height: 150%;
  background: radial-gradient(closest-side, rgba(178, 198, 220, .26), transparent 72%);
}
.hero::after {
  content: ""; position: absolute; pointer-events: none;
  bottom: -40%; left: -10%; width: 55%; height: 110%;
  background: radial-gradient(closest-side, rgba(178, 198, 220, .14), transparent 70%);
}

/* Papperskorn: feTurbulence (fraktalt brus), ALDRIG radiella punktraster —
   de blir ett synligt maskinellt mönster. Opacitet runt .05, multiply. */
.korn { position: relative; }
.korn > .ram { position: relative; z-index: 1; }
.korn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: multiply;
}

/* Sifferbandet: bara tal som är sanna och kontrollerbara. */
.siffror { background: var(--sand); padding: 34px 0; }
.siffror .ram {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  text-align: center;
}
.siffror b {
  display: block; font-family: "Playfair Display", Georgia, serif;
  font-size: 2.3rem; font-weight: 600; color: var(--bla);
  font-variant-numeric: tabular-nums;
}
.siffror span { font-size: 13.5px; color: var(--dampad); letter-spacing: .04em; }

/* Omdömena: bronsstjärnor och ett stort citattecken i kortet. */
.stjarnor { display: inline-flex; gap: 3px; margin-top: 20px; }
.stjarnor svg { width: 19px; height: 19px; color: var(--brons); }
.citat blockquote { position: relative; padding-top: 46px; }
.citat blockquote::before {
  content: "\201D"; position: absolute; top: 2px; left: 20px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 4.6rem; line-height: 1; color: var(--brons); opacity: .45;
}

/* Uppdykning vid scroll. Reglerna från haveriet 2026-08-19:
   - allt i eller ovanför vyn visas DIREKT (liv.js)
   - skyddsnät i liv.js visar allt dolt nära vyn med intervall
   - hellre utebliven animation än osynlig text */
.dyk { opacity: 0; transform: translateY(12px);
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1),
              transform .45s cubic-bezier(.22, 1, .36, 1); }
.dyk.syns { opacity: 1; transform: none; }

/* Fokus-avslojning (31/8): rubriker skarps IN fran oskarpa, som en lins
   som staller in sig. En gang, kort, och slutlaget ar filter: none -
   ingen permanent filterkostnad (webb-bygg: aldrig loopande filter). */
h2.dyk {
  filter: blur(7px);
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1),
              transform .45s cubic-bezier(.22, 1, .36, 1),
              filter .5s cubic-bezier(.22, 1, .36, 1); }
h2.dyk.syns { filter: none; }

/* TRAPPNING. Kort i samma rad ska inte dyka upp samtidigt, det laser
   som en enda platta som blinkar. Med atta hundradelar mellan varje
   glider blicken vanster till hoger av sig sjalv och raden kanns
   komponerad i stallet for slumpmassig.
   Fordrojningen sitter pa transition-delay, inte pa animationens langd:
   den forsta ratten hinner alltsa aldrig kannas seg. */
.dyk:nth-child(2)  { transition-delay: .05s; }
.dyk:nth-child(3)  { transition-delay: .10s; }
.dyk:nth-child(4)  { transition-delay: .14s; }
.dyk:nth-child(5)  { transition-delay: .18s; }
.dyk:nth-child(n+6) { transition-delay: .22s; }
/* Utan JS får ingenting vara dolt. */
.no-js .dyk { opacity: 1; transform: none; filter: none; }

/* Rida-avslojning for bilder (31/8): figuren klipps fram nedifran i
   stallet for att fadas. Olika element far olika, andamalsenlig rorelse
   - men samma kurva och klocka. Sakerheten ar oforandrad: samma
   .syns-mekanism och skyddsnat, och utan JS klipps ingenting. */
.dyk.dyk-rida { opacity: 1; transform: none;
  clip-path: inset(100% 0 0 0 round 16px);
  transition: clip-path .6s cubic-bezier(.22, 1, .36, 1); }
.dyk.dyk-rida.syns { clip-path: inset(0 round 16px); }
.no-js .dyk-rida { clip-path: none; }

/* Polerglansen BORTTAGEN 31/8 kvall. background-clip: text kapade
   rubriker: forst pa morka sektioner (uppmatt 977-2072 pixlar), sedan
   MITT I animationen pa Elias maskin - ett lage headless-matningen
   aldrig samplade. Tre haverier pa en dag ar facit. Regeln: hellre
   utebliven effekt an trasig text. Ateruppta ALDRIG utan pixeldiff
   som samplar UNDER animationen och pa riktig skarm.


/* ---- Hero-intro (Elia 31/8): koreograferad insekvens vid sidladdning.
   .heroin doljs fran start, animeras in nar <html> far .in (liv.js vid load).
   Overlappande delay sa de fem stegen laser som EN rorelse. Bara
   transform/opacity. Utan JS/reduced-motion star allt synligt. */
/* Overgangen ligger pa html.in, INTE pa grundklassen: annars blir
   intron en kapplopning mellan stylesheet och skript (uppmatt live 1/9:
   snabb cache = ingen intro alls, kall cache = full vantan). Med
   overgangen har: no-js bort -> doljs OGONBLICKLIGEN (ingen transition)
   -> dubbel rAF -> .in -> animeras in. Samma forlopp varje gang. */
.heroin { opacity: 0; transform: translateY(12px); }
html.in .heroin { opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
              transform .55s cubic-bezier(.22, 1, .36, 1); }
html.in .hero .etikett.heroin { transition-delay: .06s; }
html.in .hero h1.heroin       { transition-delay: .14s; }
html.in .hero .ingress.heroin { transition-delay: .22s; }
html.in .hero .knapprad.heroin{ transition-delay: .30s; }
html.in .hero .bevisrad.heroin{ transition-delay: .38s; }
.no-js .heroin { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Släck det som rör sig av sig självt, behåll korta svar på handling. */
  .kort { transition: none; }
  .faq summary::after { transition: none; }
  .dyk { opacity: 1; transform: none; transition: none; }
  .dyk[class] { transition-delay: 0s; }
  .dyk-rida { clip-path: none !important; transition: none; }
  .bildplats img { animation: none; transform: none; }
  h2.dyk { filter: none; }
  .fortrolista::after { animation: none; }
  .heroin { opacity: 1; transform: none; transition: none; }
  html.in .heroin { transition-delay: 0s; }
}


/* Onskat datum ar det Veronika sa styr allt annat: utan datum kan hon
   inte lamna pris, och da blir forfragan ett telefonsamtal i stallet for
   en bokning. Faltet far darfor egen ram i blatt, inte bara en etikett.
   Ramen ar dekor med funktion, inte pynt: den sager vilket falt som
   avgor svarstiden. */
.falt.viktigt {
  background: var(--bla-ljus);
  border: 1px solid color-mix(in srgb, var(--bla) 30%, var(--linje));
  border-radius: 12px;
  padding: 12px 13px 13px;
  margin-bottom: 16px;
}
.falt.viktigt label { color: var(--bla); }
.falt.viktigt input { background: #fff; }
.falthjalp {
  display: block; margin-top: 6px; font-size: 12.5px; color: var(--dampad);
}
/* I tvakolumnsraden ska den blaa rutan inte bli hogre an sin granne. */
.faltrad .falt.viktigt { margin-bottom: 0; }


/* ============================================================
   HELBREDDS-HERO MED TRE SCENER  (2026-08-27)
   Veronikas egna foton: kok -> vardagsrum -> kontor. 24 s per varv.
   Ingen AI, inga videofiler. Tre webp om ca 220 kB styck.
   ============================================================ */
.hero { position: relative; overflow: hidden; isolation: isolate; }

.herobilder {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #48505a;                 /* syns innan forsta bilden laddat */
}
.heroscen {
  position: absolute; inset: 0;
  opacity: 0;
  animation: heroskifte 16s infinite;
  /* Fargraderingen ligger HAR, pa lagret som bara opacity-animeras, inte
     pa <img> som Ken Burns skalar. Da raknas filtret en gang i stallet
     for varje frame - det var det som glitchade vid bytet 31/8. */
  filter: brightness(1.12) contrast(1.04) saturate(1.02);
  will-change: opacity;
  transform: translateZ(0);   /* eget kompositlager: ren GPU-crossfade */
}
.heroscen img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Fargraderingen flyttad till .heroscen (lagret som bara fadar) sa
     Ken Burns-skalningen har inte langre nagot dyrt filter att rakna om
     varje frame. Det var det som glitchade vid bytet. */
  /* Grundvardet MASTE matcha heroandas 0 %-keyframe (scale 1.02), annars
     snapper bilden fran 1.06 till 1.02 i en frame precis nar den fordrojda
     animationen startar - det var hacket vid bytet (uppmatt 31/8).
     animation-fill-mode: both gor att bilden HALLER 0 %-lage under
     fordrojningen sa overgangen till animationen blir sommlos. */
  transform: scale(1.02);
  animation: heroandas 16s infinite;
  will-change: transform;
}
/* NEGATIV fordrojning, inte positiv. Med -8s star scen 2 redan mitt i
   sin egen cykel vid sidladdning (opacity 0, halva varvet kvar till sin
   intoning). Positiv delay + fill-mode gjorde att den lag SYNLIG och
   frusen i sju sekunder - uppmatt 31/8. Negativ delay behover ingen
   fill-mode: varje scen ar ratt fran forsta bildrutan. */
.heroscen.s1, .heroscen.s1 img { animation-delay: 0s; }
.heroscen.s2, .heroscen.s2 img { animation-delay: -8s; }

/* Varje scen syns en tredjedel av varvet och tonar i kanterna.
   Overlappet ar avsiktligt langt: 1,6 s kanns som film, 0,3 s som ett klipp. */
@keyframes heroskifte {
   0%    { opacity: 1; }
  44%    { opacity: 1; }
  50%    { opacity: 0; }
  94%    { opacity: 0; }
 100%    { opacity: 1; }
}
/* Ken Burns: langsam inzoomning med svag sidledsdrift. Aldrig linjart. */
/* Zoomen aterstalls vid 52 %, alltsa NAR SCENEN AR OSYNLIG (opacity ar
   0 mellan 50 % och 94 %). Aterstallde man vid loopgransen 100->0 %
   skulle bilden snappa precis nar den tonar in. */
@keyframes heroandas {
   0%    { transform: scale(1.02) translate3d(0, 0, 0); }
  48%    { transform: scale(1.11) translate3d(-1.6%, -1%, 0); }
  52%    { transform: scale(1.02) translate3d(0, 0, 0); }
 100%    { transform: scale(1.02) translate3d(0, 0, 0); }
}

/* Scrimmen. Utan den ar vit text pa foto oläslig. Tyngst till vanster
   dar texten star, ljusare till hoger sa rummet syns.
   LJUSAD 2026-08-29 pa Veronikas begaran ("mer valkomnande"): alfa
   sankt ~20 procentenheter rakt over och tonen nagot varmare. Kravet
   som INTE far ge vika: hero_kontrast.py ska vara gron efterat —
   lasbarheten mats, den tycks inte. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Veronika 31/8: vanstra delen var markbart morkare an resten.
       84 % -> 64 % ar den storsta nedtrappningen; ovriga stegen sanks
       mindre sa att overgangen mot hoger fortfarande ar mjuk. */
    linear-gradient(90deg,
      rgba(31, 37, 45, .70) 0%,
      rgba(31, 37, 45, .58) 38%,
      rgba(31, 37, 45, .26) 66%,
      rgba(31, 37, 45, .10) 100%),
    /* "hela heron LITE ljusare" - jamn nedtrappning, inte borttagen.
       Nedre kanten behovs an for att skilja heron fran nasta sektion. */
    linear-gradient(180deg,
      rgba(31, 37, 45, .22) 0%,
      rgba(31, 37, 45, .06) 40%,
      rgba(31, 37, 45, .34) 100%);
  width: auto; height: auto; top: 0; right: 0;
}
/* Lokalt textskydd i BAKGRUNDSLAGRET (inte pa texten): scrimmen
   ljusnades pa Veronikas begaran, men hogdagrar i fotona foll da under
   4,5:1 bakom rubriken. En mjuk oval over textzonen racker — rummet
   till hoger forblir ljust. Ligger har (och inte pa .herotext) for att
   skyddet ar en egenskap hos bakgrunden; hero_kontrast.py mater
   bakgrunden med texten dold, och skydd som foljer texten kan aldrig
   verifieras. */
.hero::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  /* Uppmatt 31/8: rubriken sträcker sig till 51 % av herons bredd, men
     skyddets ellips lag centrerad pa 18 %. Den ljusaste punkten hamnade
     darfor i rubrikens ovre hogra horn (x 51 %, y 21 %) dar skyddet redan
     tonat ut. Ellipsen ar flyttad och breddad sa den tacker hela
     rubrikrutan. */
  left: -8%; top: 2%; width: 76%; height: 94%;
  background: radial-gradient(ellipse at 46% 40%,
    rgba(28, 34, 42, .70) 0%, rgba(28, 34, 42, .46) 62%, transparent 84%);
  filter: blur(10px);
  bottom: auto; right: auto;
}

.hero .ram { position: relative; z-index: 2; }

/* Mer andningsrum 31/8: premium-kansla kommer fran tomrum runt stor
   text, precis som i gamla heron. */
.hero { padding: 160px 0 140px; }
.hero .herotext { max-width: 40rem; }

@media (max-width: 900px) {
  .hero { padding: 92px 0 84px; }
  /* Pa mobil ar det ingen sidled att fordela ljus over, darfor
     jamn scrim uppifran och ner i stallet. */
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(30, 36, 44, .60) 0%,
        rgba(30, 36, 44, .46) 45%,
        rgba(30, 36, 44, .70) 100%);
  }
}

/* Reducerad rorelse: bilden star helt still pa forsta scenen.
   Sajten ska aldrig kannas trasig for den som slagit pa detta. */
@media (prefers-reduced-motion: reduce) {
  .heroscen, .heroscen img { animation: none; }
  .heroscen.s1 { opacity: 1; }
  .heroscen.s2, .heroscen.s3 { opacity: 0; }
  .heroscen img { transform: scale(1.02); }
}

/* --------------------------------------------- hero-fixarna 2026-09-01 */
/* Ringlisten ar overflodgig medan herons egen ringknapp syns - tva
   likadana knappar pa forsta skarmen var slosad yta (Elias kritik).
   liv.js satter .hero-i-vyn pa <html>; utan JS visas listen som forut. */
.mobilring { transform: translateY(0); transition: transform .35s ease; }
html.ringcta-i-vyn .mobilring,
body.meny-oppen .mobilring { transform: translateY(140%); }
@media (prefers-reduced-motion: reduce) { .mobilring { transition: none; } }

/* Rubriken bryter aldrig mitt i "rent hem", och pa mobil far
   "utan anstrangning" en egen rad - tre hela fraser, inte fragment. */
.hero h1 .ihop { white-space: nowrap; }
@media (max-width: 760px) {
  .hero h1 .skrivstil { display: block; }
}

/* Mobilens textskydd: globalscrimmen ljusnades (rummet ska synas), sa
   det LOKALA skyddet bakom textzonen tar hogdagrarna i stallet - bred
   mjuk oval over rubrik+ingress, nedre delen av heron forblir luftig.
   Uppmatt 1/9: utan denna lag varsta punkten pa 3,3:1 (krav 4,5). */
@media (max-width: 900px) {
  .hero::after {
    left: -10%; top: 0; width: 120%; height: 78%;
    background: radial-gradient(ellipse at 50% 38%,
      rgba(28, 34, 42, .66) 0%, rgba(28, 34, 42, .44) 55%, transparent 80%);
    filter: blur(14px);
  }
}