body.hr{background:var(--linen)}

.hr .meny>a[aria-current]{color:var(--sage)}


.hr-inled{padding:calc(var(--hdr) + 16vh) var(--kant) 14vh;max-width:1400px}
.hr-over{font-family:"Lateral";text-transform:uppercase;font-size:13px;letter-spacing:.08em;color:var(--sage);margin-bottom:3vh}
.hr-inled h1{font-size:clamp(40px,8.4vw,150px);line-height:.98;letter-spacing:-.02em}
.hr-rad{display:inline-block;overflow:hidden;vertical-align:top;padding:.18em 0 .14em;margin:-.18em 0 -.14em}
.hr-rad>span{display:inline-block;animation:hr-upp 1.2s cubic-bezier(.16,1,.3,1) both}
.hr-rad+.hr-rad>span{animation-delay:.12s}
@keyframes hr-upp{from{transform:translateY(105%)}}
.hr-ingress{margin-top:6vh;justify-self:end;max-width:36em;font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:#5a5650;animation:hr-fram 1.2s .35s cubic-bezier(.16,1,.3,1) both}
@keyframes hr-fram{from{opacity:0;transform:translateY(16px)}}
@media (min-width:861px){
  .hr-inled{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:6vw;align-items:end;max-width:none;padding-bottom:16vh}
  .hr-over{grid-column:1/-1}
  .hr-ingress{margin:0 0 .5em;font-size:clamp(17px,1.25vw,20px)}
}


.hr-tid{position:relative;display:grid;grid-template-columns:50% 50%;background:var(--golv);color:var(--linen);
  timeline-scope:--e0,--e1,--e2,--e3,--e4,--e5,--e6,--e7,--hr-tid;view-timeline:--hr-tid block}
.hr-scen{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));overflow:hidden;background:#151312}
.hr-bilder,.hr-bild{position:absolute;inset:0}
.hr-bild{margin:0;-webkit-mask-image:linear-gradient(to top,#000 42%,transparent 58%);mask-image:linear-gradient(to top,#000 42%,transparent 58%);
  -webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0%;mask-position:0 0%;transition:-webkit-mask-position 1.3s cubic-bezier(.65,0,.35,1),mask-position 1.3s cubic-bezier(.65,0,.35,1)}
.hr-bild.syns{-webkit-mask-position:0 100%;mask-position:0 100%}
.hr-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.hr-bild.syns img{transform:scale(1.02)}
.hr-bild[style*="--n:0"]{-webkit-mask-image:none;mask-image:none}

.hr-scen::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;background:linear-gradient(180deg,transparent,rgba(20,17,15,.62));pointer-events:none}


.hr-ar{position:absolute;left:var(--kant);bottom:clamp(20px,5vh,56px);z-index:2;display:flex;font-family:"Lateral";font-size:clamp(96px,13vw,232px);line-height:1;letter-spacing:-.04em;color:var(--linen);font-variant-numeric:tabular-nums}
.hr-siffra{display:block;height:1em;overflow:hidden;padding:0 .01em}
.hr-siffra>span{display:flex;flex-direction:column;transform:translateY(calc(var(--d,0) * -1em));transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--fdr,0ms)}
.hr-siffra>span>span{display:block;height:1em}
.hr-matare{display:none}


.hr-spar{display:flex;min-width:0}
.hr-rail{flex:0 0 clamp(84px,8vw,120px)}
.hr-rail-inre{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;gap:2px;padding-left:clamp(20px,2.4vw,40px);position:sticky}
.hr-rail-linje{position:absolute;left:clamp(20px,2.4vw,40px);top:50%;height:calc(8 * 46px);translate:-14px -50%;width:1px;background:rgba(237,231,219,.18)}
.hr-rail-linje>span{position:absolute;inset:0;background:var(--linen);transform-origin:top;transform:scaleY(var(--fyll,0));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hr-rail a{display:flex;align-items:center;min-height:44px;font-family:"Lateral";font-size:13px;letter-spacing:.06em;color:rgba(237,231,219,.42);transition:color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.hr-rail a:hover{color:var(--linen)}
.hr-rail a[aria-current="step"]{color:var(--linen);transform:translateX(6px)}
.hr-rail a:focus-visible{outline:2px solid var(--linen);outline-offset:2px}

.hr-eror{list-style:none;padding:0;flex:1;min-width:0}
.hr-era{min-height:calc(100svh - var(--hdr));display:flex;flex-direction:column;justify-content:center;padding:14vh clamp(24px,5vw,96px) 14vh clamp(8px,1.5vw,24px);opacity:.28;transition:opacity .8s cubic-bezier(.16,1,.3,1)}
.hr-era:first-child{view-timeline:--e0 block}.hr-era:nth-child(2){view-timeline:--e1 block}.hr-era:nth-child(3){view-timeline:--e2 block}.hr-era:nth-child(4){view-timeline:--e3 block}
.hr-era:nth-child(5){view-timeline:--e4 block}.hr-era:nth-child(6){view-timeline:--e5 block}.hr-era:nth-child(7){view-timeline:--e6 block}.hr-era:nth-child(8){view-timeline:--e7 block}
.hr-era.aktiv{opacity:1}
.hr-arlitet{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hr-era h2{font-size:clamp(28px,3.4vw,58px);overflow:hidden;padding:.04em 0 .12em;margin-bottom:.5em;max-width:12em}
.hr-era h2>span{display:block;transform:translateY(102%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.hr-era.aktiv h2>span,.hr-era.sedd h2>span{transform:none}
.hr-era p{max-width:32em;color:var(--limestone);font-size:clamp(17px,1.2vw,19px);line-height:1.6}
.hr-era p+p{margin-top:1em}


@supports (animation-timeline:view()) and (timeline-scope:--a){
  .hr-bild{transition:none}
  .hr-bild img{transition:none}
  .hr-bild:not([style*="--n:0"]){animation:hr-mask linear both;animation-range:entry 20% entry 62%}
  .hr-bild:not([style*="--n:0"]) img{animation:hr-zoom linear both;animation-range:entry 0% exit 40%}
  .hr-bild[style*="--n:1"],.hr-bild[style*="--n:1"] img{animation-timeline:--e1}
  .hr-bild[style*="--n:2"],.hr-bild[style*="--n:2"] img{animation-timeline:--e2}
  .hr-bild[style*="--n:3"],.hr-bild[style*="--n:3"] img{animation-timeline:--e3}
  .hr-bild[style*="--n:4"],.hr-bild[style*="--n:4"] img{animation-timeline:--e4}
  .hr-bild[style*="--n:5"],.hr-bild[style*="--n:5"] img{animation-timeline:--e5}
  .hr-bild[style*="--n:6"],.hr-bild[style*="--n:6"] img{animation-timeline:--e6}
  .hr-bild[style*="--n:7"],.hr-bild[style*="--n:7"] img{animation-timeline:--e7}
  .hr-bild[style*="--n:0"] img{transform:none;animation:hr-zoom0 linear both;animation-timeline:--e0;animation-range:entry 0% exit 40%}
  .hr-matare>span,.hr-rail-linje>span{transition:none;animation:hr-fyll linear both;animation-timeline:--hr-tid;animation-range:contain 0% contain 100%}
  
  .hr-scen{animation:hr-scen-in linear both;animation-timeline:--hr-tid;animation-range:entry 0% entry 55%}
  .hr-slut figure img{animation:hr-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
}
@keyframes hr-scen-in{from{clip-path:inset(12% 9% 0 9%)}to{clip-path:inset(0)}}
@keyframes hr-mask{from{-webkit-mask-position:0 0%;mask-position:0 0%}to{-webkit-mask-position:0 100%;mask-position:0 100%}}
@keyframes hr-zoom{from{transform:scale(1.16)}to{transform:scale(1)}}
@keyframes hr-zoom0{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes hr-fyll{from{transform:scaleY(0)}to{transform:scaleY(1)}}


.hr-oscar{padding:20vh var(--kant) 14vh;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(32px,6vw,120px);align-items:end}
.hr-oscar blockquote p{font-size:clamp(26px,3.4vw,56px);line-height:1.18;font-weight:300;letter-spacing:-.015em;max-width:20em;text-wrap:balance}
.hr-oscar footer{margin-top:5vh;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hr-oscar footer img{width:clamp(180px,18vw,280px);height:auto;opacity:.9}
.hr-oscar cite{font-style:normal;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);border-top:1px solid rgba(52,49,48,.3);padding-top:8px;min-width:clamp(180px,18vw,280px)}
.hr-oscar-text{color:#5a5650;max-width:26em}


.hr-varden{padding:10vh var(--kant) 16vh;border-top:1px solid rgba(52,49,48,.14);margin:0 var(--kant);padding-left:0;padding-right:0}
.hr-varden>h2{font-size:clamp(15px,1.2vw,17px);letter-spacing:.08em;color:var(--sage);margin-bottom:6vh}
.hr-varden-rad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,8vh,96px) clamp(24px,4vw,72px)}
.hr-varden h3{font-size:clamp(24px,2.6vw,42px);margin-bottom:.6em}
.hr-varden p{color:#5a5650;max-width:22em}


.hr-slut{background:var(--golv);color:var(--linen);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch}
.hr-slut-text{padding:18vh var(--kant);display:grid;justify-items:start;align-content:center}
.hr-slut figure{margin:0;overflow:hidden;min-height:70vh;position:relative}
.hr-slut figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hr-slut h2{font-size:clamp(32px,5.4vw,92px);max-width:13em}
.hr-slut p{margin:4vh 0 6vh;max-width:36em;color:var(--limestone)}
.hr-knappar{display:flex;flex-wrap:wrap;gap:12px}
.hr-slut .knapp{background:var(--linen);color:var(--graphite)}
.hr-slut .knapp.ljus{background:transparent;color:var(--linen);box-shadow:inset 0 0 0 1px rgba(237,231,219,.4)}
.hr-slut+.fot{border-top:1px solid rgba(237,231,219,.08)}


@media (max-width:860px){
  .hr-inled{padding:calc(var(--hdr) + 9vh) var(--kant) 9vh}
  .hr-tid{grid-template-columns:1fr}
  .hr-scen{z-index:3;height:38vh;height:38svh;box-shadow:0 14px 28px -18px rgba(0,0,0,.6)}
  .hr-ar{font-size:clamp(64px,19vw,104px);bottom:14px}
  .hr-matare{display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(237,231,219,.16);z-index:3}
  .hr-matare>span{position:absolute;inset:0;background:var(--linen);transform-origin:left;transform:scaleX(var(--fyll,0));transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .hr-rail{display:none}
  .hr-era{min-height:72svh;padding:9vh var(--kant) 9vh}
  .hr-era:last-child{min-height:calc(62svh - var(--hdr))}
  .hr-oscar{grid-template-columns:1fr;padding:13vh var(--kant) 9vh}
  .hr-varden-rad{grid-template-columns:1fr;gap:5vh}
  .hr-slut{grid-template-columns:1fr}
  .hr-slut-text{padding:12vh var(--kant) 10vh}
  .hr-slut figure{min-height:48vh}
  .hr-knappar{width:100%}
  .hr-knappar .knapp{flex:1 1 100%;justify-content:center}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){.hr-matare>span{animation:hr-fyll-x linear both;animation-timeline:--hr-tid;animation-range:contain 0% contain 100%}}
}
@keyframes hr-fyll-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}


@media (prefers-reduced-motion:reduce){
  .hr-rad>span,.hr-ingress,.hr-scen,.hr-slut figure img{animation:none !important}
  .hr-bild,.hr-bild img{animation:none !important;transition:none !important;-webkit-mask-image:none;mask-image:none;transform:none !important}
  .hr-bild{opacity:0}
  .hr-bild.syns{opacity:1}
  .hr-siffra>span,.hr-era,.hr-era h2>span,.hr-rail a,.hr-matare>span,.hr-rail-linje>span{transition:none;animation:none !important}
  .hr-era h2>span{transform:none}
}

.hr-text{justify-self:end;max-width:36em;margin-top:6vh}
.hr-text .hr-ingress{margin-top:0;justify-self:auto}
.hr-under{margin:0 0 .6em;font-size:clamp(20px,2vw,28px);animation:hr-fram 1.2s .25s cubic-bezier(.16,1,.3,1) both}
.hr-ingress+.hr-ingress{margin-top:1.2em}
@media (prefers-reduced-motion:reduce){.hr-under{animation:none !important}}


@media (max-width:380px){.hr-era h2{font-size:7.2vw}}


.hr-slut-under{font-family:"Lateral";text-transform:uppercase;font-size:14px;letter-spacing:.08em;color:var(--limestone);margin:-.4em 0 1.6em}
@media (prefers-reduced-motion:reduce){.hr-rad{overflow:visible}}


.hr-inled{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6vh 6vw;align-items:end;max-width:none;padding-bottom:12vh}
.hr-inled-text{min-width:0}
.hr-emil{margin-top:5vh;max-width:30em;font-size:clamp(18px,1.4vw,21px);line-height:1.5;animation:hr-fram 1.2s .3s cubic-bezier(.16,1,.3,1) both}
.hr-punkter{list-style:none;padding:0;margin-top:3.4vh;max-width:30em;border-top:1px solid var(--linje);animation:hr-fram 1.2s .45s cubic-bezier(.16,1,.3,1) both}
.hr-punkter li{padding:12px 0;border-bottom:1px solid var(--linje);font-size:15px}
.hr-raknare{justify-self:end;text-align:right}
.hr-raknare .etikett{color:var(--sage)}
.hr-tal{font-family:"Lateral";font-size:clamp(88px,13vw,220px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:4ch}
.hr-arv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:4vh 6vw;padding:0 var(--kant) 14vh;align-items:start}
.hr-arv .hr-text{margin-top:0;justify-self:stretch}
.hr-arv .hr-under{font-size:clamp(24px,2.6vw,40px);animation:none}
.hr-arv .hr-ingress{animation:none;color:#5a5650}

.hr-tid{background:var(--gron)}
.hr-scen{order:2;background:#2f372a}
.hr-spar{order:1}
.hr-rail a{color:rgba(237,231,219,.76)}
.hr-arlitet.etikett{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;color:var(--limestone);margin-bottom:12px}
.hr-era p:not(.hr-arlitet){color:#e1dccf}

.hr-garanti{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(32px,6vw,120px);align-items:center;padding:14vh var(--kant);border-top:1px solid var(--linje);scroll-margin-top:var(--hdr)}
.hr-garanti-foto{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#d9d2c4}
.hr-garanti-foto>img:first-child{width:100%;height:100%;object-fit:cover}
.hr-sigill{position:absolute;left:50%;top:47%;width:min(36%,230px);height:auto;transform:translate(-50%,-50%) rotate(-10deg);filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));transition:transform .9s cubic-bezier(.34,1.56,.64,1),opacity .5s}
.hr-sigill.vantar{opacity:0;transform:translate(-50%,-50%) rotate(-44deg) scale(2.2)}
.hr-sigill.vantar.stamplad{opacity:.96;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}
.hr-garanti-text .etikett{color:var(--sage);margin-bottom:14px}
.hr-garanti-text h2{font-size:clamp(30px,3.6vw,58px);max-width:12em}
.hr-garanti-text p:not(.etikett){margin:1.2em 0 1.8em;max-width:28em;font-size:clamp(16px,1.15vw,18px)}

@media (max-width:860px){
  .hr-inled{grid-template-columns:1fr;padding-bottom:8vh}
  .hr-raknare{justify-self:start;text-align:left}
  .hr-arv{grid-template-columns:1fr;padding-bottom:9vh}
  .hr-scen{order:0}
  .hr-garanti{grid-template-columns:1fr;padding:10vh var(--kant)}
}

@media (max-width:480px){
  .hr-tal{font-size:min(88px,calc((100vw - 2 * var(--kant)) / 3.6))}
}
@media (prefers-reduced-motion:reduce){.hr-emil,.hr-punkter{animation:none !important}.hr-sigill{transition:none}}