/* Biotherm Heat · sidorna under "Om oss ▸ Vårt företag" (Om oss, Vår historia, Miljöpolicy) – det som är gemensamt.
   Ovanpå bas.css och sajt.css. Hero med brödsmulor, broschyrens datarader, skulpterade jättetal och "Läs vidare". */

/* ---------- hero ---------- */
.fo-hero { position: relative; padding: clamp(128px, 11vw, 184px) 0 0; isolation: isolate; }
.fo-hero > .bredd { position: relative; z-index: 1; }
.fo-hero .smulor { margin-bottom: clamp(30px, 3.2vw, 48px); }
.fo-hero h1 { margin-top: 26px; }
.fo-hero .t-ingress { margin-top: 32px; max-width: 37ch; }
.pil.ner { transform: rotate(90deg); width: 18px; }
.lank:hover .pil.ner { transform: rotate(90deg) translateX(4px); }

/* ---------- datarader: etikett ovanför värdet, tunn linje överst (broschyren) ---------- */
.fo-data { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 26px; }
.fo-data > div { padding-top: 16px; border-top: 1px solid var(--linje-2); }
.fo-data dt { font-size: .8125rem; line-height: 1.3; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.fo-data dd { margin: 9px 0 0; font-size: clamp(1.125rem, 1.03rem + .28vw, 1.375rem); line-height: 1.3; font-weight: 360; font-variation-settings: "opsz" 24; color: var(--is); font-variant-numeric: tabular-nums; }
.fo-data dd small { display: block; margin-top: 5px; font-size: .9375rem; line-height: 1.45; font-weight: 380; font-variation-settings: "opsz" 14; color: var(--is-3); }

/* ---------- skulpterat jättetal: flödestexturen syns genom siffrorna (broschyren 12.1) ---------- */
.fo-skulptur { display: block; font-weight: 640; font-variation-settings: "opsz" 96; letter-spacing: -.055em; line-height: .78; font-variant-numeric: lining-nums;
  background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- läs vidare: tre stora textlänkar (ingen kortlayout) ---------- */
.fo-vidare-lista { margin-top: clamp(36px, 3.6vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); }
.fo-vidare-lista a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 26px 0 30px; border-top: 1px solid var(--linje-2); }
.fo-vidare-lista a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--flode); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease); }
.fo-vidare-lista a:hover::before, .fo-vidare-lista a:focus-visible::before { transform: scaleX(1); }
.fo-v-rubrik { margin-top: 14px; font-size: clamp(1.5rem, 1.15rem + 1vw, 2.25rem); line-height: 1.12; font-weight: 300; font-variation-settings: "opsz" 60; letter-spacing: -.018em; color: var(--is); text-wrap: balance; max-width: 16ch; }
.fo-v-mer { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 12px; color: var(--is-2); font-weight: 420; transition: color .4s ease; }
.fo-v-mer .pil { color: var(--bla); transition: transform .6s var(--ease); }
.fo-vidare-lista a:hover .fo-v-mer, .fo-vidare-lista a:focus-visible .fo-v-mer { color: var(--is); }
.fo-vidare-lista a:hover .pil, .fo-vidare-lista a:focus-visible .pil { transform: translateX(4px); }
.fo-vidare-lista a:focus-visible { outline-offset: 6px; }

@media (max-width: 960px) {
  .fo-vidare-lista { grid-template-columns: 1fr; }
  .fo-vidare-lista a { padding: 22px 0 24px; }
  .fo-v-rubrik { max-width: 22ch; }
  .fo-v-mer { padding-top: 18px; }
}
@media (max-width: 760px) {
  .fo-hero { padding-top: 104px; }
  .fo-hero .smulor { margin-bottom: 26px; }
  .fo-hero h1 { margin-top: 20px; }
  .fo-hero .t-ingress { margin-top: 24px; font-size: 1.1875rem; }
  .fo-data { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
}