/* fjordanevps.no v2 — components. Mobile-first (390 → 768 → 1200). No framework. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--ull);color:var(--tekst);font-family:var(--f-text);font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.15em}
a:hover{color:var(--kobber)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--glod);outline-offset:3px;border-radius:2px}
::selection{background:var(--glod);color:var(--skifer)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s2);top:-100px;z-index:100;background:var(--glod);color:var(--skifer);padding:10px 14px;font-weight:600;border-radius:var(--r-s)}
.skip:focus{top:var(--s2)}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important} /* the attribute must beat display classes (.notice, .field, .count …) */
.ph{display:grid;place-items:center;background:var(--sand);color:var(--tekst-dempet);font-size:var(--small);border:1px dashed var(--line-light);text-align:center;padding:var(--s2)}
.ph::before{content:"Bilete kjem"}  /* D91: nynorsk (D20) — stod på bokmål frå prototypen */
.ph[data-label]::before{content:attr(data-label)}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;gap:var(--s3)}
.grid>*{min-width:0} /* scrollable tables inside grid columns must not blow the column */
@media (min-width:768px){.grid{grid-template-columns:repeat(12,1fr);gap:var(--s3)}
  .c5{grid-column:span 5}.c7{grid-column:span 7}.c4{grid-column:span 4}.c8{grid-column:span 8}.c6{grid-column:span 6}.c12{grid-column:span 12}.c3{grid-column:span 3}
  .push1{grid-column-start:2}.push2{grid-column-start:3}}
.section{padding-block:var(--s5)}
.section--tight{padding-block:var(--s4)}
@media (min-width:768px){.section{padding-block:var(--s6)}}
@media (min-width:1200px){.section{padding-block:var(--s7)}}
.section__head{margin-bottom:var(--s4)}
.section__head>p{max-width:60ch;color:var(--tekst-dempet);margin:.75em 0 0}
@media (min-width:768px){.section__head{display:grid;grid-template-columns:5fr 7fr;gap:var(--s3);align-items:end}.section__head>p{margin-top:0;justify-self:end}}

/* ---------- ink (dark) ground + grain ---------- */
.ink{position:relative;background:var(--skifer);color:var(--is);isolation:isolate}
.ink--kull{background:var(--kull)}
.ink::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.035;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ink>*{position:relative;z-index:1}
.ink h1,.ink h2,.ink h3{color:#fff}
.ink a:hover{color:#fff}
.ink .muted{color:rgba(217,228,236,.72)}
.sand{background:var(--sand)}

/* ---------- louvre lines (logo bars → pattern) ---------- */
.louvre{background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px);opacity:.28}
.divider-louvre{height:14px;color:var(--kull);background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px);opacity:.25}
.ink .divider-louvre{color:var(--is)}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.05;margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--d2);letter-spacing:-.02em;line-height:1}
h2{font-size:var(--h2);line-height:1.1}
h3{font-size:var(--h3);line-height:1.2}
.d1{font-family:var(--f-display);font-size:var(--d1);line-height:.95;letter-spacing:-.02em;font-weight:600}
.d2{font-family:var(--f-display);font-size:var(--d2);line-height:1;letter-spacing:-.02em;font-weight:600}
p{margin:0 0 1em}
.lead{font-size:1.125rem;line-height:1.55}
@media (min-width:768px){.lead{font-size:1.25rem}}
.small{font-size:var(--small)}
.muted{color:var(--tekst-dempet)}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--eyebrow);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--kobber-tekst);margin:0 0 var(--s2)}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--glod);flex:none}
.ink .eyebrow{color:#FF8A5B}
/* the warm line: draws itself when .in */
.hl{position:relative;display:block;height:2px;width:min(120px,30%);background:var(--glod);margin:var(--s2) 0 var(--s3);transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease)}
.hl.in{transform:scaleX(1)}
.price-em{color:var(--kobber-tekst);font-weight:600}
.ink .price-em{color:#FFC29B}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r-s);border:1.5px solid transparent;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform var(--t-fast) var(--ease),background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--glod);color:var(--skifer)}
.btn--primary:hover{background:#FF8A5B;color:var(--skifer)}
.btn--dark{background:var(--kull);color:var(--ull)}
.btn--dark:hover{background:var(--skifer);color:#fff}
.btn--ghost{background:transparent;border-color:var(--kull);color:var(--tekst)}
.btn--ghost:hover{border-color:var(--kobber);color:var(--kobber)}
.ink .btn--ghost{border-color:var(--line-dark-strong);color:#fff}
.ink .btn--ghost:hover{border-color:#fff;color:#fff}
.btn--sm{min-height:40px;padding:8px 14px;font-size:var(--small)}
.btn--lg{min-height:56px;padding:14px 28px;font-size:1.0625rem}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.link-quiet{font-weight:500;color:var(--tekst-dempet);text-decoration:underline;text-decoration-color:var(--line-light)}
.ink .link-quiet{color:rgba(217,228,236,.8);text-decoration-color:var(--line-dark-strong)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.actions .btn{flex:1 1 auto}
@media (min-width:768px){.actions .btn{flex:0 0 auto}}

/* ---------- top bar ---------- */
.topbar{background:var(--kull);color:var(--is);font-size:.8125rem}
.topbar .container{display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:var(--s2)}
.topbar a{text-decoration:none;font-weight:500;color:#fff}
.topbar__hours{display:none;color:rgba(217,228,236,.8)}
.topbar__right{display:flex;gap:var(--s3)}
@media (min-width:768px){.topbar__hours{display:block}}

/* ---------- header ---------- */
.site-header{max-width:none;padding:0;margin:0;position:sticky;top:0;z-index:50;background:rgba(246,243,238,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-light)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);height:var(--header-h)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tekst)}
.logo:hover{color:var(--tekst)}
.logo svg{height:36px;width:auto;display:block}
.logo{color:#231F20}.logo:hover{color:#231F20} /* D98: logoen sin eigen mørke farge */
.logo__word{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;line-height:1;text-transform:uppercase;font-size:1.05rem}
.logo__word small{display:block;font-family:var(--f-text);font-weight:600;font-size:.5rem;letter-spacing:.14em;margin-top:3px;color:var(--tekst-dempet)}
.ink .logo{color:#fff}.ink .logo__word small{color:rgba(217,228,236,.7)}
.nav{display:none}
.nav ul{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-weight:500;font-size:.9375rem;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--glod);color:var(--tekst)}
.header__tools{display:flex;align-items:center;gap:6px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-s);border:0;background:transparent;text-decoration:none;color:var(--tekst);position:relative;cursor:pointer}
.icon-btn:hover{background:var(--sand);color:var(--tekst)}
.icon-btn svg{width:22px;height:22px}
.icon-btn .count{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--glod);color:var(--skifer);font-size:.6875rem;font-weight:700;display:grid;place-items:center}
.header__cta{display:none}
@media (min-width:1024px){.nav{display:block}.header__cta{display:inline-flex}.burger{display:none}}
.mnav{display:none;position:fixed;inset:var(--header-h) 0 0 0;z-index:49;background:var(--ull);overflow:auto;padding:var(--s3) var(--gutter) var(--s6)}
.mnav.open{display:block}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav li a{display:block;padding:14px 0;border-bottom:1px solid var(--line-light);text-decoration:none;font-family:var(--f-display);font-size:1.5rem;font-weight:600}
.mnav li a[aria-current="page"]{color:var(--kobber)}
.mnav__sub{display:flex;flex-wrap:wrap;gap:8px 16px;padding:8px 0 14px;font-size:var(--small)}
.mnav__sub a{text-decoration:none;color:var(--tekst-dempet)}
.mnav .btn{margin-top:var(--s3)}
body.nav-open{overflow:hidden}
/* WP-menyar i mobilmenyen: wp_nav_menu gjev <ul><li>; snarvegane skal vere inline-chips som i prototypen */
.mnav__sub ul{display:contents;list-style:none;margin:0;padding:0}
.mnav__sub li a{display:inline;padding:0;border:0;font-family:var(--f-text);font-size:var(--small);font-weight:500;color:var(--tekst-dempet)}


/* ---------- sticky mobile bar ---------- */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:48;display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:1px;background:var(--line-light);border-top:1px solid var(--line-light);transform:translateY(110%);transition:transform 320ms var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.sticky-bar.show{transform:none}
.sticky-bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;background:var(--ull);text-decoration:none;font-weight:600;font-size:.9375rem}
.sticky-bar a svg{width:20px;height:20px}
.sticky-bar .sb-main{background:var(--glod);color:var(--skifer)}
@media (min-width:1024px){.sticky-bar{display:none}}
body{padding-bottom:0}
@media (max-width:1023px){body.has-sticky{padding-bottom:64px}}

/* ---------- hero (GLØD) ---------- */
.hero{--warmth:.55;overflow:hidden;padding-block:var(--s5) var(--s4)}
.hero__scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__scene .cold,.hero__scene .warm{position:absolute;inset:0;transition:opacity 600ms var(--ease)}
.hero__scene .cold{background:radial-gradient(120% 80% at 80% 20%,rgba(74,98,114,.55),transparent 60%),radial-gradient(90% 60% at 20% 90%,rgba(43,63,78,.6),transparent 60%);opacity:calc(1 - var(--warmth))}
.hero__scene .warm{background:radial-gradient(100% 70% at 85% 30%,rgba(255,91,58,.42),transparent 62%),radial-gradient(70% 50% at 15% 95%,rgba(255,138,91,.28),transparent 60%);opacity:var(--warmth)}
.hero__scene .lines{position:absolute;right:-20px;top:0;bottom:0;width:38%;color:var(--is);opacity:.09;background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 9px);mask-image:linear-gradient(90deg,transparent,#000 40%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%)}
/* hero med foto (D48): vinterbilete under eit slør på 65 %. Sløret er målt, ikkje gjetta —
   det er den svakaste verdien som held H1 på 6,2:1 og underteksten på 4,7:1 mot dei lysaste
   5 % av biletet i tekstsona (WCAG AA krev 4,5:1). Fjern .hero--photo for å få CSS-scena att. */
.hero__photo{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:52% 42%}
.hero__veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(15,17,21,0) 0%,rgba(15,17,21,.52) 15%,rgba(15,17,21,.52) 74%,rgba(15,17,21,.14) 90%,rgba(15,17,21,0) 100%),rgba(15,17,21,.30)}
.hero--photo .hero__scene .cold{opacity:calc((1 - var(--warmth)) * .55)}
.hero--photo .hero__scene .warm{opacity:calc(var(--warmth) * .7)}
.hero--photo .hero__scene .lines{opacity:.06}
@media (max-width:767px){.hero__veil{background:rgba(15,17,21,.68)}}
/* D99: videoen ligg over biletet og under sløret; usynleg til han faktisk spelar, gler bort når han er ferdig */
.hero__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.hero__video.is-on{opacity:1}
/* D99: videoen har lysare bilete (snø, himmel) enn fotoet, så eit ekstra slør gler inn med han. Målt som D48: den
   svakaste verdien som held H1 og underteksten over 4,5:1 mot dei lysaste 5 % av kvart videobilete (desktop 0,52, mobil 0,20). */
.hero__veil--video{opacity:0;transition:opacity 1.2s var(--ease);background:linear-gradient(90deg,rgba(15,17,21,.52) 0%,rgba(15,17,21,.52) 48%,rgba(15,17,21,.17) 72%,rgba(15,17,21,0) 100%)}
.hero.is-video .hero__veil--video{opacity:1}
@media (max-width:767px){.hero__veil--video{background:rgba(15,17,21,.20)}}
@media (prefers-reduced-motion:reduce){.hero__video{display:none}}
.hero .container{position:relative;z-index:1}
.hero__h1{font-size:var(--d2);margin-bottom:var(--s2)}
.hero__sub{max-width:52ch;color:rgba(217,228,236,.85);font-size:1.0625rem}
.hero__eyebrow{color:#FFC29B}
.hero__actions{margin-top:var(--s3)}
.hero__quiet{margin-top:var(--s2);font-size:var(--small)}
@media (min-width:768px){.hero{padding-block:var(--s6)}.hero__grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s4);align-items:center}.hero__h1{font-size:clamp(2.4rem,4.6vw,4.2rem)}}
@media (min-width:1200px){.hero{padding-block:var(--s7) var(--s6)}}

/* dial */
.dial{margin-top:var(--s4);padding:var(--s3);border:1px solid var(--line-dark);border-radius:var(--r-l);background:rgba(15,17,21,.35);backdrop-filter:blur(6px)}
.dial__label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font-size:var(--small);color:rgba(217,228,236,.8);margin-bottom:var(--s1)}
.dial__numeral{font-family:var(--f-display);font-size:clamp(4rem,18vw,8.5rem);line-height:.9;letter-spacing:-.03em;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;gap:.05em}
.dial__numeral .deg{font-size:.35em;line-height:1;margin-top:.2em;color:#FFC29B;font-weight:500}
.dial__range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:var(--s2) 0 var(--s1);cursor:pointer}
.dial__range:focus-visible{outline:3px solid var(--glod);outline-offset:4px;border-radius:var(--r-pill)}
.dial__range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#D9E4EC 0%,#4A6272 45%,#FF5B3A 100%)}
.dial__range::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#D9E4EC 0%,#4A6272 45%,#FF5B3A 100%)}
.dial__range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:3px solid var(--glod);box-shadow:0 0 0 6px rgba(255,91,58,.22)}
.dial__range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--glod);box-shadow:0 0 0 6px rgba(255,91,58,.22)}
.dial__scale{display:flex;justify-content:space-between;font-size:.75rem;color:rgba(217,228,236,.6);font-variant-numeric:tabular-nums}
.dial__models{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line-light);background:transparent;font-size:var(--small);font-weight:500;cursor:pointer;text-decoration:none;color:inherit;transition:background var(--t-fast),border-color var(--t-fast)}
.chip:hover{border-color:var(--kobber);color:var(--kobber)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--glod);border-color:var(--glod);color:var(--skifer)}
.ink .chip{border-color:var(--line-dark-strong);color:var(--is)}
.ink .chip:hover{border-color:#fff;color:#fff}
.ink .chip[aria-pressed="true"]{background:var(--glod);border-color:var(--glod);color:var(--skifer)}
.dial__readout{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line-dark);font-size:.9375rem;color:var(--is);min-height:3.2em}
.dial__readout strong{color:#fff}
.dial__readout a{color:#FFC29B}
.dial__note{margin-top:8px;font-size:var(--small);color:#FFC29B;display:none}
.dial__note.show{display:block}

/* ---------- trust bar ---------- */
.trust{border-block:1px solid var(--line-light);background:var(--ull)}
.trust ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s3);overflow-x:auto;scrollbar-width:none;padding-block:14px;-webkit-overflow-scrolling:touch}
.trust ul::-webkit-scrollbar{display:none}
.trust li{flex:none;display:inline-flex;align-items:center;gap:10px;font-size:var(--small);font-weight:500;white-space:nowrap;color:var(--tekst)}
.trust li svg{width:20px;height:20px;color:var(--kobber-tekst);flex:none}
@media (min-width:1024px){.trust ul{justify-content:space-between;overflow:visible}}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line-light);border-radius:var(--r-m);padding:var(--s3);box-shadow:var(--shadow-s)}
.ink .card{background:var(--kull);border-color:var(--line-dark);color:var(--is)}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-light);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.pcard__media{position:relative;aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.pcard__media img{width:100%;height:100%;object-fit:cover;padding:0}
.pcard__media--cover img{object-fit:cover;padding:0}
.pcard__media::after{content:"";position:absolute;inset:0;color:var(--kull);background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px);opacity:0;transition:opacity var(--t-fast)}
.pcard:hover .pcard__media::after{opacity:.12}
.pcard__tier{position:absolute;top:12px;left:12px;z-index:1}
.pcard__body{padding:var(--s2) var(--s3) var(--s3);display:flex;flex-direction:column;gap:10px;flex:1}
.pcard__brand{font-size:var(--eyebrow);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--tekst-dempet)}
.pcard__name{font-family:var(--f-display);font-size:1.35rem;font-weight:600;line-height:1.1;margin:0}
.pcard__name a{text-decoration:none}
.pcard__specs{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--small);color:var(--tekst-dempet);font-variant-numeric:tabular-nums;margin:0;padding:0;list-style:none}
.pcard__specs strong{color:var(--tekst);font-weight:600}
.pcard__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px;margin-top:auto;padding-top:var(--s1)}
.pcard__actions .btn{white-space:nowrap}
.tier{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--sand);color:var(--tekst)}
.tier--bra{background:var(--is);color:var(--fjord)}
.tier--bedre{background:var(--kull);color:var(--is)}
.tier--best{background:var(--glod);color:var(--skifer)}
.tier--gulv,.tier--multi{background:var(--sand);color:var(--tekst)}

/* energy label badge (compliant arrow + link named exactly «Produktdatablad») */
.ebadge{display:inline-flex;align-items:center;gap:10px;font-size:var(--small)}
.ebadge__arrow{display:inline-grid;place-items:center;height:26px;padding:0 10px 0 8px;font-weight:800;font-size:.8125rem;color:var(--skifer);background:var(--e-a3);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%);padding-right:16px;font-family:var(--f-text);letter-spacing:.02em}
.ebadge__arrow[data-class="A+++"]{background:var(--e-a3)}.ebadge__arrow[data-class="A++"]{background:var(--e-a2)}.ebadge__arrow[data-class="A+"]{background:var(--e-a1);color:var(--skifer)}.ebadge__arrow[data-class="A"]{background:var(--e-a);color:var(--skifer)}
.ebadge a{font-weight:500}
/* P9: pila er ei lenkje til energietiketten når han finst – same utsjånad, fokus innanfor pila (clip-path kuttar outline utanfor) */
.ebadge a.ebadge__arrow{font-weight:800;color:var(--skifer);text-decoration:none}
.ebadge a.ebadge__arrow:hover{filter:brightness(.92)}
.ebadge a.ebadge__arrow:focus-visible{outline:2px solid var(--skifer);outline-offset:-4px}

/* PriceStack: ferdig montert = product + standard montering */
.pstack{display:grid;gap:2px;font-variant-numeric:tabular-nums}
.pstack__total{font-family:var(--f-display);font-size:1.6rem;font-weight:700;line-height:1.05;letter-spacing:-.01em}
.pstack__total small{display:block;font-family:var(--f-text);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dempet);margin-bottom:2px}
.pstack__split{font-size:var(--small);color:var(--tekst-dempet)}
.pstack__monthly{font-size:var(--small);color:var(--kobber-tekst);font-weight:500}
.pstack--lg .pstack__total{font-size:clamp(2rem,4vw,2.8rem)}
.pstack__old{text-decoration:line-through;color:var(--tekst-dempet);font-weight:500;font-size:.6em;margin-left:.4em}
.kampanje{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-s);background:var(--glod);color:var(--skifer);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ink .pstack__total small,.ink .pstack__split{color:rgba(217,228,236,.7)}
.ink .pstack__monthly{color:#FFC29B}

/* tabs (TierTabs, brand toggle) */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs [role="tab"]{min-height:44px;padding:10px 16px;border:1px solid var(--line-light);border-radius:var(--r-s);background:transparent;font-weight:600;cursor:pointer;color:var(--tekst-dempet)}
.tabs [role="tab"][aria-selected="true"]{background:var(--kull);color:#fff;border-color:var(--kull)}
.tabs [role="tab"]:not([aria-selected="true"]):hover{color:var(--tekst)}  /* D87: på telefon heng :hover att etter trykket — då fekk den valde fana mørk tekst på mørk grunn */
.seg{display:inline-flex;border:1px solid var(--line-light);border-radius:var(--r-s);overflow:hidden}
.seg button{min-height:40px;padding:8px 14px;border:0;background:transparent;font-weight:600;font-size:var(--small);cursor:pointer;color:var(--tekst-dempet)}
.seg button[aria-pressed="true"]{background:var(--kull);color:#fff}

/* product grid */
.pgrid{display:grid;gap:var(--s3)}
@media (min-width:640px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pgrid--4{}
@media (min-width:1200px){.pgrid--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- process timeline (the warm line as a timeline) ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:var(--s3)}
.timeline::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--line-light)}
.timeline__line{position:absolute;left:11px;top:14px;width:2px;height:calc(100% - 28px);background:var(--glod);transform-origin:top;transform:scaleY(0);transition:transform 1400ms var(--ease)}
.timeline.in .timeline__line{transform:scaleY(1)}
.timeline li{position:relative;padding-left:44px}
.timeline li.timeline__line{position:absolute;padding:0}.timeline li.timeline__line::before{content:none}
.timeline li::before{content:"";position:absolute;left:5px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--ull);border:2px solid var(--glod);z-index:1}
.timeline h3{font-size:1.125rem;margin-bottom:.25em}
.timeline p{margin:0;color:var(--tekst-dempet);font-size:var(--small);max-width:46ch}
.timeline .when{display:block;font-size:var(--eyebrow);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--kobber-tekst);margin-bottom:4px}
@media (min-width:1024px){.timeline{grid-template-columns:repeat(5,1fr);gap:var(--s3)}.timeline::before{left:7px;right:7px;top:7px;bottom:auto;width:auto;height:2px}.timeline__line{left:7px;top:7px;height:2px;width:calc(100% - 14px);transform-origin:left;transform:scaleX(0)}.timeline.in .timeline__line{transform:scaleX(1)}.timeline li{padding-left:0;padding-top:34px}.timeline li::before{left:0;top:0}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-light)}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:18px 0;font-family:var(--f-display);font-weight:600;font-size:1.125rem;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--kobber);border-bottom:2px solid var(--kobber);transform:rotate(45deg);transition:transform var(--t-fast);margin-right:4px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 0 20px;color:var(--tekst-dempet);max-width:65ch}
.faq details>div p:last-child{margin-bottom:0}
.ink .faq,.ink .faq details{border-color:var(--line-dark)}
.ink .faq details>div{color:rgba(217,228,236,.8)}

/* ---------- team / reference / review / areas ---------- */
.tcard{display:grid;grid-template-columns:72px 1fr;gap:var(--s2);align-items:center}
.tcard:not(:has(img,.ph)){grid-template-columns:1fr} /* montør utan portrett: inga tom biletrute */
.tcard .ph{width:72px;aspect-ratio:3/4;font-size:.6875rem;padding:4px;border-radius:var(--r-s)}
.tcard h3{font-size:1.0625rem;margin:0 0 2px}
.tcard p{margin:0;font-size:var(--small);color:var(--tekst-dempet)}
.tcard .cert{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--kobber-tekst);font-weight:600;margin-top:4px}
.rcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-light);border-radius:var(--r-m);overflow:hidden}
.rcard .ph{aspect-ratio:3/2;border:0;border-bottom:1px dashed var(--line-light)}
.rcard__body{padding:var(--s2) var(--s3) var(--s3)}
.rcard__meta{font-size:var(--eyebrow);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--tekst-dempet);margin-bottom:4px}
.rcard h3{font-size:1.125rem;margin-bottom:.25em}
.rcard p{margin:0;font-size:var(--small);color:var(--tekst-dempet)}
.review{padding:var(--s3);border:1px solid var(--line-dark);border-radius:var(--r-m);background:rgba(37,37,49,.55)}
.review blockquote{margin:0 0 var(--s2);font-family:var(--f-display);font-size:1.125rem;line-height:1.35;color:#fff}
.review cite{font-style:normal;font-size:var(--small);color:rgba(217,228,236,.75)}
.review .stars{color:#FFC29B;letter-spacing:2px;font-size:.9rem;margin-bottom:8px}
.example-tag{display:inline-block;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#FFC29B;border:1px dashed rgba(255,194,155,.5);padding:2px 8px;border-radius:var(--r-s);margin-bottom:10px}
.areas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.score{display:flex;align-items:baseline;gap:12px}
.score .d2{font-size:clamp(3rem,8vw,5rem);color:#fff}

/* ---------- trio (asymmetric service cards) ---------- */
.trio{display:grid;gap:var(--s3)}
.trio .card{display:flex;flex-direction:column;gap:var(--s2);min-height:220px}
.trio .card p{color:var(--tekst-dempet);margin:0;flex:1}
.trio .card h3{margin:0}
.trio .card .btn{align-self:flex-start}
@media (min-width:768px){.trio{grid-template-columns:repeat(12,1fr)}.trio .card:nth-child(1){grid-column:span 7;min-height:320px}.trio .card:nth-child(2){grid-column:span 5}.trio .card:nth-child(3){grid-column:4/span 9}}
@media (min-width:1200px){.trio .card:nth-child(3){grid-column:span 12}}
.card--fjord{background:var(--fjord);color:var(--is);border-color:transparent}
.ink .card--fjord{background:var(--fjord)}
.card--fjord h3{color:#fff}.card--fjord p{color:rgba(217,228,236,.82)!important}
.card--sand{background:var(--sand);border-color:transparent}
.ink .card--sand{background:var(--sand);color:var(--tekst)}.ink .card--sand h3{color:var(--tekst)}.ink .card--sand .eyebrow{color:var(--kobber-tekst)} /* a sand card inside an ink section must stay light (was overridden by .ink .card) */
.card--kull{background:var(--kull);color:var(--is);border-color:transparent}
.card--kull h3{color:#fff}.card--kull p{color:rgba(217,228,236,.82)!important}
.card--fjord .btn--ghost,.card--kull .btn--ghost{border-color:var(--line-dark-strong);color:#fff}
.card--fjord .btn--ghost:hover,.card--kull .btn--ghost:hover{border-color:#fff}
.card--fjord .eyebrow,.card--kull .eyebrow{color:#FFC29B}

/* ---------- forms ---------- */
.field{display:grid;gap:6px;margin-bottom:var(--s2)}
.field label,.field legend{font-weight:600;font-size:var(--small)}
.field .hint{font-size:.8125rem;color:var(--tekst-dempet)}
.input,select,textarea,input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],input[type="search"]{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line-light);border-radius:var(--r-s);background:#fff;font:inherit;color:var(--tekst)}
textarea{min-height:120px;resize:vertical}
.input:focus,select:focus,textarea:focus,input:focus{border-color:var(--kull);outline:3px solid rgba(255,91,58,.35);outline-offset:0}
.field.is-invalid .input,.field.is-invalid input,.field.is-invalid select{border-color:var(--kobber)}
.field__error{display:none;font-size:.8125rem;color:var(--kobber-tekst);font-weight:500}
.field.is-invalid .field__error{display:block}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid var(--line-light);border-radius:var(--r-s);background:#fff;font-weight:500;font-size:var(--small);transition:background var(--t-fast),border-color var(--t-fast)}
.choice input:checked+span{background:var(--kull);border-color:var(--kull);color:#fff}
.choice input:focus-visible+span{outline:3px solid var(--glod);outline-offset:2px}
.choice--wide span{width:100%;display:flex;justify-content:space-between}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--small);cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--kobber)}
.range{width:100%;accent-color:var(--glod);height:44px}
.fieldset{border:0;padding:0;margin:0 0 var(--s3)}
.form-row{display:grid;gap:var(--s2);margin-bottom:var(--s2)}
.form-row>.field{margin-bottom:0;align-content:start}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.ink .input,.ink select,.ink textarea,.ink input[type="text"],.ink input[type="email"],.ink input[type="tel"],.ink input[type="number"]{background:rgba(255,255,255,.06);border-color:var(--line-dark-strong);color:#fff}
.ink .field .hint{color:rgba(217,228,236,.7)}
.ink .choice span{background:transparent;border-color:var(--line-dark-strong);color:var(--is)}
.ink .choice input:checked+span{background:var(--glod);border-color:var(--glod);color:var(--skifer)}
.notice{padding:14px 16px;border-radius:var(--r-s);border:1px solid var(--line-light);background:#fff;font-size:var(--small);display:flex;gap:10px;align-items:flex-start}
.notice svg{width:20px;height:20px;flex:none;color:var(--kobber-tekst)}
.notice--warm{border-color:rgba(255,91,58,.4);background:#FFF1EC}
.notice--ok{border-color:rgba(0,150,78,.35);background:#EDF7F1}

/* ---------- spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:var(--small);font-variant-numeric:tabular-nums}
.spec caption{text-align:left;font-family:var(--f-display);font-size:1.125rem;font-weight:600;padding:10px 0}
.spec th,.spec td{padding:10px 12px;border-bottom:1px solid var(--line-light);text-align:left;vertical-align:top}
.spec th{font-weight:500;color:var(--tekst-dempet);width:48%}
.spec thead th{position:relative;color:#fff;background:var(--kull);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.spec thead th::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(217,228,236,.25) 0 1px,transparent 1px 8px);pointer-events:none}
.spec thead th span{position:relative;z-index:1}
.spec tbody th{position:sticky;left:0;background:var(--ull)}
.spec-wrap{overflow-x:auto}

/* ---------- footer ---------- */
.footer{padding-block:var(--s5) calc(var(--s4) + 8px)}
.footer .logo svg{height:48px}
.footer__grid{display:grid;gap:var(--s4)}
.footer h4,.footer .footer__h{font-size:var(--eyebrow);letter-spacing:.12em;text-transform:uppercase;color:#FFC29B;margin-bottom:var(--s2)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--small)}
.footer a{text-decoration:none;color:var(--is)}
.footer p a,.footer address a,.footer__legal a{text-decoration:underline}
.footer a:hover{color:#fff}
.footer address{font-style:normal;font-size:var(--small);line-height:1.7;color:rgba(217,228,236,.85)}
.footer__news{display:flex;gap:8px;margin-top:var(--s2)}
.footer__news input{min-height:44px;flex:1}
.footer__partners{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-dark);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:rgba(217,228,236,.6)}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:var(--s3);font-size:.8125rem;color:rgba(217,228,236,.65)}
.footer__legal a{color:rgba(217,228,236,.8)}
@media (min-width:768px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}

/* ---------- interior hero (half height) ---------- */
.phero{padding-block:var(--s4)}
.phero h1{margin-bottom:var(--s2)}
.phero p{max-width:60ch;color:rgba(217,228,236,.85);font-size:1.0625rem;margin:0}
.phero .crumbs{font-size:var(--small);color:rgba(217,228,236,.7);margin-bottom:var(--s2)}
.phero .crumbs a{color:inherit;text-decoration:none}
.phero .crumbs a:hover{color:#fff}
@media (min-width:768px){.phero{padding-block:var(--s5)}}

/* ---------- CTA band ---------- */
.cta-band{display:grid;gap:var(--s3);align-items:center}
@media (min-width:768px){.cta-band{grid-template-columns:7fr 5fr}.cta-band .actions{justify-content:flex-end}}

/* ---------- reveal / motion ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-stagger>*{opacity:0;transform:translateY(14px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.rv-stagger.in>*{opacity:1;transform:none}
.rv-stagger.in>*:nth-child(2){transition-delay:60ms}.rv-stagger.in>*:nth-child(3){transition-delay:120ms}.rv-stagger.in>*:nth-child(4){transition-delay:180ms}.rv-stagger.in>*:nth-child(5){transition-delay:240ms}.rv-stagger.in>*:nth-child(6){transition-delay:300ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv,.rv-stagger>*{opacity:1;transform:none}
  .hl,.timeline__line{transform:none}
  .pcard:hover,.btn:hover{transform:none}
}
/* montørkort med kontaktinfo (P7) — portrettet fyller ramma, som resten av bileta */
.tcard img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-s);background:var(--sand)}
.tcard__kontakt{margin:8px 0 0;font-size:var(--small);line-height:1.5}
.tcard__kontakt a{color:var(--tekst-dempet);text-decoration:none}
.tcard__kontakt a:hover{color:var(--kobber-tekst);text-decoration:underline}

/* D89 (kunden 2026-09-29): hurtigmenyen nedst på mobil gjekk ut av skjermen («Handlekorg»).
   1fr 1.4fr 1fr kan ikkje krympe under innhaldet (min-width:auto), så på smale telefonar eller med stor systemtekst
   blei rada breiare enn skjermen. No: tre like kolonnar som får krympe, og under 480 px står ikonet over teksten og
   «Bestill befaring» kan brytast over to linjer. Teksten følgjer framleis systemstorleiken (rem). Målt med
   site/qa/stickybar.mjs på 320–768 px × tekstskala 1 / 1,15 / 1,3. */
.sticky-bar{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:100%;box-sizing:border-box}
.sticky-bar a{min-width:0;padding:6px 8px;text-align:center;line-height:1.2}
.sticky-bar a svg{flex:none}
@media (max-width:479px){
  .sticky-bar a{flex-direction:column;gap:3px;padding:6px 4px;font-size:.8125rem}
  .sticky-bar .sb-main{font-size:.875rem;font-weight:700}
}
/* Ingenting skal gjere sida breiare enn skjermen. Skjer det likevel, utvidar mobilnettlesaren layout-viewporten, og
   alt som er position:fixed (hurtigmenyen) blir like breitt — det var det som sende «Handlekorg» ut av skjermen.
   clip, ikkje hidden: lagar ikkje ein scroll-container, så position:sticky i headeren verkar framleis. */
/* D93: berre html. JetMenu set `.jet-mega-menu-location{overflow-x:hidden}` på body, og `body{overflow-x:clip}` blir rekna om til
   hidden/auto i Chromium – begge gjer body til ein rullekontrollar som aldri rullar, så ingen position:sticky på heile sida festa
   seg (anslagsstripa og resultatkortet i kalkulatoren). Rota åleine låser vassrett rulling; body må vere visible
   (nav-open held fram med overflow:hidden medan mobilmenyen er open). */
html{overflow-x:clip}
body,body.jet-mega-menu-location:not(.nav-open){overflow:visible}

/* D93: WooCommerce 11.1.2 legg clearfix-pseudoelement (content:" "; display:table) på kvar .form-row i eit skjema på
   sider som får kroppsklassa woocommerce-page. I våre .form-row-grid blir dei to usynlege grid-celler, så felta
   hoppa til kolonne 2 og neste linje (postnummer/klimastasjon, panelomnar, ved, olje på dev). Målt med qa/rules.mjs. */
form .form-row::before,form .form-row::after{content:none!important;display:none!important}

/* D95: Forhandsvisning (VarmepumpeAI) */
.fv__intro{max-width:66ch}
.fv__intro h1{margin:8px 0 12px}
.fv__intro .hl{display:block;width:56px;height:2px;background:var(--glod);margin:0 0 16px}
.fv-steps{list-style:none;margin:var(--s3) 0;padding:0;display:grid;gap:12px;counter-reset:fv}
.fv-steps li{counter-increment:fv;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid var(--line-light);border-radius:var(--r-m);padding:14px 16px}
.fv-steps li::before{content:counter(fv);width:32px;height:32px;border-radius:50%;background:var(--kull);color:#fff;font-family:var(--f-display);font-weight:600;display:grid;place-items:center}
@media (min-width:768px){.fv-steps{grid-template-columns:1fr 1fr}}
.fv-widget{min-height:120px;margin:var(--s3) 0}
.fv .actions{display:flex;flex-wrap:wrap;gap:12px}
/* D101: ingressen på sparekalkulatoren går i full breidd av innhaldet (Stian), med luft mellom avsnitta */
.phero .phero__wide p{max-width:none}
.phero .phero__wide p+p{margin-top:12px}
.phero .phero__wide a{color:#fff;text-decoration:underline;text-decoration-color:var(--glod);text-decoration-thickness:2px;text-underline-offset:3px}
.phero .phero__wide a:hover{color:var(--is)}
.phero .phero__demo{border-left:3px solid var(--glod);padding-left:14px}

/* D103: på telefon dekte fotoet heile skjermen (heroen er 1 100 px høg), og då reknar Chrome det som bakgrunn og ignorerer det
   for LCP – videoen vart LCP når han gleid inn. Foto og video dekkjer no øvre 85 % av skjermhøgda og glir mjukt over i den mørke
   botnen; dial-kortet står på mørk grunn. Desktop er uendra (heroen er lågare enn vindauget der). */
@media (max-width:767px){
  .hero__photo,.hero__video{bottom:auto;height:min(100%,85svh);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
}