/* Hamrevann-historien – felles for begge variantene. Tema settes med --h-* i variantens style.css. */
.hv {
  --h-display: inherit;
  --h-display-vekt: 700;
  --h-display-case: none;
  --h-mork: #0f3b2e;
  --h-mork-2: #163f31;
  --h-lys: #f4efe5;
  --h-papir: #fbf8f2;
  --h-blekk: #1b2620;
  --h-demp: #5b6660;
  --h-aksent: #c9a45c;
  --h-lime: #b9dc9e;
  --h-baer: #8e4a5e;
  --h-r: 16px;
  --h-topp: 0px;
  --h-gutter: clamp(16px, 5vw, 64px);
  position: relative;
}
.hv h2 { font-family: var(--h-display); font-weight: var(--h-display-vekt); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.04; margin: 0 0 .45em; letter-spacing: -.02em; text-wrap: balance; }
.hv h3 { font-family: var(--h-display); font-weight: var(--h-display-vekt); }
.hv figure { margin: 0; }
.hv img { display: block; max-width: 100%; }
.hv-seksjon { padding: clamp(64px, 11vw, 140px) var(--h-gutter); position: relative; }
.hv-over { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--h-baer); margin: 0 0 1rem; }
.hv-over.lys { color: var(--h-lime); }
.hv-ingress { font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: var(--h-demp); max-width: 58ch; }

/* ---------- Avsløring ved scroll ---------- */
.hv [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 110ms); }
.hv [data-reveal="zoom"] { transform: scale(.94); }
.hv [data-reveal].inn { opacity: 1; transform: none; }
.hv-js-av [data-reveal] { opacity: 1; transform: none; }

/* ---------- 1. Scene ---------- */
.hv-scene { height: calc(var(--lh, 1svh) * 170); position: relative; background: #0b1a14; --p: 0; }
.hv-scene-sticky { position: sticky; top: 0; height: calc(var(--lh, 1svh) * 100); overflow: hidden; }
.hv-scene-sticky > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }
.hv-scene-a { transform: scale(calc(1.05 + var(--p) * .25)); opacity: clamp(0, calc((.62 - var(--p)) * 6), 1); z-index: 2; }
.hv-scene-b { transform: scale(calc(1.2 - var(--p) * .2)); z-index: 1; }
.hv-scene-sticky::after { content: ""; position: absolute; inset: 0; z-index: 3; background: radial-gradient(ellipse at center, rgba(5,15,10,.15), rgba(5,15,10,.6)); }
.hv-scene-tekst { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; padding: 0 var(--h-gutter); color: #fff; }
.hv-scene-tekst p { grid-area: 1 / 1; margin: 0; font-family: var(--h-display); font-weight: var(--h-display-vekt); font-size: clamp(2rem, 6vw, 4.8rem); line-height: 1.08; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hv-scene-1 { opacity: clamp(0, calc((.42 - var(--p)) * 7), 1); transform: translateY(calc(var(--p) * -60px)); }
.hv-scene-2 { font-size: clamp(1.6rem, 4.4vw, 3.4rem) !important; opacity: clamp(0, calc((var(--p) - .58) * 7), 1); transform: translateY(calc((1 - var(--p)) * 40px)); }
.hv-scroll-hint { position: absolute; z-index: 5; bottom: 28px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; opacity: clamp(0, calc((.15 - var(--p)) * 8), 1); }
.hv-scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: hv-rull 1.6s infinite; }
@keyframes hv-rull { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 699px) { .hv-scene-tekst br { display: none; } .hv-scene-2 { font-size: 1.7rem !important; } }

/* ---------- 2. Nabolag + mosaikk ---------- */
.hv-nabolag { background: var(--h-papir); }
.hv-nabolag-tekst { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.hv-nabolag-tekst .hv-ingress { margin-inline: auto; }
.hv-blad { width: 34px; margin: 0 auto 18px; }
.hv-mosaikk { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; max-width: 1240px; margin: 0 auto; }
.hv-m { overflow: hidden; border-radius: var(--h-r); }
.hv-m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hv-m:hover img { transform: scale(1.05); }
.hv-m1 { grid-column: 1 / -1; aspect-ratio: 2.4; }
.hv-m2 { grid-row: span 2; aspect-ratio: auto; }
.hv-m3, .hv-m4 { aspect-ratio: 1.9; }
@media (min-width: 900px) {
  .hv-mosaikk { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; }
  .hv-m1 { grid-column: 1 / 3; }
  .hv-m2 { grid-column: 3; grid-row: 1 / 3; }
  .hv-m3 { grid-column: 1; } .hv-m4 { grid-column: 2; }
}

/* ---------- 3. Tall over bilde ---------- */
.hv-tall-seksjon { min-height: calc(var(--lh, 1svh) * 90); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; }
.hv-tall-bilde { position: absolute; inset: -12% 0; z-index: -2; }
.hv-tall-bilde img { width: 100%; height: 100%; object-fit: cover; }
.hv-tall-seksjon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,20,14,.15) 0%, rgba(8,20,14,.35) 45%, rgba(8,20,14,.88) 100%); }
.hv-tall-innhold { width: 100%; max-width: 1240px; margin: 0 auto; }
.hv-tall-innhold h2 { color: #fff; max-width: 14ch; }
.hv-tall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 28px; background: rgba(255,255,255,.2); border-radius: var(--h-r); overflow: hidden; backdrop-filter: blur(6px); }
.hv-tall > div { background: rgba(10,25,18,.55); padding: 22px 20px; display: grid; gap: 4px; }
.hv-tall strong { font-family: var(--h-display); font-weight: var(--h-display-vekt); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; color: var(--h-lime); font-variant-numeric: tabular-nums; }
.hv-tall > div > span { color: rgba(255,255,255,.82); font-size: .95rem; }
.hv-tall strong span { font: inherit; color: inherit; }
@media (min-width: 900px) { .hv-tall { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 4. Vannliljen ---------- */
.hv-vannlilje { display: grid; gap: 40px; align-items: center; background: var(--h-lys); }
.hv-vannlilje-bilde { border-radius: var(--h-r); overflow: hidden; aspect-ratio: 4/5; max-height: calc(var(--lh, 1svh) * 80); }
.hv-vannlilje-bilde img { width: 100%; height: 100%; object-fit: cover; }
.hv-merke { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; color: var(--h-mork); }
.hv-merke::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2fa865; box-shadow: 0 0 0 5px rgba(47,168,101,.2); }
@media (min-width: 900px) { .hv-vannlilje { grid-template-columns: 1fr 1fr; gap: 80px; padding-inline: max(var(--h-gutter), calc((100vw - 1240px) / 2)); } .hv-vannlilje-tekst h2 { font-size: clamp(3rem, 6vw, 5.4rem); } }

/* ---------- 5. Naturparkkart ---------- */
.hv-kart-seksjon { background: var(--h-mork); color: #fff; padding-block: clamp(56px, 7vw, 88px); }
.hv-kart-seksjon .hv-over { color: var(--h-lime); }
.hv-kart-seksjon .hv-ingress { color: rgba(255,255,255,.78); font-size: 1.05rem; }
.hv-kart-seksjon h2 { margin-bottom: .3em; }
.hv-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 20px; }
.hv-filter button { font: inherit; font-weight: 700; font-size: .85rem; min-height: 38px; padding: .45em .9em; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.25); background: transparent; color: #fff; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.hv-filter button:hover { border-color: rgba(255,255,255,.6); }
.hv-filter button[aria-pressed="true"] { background: var(--h-lime); border-color: var(--h-lime); color: var(--h-mork); }
.hv-kart-grid { display: grid; gap: 28px; max-width: 1240px; margin: 0 auto; align-items: center; }
/* Kartet skal alltid få plass i skjermhøyden (bildet er 2204x2890) */
.hv-kart { position: relative; border-radius: var(--h-r); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); width: min(100%, calc((calc(var(--lh, 1svh) * 100) - var(--h-topp) - 48px) * .7626)); justify-self: center; }
.hv-kart > img { width: 100%; }
.hv-pin { position: absolute; transform: translate(-50%, -50%); width: max(22px, 3.4%); aspect-ratio: 1; border-radius: 50%; border: 2px solid #fff; background: var(--h-baer); color: #fff; font: 800 clamp(.58rem, 1vw, .8rem)/1 system-ui, sans-serif; cursor: pointer; padding: 0; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.35); transition: transform .25s, opacity .3s, background .2s; }
.hv-pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--h-lime); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.hv-pin:hover, .hv-pin.aktiv { transform: translate(-50%, -50%) scale(1.3); z-index: 3; background: var(--h-mork); }
.hv-pin.aktiv::after { opacity: 1; transform: scale(1); animation: hv-ring 1.8s infinite; }
.hv-pin.stjerne { background: var(--h-aksent); color: var(--h-mork); }
.hv-pin.dempet { opacity: .18; transform: translate(-50%, -50%) scale(.8); pointer-events: none; }
@keyframes hv-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.hv-tunmarkor { position: absolute; transform: translate(-50%, -50%); width: 18%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.hv-tunmarkor::before, .hv-tunmarkor::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255,255,255,.9); animation: hv-snurr 24s linear infinite; }
.hv-tunmarkor::after { border: 0; background: radial-gradient(circle, rgba(201,164,92,.35), rgba(201,164,92,0) 70%); animation: hv-pust 3s ease-in-out infinite; }
.hv-tunmarkor span { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); white-space: nowrap; background: var(--h-aksent); color: var(--h-mork); font: 800 .78rem/1 system-ui, sans-serif; padding: .5em .8em; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
@keyframes hv-snurr { to { transform: rotate(360deg); } }
@keyframes hv-pust { 50% { transform: scale(1.15); opacity: .6; } }
.hv-tunpin { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: max(18px, 2.8%); aspect-ratio: 1; border-radius: 6px; background: #fff; color: var(--h-mork); font: 800 clamp(.52rem, .9vw, .72rem)/1 system-ui, sans-serif; display: grid; place-items: center; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.3); transition: transform .2s; }
a.hv-tunpin:hover { transform: translate(-50%, -50%) scale(1.3); background: var(--h-aksent); }
.hv-kort { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 5; background: rgba(255,255,255,.97); color: var(--h-blekk); border-radius: 14px; padding: 14px 44px 14px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.35); animation: hv-opp .35s cubic-bezier(.2,.7,.2,1); }
.hv-kort strong { display: block; font-size: 1.02rem; }
.hv-kort p { margin: 4px 0 0; color: var(--h-demp); font-size: .9rem; line-height: 1.4; }
.hv-kort button { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #eee; cursor: pointer; font-size: 1.1rem; }
@keyframes hv-opp { from { transform: translateY(12px); opacity: 0; } }
@media (min-width: 700px) { .hv-kort { right: auto; max-width: 320px; } }
.hv-aktliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.hv-aktliste li { transition: opacity .3s; min-width: 0; }
.hv-aktliste li.dempet { opacity: .28; }
.hv-aktliste button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 10px; border: 0; background: transparent; color: #fff; font: inherit; cursor: pointer; transition: background .2s; min-height: 40px; }
.hv-aktliste button:hover, .hv-aktliste button.aktiv { background: rgba(255,255,255,.13); }
.hv-aktliste strong { font-size: .92rem; font-weight: 700; line-height: 1.2; }
.hv-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--h-baer); display: grid; place-items: center; font-weight: 800; font-size: .75rem; }
.hv-fotnote { margin: 18px 0 0; font-size: .78rem; color: rgba(255,255,255,.5); }
@media (min-width: 1000px) {
  .hv-kart-grid { grid-template-columns: auto minmax(340px, 1fr); gap: 56px; }
  .hv-kart-seksjon { padding-block: 32px; min-height: calc(calc(var(--lh, 1svh) * 100) - var(--h-topp)); display: grid; align-items: center; }
  .hv-kart { width: min(100%, calc((calc(var(--lh, 1svh) * 100) - var(--h-topp) - 64px) * .7626)); }
}

/* ---------- 6. Flyfoto-fortelling ---------- */
.hv-fly { position: relative; background: #0b1a14; color: #fff; }
.hv-fly-scene { position: sticky; top: var(--h-topp); height: calc(calc(var(--lh, 1svh) * 100) - var(--h-topp)); overflow: hidden; z-index: 1; align-self: start; background: #0b1a14; }
.hv-fly-flate { position: absolute; left: 0; top: 0; aspect-ratio: 626 / 872; width: max(100%, calc((calc(var(--lh, 1svh) * 100) - var(--h-topp)) * .718)); transform-origin: 0 0; transition: transform 1.3s cubic-bezier(.65,0,.25,1); will-change: transform; }
.hv-fly-flate > img { width: 100%; height: 100%; object-fit: cover; }
.hv-fly-flate::after { content: ""; position: absolute; inset: 0; background: rgba(5,15,10,.18); pointer-events: none; }
.hv-fly-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.hv-fly-svg .strek, .hv-fly-svg .pil { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.65,0,.25,1) .2s; }
.hv-fly-svg .rute { fill: #fff; opacity: 0; transition: opacity .4s 1.1s; }
.hv-fly-svg .kjerne { fill: var(--h-aksent); stroke: #fff; stroke-width: 2.5; }
.hv-fly-svg .puls { fill: rgba(201,164,92,.35); transform-origin: 203px 506px; transform-box: view-box; animation: hv-fly-puls 2.2s infinite; }
@keyframes hv-fly-puls { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.hv-fly-etikett { position: absolute; z-index: 3; transform: translate(-50%, -50%); white-space: nowrap; background: rgba(255,255,255,.96); color: var(--h-mork); font: 800 clamp(.68rem, 1.1vw, .9rem)/1 system-ui, sans-serif; padding: .5em .75em; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.35); opacity: 0; transition: opacity .5s; pointer-events: none; }
.hv-fly-etikett.hoyre { transform: translate(-100%, -50%); }
.hv-fly-etikett.venstre { transform: translate(0, -50%); }
.hv-fly-etikett[data-grp="hjem"] { background: var(--h-aksent); }
/* synlig når steget er nådd (grupper hoper seg opp) */
.hv-fly[data-niva] .fs { opacity: 1; }
.hv-fly .fs-hjem { opacity: 0; transition: opacity .5s; }
.hv-fly[data-niva] .fs-hjem { opacity: 1; }
.hv-fly[data-niva="1"] .fs-park .strek, .hv-fly[data-niva="2"] .fs-park .strek, .hv-fly[data-niva="3"] .fs-park .strek, .hv-fly[data-niva="4"] .fs-park .strek,
.hv-fly[data-niva="2"] .fs-dyrepark :is(.strek, .pil), .hv-fly[data-niva="3"] .fs-dyrepark :is(.strek, .pil), .hv-fly[data-niva="4"] .fs-dyrepark :is(.strek, .pil),
.hv-fly[data-niva="3"] .fs-sorlandsparken .strek, .hv-fly[data-niva="4"] .fs-sorlandsparken .strek,
.hv-fly[data-niva="4"] .fs-skole .strek { stroke-dashoffset: 0; }
.hv-fly[data-niva="1"] .fs-park .rute, .hv-fly[data-niva="2"] .fs-park .rute, .hv-fly[data-niva="3"] .fs-park .rute, .hv-fly[data-niva="4"] .fs-park .rute,
.hv-fly[data-niva="3"] .fs-sorlandsparken .rute, .hv-fly[data-niva="4"] .fs-sorlandsparken .rute,
.hv-fly[data-niva="4"] .fs-skole .rute { opacity: 1; }
.hv-fly[data-niva] .hv-fly-etikett[data-grp="hjem"],
.hv-fly:is([data-niva="1"],[data-niva="2"],[data-niva="3"],[data-niva="4"]) .hv-fly-etikett[data-grp="park"],
.hv-fly:is([data-niva="2"],[data-niva="3"],[data-niva="4"]) .hv-fly-etikett[data-grp="dyrepark"],
.hv-fly:is([data-niva="3"],[data-niva="4"]) .hv-fly-etikett[data-grp="sorlandsparken"],
.hv-fly[data-niva="4"] .hv-fly-etikett[data-grp="skole"] { opacity: 1; transition-delay: .9s; }
.hv-fly-steg { position: relative; z-index: 2; margin-top: calc(calc(var(--lh, 1svh) * -100) + var(--h-topp)); padding: 0 var(--h-gutter) calc(var(--lh, 1svh) * 10); pointer-events: none; }
.hv-steg { min-height: calc(var(--lh, 1svh) * 85); display: flex; flex-direction: column; justify-content: flex-end; max-width: 460px; margin: 0 auto; opacity: 0; transition: opacity .5s; }
.hv-steg.aktiv { opacity: 1; }
.hv-steg-kort { position: sticky; bottom: calc(88px + env(safe-area-inset-bottom)); margin-bottom: calc(88px + env(safe-area-inset-bottom)); background: rgba(8,22,16,.92); border-radius: 16px; pointer-events: auto; backdrop-filter: blur(6px); }
.hv-steg-kort > * { margin: 0; }
.hv-steg-nr { padding: 18px 22px 0; font-size: .75rem; letter-spacing: .14em; color: var(--h-lime); font-weight: 700; }
.hv-steg h3 { padding: 6px 22px 0; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; }
.hv-steg-kort p:last-child { padding: 10px 22px 22px; color: rgba(255,255,255,.8); }
@media (min-width: 1000px) {
  .hv-fly { display: grid; grid-template-columns: 1.2fr 1fr; }
  .hv-fly-scene { grid-column: 1; grid-row: 1; }
  .hv-fly-steg { grid-column: 2; grid-row: 1; margin: 0; padding: calc(var(--lh, 1svh) * 22) 56px calc(var(--lh, 1svh) * 28); pointer-events: auto; }
  .hv-steg { min-height: calc(var(--lh, 1svh) * 70); margin: 0; justify-content: center; opacity: .25; }
  .hv-steg.aktiv { opacity: 1; }
  .hv-steg-kort { position: static; margin: 0; background: transparent; backdrop-filter: none; }
  .hv-steg-kort > * { padding-inline: 0 !important; }
  .hv-steg h3 { font-size: clamp(2rem, 3.2vw, 3rem); }
}

/* ---------- 6b. I dag ---------- */
.hv-idag { height: calc(var(--lh, 1svh) * 170); position: relative; background: #0b1a14; --p: 0; }
.hv-idag-sticky { position: sticky; top: var(--h-topp); height: calc(calc(var(--lh, 1svh) * 100) - var(--h-topp)); overflow: hidden; }
.hv-idag-bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 53% 55%; transform-origin: 53% 58%; transform: scale(calc(1 + var(--p) * .4)); will-change: transform; }
.hv-idag-sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,15,10,.5) 0%, rgba(5,15,10,0) 30%, rgba(5,15,10,0) 55%, rgba(5,15,10,.8) 100%); pointer-events: none; }
.hv-idag-tekst { position: absolute; z-index: 2; left: var(--h-gutter); right: var(--h-gutter); bottom: calc(40px + env(safe-area-inset-bottom)); max-width: 560px; color: #fff; background: rgba(8,22,16,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 18px; padding: 24px 26px 8px; box-shadow: 0 20px 50px rgba(0,0,0,.35); opacity: clamp(0, calc((var(--p) - .25) * 5), 1); transform: translateY(calc((1 - min(1, var(--p) * 2)) * 30px)); }
.hv-idag-tekst h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.hv-idag-tekst p:last-child { color: rgba(255,255,255,.85); font-size: 1.1rem; }
@media (max-width: 999px) { .hv-idag-tekst { bottom: calc(100px + env(safe-area-inset-bottom)); } }

/* ---------- 7. Ikoner over flyfoto ---------- */
.hv-ikoner { color: #fff; overflow: hidden; isolation: isolate; }
.hv-ikoner-bilde { position: absolute; inset: -15% 0; z-index: -2; }
.hv-ikoner-bilde img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hv-ikoner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,26,18,.35), rgba(8,26,18,.85)); }
.hv-ikoner-innhold { max-width: 1240px; margin: 0 auto; display: grid; justify-items: end; }
.hv-ikoner-innhold h2 { color: #fff; }
.hv-ikoner ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; width: min(100%, 520px); }
.hv-ikoner li { display: grid; grid-template-columns: 52px auto; column-gap: 16px; align-items: center; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); }
.hv-ikoner li svg { grid-row: span 2; width: 40px; height: 40px; fill: none; stroke: var(--h-lime); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hv-ikoner li strong { font-family: var(--h-display); font-weight: var(--h-display-vekt); font-size: 1.5rem; line-height: 1.1; }
.hv-ikoner li span { color: rgba(255,255,255,.78); font-size: .92rem; }
.hv-ikoner [data-reveal] { transform: translateX(40px); }
.hv-ikoner [data-reveal].inn { transform: none; }
@media (max-width: 899px) { .hv-ikoner-innhold { justify-items: start; } }

/* ---------- 8. Årstider ---------- */
.hv-aar { display: grid; gap: 32px; align-items: center; background: var(--h-papir); }
.hv-aar-bilder { position: relative; aspect-ratio: 4/3.4; border-radius: var(--h-r); overflow: hidden; background: #ddd; }
.hv-aar-bilde { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity 1s, transform 6s linear; }
.hv-aar-bilde.aktiv { opacity: 1; transform: scale(1); }
.hv-aar-bilde img { width: 100%; height: 100%; object-fit: cover; }
.hv-aar-faner { display: flex; gap: 6px; margin: 8px 0 22px; }
.hv-aar-faner button { position: relative; overflow: hidden; flex: 1; font: inherit; font-weight: 700; padding: 12px 8px 14px; border: 0; border-radius: 10px; background: rgba(15,59,46,.07); color: var(--h-blekk); cursor: pointer; }
.hv-aar-faner button[aria-selected="true"] { background: var(--h-mork); color: #fff; }
.hv-aar-fylt { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--h-lime); }
.hv-aar-faner button[aria-selected="true"] .hv-aar-fylt { animation: hv-fyll var(--h-aar-tid, 6s) linear forwards; }
.hv-aar.pause .hv-aar-fylt { animation-play-state: paused; }
@keyframes hv-fyll { to { width: 100%; } }
.hv-aar-tekst { display: grid; }
.hv-aar-avsnitt { grid-area: auto; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.55; color: var(--h-demp); margin: 0; display: none; animation: hv-opp .6s; }
.hv-aar-avsnitt.aktiv { display: block; }
@media (min-width: 900px) { .hv-aar { grid-template-columns: 1.2fr 1fr; gap: 72px; padding-inline: max(var(--h-gutter), calc((100vw - 1240px) / 2)); } }

/* ---------- 9. Stemmer ---------- */
.hv-stemmer { background: var(--h-lys); }
.hv-stemmer-topp { max-width: 1240px; margin: 0 auto 40px; display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .hv-stemmer-topp { grid-template-columns: 1fr 1fr; gap: 64px; } .hv-stemmer-topp h2 { margin-bottom: 0; } }
.hv-stemmer-topp h2 { max-width: 18ch; }
.hv-stemmer-grid { display: grid; gap: 18px; max-width: 1240px; margin: 0 auto; }
.hv-stemme { position: relative; border-radius: 22px; overflow: hidden; background: var(--h-papir); box-shadow: 0 24px 60px -34px rgba(15,40,30,.45); }
.hv-stemme-stor { display: grid; }
.hv-stemme-bilde { aspect-ratio: 4/3; overflow: hidden; }
.hv-stemme-bilde img, .hv-stemme-foto > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.hv-stemme:hover img { transform: scale(1.04); }
.hv-stemme-tekst { position: relative; padding: 30px 28px 28px; }
.hv-anfor { width: 42px; height: 32px; fill: var(--h-aksent); margin-bottom: 14px; }
.hv-stemme blockquote { margin: 0 0 22px; font-family: var(--h-display); font-weight: var(--h-display-vekt); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.35; color: var(--h-blekk); letter-spacing: -.01em; }
.hv-stemme figcaption { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid rgba(15,59,46,.12); }
.hv-stemme figcaption strong { color: var(--h-mork); }
.hv-stemme figcaption span { color: var(--h-demp); font-size: .9rem; }
.hv-stemme-foto { min-height: 460px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.hv-stemme-foto > img { position: absolute; inset: 0; z-index: -2; }
.hv-stemme-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,20,14,0) 25%, rgba(6,20,14,.88) 78%); }
.hv-stemme-foto blockquote { color: #fff; }
.hv-stemme-foto figcaption { border-color: rgba(255,255,255,.25); }
.hv-stemme-foto figcaption strong { color: #fff; }
.hv-anerkjent { margin: 0; padding: 22px 0 0; border-top: 2px solid var(--h-aksent); max-width: 560px; }
.hv-anerkjent blockquote { margin: 0 0 14px; font-family: var(--h-display); font-weight: var(--h-display-vekt); font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.4; color: var(--h-blekk); font-style: italic; }
.hv-anerkjent blockquote::before { content: "«"; } .hv-anerkjent blockquote::after { content: "»"; }
.hv-anerkjent figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hv-anerkjent-navn { font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--h-baer); }
.hv-anerkjent figcaption span:last-child { color: var(--h-demp); font-size: .84rem; }
.hv-ord { display: inline-block; opacity: .15; transition: opacity .5s; transition-delay: calc(var(--o) * 45ms); }
.inn .hv-ord { opacity: 1; }
@media (min-width: 900px) {
  .hv-stemmer-grid { grid-template-columns: 1.45fr 1fr; }
  .hv-stemme-stor { grid-template-columns: .85fr 1fr; }
  .hv-stemme-bilde { aspect-ratio: auto; }
  .hv-stemme-tekst { padding: 40px 36px 34px; }
}

/* ---------- 10. Premiss ---------- */
.hv-premiss { display: grid; gap: 40px; align-items: center; background: var(--h-papir); }
.hv-premiss-bilde { border-radius: var(--h-r); overflow: hidden; aspect-ratio: 5/6; }
.hv-premiss-bilde img { width: 100%; height: 100%; object-fit: cover; }
.hv-premiss p:not(.hv-over) { color: var(--h-demp); font-size: 1.08rem; max-width: 56ch; }
@media (min-width: 900px) { .hv-premiss { grid-template-columns: 1fr 1.1fr; gap: 80px; padding-inline: max(var(--h-gutter), calc((100vw - 1240px) / 2)); } }

/* ---------- 11. Slutt ---------- */
.hv-slutt { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: clamp(80px, 12vw, 150px) var(--h-gutter); }
.hv-slutt-bilde { position: absolute; inset: -12% 0; z-index: -2; }
.hv-slutt-bilde img { width: 100%; height: 100%; object-fit: cover; }
.hv-slutt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8,26,18,.94) 0%, rgba(8,26,18,.82) 45%, rgba(8,26,18,.45) 100%); }
.hv-slutt-inn { max-width: 1240px; margin: 0 auto; display: grid; gap: 44px; align-items: center; }
.hv-linjer { margin: 0 0 34px; display: grid; gap: .1em; font-family: var(--h-display); font-weight: var(--h-display-vekt); font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.06; letter-spacing: -.02em; }
.hv-linjer span { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 260ms); }
.hv-linjer.inn span { opacity: 1; transform: none; }
.hv-linjer .uth { color: var(--h-lime); }
.hv-slutt-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hv-knapp { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 1em 1.8em; border-radius: 999px; background: var(--h-aksent); color: var(--h-mork); font-weight: 800; text-decoration: none; font-size: 1.02rem; transition: transform .2s, box-shadow .2s; }
.hv-knapp:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,.55); }
.hv-knapp-omriss { display: inline-flex; align-items: center; min-height: 58px; padding: 1em 1.5em; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); transition: background .2s; }
.hv-knapp-omriss:hover { background: rgba(255,255,255,.1); }
.hv-kjop { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hv-kjop li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hv-kjop svg, .hv-trygt-grid svg { width: 36px; height: 36px; fill: none; stroke: var(--h-lime); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hv-kjop strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.hv-kjop span { color: rgba(255,255,255,.75); font-size: .92rem; line-height: 1.45; }
@media (min-width: 1000px) { .hv-slutt-inn { grid-template-columns: 1.15fr 1fr; gap: 72px; } }

/* ---------- Tun 2: trygt kjøp + parkering ---------- */
.hv-tun2 .hv-trygt { background: var(--h-mork); color: #fff; }
.hv-trygt-topp { max-width: 1240px; margin: 0 auto 36px; }
.hv-trygt .hv-over { color: var(--h-lime); }
.hv-trygt h2 { color: #fff; }
.hv-trygt .hv-ingress { color: rgba(255,255,255,.75); }
.hv-trygt-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.hv-trygt-grid li { display: grid; gap: 6px; align-content: start; padding: 24px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.hv-trygt-grid svg { margin-bottom: 8px; }
.hv-trygt-grid strong { font-family: var(--h-display); font-weight: var(--h-display-vekt); font-size: 1.35rem; line-height: 1.15; }
.hv-trygt-grid span { color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.5; }
.hv-parkering { display: grid; gap: 36px; align-items: center; background: var(--h-papir); }
.hv-parkering-bilde { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px -34px rgba(15,40,30,.45); }
.hv-parkering-bilde img { width: 100%; }
.hv-punkter { list-style: none; padding: 0; margin: 0; }
.hv-punkter li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid rgba(15,59,46,.12); color: var(--h-blekk); }
.hv-punkter li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--h-aksent); }
@media (min-width: 900px) { .hv-parkering { grid-template-columns: 1.25fr 1fr; gap: 64px; padding-inline: max(var(--h-gutter), calc((100vw - 1240px) / 2)); } }

/* Bilde i aktivitetskortet */
.hv-kort-bilde { display: block; width: calc(100% + 60px); margin: -14px -44px 12px -16px; aspect-ratio: 16/9; object-fit: cover; border-radius: 14px 14px 0 0; }

/* ---------- Redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce) {
  .hv [data-reveal], .hv-linjer span, .hv-ord { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hv-scene { height: auto; }
  .hv-scene-sticky { position: relative; height: calc(var(--lh, 1svh) * 80); }
  .hv-scene-a { opacity: 0 !important; }
  .hv-scene-1, .hv-scroll-hint { display: none; }
  .hv-idag { height: auto; } .hv-idag-sticky { position: relative; height: calc(var(--lh, 1svh) * 80); } .hv-idag-bilde { transform: none; } .hv-idag-tekst { opacity: 1; transform: none; }
  .hv-scene-2 { opacity: 1 !important; transform: none !important; }
  .hv-fly-flate { transition: none; }
  .hv-pin.aktiv::after, .hv-tunmarkor::before, .hv-tunmarkor::after, .hv-fly-svg .puls { animation: none; }
}

@media (min-width: 900px) { .hv-trygt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px) { .hv-kort-bilde { aspect-ratio: 21/8; } .hv-kort { padding-top: 10px; } .hv-kort p { font-size: .84rem; } }

/* «Bli ringt opp av Olav» med ansiktet hans */
.hv-knapp-omriss.med-foto { gap: 10px; padding-left: .55em; }
.hv-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }

/* ---- Kartet og kortet (2026-11-06): kortet dekker aldri punktene ---- */
/* Rammen tar plassen i rutenettet; kartboksen er alltid nøyaktig like stor som bildet (punktene står i prosent av det) */
.hv-kart-ramme { position: relative; justify-self: center; width: min(100%, calc((calc(var(--lh, 1svh) * 100) - var(--h-topp) - 48px) * .7626)); }
.hv-kart-ramme > .hv-kart { width: 100%; }
.hv-kart > img { aspect-ratio: 1600 / 2098; height: auto; }
/* Kortet er lite, med miniatyr. Mobil: under kartet. Nettbrett og PC: nede til høyre (ved Ravnåstjørna), der kartet ikke har punkter. */
.hv-kart-ramme > .hv-kort { position: relative; left: auto; right: auto; top: auto; margin-top: 12px; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; align-items: center; padding: 10px 44px 10px 10px; }
.hv-kart-ramme > .hv-kort:not(:has(.hv-kort-bilde)) { grid-template-columns: 1fr; padding-left: 16px; min-height: 64px; align-content: center; }
.hv-kart-ramme .hv-kort-bilde { grid-row: 1 / span 2; width: 64px; height: 64px; max-width: none; aspect-ratio: 1; margin: 0; border-radius: 10px; }
.hv-kart-ramme > .hv-kort p { font-size: .86rem; }
@media (min-width: 700px) { .hv-kart-ramme > .hv-kort { position: absolute; left: auto; right: 10px; top: auto; bottom: 10px; margin: 0; max-width: 340px; } }
@media (min-width: 1000px) { .hv-kart-ramme { width: min(100%, calc((calc(var(--lh, 1svh) * 100) - var(--h-topp) - 64px) * .7626)); } }
/* Ringen rundt valgt punkt tar ikke imot trykk (punkt 2 og 3 ligger ca. 19 px fra hverandre på mobil) */
.hv-pin::after { pointer-events: none; }