/* Biotherm Heat · Vår historia (ovanpå bas.css, sajt.css och sidor/foretaget.css).
   Årsringarna: stocken står kvar till höger (sticky) och historien rullar förbi till vänster; mobil: stocken som ett band överst. */

.hi-scen { position: relative; }
.hi-scen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--vh) * 100); pointer-events: none;
  background: radial-gradient(50% 60% at 72% 52%, rgba(16, 36, 74, .55), rgba(4, 10, 24, 0) 70%); }
.hi-rutnat { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }

/* ---------- intro ---------- */
.hi-intro { grid-column: 1 / span 5; grid-row: 1; min-height: calc(var(--vh) * 100); display: flex; flex-direction: column; justify-content: center; padding: 132px 0 88px; }
.hi-intro .smulor { margin-bottom: clamp(30px, 3.2vw, 48px); }
.hi-intro h1 { margin-top: 26px; }
.hi-intro .t-ingress { margin-top: 32px; max-width: 30ch; }
.hi-folj { margin-top: 44px; align-self: flex-start; }

/* ---------- stocken (sticky) ---------- */
.hi-stock { grid-column: 6 / span 7; grid-row: 1 / span 2; align-self: start; position: sticky; top: 0; z-index: 1; height: calc(var(--vh) * 100); min-height: 560px; display: flex; flex-direction: column; padding: 108px 0 36px; }
.hi-log { position: relative; flex: 1 1 auto; min-height: 0; }
.hi-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hi-ann { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.hi-ann-linje { fill: none; stroke: var(--c, #c4d8f0); stroke-opacity: .62; stroke-width: 1.2; }
.hi-ann-klammer { fill: none; stroke: var(--c, #c4d8f0); stroke-width: 3; stroke-linecap: round; }
.hi-ann circle { fill: var(--c, #c4d8f0); }
.hi-ann circle.hi-ann-mark, .hi-ann circle.hi-ann-halo { fill: none; stroke: var(--c, #c4d8f0); stroke-width: 1.4; }
.hi-ann circle.hi-ann-halo { stroke-opacity: .5; stroke-width: 1; }
.hi-axel { display: flex; align-items: center; gap: 16px; width: min(100%, 460px); margin: 22px auto 0; }
.hi-axel-ar { font-size: .8125rem; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .14em; color: var(--is-3); font-variant-numeric: tabular-nums; }
.hi-axel-linje { --g: 1; position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(170, 196, 228, .16); }
.hi-axel-linje i { position: absolute; inset: 0; border-radius: 2px; background: var(--flode); transform-origin: 0 50%; transform: scaleX(var(--g)); }
.hi-axel-linje b { position: absolute; top: -4px; left: calc(var(--g) * 100%); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--glod); box-shadow: 0 0 14px rgba(242, 154, 60, .8); }
.hi-axel-not { margin-top: 12px; text-align: center; font-size: .875rem; color: var(--is-4); }

/* ---------- milstolparna ---------- */
.hi-steg { grid-column: 1 / span 5; grid-row: 2; position: relative; z-index: 2; }
.hi-steg > li { min-height: calc(var(--vh) * 64); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 64px 0; transition: opacity .8s ease; }
.js .hi-steg > li:not(.aktiv) { opacity: .32; }
html.visa-allt .hi-steg > li { opacity: 1; }
.hi-steg > li:last-child { min-height: calc(var(--vh) * 90); }
.hi-ar { font-size: clamp(1.625rem, 1.15rem + 1.3vw, 2.5rem); line-height: 1.1; font-weight: 340; font-variation-settings: "opsz" 40; letter-spacing: -.012em; color: var(--c, var(--is)); font-variant-numeric: tabular-nums; }
.hi-steg h2 { margin-top: 14px; }
.hi-steg .t-brod { margin-top: 18px; max-width: 36ch; }
.hi-steg .lank { margin-top: 28px; }
.hi-tal { margin-top: 18px; font-size: clamp(4rem, 2.2rem + 4.8vw, 7.75rem); color: var(--is); }
.hi-forugnar h2 { margin-top: 10px; }
.hi-idag-data { margin-top: 36px; width: 100%; max-width: 440px; }
.hi-idag .hi-ar { color: var(--glod); }

.hi-vidare { padding-top: clamp(64px, 7vw, 120px); }

/* ---------- smal skärm: stocken som ett klistrat band överst ---------- */
@media (max-width: 899px) {
  .hi-scen::before { display: none; }
  .hi-rutnat { display: block; }
  .hi-intro { min-height: 0; padding: 112px 0 36px; }
  .hi-intro .t-ingress { max-width: 32ch; }
  .hi-folj { margin-top: 32px; }
  .hi-stock { top: 76px; z-index: 3; height: clamp(260px, calc(var(--vh) * 40), 360px); min-height: 0; padding: 10px 0 14px; margin-inline: calc(-1 * var(--marg)); padding-inline: var(--marg); background: var(--natt); }
  .hi-stock::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; pointer-events: none; background: linear-gradient(180deg, var(--natt), rgba(4, 10, 24, 0)); }
  .hi-axel { margin-top: 6px; width: min(100%, 340px); }
  .hi-axel-not, .hi-ann { display: none; }
  .hi-steg > li { min-height: calc(var(--vh) * 44); padding: 32px 0; }
  .hi-steg > li:last-child { min-height: calc(var(--vh) * 60); }
}
@media (max-width: 760px) {
  .hi-intro { padding-top: 104px; }
  .hi-intro h1 { margin-top: 20px; }
  .hi-intro .t-ingress { margin-top: 24px; font-size: 1.1875rem; }
  .hi-stock { top: 68px; }
  .hi-ar { font-size: 1.5rem; }
  .hi-steg .t-brod { margin-top: 14px; }
  .hi-tal { font-size: 4rem; }
  .fo-data.hi-idag-data { grid-template-columns: 1fr; }
}