/* Biotherm Heat · startsidan (ovanpå bas.css, sajt.css och startsektionernas assets/sx/*.css).
   Ordning (2026-10-24): hero (R02) · 01 våra pannor · 02 var vi finns (S18 Boden–Luleå–Västerås; ersatte höjdkurvebandet och
   "om oss" med kartan ur R14, se kalla/sx/borttaget-startsida-02.html) · 03 vi i korthet (O04) · 04 mycket bygger vi själva
   (R15) · 05 projektering i 3D (R01) · 06 från förrådet till värmen (K01) · 07 allt i en leverans (E13) · 08 projekten (I06) · 09 nytt från projekten (X05) · 10 kunderna säger (R10) ·
   11 ett brev efter femtio år (O18) · fjällets ljuslinje (A15) · 12 kostnadsfri effektberäkning (R18) · sidfot.
   Startsektionernas egna CSS rörs inte (skrivs över av kalla/sx_in.py) – avstånd och annat som gäller just den här sidan
   står längst ned i den här filen. */

/* ---------- hero: plymen stiger ur källan (R02) ---------- */
.hero { position: relative; min-height: max(680px, calc(var(--vh) * 100)); display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 120px 0 140px; overflow: hidden; background: var(--natt); }
.hero-flode { position: absolute; inset: 0; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 10, 24, 0), var(--natt)); }
.hero-in { position: relative; z-index: 2; width: 100%; max-width: calc(780px + 2 * var(--marg)); margin-inline: auto; padding-inline: var(--marg); }
.hero-in::before { content: ""; position: absolute; inset: -18% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(4, 10, 24, .6), rgba(4, 10, 24, .28) 60%, rgba(4, 10, 24, 0)); }
.hero h1 { margin-top: 30px; }
.hero h1 .rad + .rad { margin-top: .02em; }
.hero .t-ingress { margin: 34px auto 0; max-width: 600px; }
.hero-knappar { margin-top: 46px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 22px 40px; }
.pil.ner { transform: rotate(90deg); width: 18px; }
.lank:hover .pil.ner { transform: rotate(90deg) translateX(4px); }
.hero-ner { position: absolute; z-index: 2; left: 50%; bottom: 34px; width: 1px; height: 64px; margin-left: -.5px; overflow: hidden; background: var(--linje); animation: h-tona 1.2s ease 1.6s both; }
@keyframes h-tona { from { opacity: 0; } to { opacity: 1; } }
.hero-ner::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: linear-gradient(180deg, rgba(238, 243, 250, 0), rgba(238, 243, 250, .85)); animation: h-ner 2.8s cubic-bezier(.65, 0, .35, 1) infinite 4s; opacity: 0; transform: translateY(-100%); }
@keyframes h-ner { 0% { transform: translateY(-100%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(250%); opacity: 0; } }

/* ---------- 01 våra pannor: tre bränslen, var och en leder till pannorna ---------- */
.pannor { padding-bottom: clamp(24px, 3vw, 56px); }
.branslen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); }
.bransle { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #030a17; border: 1px solid var(--linje); isolation: isolate; transition: border-color .6s ease; }
.bransle:hover { border-color: var(--linje-2); }
.b-bild { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.b-bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.8s var(--ease); }
.bransle:hover .b-bild img { transform: scale(1.07); }
.b-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 10, 24, .2) 0%, rgba(4, 10, 24, 0) 22%, rgba(4, 10, 24, .62) 46%, rgba(4, 10, 24, .9) 62%, #040a18 84%); }
.b-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(24px, 2.3vw, 36px); }
.b-text h3 { margin-top: 12px; }
.b-text .b { margin-top: 12px; color: var(--is-2); font-size: 1rem; line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.b-fot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linje-2); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.b-effekt { font-size: 1.0625rem; color: var(--is); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-lank { display: inline-flex; align-items: center; gap: 12px; color: var(--is); font-weight: 420; white-space: nowrap; }
.b-lank .pil { color: var(--bla); transition: transform .6s var(--ease); }
.bransle:hover .b-lank .pil, .bransle:focus-visible .b-lank .pil { transform: translateX(4px); }
.bransle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 2px; background: var(--flode); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); }
.bransle:hover::after, .bransle:focus-visible::after { transform: scaleX(1); }
.pannor-fot { margin-top: 28px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; }
.pannor-fot .lank { text-align: left; text-wrap: balance; }   /* knappens text centrerades och lämnade "out" ensamt (en, mobil) */

/* ---------- 04 mycket bygger vi själva (R15) ---------- */
.egna { padding-bottom: clamp(16px, 2vw, 40px); background: linear-gradient(180deg, var(--natt) 0%, var(--natt-2) 50%, var(--natt) 100%); }
.egna-rad { align-items: end; row-gap: 36px; margin-bottom: clamp(48px, 5vw, 88px); }
.egna-rad .v { grid-column: 1 / span 7; }
.egna-rad .v .t-etikett { margin-bottom: 30px; }
.egna-rad .v .t-brod { margin-top: 26px; max-width: 46ch; }
.artiklar { grid-column: 9 / span 4; }
.artiklar .linje-flode { width: 40px; margin-bottom: 22px; }
.artiklar .t-siffra { font-size: clamp(3.25rem, 2rem + 2.6vw, 5rem); }
.artiklar .t-liten { margin-top: 14px; max-width: 28ch; }
.egna .ruta .bild.vc { padding: 18px 10px 0; }

/* ---------- 05 projektering i 3D (R01) ---------- */
.pj { align-items: center; }
.pj-text { grid-column: 1 / span 5; }
.pj-text .t-etikett { margin-bottom: 30px; }
.pj-text .t-brod { margin-top: 30px; max-width: 470px; }
.pj-lev { margin-top: 44px; max-width: 470px; }
.pj-lev li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 16px 0 15px; border-top: 1px solid var(--linje); position: relative; }
.pj-lev li:last-child { border-bottom: 1px solid var(--linje); }
.pj-lev li::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 1px; background: var(--flode); }
.pj-lev .n { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--is-3); font-variant-numeric: tabular-nums; }
.pj-lev .v { font-size: 1.125rem; color: var(--is); line-height: 1.3; }
.pj-lev .v small { display: block; margin-top: 3px; font-size: .875rem; color: var(--is-3); }
.pj-vy { grid-column: 6 / span 7; margin: 0 calc(-1 * min(var(--marg), 40px)) 0 0; }
.pj-scen { position: relative; aspect-ratio: 965 / 700; }
.pj-scen img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pj-lin { transition: opacity 1.1s ease; }
.pj-modell { position: absolute; inset: 0; clip-path: inset(0 0 0 0); transition: clip-path 1.9s var(--ease-io); }
.pj-fril, .pj-ror { transition: opacity 1s ease; }
.pj-skanner { position: absolute; left: 4%; right: 4%; top: 0; height: 1px; opacity: 0; background: linear-gradient(90deg, rgba(159, 180, 196, 0), rgba(214, 233, 255, .9), rgba(159, 180, 196, 0)); box-shadow: 0 0 18px rgba(120, 180, 240, .55); pointer-events: none; }
.pj-scen.skannar .pj-lin { opacity: 1 !important; }
.pj-scen.skannar .pj-skanner { opacity: 1; top: 100%; transition: top 1.9s var(--ease-io), opacity .3s ease; }
.pj-scen[data-lage="linjer"] .pj-modell { clip-path: inset(0 0 100% 0); }
.pj-scen[data-lage="linjer"] .pj-lin { opacity: 1; }
.pj-scen[data-lage="modell"] .pj-lin { opacity: 0; }
.pj-scen[data-lage="modell"] .pj-ror { opacity: 0; }
.pj-scen[data-lage="ror"] .pj-lin { opacity: .55; }
.pj-scen[data-lage="ror"] .pj-fril { opacity: 0; }
.pj-scen[data-lage="ror"] .pj-ror { opacity: 1; }
.pj-under { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 18px; flex-wrap: wrap; }
.pj-val { display: inline-flex; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linje-2); }
.pj-val button { height: 36px; padding: 0 16px; border-radius: 999px; font-size: .9375rem; color: var(--is-2); transition: background-color .5s var(--ease), color .5s var(--ease); }
.pj-val button:hover { color: var(--is); }
.pj-val button[aria-pressed="true"] { background: rgba(238, 243, 250, .1); color: var(--is); box-shadow: inset 0 0 0 1px rgba(0, 152, 212, .55); }
.pj-under .t-liten { max-width: 400px; }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .egna-rad .v, .artiklar { grid-column: 1 / -1; }
  .pj-text { grid-column: 1 / -1; }
  .pj-vy { grid-column: 1 / -1; margin: 56px 0 0; }
}
@media (max-width: 860px) {
  .branslen { grid-template-columns: 1fr; gap: 14px; }
  .bransle { aspect-ratio: 16 / 12; }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .hero { padding: 110px 0 120px; }
  .hero h1 { font-size: 3.25rem; }
  .hero .t-ingress { font-size: 1.1875rem; }
  .hero-knappar { flex-direction: column; gap: 22px; }
  .hero-knappar .knapp { width: 100%; }
  .bransle { aspect-ratio: auto; min-height: 420px; border-radius: 18px; }
  .b-fot { margin-top: 18px; }
  .pj-vy { margin-top: 44px; }
  .pj-val button { padding: 0 13px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ner::after { display: none; }
}

/* ---------- startsektionerna på den här sidan (2026-10-23) ----------
   Sektionernas egna CSS ligger i assets/sx/ (ur webb/startsektioner/s, kalla/sx_in.py) – här bara avstånden mellan dem,
   sidhuvudet och etiketten ovanför brevet. */
.s18 { padding-bottom: 24px; }                                /* 02 → 03: luften kommer från O04 (som 01 → 02); 24 px kvar
                                                                 så att länkens fokusring inte klipps (.s18 har overflow: hidden) */
@media (min-width: 1101px) {
  /* hela landet ryms under det fasta sidhuvudet (S18 är ritad för 92 vh utan sidhuvud – norra spetsen hamnade under det) */
  .s18-karta { height: min(calc(var(--vh) * 100 - 140px), 980px); }
  /* "From Boden / across Sweden." bröts i tre rader i fyra spalter – rubriken får fem (kartan börjar längre in) */
  .s18-text { grid-column: 1 / span 5; }
}
.k01 { margin-top: calc(var(--sektion) * .5); }               /* 05 → 06: rubriken står 96 px ned i scenen */
.e13 { margin-top: var(--sektion); }                          /* 06 → 07: natt mellan 3D-scenen och fotot */
.e13.stilla { margin-top: 0; }                                /* stillbilderna (reducerad rörelse) har egen utfyllnad */
.x05 + .r10 { padding-top: calc(var(--sektion) * .4); }       /* 09 → 10: rullens scen har redan luft under sig */
.x05.x05-platt + .r10 { padding-top: 0; }
.start-o18-fore { text-align: center; }
.start-o18-fore .t-etikett { margin-bottom: 0; }
.o18-bord { top: 76px; }                                      /* brevet under det fasta sidhuvudet, inte bakom det */
.o18-efter { padding-bottom: calc(var(--sektion) * .5); }     /* avslutningen har egen luft ovanför fjället */
@media (max-width: 1000px) {
  .x05 + .r10 { padding-top: 0; }                             /* rullen ligger platt med egen utfyllnad */
}
@media (max-width: 760px) {
  .o18-bord { top: 68px; }
}

/* granskning 2026-10-24 */
/* samma rubriknivå som sidans övriga h2 (X05 hade "opsz" 18, R10 var 47 px mot 70 px) */
.x05 h2.t-h2, .r10-huvud h2.t-h2 { font-size: clamp(2.375rem, 1.4rem + 3.3vw, 5.25rem); line-height: 1; font-weight: 260; font-variation-settings: "opsz" 96; letter-spacing: -.032em; }
/* 09 → 10: rullens klistrade scen har ca 270 px tomt under sig – samma luft som mellan övriga sektioner */
@media (min-width: 1001px) {
  .x05:not(.x05-platt) + .r10 { padding-top: 0; margin-top: calc(var(--sektion) * -.4); }
}
/* 06 → 07: fotots överkant tonar ur natten i stället för en hård kant mot K01 */
.e13-niva[data-n="1"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, var(--natt) 0%, rgba(4, 10, 24, .55) 40%, rgba(4, 10, 24, 0) 100%); }
/* mobil: E13:s etikett stod 4 px under sidhuvudet */
@media (max-width: 760px) {
  .e13-intro { top: 100px; }
  /* 08 projekten: lyftkortet (med höga stående foton) under det fasta sidhuvudet, inte bakom det – som på projektsidan */
  .i06-kort { top: 80px; max-height: calc(100% - 96px); }
}
/* reducerad rörelse och skärmdumpsläget: K01 och brevet visar sin stillbild utan 500/230 vh tom scroll */
html.visa-allt .k01 { height: auto; }
html.visa-allt .o18-spar { height: calc(var(--vh) * 100); }
@media (prefers-reduced-motion: reduce) {
  .k01 { height: auto; }
  .o18-spar { height: calc(var(--vh) * 100); }
}