/* Schibsted Grotesk (Schibsted/Bakken & Bæck, OFL) i alt – Bror 16.10: ingen serif. (Tidligere: Newsreader + Schibsted Grotesk (Schibsted/Bakken & Bæck, OFL) – selvhostet, lastet ned fra Google Fonts 16.10.2026 (research/newsreader.css, research/schibsted.css). Lisens: /fonts/OFL.txt */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/schibsted-grotesk-sup.woff2") format("woff2"); unicode-range: U+2074-2079, U+2192; } /* fotnotetegn ⁴–⁹ og → ligger utenfor latin-undersettet (research/schibsted-sup.css, 2 kB) */
/* Metrisk tilpassede fallbacks (lokale Georgia/Arial): h1 og brød holder samme linjeantall før woff2 er lastet – ingen hopp ved font-display: swap. Overrides = webfontens asc/desc delt på size-adjust. */
@font-face { font-family: "Schibsted Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 103.7%; ascent-override: 94.2%; descent-override: 24.9%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"); size-adjust: 105%; ascent-override: 93%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.6%; ascent-override: 98.1%; descent-override: 25.9%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback"; font-weight: 700 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 101.5%; ascent-override: 96.2%; descent-override: 25.4%; line-gap-override: 0%; }

/* Thygesen Performance – designsystem. Lys, luftig, frosted glass, runde sirkler. */
:root {
  /* REGEL (Grønne rom 17.10): FLATER bruker konstanter (--black, --flaske, --bein-t …). Bare TEKSTROLLER (--ink, --muted, --green, --line) snus i .rom.
     check.py stopper bygget hvis noen flate bruker background: var(--ink|--green|--green-deep|--green-light|--muted). */
  --ink: #141A16;            /* tekst på lyst – snus til --bein-t i .rom, aldri flate */
  --bg: #F8F6F1;             /* bein – grunnflate og arkene som overlapper rommene */
  --surface: #FFFFFF;
  --sage: #E8EFE9;           /* salvie: chevron, ringspor, tag-fallback */
  --flaske: #264A36;         /* hovedgrønn = dempet flaskefløyel fra referansene (hue 147°, metning 32 %): knapper, lenker, kicker, haker – 9,19:1 på bein, hvit på flaske 9,93, messing-lys 6,09 */
  --flaske-dyp: #1B3728;     /* hover, rommets gulv, priser */
  --rom-topp: #2D533D;       /* toppen av rommets og CTA-panelets gradient (lys ovenfra) – messing-lys 5,34, rom-dempet 5,68 */
  --skog: #101E17;           /* dypeste skygge: hero-scrim, mørkt glass, ::backdrop */
  --flaske-soft: #DCE7DF;    /* lys grønn flate: ikonbunner, tags, fokushalo */
  --messing: #B8975A;        /* messing på mørkt: lister, ringer, kanter – ALDRI tekst/ikon (2,55 på bein) */
  --messing-lys: #E2C88F;    /* tekst/tall/ikon/fokus på mørkt (5,91 på flaske, 11,97 på sort) */
  --messing-mork: #7D5F2A;   /* messing på lyst – bare strek */
  --sennep: #9C7530;         /* varselring i kalkulatorene */
  --signal: #6CC79A;         /* bare statusprikken på mørkt */
  --black: #0B0D0C;          /* tyngste flate: footer, primærknapp, sort lakk */
  --bein-t: #F3EEE3;         /* tekst på mørkt, primærknapp i rom/CTA */
  --rom-dempet: #CDD3C5;     /* dempet tekst i rom og CTA (≥4,97 i lampepunktet) */
  --kort: #FFFEFA;           /* porselen */
  --kort-fyll: linear-gradient(180deg, #FFFFFF 0%, #FFFEFA 45%, #FBF9F3 100%);
  --linpapir: #FFFCF4;       /* lyse kort i rom */
  --muted: #575D58;          /* 6,25:1 på --bg */
  --line: #E3E0D7;           /* varm hårstrek */
  --rosa: #F460A1;           /* Blivakker – kun glød i sitatseksjonen */
  --rosa-edge: #E5106C;      /* Blivakker – kant, anførselstegn, kicker-strek */
  --rosa-deep: #B8246B;      /* kicker-tekst i sitatet (6,00 på hvit) */
  /* aliaser – eksisterende regler får ny palett uten nye selektorer */
  --green: var(--flaske); --green-deep: var(--flaske-dyp); --green-light: var(--messing-lys); --green-soft: var(--flaske-soft);
  /* Dybde: én lyskilde (lampa oppe til høyre) → alle skygger faller litt mot venstre; grønnsvart skygge, aldri grå */
  --sk: 16, 30, 22;
  --lampe: 226, 190, 120;
  --kant: 1px solid rgba(var(--sk), .09);
  --topp: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(var(--sk), .05);
  --e0: inset 0 1px 2px rgba(var(--sk), .08), inset 0 0 0 1px rgba(var(--sk), .05);
  --e1: 0 1px 1px rgba(var(--sk), .06), 0 2px 4px -1px rgba(var(--sk), .06), -2px 8px 16px -6px rgba(var(--sk), .10), -4px 24px 40px -20px rgba(var(--sk), .16);
  --e2: 0 1px 1px rgba(var(--sk), .05), 0 4px 8px -2px rgba(var(--sk), .07), -4px 18px 32px -10px rgba(var(--sk), .14), -8px 48px 72px -28px rgba(var(--sk), .26);
  --e3: 0 2px 4px rgba(var(--sk), .08), -6px 24px 48px -12px rgba(var(--sk), .22), -12px 64px 96px -32px rgba(var(--sk), .34);
  --e-rom: 0 1px 0 rgba(255, 255, 255, .04), 0 2px 3px rgba(4, 12, 8, .28), -4px 14px 28px -10px rgba(4, 12, 8, .40), -10px 40px 64px -30px rgba(4, 12, 8, .50);
  --shadow: var(--e1);
  --shadow-lg: var(--e2);
  --cta-over: clamp(56px, 7vw, 96px);
  --r: 10px;
  --r-sm: 10px;              /* konsentrisk: indre ≈ ytre − polstring, aldri under 10 */
  --wrap: 1180px;
  --gutter: 20px;
  --hdr: 72px;
  --section: clamp(84px, 11vw, 150px); /* seksjonsluft – ekstra luft gir eksklusivitet */
  --font: "Schibsted Grotesk", "Schibsted Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Bror 16.10: grotesk i alt, ingen serif */
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Liquid glass – ETT materiale i fem lag: fyll+topprefleks, 1 px lys kant, innvendig lys, varm løft-skygge, blur. Mixin-lista (hvem får hva) står SIST i fila. Glasset er hvitt og lar bein + champagnelys skinne gjennom. */
  --g-fill: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 34%), linear-gradient(165deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58));
  --g-fill-solid: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 34%), linear-gradient(165deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .84));
  --g-fill-lite: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 34%), linear-gradient(165deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .76));
  --g-edge: rgba(255, 255, 255, .92);
  --g-light: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .4), inset 0 -16px 28px -18px rgba(255, 255, 255, .55);
  --g-lift: var(--e1);
  --g-lift-hi: var(--e2);
  --g-blur: blur(20px) saturate(150%);    /* svever: header, mobilmeny, sticky, hero-chips, ph-pill (170 % gjorde champagnelyset gult) */
  --g-blur-sm: blur(12px) saturate(140%); /* kort i rutenett (≤6 i viewport), tallfliser, HUD, mobil-pin, cta-box */
  --g-dark: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 34%), linear-gradient(165deg, rgba(16, 30, 23, .90), rgba(11, 13, 12, .86)); /* skogglass – verste tilfelle over hvitt: bein 7,64, messing-lys 5,42 */
  --g-dark-edge: rgba(255, 255, 255, .18);
  --g-dark-light: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -1px 0 rgba(255, 255, 255, .06);
  --spring: cubic-bezier(.32, .72, 0, 1); /* Apples fjær – alt som trykkes/lander; --ease beholdes til reveal */
  /* Omgivelseslys (body::before/after): champagne øverst venstre, salvie høyre, dyp grønn og bein nederst – rosa og champagne deler aldri viewport */
  --lys-1: rgba(var(--lampe), .07); /* .28 ga #F4EBD8 i hjørnet (leste som beige) – .10 holder hjørnet på ca. #F6F1E8, fortsatt et varmt pust bak glasset */
  --lys-2: rgba(200, 216, 204, .40);
  --lys-3: rgba(38, 74, 54, .06);
  --lys-4: rgba(248, 246, 241, .9);
  --shade: 16, 30, 23;           /* RGB-triplett for hero-toning og text-shadow */
  --pulse: rgba(38, 74, 54, .35); /* pulsring på status-prikken */
  /* panelveggen: høyt felt over lavt, profilert list (lyskant .14 over, skyggekant .45 under) + indre list inset 6 px, 10 px hjørner */
  --panel-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='680'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='.22'/%3E%3Cstop offset='.12' stop-opacity='.05'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Crect x='18' y='18' width='284' height='440' rx='10'/%3E%3Crect x='18' y='494' width='284' height='168' rx='10'/%3E%3C/g%3E%3Cg fill='none'%3E%3Crect x='18.5' y='17.5' width='283' height='439' rx='10' stroke='%23fff' stroke-opacity='.14'/%3E%3Crect x='18.5' y='19.5' width='283' height='439' rx='10' stroke='%23000' stroke-opacity='.45'/%3E%3Crect x='24.5' y='25.5' width='271' height='427' rx='10' stroke='%23fff' stroke-opacity='.06'/%3E%3Crect x='24.5' y='24.5' width='271' height='427' rx='10' stroke='%23000' stroke-opacity='.18'/%3E%3Crect x='18.5' y='493.5' width='283' height='167' rx='10' stroke='%23fff' stroke-opacity='.14'/%3E%3Crect x='18.5' y='495.5' width='283' height='167' rx='10' stroke='%23000' stroke-opacity='.45'/%3E%3Crect x='24.5' y='501.5' width='271' height='155' rx='10' stroke='%23fff' stroke-opacity='.06'/%3E%3Crect x='24.5' y='500.5' width='271' height='155' rx='10' stroke='%23000' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
  --panel-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='420'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='.22'/%3E%3Cstop offset='.12' stop-opacity='.05'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Crect x='12' y='12' width='152' height='260' rx='10'/%3E%3Crect x='12' y='296' width='152' height='112' rx='10'/%3E%3C/g%3E%3Cg fill='none'%3E%3Crect x='12.5' y='11.5' width='151' height='259' rx='10' stroke='%23fff' stroke-opacity='.14'/%3E%3Crect x='12.5' y='13.5' width='151' height='259' rx='10' stroke='%23000' stroke-opacity='.45'/%3E%3Crect x='18.5' y='19.5' width='139' height='247' rx='10' stroke='%23fff' stroke-opacity='.06'/%3E%3Crect x='18.5' y='18.5' width='139' height='247' rx='10' stroke='%23000' stroke-opacity='.18'/%3E%3Crect x='12.5' y='295.5' width='151' height='111' rx='10' stroke='%23fff' stroke-opacity='.14'/%3E%3Crect x='12.5' y='297.5' width='151' height='111' rx='10' stroke='%23000' stroke-opacity='.45'/%3E%3Crect x='18.5' y='303.5' width='139' height='99' rx='10' stroke='%23fff' stroke-opacity='.06'/%3E%3Crect x='18.5' y='302.5' width='139' height='99' rx='10' stroke='%23000' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 480px) { :root { --gutter: 16px; --hdr: 64px; --r: 10px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--ink); font-synthesis: none; /* ingen kunstig kursiv/fet – Schibsted har ingen italic-fil */
  background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; /* clip lager ikke scrollboks – ellers dør position: sticky når siden ligger i en wrapper (artifact) */
  padding-top: var(--hdr);
}
body.page-index { padding-top: 0; }
/* Omgivelseslys bak hele siden – det glasset bryter. To faste lag med rene radial-gradienter (ingen filter:blur), drift kun ≥900 px uten reduced-motion. */
body::before, body::after { content: ""; position: fixed; inset: -10vh -10vw; z-index: -1; pointer-events: none; background: radial-gradient(42vw 42vw at 12% 18%, var(--lys-1), transparent 70%), radial-gradient(36vw 36vw at 88% 30%, var(--lys-2), transparent 70%); }
body::after { background: radial-gradient(40vw 40vw at 70% 78%, var(--lys-3), transparent 70%), radial-gradient(34vw 34vw at 22% 86%, var(--lys-4), transparent 70%); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) { body::before { animation: drift 24s var(--spring) 1 forwards; } body::after { animation: drift 30s var(--spring) -6s 1 reverse forwards; } } /* endelig: lyset «lander» ved ankomst og koster deretter null (backdrop-filter må ellers refiltrere hvert frame) */
@keyframes drift { to { transform: translate3d(3vw, -4vh, 0) scale(1.08); } }
html.lite body::before, html.lite body::after { animation: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* Display = Newsreader (opsz 72) KUN på h1/h2 og de få store seriffstedene; h3/h4 er Schibsted – serifen tåler ikke under ~26 px */
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; text-wrap: balance; }
h1 { font-family: var(--display); font-weight: 760; font-size: clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem); letter-spacing: -.035em; line-height: 1.02; }
h2 { font-family: var(--display); font-weight: 720; font-size: clamp(1.85rem, 1.4rem + 1.9vw, 3rem); letter-spacing: -.03em; line-height: 1.06; margin-bottom: .55em; }
h3 { font-size: 1.25rem; }
h4 { font-size: .95rem; font-weight: 600; color: var(--muted); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 820px; }
.lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--muted); line-height: 1.6; max-width: 58ch; }
.kicker { display: inline-flex; align-items: center; gap: .7em; margin: 0 0 1.1em; font-size: .95rem; font-weight: 600; letter-spacing: -.005em; color: var(--green); } /* Bror 16.10: ingen versaler, ingen sporing */
.kicker::before { content: ""; flex: none; width: 24px; height: 1px; background: linear-gradient(90deg, var(--messing-mork), var(--messing)); } /* børstet messingstrek – eneste pynt */
.quote .kicker::after, .garanti-box .kicker::after { content: ""; flex: none; width: 24px; height: 1px; background: linear-gradient(90deg, var(--messing), var(--messing-mork)); } /* sentrerte kickere balanseres */
.source { font-size: .86rem; color: var(--muted); margin-top: 1.2em; }
.center { text-align: center; justify-content: center; }
mark { color: inherit; background-color: transparent; background-image: linear-gradient(90deg, #8E6F35, #C9A562 50%, #8E6F35); background-repeat: no-repeat; background-size: 100% 3px; background-position: 0 94%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em; margin: 0 -.04em; } /* børstet messinglist under ordet (per linje via clone) – statisk, ingen gul markeringstusj */
/* Strekskala for hele ikonsettet – fire verdier, ingen lokale overstyringer: .ic 1.5 (24–30 px), små 1.75 (≤22 px), garanti 1.25 (44 px), ic-big 1.0 (120 px) */
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-big { width: 120px; height: 120px; stroke-width: 1; }
.ic-arrow, .trust .ic, .chip .ic, .opt .ic, .scr-ic .ic, .hdr-call .ic, .ftr-contact .ic, .call-btn .ic, .checks .ic, .notes .ic, .story-done .ic, .hf-pill .ic, .hv-pill .ic, .ph-pill .ic, .st-no .ic { stroke-width: 1.75; }
.garanti-check .ic { stroke-width: 1.25; }
.ic-arrow { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--black); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { left: 12px; }

/* ---- Knapper ---- */
/* Trykk-fysikk: én fjær, 1 px løft ved hover, pil 3 px, og .pressed (app.js) lar glasset vokse 3 % mot fingeren – også på touch */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-family: inherit; border: 0; cursor: pointer; min-height: 52px; padding: 10px 1.4em; border-radius: 10px; font-weight: 600; font-size: 1rem; letter-spacing: 0; line-height: 1.2; text-align: center; transition: transform .25s var(--spring); max-width: 100%; }
.nav .btn, .sticky-cta .btn { white-space: nowrap; }
/* Dybden ligger i kantene, aldri i en gradient (sjekkliste 6): lys innerkant øverst, mørk nederst, skarp kontaktskygge + myk farget skygge. Skyggen byttes uten overgang. */
.btn-dark { background: var(--black); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(var(--sk), .18), 0 8px 18px -10px rgba(var(--sk), .55); }
.btn-dark:hover { background: #1A1D1B; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px var(--messing), 0 14px 26px -12px rgba(var(--sk), .6); } /* messinglist, ikke grønn halo */
.btn-green { background: var(--flaske); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 1px rgba(var(--sk), .2), 0 8px 18px -10px rgba(38, 74, 54, .6); }
.btn-green:hover { background: var(--flaske-dyp); transform: translateY(-1px); }
.btn-green:hover, .btn-green:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 4px rgba(38, 74, 54, .16), 0 12px 26px -12px rgba(38, 74, 54, .55); }
.btn-ghost { background: transparent; color: var(--black); border: 1px solid var(--black); }
.btn-ghost:hover { background: var(--black); color: #fff; border-color: var(--black); transform: translateY(-1px); }
.btn.full { width: 100%; margin-top: 1.2em; }
button { font-family: inherit; color: inherit; } /* <button> arver ikke font i Chrome/Safari (ble Arial/SF) */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
.lenke { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; color: var(--green); min-height: 44px; }
.lenke:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--green); }
.btn:hover .ic-arrow, .lenke:hover .ic-arrow { transform: translateX(3px); }

/* ---- Header (liquid glass) ---- */
/* Glasset ligger på ::before (fyll/kant/blur/tetning fra mixin-lista), så headeren ikke blir containing block for den fixed-posisjonerte mobilmenyen.
   Desktop: frittsvevende kapsel 12 px under toppen som tetner (.58 → .94 hvit) og løfter seg ved scroll (JS-toggle «scrolled» ved y > 8). Mobil: stripe i full bredde, samme tetning. */
.site-header { position: fixed; inset: 0 0 auto; height: var(--hdr); z-index: 50; pointer-events: none; }
.site-header .hdr { pointer-events: auto; } /* IKKE .nav – .nav{pointer-events:none} må beholdes når menyen er lukket */
.site-header::before, .site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-header::after { background: var(--g-fill-solid); box-shadow: var(--g-light), var(--g-lift-hi); opacity: 0; transition: opacity .35s var(--spring); } /* tetningen: eget lag som fader inn (bare opacity) oppå blur-laget */
.site-header.scrolled::after { opacity: 1; }
@media (min-width: 1081px) {
  .site-header::before, .site-header::after { inset: 12px max(12px, calc((100% - var(--wrap)) / 2 - 16px)) auto; height: calc(var(--hdr) - 16px); border-radius: 10px; } /* min. 12 px luft til kanten (1081–1240 px) */
  .site-header .hdr { height: calc(var(--hdr) - 16px); margin-top: 12px; padding: 0 8px 0 16px; }
}
.hdr { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.02em; line-height: 1; min-height: 44px; }
.logo-mark { width: 40px; height: 40px; flex: none; }
.logo-text { display: flex; flex-direction: column; gap: 2px; }
.logo-a { font-size: 1.12rem; }
.logo-b { font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--green); }
.nav ul { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.nav a { white-space: nowrap; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 500; font-size: .98rem; color: var(--ink); }
.nav a:hover { background: rgba(255, 255, 255, .7); } /* lysere på glass, ikke mørkere */
.nav a[aria-current="page"] { background: var(--black); color: #fff; }
.nav { display: flex; align-items: center; gap: 18px; }
.nav-cta .btn { min-height: 44px; font-size: .95rem; }
.nav .btn-dark, .nav .btn-dark:hover { color: #fff; background: var(--black); padding: 0 1.3em; }
.nav .btn { font-weight: 600; font-size: .95rem; } /* .nav a (500) skal ikke vinne over knappen */
.burger, .hdr-call { display: none; }
@media (min-width: 1081px) and (max-width: 1240px) { .nav a { padding: 0 10px; font-size: .95rem; } .nav-cta .btn { font-size: .9rem; padding: 0 1.1em; } .nav { gap: 10px; } }
@media (max-width: 1080px) {
  .hdr { position: relative; justify-content: center; }
  .hdr .logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .hdr-call { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  .hdr-call .ic { width: 20px; height: 20px; }
  .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .burger span { display: block; height: 2px; width: 100%; background: var(--black); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav { position: fixed; inset: var(--hdr) 0 0; flex-direction: column; justify-content: flex-start; padding: 32px var(--gutter) 120px; gap: 28px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s; overflow: auto; z-index: 49; }
  .nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .nav ul { flex-direction: column; width: 100%; gap: 6px; }
  .nav a { font-size: 1.5rem; font-weight: 600; padding: 12px 18px; width: 100%; justify-content: center; }
  .nav-cta { width: 100%; display: flex; justify-content: center; }
  .nav .nav-cta .btn { width: auto; font-size: 1.1rem; min-height: 56px; padding: 0 1.8em; }
  body.menu-open { overflow: hidden; }
}

/* ---- Seksjoner ---- */
.section { padding: var(--section) 0; }
.section:not(.section-tint), .stats { background: none; } /* lyset slipper gjennom */
.section-tint { background: linear-gradient(180deg, rgba(232, 239, 233, 0), rgba(232, 239, 233, .7) 18%, rgba(232, 239, 233, .7) 82%, rgba(232, 239, 233, 0)); } /* salvievask – ingen beige tint */
 /* To naboseksjoner på samme flate skilles med en 168 px --line-hårstrek (seksjoner med padding-top 0 – sitat, cta, neste, certs, garanti – unntas) */
.section-tint + .section-tint, .section:not(.section-tint) + .section:not(.section-tint):not(.quote-sec):not(.cta-sec):not(.neste-sec):not(.certs-sec):not(.garanti):not(.rom):not(.rom-etter) { padding-top: clamp(96px, 12vw, 168px); }
.section-tint + .section-tint::before, .section:not(.section-tint) + .section:not(.section-tint):not(.quote-sec):not(.cta-sec):not(.neste-sec):not(.certs-sec):not(.garanti):not(.rom):not(.rom-etter)::before { content: ""; display: block; width: min(168px, 26%); height: 1px; margin: 0 auto clamp(40px, 5vw, 72px); background: linear-gradient(90deg, transparent, rgba(125, 95, 42, .45), transparent); } /* messing-hårstrek */
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .lead { margin-bottom: 0; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.card, .stat, .step, .tl-body, .cert, .faq { min-width: 0; overflow-wrap: anywhere; }
.card { border-radius: var(--r); padding: 32px; transition: transform .35s var(--spring); } /* glass-sm fra mixin */
@media (max-width: 480px) { .card { padding: 28px; } }
@media (hover: hover) { .card:hover, .tl-body:hover { transform: translateY(-4px); box-shadow: var(--g-light), var(--g-lift-hi); } }
.svc-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--sage); color: var(--green); display: grid; place-items: center; margin-bottom: 20px; }
.svc-icon .ic { width: 28px; height: 28px; }
.svc h3 { margin-top: 0; }
.checks { display: grid; gap: 9px; margin: 14px 0 18px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.checks .ic { width: 22px; height: 22px; color: var(--green); margin-top: 2px; background: var(--sage); border-radius: 50%; padding: 3px; }

/* ---- Hero ---- */
.hero { padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 5vw, 80px); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; right: -18vw; top: -20vw; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(var(--lampe), .16), rgba(var(--lampe), 0)); pointer-events: none; } /* lampa oppe til høyre */
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; position: relative; }
.hero-grid > *, .hero-visual, .hv-main, .ph-grid > *, .calc-grid > *, .test-grid > *, .about-grid > * { min-width: 0; }
.hero-copy .lead { margin-top: 1.1em; }
.hero-btns { margin-top: 2em; }
.hero-note { font-size: .92rem; color: var(--muted); margin-top: 1.4em; display: flex; align-items: center; gap: .5em; }
.hero-visual { position: relative; min-height: 440px; }
.hv-main { padding: 26px 26px 22px; position: relative; z-index: 2; animation: floaty 7s ease-in-out infinite; }
.hv-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; color: var(--muted); margin-bottom: 14px; }
.hv-chart { width: 100%; height: auto; aspect-ratio: 320 / 140; }
.hv-plot { position: relative; }
.hv-plot::after { content: ""; position: absolute; inset: -4px -8px -4px -4px; background: var(--kort); transform-origin: 100% 50%; animation: avdekk 1.8s var(--ease) .3s forwards; pointer-events: none; } /* linja er tegnet statisk – dekket trekker seg mot høyre (bare transform) */
@keyframes avdekk { to { transform: scaleX(0); } }
.hv-area { opacity: 0; animation: fadein 1s ease 1.2s forwards; }
.hv-end { opacity: 0; animation: fadein .4s ease 2s forwards; }
@keyframes fadein { to { opacity: 1; } }
.hv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.hv-row > div { display: flex; flex-direction: column; }
.hv-k { font-size: .78rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.hv-v { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--green); font-variant-numeric: tabular-nums; }
.hv-neg { color: var(--ink); }
.hv-pill { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 11px 12px; border-radius: 10px; font-weight: 700; font-size: .95rem; position: absolute; z-index: 3; }
.hv-pill .ic { width: 24px; height: 24px; color: var(--green); background: var(--flaske-soft); border-radius: 50%; padding: 4px; }
.hv-p1 { top: -16px; left: -18px; animation: floaty 6s ease-in-out .8s infinite; }
.hv-p2 { bottom: 36px; right: -14px; animation: floaty 8s ease-in-out .4s infinite; }
.hv-badge { position: absolute; left: -28px; bottom: -22px; width: 124px; height: 124px; border-radius: 50%; background: var(--black); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; box-shadow: var(--shadow-lg); animation: floaty 9s ease-in-out 1.2s infinite; }
.hv-badge-n { font-size: 1.9rem; font-weight: 700; color: var(--green-light); letter-spacing: -.03em; line-height: 1; }
.hv-badge-t { font-size: .72rem; font-weight: 700; line-height: 1.15; margin-top: 4px; padding: 0 12px; }
.hero-portrait .portrait-ring { width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-inline: auto; border: 8px solid #fff; box-shadow: var(--shadow-lg); position: relative; z-index: 2; }
.hero-portrait .portrait-ring img { width: 100%; height: 100%; object-fit: cover; }
.hero-portrait .hv-p1 { top: 24px; left: 4px; }
.hero-portrait .hv-p2 { bottom: 24px; right: 4px; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-visual { min-height: 0; margin: 0 14px; padding-top: 26px; padding-bottom: 64px; }
  .hv-badge { left: -8px; bottom: -44px; width: 104px; height: 104px; }
  .hv-badge-n { font-size: 1.6rem; }
  .hv-p1 { left: -6px; top: 0; }
  .hv-p2 { right: -6px; bottom: -26px; }
}
@media (max-width: 480px) {
  .hv-main { padding: 20px 16px 16px; }
  .hv-v { font-size: 1.2rem; }
  .hv-row { gap: 6px; }
  .hv-row > div { min-width: 0; }
  .hv-k { font-size: .66rem; letter-spacing: .04em; overflow-wrap: anywhere; }
  .hv-pill { font-size: .85rem; padding: 9px 13px 9px 10px; }
}
@media (max-width: 360px) { .hv-row { grid-template-columns: 1fr 1fr; } .hv-row > div:last-child { grid-column: 1 / -1; } }

/* ---- Pagehero ---- */
.ph-icon::after { content: ""; position: absolute; inset: -40px; border-radius: 50%; border: 1.5px dashed rgba(125, 95, 42, .45); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ph-icon::after { animation: none; } }

/* ---- Stats ---- */
.stats { padding: 0 0 clamp(48px, 5vw, 80px); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { border-radius: var(--r); padding: 26px 22px; display: flex; flex-direction: column; gap: 6px; }
.stat-v { font-family: var(--display); font-size: clamp(2.2rem, 1.5rem + 2vw, 3.4rem); font-weight: 740; letter-spacing: -.02em; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
/* Enheten («+», «−», «%», «×») står i Schibsted – statisk tall = Newsreader, levende tall = Schibsted */
.tb-v .u, .stat-v .u { font-family: var(--font); font-weight: 600; font-size: .62em; letter-spacing: 0; margin: 0 .04em; vertical-align: .12em; }
.stat-l { color: var(--muted); font-weight: 600; line-height: 1.3; }
@media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .stat-grid { gap: 10px; } .stat { padding: 18px 14px; } .stat-l { font-size: .92rem; hyphens: auto; } }
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.test-opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.call-card { max-width: calc(100% - 4px); }
.call-text { min-width: 0; }
.call-sub span { white-space: nowrap; }

/* ---- Prosjekter ---- */
.project { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pc-shot { position: relative; background: linear-gradient(135deg, var(--sage), #fff); padding: 28px 28px 0 28px; height: 300px; overflow: hidden; }
.pc-desktop { background: #fff; border-radius: 10px 10px 0 0; box-shadow: var(--shadow-lg); overflow: hidden; width: 86%; }
.pc-bar { height: 22px; display: flex; gap: 5px; align-items: center; padding: 0 10px; background: #F0F3F1; }
.pc-bar i { width: 7px; height: 7px; border-radius: 50%; background: #D4DBD7; }
.pc-desktop img { width: 100%; height: auto; }
.pc-mobile { position: absolute; right: 22px; bottom: -28px; width: 26%; max-width: 128px; border-radius: 10px; background: var(--black); padding: 6px; box-shadow: var(--shadow-lg); overflow: hidden; transition: transform .5s var(--ease); }
.pc-mobile img { border-radius: 10px; width: 100%; height: auto; }
.project:hover .pc-mobile { transform: translateY(-10px) rotate(-2deg); }
.pc-body { padding: 26px 28px 30px; }
.pc-body .kicker { margin-bottom: .5em; }
.case { margin: 16px 0 4px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--sage); border: 1px solid var(--g-edge); display: grid; gap: 8px; }
.case-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; }
.case dt { font-size: .82rem; font-weight: 700; color: var(--green-deep); }
.case dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.uten-case { margin-top: 12px; }
@media (max-width: 480px) { .case { padding: 12px 14px; } .case-row { grid-template-columns: 1fr; gap: 2px; } }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.tag { font-size: .78rem; font-weight: 500; letter-spacing: .04em; padding: 5px 11px; border-radius: 10px; background: var(--sage); color: var(--green-deep); }
@media (max-width: 480px) { .pc-shot { height: 230px; padding: 20px 18px 0; } .pc-mobile { right: 14px; } .pc-body { padding: 22px 20px 24px; } }

/* ---- Prosess ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; }
.step { border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.step-n { width: 48px; height: 48px; border-radius: 50%; background: var(--black); color: var(--green-light); font-weight: 700; display: grid; place-items: center; font-size: 1.15rem; flex: none; }
.step h3 { font-size: 1.15rem; margin-bottom: .35em; }
.step p { margin: 0; color: var(--muted); font-size: 1rem; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { flex-direction: row; align-items: flex-start; } }

/* ---- Om ---- */
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.about-img { position: relative; }
.portrait-frame { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.about-pill { right: -10px; bottom: 28px; }
.about-copy .checks { margin-top: 20px; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 36px; } .about-img { max-width: 420px; } .about-pill { right: 8px; } }

/* ---- Sitat ---- */
.quote-sec { padding-top: 0; }
.quote-logo { display: block; height: 30px; width: auto; max-width: 180px; margin: 0 auto 16px; object-fit: contain; }
/* Referansen fra Blivakker.no lyser rosa (Blivakkers farge): rund glød bak kortet, rosa anførselstegn og kant */
.quote-sec.glow-rosa { overflow: hidden; } /* gløden er bredere enn mobilskjermen – klipp så siden ikke får sidescroll */
.quote-sec.glow-rosa .wrap { position: relative; isolation: isolate; }
.quote-sec.glow-rosa .wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(820px, 120%); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(244, 96, 161, .30) 0%, rgba(244, 96, 161, .12) 42%, rgba(244, 96, 161, 0) 70%); z-index: -1; pointer-events: none; }
.quote-sec.glow-rosa .quote { border-color: rgba(229, 16, 108, .40); box-shadow: var(--g-light), 0 24px 60px -28px rgba(229, 16, 108, .45), 0 2px 10px -4px rgba(229, 16, 108, .22); }
.glow-rosa .quote-mark { color: var(--rosa-edge); } /* rosa-edge – aliaset ville gitt messing-lys 1,6:1 på hvitt */
.quote-sec.glow-rosa .kicker::before, .quote-sec.glow-rosa .kicker::after { background: var(--rosa-edge); }
.quote-sec.glow-rosa .kicker { color: var(--rosa-deep); } /* rosa erstatter all messing/champagne i sitatseksjonen – én varm aksent */
.quote { max-width: 860px; margin-inline: auto; padding: 40px 44px; text-align: center; position: relative; }
.quote blockquote { margin: 0 0 20px; font-family: var(--display); font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); font-weight: 600; font-style: normal; line-height: 1.35; letter-spacing: -.005em; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.quote figcaption strong { color: var(--ink); font-weight: 600; }
.quote .source { margin-top: 14px; }
@media (max-width: 480px) { .quote { padding: 28px 22px; } }

/* ---- Innvendinger ---- */
.obj { position: relative; padding-top: 34px; }
.obj::before { content: ""; position: absolute; top: 0; left: 30px; width: 44px; height: 44px; border-radius: 50%; background: var(--black); transform: translateY(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2C88F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.5V17A2.5 2.5 0 0 1 4 14.5z'/%3E%3C/svg%3E"); background-size: 22px; background-position: center; background-repeat: no-repeat; }
.obj-q { font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: .5em; }
.obj-a { margin: 0; color: var(--muted); }

/* ---- FAQ ---- */
.faqs { display: grid; gap: 10px; }
.faq { border-radius: var(--r-sm); } /* lite fra mixin */
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 700; font-size: 1.08rem; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.chev { width: 34px; height: 34px; border-radius: 50%; background: var(--sage); flex: none; position: relative; box-shadow: 0 0 0 1px rgba(125, 95, 42, .30); transition: transform .3s var(--ease); }
.chev::after { content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 8px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); }
.faq[open] .chev { transform: rotate(180deg); background: var(--messing-lys); }
.faq-a { padding: 0 22px 20px; color: var(--muted); }
.faq-a p { margin: 0; }

/* ---- CTA-boks ---- */
.cta-sec { padding-top: 0; }
.cta-box { color: #fff; border-radius: 10px; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: 1.3fr auto; gap: 32px; align-items: center; position: relative; overflow: hidden; } /* mørkt glass (.9→.86) + blur-sm fra mixin */
.cta-box::before { content: ""; position: absolute; inset: 12px; border-radius: 10px; pointer-events: none; border: 1px solid rgba(184, 151, 90, .45); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .05); } /* innfelt messingramme = panellista i miniatyr */
.cta-box h2 { color: #fff; margin-bottom: .3em; }
.cta-box { border-radius: 10px; }
.cta-box .lead { color: rgba(255, 255, 255, .78); margin: 0; }
.cta-box .btns { margin: 0; }
.cta-box .btn-dark { background: var(--flaske); color: #fff; } /* grønn på sort boks */
.cta-box .btn-dark:hover { background: var(--linpapir); box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(226, 200, 143, .28), 0 14px 26px -12px rgba(0, 0, 0, .6); }
.cta-box .btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .25); }
.cta-box .btn-ghost:hover { border-color: #fff; }
@media (max-width: 860px) { .cta-box { grid-template-columns: 1fr; } }

/* ---- Kalkulator ---- */
.calc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.calc { display: grid; gap: 16px; }
.calc label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.calc input[type="number"] { font: inherit; font-size: 1.1rem; font-weight: 600; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); min-height: 50px; width: 100%; }
.calc input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-color: var(--green); box-shadow: 0 0 0 7px var(--green-soft); } /* grønn ring 7,42:1 + champagne-halo utenpå */
.calc input[type="range"] { width: 100%; accent-color: var(--green); height: 44px; }
.calc output { color: var(--green); }
.calc-out { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: var(--r-sm); background: var(--sage); margin-top: 6px; }
.calc-out > div { display: flex; flex-direction: column; }
.calc-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; position: relative; background: conic-gradient(var(--flaske) calc(var(--p) * 1%), var(--sage) 0); } /* ringen fylles etter hvor krevende tallet er (@property --p under «Tester») */
.calc-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.calc-ring.warn { background: conic-gradient(var(--sennep) calc(var(--p) * 1%), #F6EEDC 0); } /* 3,64:1 mot sporet */
.calc-k { font-size: .78rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.calc-v { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; color: var(--green-deep); line-height: 1.1; font-variant-numeric: tabular-nums; }
.calc-s { color: var(--muted); font-size: .95rem; }
.calc .source { margin: 4px 0 0; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Priser ---- */
.price { position: relative; display: flex; flex-direction: column; }
.price-featured { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft), var(--shadow-lg); }
.price-flag { position: absolute; top: -14px; left: 26px; background: var(--black); color: var(--green-light); font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 10px; }
.price-v { font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--green-deep); line-height: 1; margin: 6px 0 14px; }
.price-v small { font-size: 1rem; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.price .checks { flex: 1; }

/* ---- Kontakt ---- */
.contact-card { display: flex; flex-direction: column; }
.contact-card p { color: var(--muted); flex: 1; }
.status-line { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 28px; font-weight: 600; color: var(--muted); }

/* ---- Tidslinje ---- */
.timeline { display: grid; gap: 14px; position: relative; }
.tl { display: grid; grid-template-columns: 120px 1fr; gap: 20px; }
.tl-when { font-weight: 700; color: var(--green); letter-spacing: -.01em; padding-top: 24px; position: relative; }
.tl-when::after { content: ""; position: absolute; right: -16px; top: 32px; width: 12px; height: 12px; border-radius: 50%; background: var(--flaske); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
.tl-body { border-radius: var(--r-sm); padding: 20px 24px; transition: transform .35s var(--spring); }
.tl-body h3 { font-size: 1.12rem; margin-bottom: .3em; }
.tl-body p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .tl { grid-template-columns: 1fr; gap: 6px; } .tl-when { padding-top: 0; } .tl-when::after { display: none; } }
.certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cert { display: flex; align-items: center; gap: 12px; border-radius: var(--r-sm); padding: 16px 18px; font-weight: 700; }
.cert .ic { color: var(--green); width: 28px; height: 28px; }
.certs-sec { padding-top: 0; }
@media (max-width: 760px) { .certs { grid-template-columns: 1fr; } }

/* ---- Prosa ---- */
.prose h2 { margin-top: 1.6em; font-size: 1.7rem; font-weight: 500; }
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }
.prose li { margin-bottom: .35em; }
.prose a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--green); }

/* ---- Footer ---- */
/* Footer: tett (.96 – blur på en 800 px høy flate har ingenting å bryte), men som et kort oppå siden med runde topphjørner; kolonnene er mørke glasskort uten blur */
.site-footer { background: rgba(11, 13, 12, .97); color: rgba(255, 255, 255, .8); border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); border-radius: var(--r) var(--r) 0 0; margin-top: clamp(48px, 6vw, 96px); padding: clamp(56px, 6vw, 96px) 0 calc(28px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 460px; pointer-events: none; }
.site-footer.under-cta::before { background: radial-gradient(circle 520px at 50% 0, rgba(38, 74, 54, .42), rgba(38, 74, 54, 0)); } /* grønn refleks fra panelet */
.site-footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(184, 151, 90, .6), transparent); } /* messinglist */
.ftr { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: 16px; position: relative; }
.ftr-brand, .ftr-col, .fotnoter { padding: 22px 24px; border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 34%), rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
@media (max-width: 560px) { .ftr-brand, .ftr-col, .fotnoter { padding: 18px; } }
.ftr-brand .logo { color: #fff; }
.ftr-brand .logo-b { color: var(--messing-lys); }
.ftr-brand .logo-mark circle { fill: var(--bein-t); }
.ftr-brand .logo-mark path { stroke: var(--flaske); }
.ftr-brand p { margin: 18px 0; max-width: 34ch; }
.ftr-status { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.ftr-status .status-dot::before { background: var(--signal); }
.ftr h2, .fotnoter h2 { font-family: var(--font); color: #fff; margin-bottom: 14px; font-size: .92rem; letter-spacing: 0; font-weight: 600; line-height: 1.25; } /* etikett, ikke serif (opsz 72 tåler ikke 15 px) */
.ftr-col ul { display: grid; gap: 2px; }
.ftr-col a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.ftr-col a:hover { color: var(--messing-lys); }
.ftr-contact .ic { width: 20px; height: 20px; color: var(--green-light); }
.ftr-plain { display: inline-flex; align-items: center; gap: 10px; }
.ftr-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; color: rgba(255, 255, 255, .6); position: relative; }
.ftr-bottom p { margin: 0; }
.totopp { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); display: grid; place-items: center; color: #fff; flex: none; transition: transform .25s var(--spring); }
.totopp:hover { background: var(--flaske); transform: scale(1.15); }
.deck-dot:hover i { transform: scale(1.15); }
.ic-up { transform: rotate(-90deg); }
@media (max-width: 980px) { .ftr { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr { grid-template-columns: 1fr; gap: 28px; } .ftr-brand .logo { justify-content: flex-start; } .ftr-bottom { flex-direction: column; align-items: flex-start; } }

/* ---- Sticky CTA (mobil) ---- */
.sticky-cta { display: none; }
@media (max-width: 1080px) {
  /* Glasspille (fyll/kant/blur fra mixin). Starter skjult (html.js settes synkront i <head>), fjærer inn når hero-knappene har rullet ut, og trekker seg tilbake ved hver annen Ring/SMS-flate (app.js) */
  .sticky-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; padding: 8px; border-radius: 10px; transition: transform .5s var(--spring), visibility 0s .5s; }
  .js .sticky-cta { transform: translateY(140%); visibility: hidden; } /* visibility + inert (app.js): tastatur/VoiceOver lander aldri på skjulte lenker */
  .js .sticky-cta.show { transform: none; visibility: visible; transition-delay: 0s; }
  .sticky-cta .btn { min-height: 48px; padding: 0 1em; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* plass til sticky-CTA ligger i footeren – ingen bein-stripe under den */
}

@media (prefers-reduced-motion: reduce) { .sticky-cta, .site-header::after { transition: none; } }

/* ---- Reveal ---- */
/* :not(.in) i stedet for .in{transform:none}, så hover-løft og .pressed får virke etter reveal; .settled (app.js) bytter til kortets fjær når det har landet */
.js .reveal { transition: opacity .7s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms); }
.js .reveal:not(.in) { opacity: 0; transform: translateY(22px); }
.reveal.settled { transition: transform .35s var(--spring); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal, .js .reveal:not(.in) { opacity: 1; transform: none; transition: none; }
  .hv-main, .hv-pill, .hv-badge, .ph-icon, .hv-plot::after, .hv-area, .hv-end { animation: none !important; }
  .hv-plot::after { display: none; } .hv-area, .hv-end { opacity: 1; }
}

/* ---- Hero-tillegg: trust-pills, lenke, anropskort ---- */
.trust { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 1.4em; }
.trust li { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; font-weight: 600; color: var(--muted); }
.trust .ic { width: 20px; height: 20px; color: var(--green); background: var(--flaske-soft); border-radius: 50%; padding: 3px; }
.hero-link { margin-top: 1.2em; }
.hero-call .portrait-ring { width: min(100%, 400px); }
.call-card { position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 10px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; z-index: 4; width: max-content; max-width: calc(100% - 16px); animation: floaty 7s ease-in-out .6s infinite; }
.call-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; }
.call-avatar img { width: 100%; height: 100%; object-fit: cover; }
.call-text { display: flex; flex-direction: column; line-height: 1.2; }
.call-text strong { font-size: 1rem; }
.call-sub { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.call-sub .status-dot { width: 8px; height: 8px; }
.call-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--flaske); color: #fff; display: grid; place-items: center; flex: none; margin-left: 4px; }
.call-btn .ic { width: 20px; height: 20px; }
.hero-call .hv-p1 { top: 10px; left: 0; }
.hero-call .hv-p2 { top: 58%; right: -4px; bottom: auto; }
@media (max-width: 980px) {
  .hero-call { padding-top: 10px; padding-bottom: 34px; }
  .hero-call .portrait-ring { width: min(100%, 320px); }
  .call-card { bottom: -4px; }
  .hero-call .hv-p1 { top: 4px; left: -2px; }
  .hero-call .hv-p2 { right: -2px; top: 56%; }
}
@media (max-width: 480px) { .call-text strong { font-size: .95rem; } .call-card { gap: 9px; padding: 8px 10px; } .call-avatar { width: 40px; height: 40px; } }

/* ---- Bransjevelger ---- */
.bransje { padding: 22px; }
/* Glass-segmentkontroll: sporet er glass-lite (mixin), den valgte fanen er en grønn brikke (.chips-ind, app.js) som GLIR til den du trykker */
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding: 6px; border-radius: 10px; } /* 30 px = halve enradshøyden (46 + 2·6 + 2·1): pille på én rad, avrundet rektangel når fanene bryter – aldri oval */
.chips-ind { position: absolute; left: 0; top: 0; width: var(--w, 0px); height: var(--h, 46px); border-radius: 10px; background: var(--flaske); z-index: 0; box-shadow: var(--g-dark-light), 0 8px 18px -10px rgba(38, 74, 54, .6); transform: translate3d(var(--x, 0px), var(--y, 0px), 0); transition: transform .45s var(--spring); } /* bredden settes øyeblikkelig (--w), bare glidningen springer */
.chips-ind.noanim { transition: none; }
.chip { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px 0 12px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; transition: transform .2s var(--spring); }
.chip:hover { background: rgba(255, 255, 255, .6); }
.chip[aria-selected="true"] { color: #fff; background: var(--flaske); }      /* grønn FØR JS har laget indikatoren (første fane er aria-selected i build.py) */
.chips.has-ind .chip[aria-selected="true"] { background: transparent; }  /* indikatoren tar over */
.chip .ic { width: 20px; height: 20px; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--spring); } /* fast bredde = ingen layout-hopp */
.chip[aria-selected="true"] .ic { opacity: 1; transform: none; }
.bransje-panel { padding: 8px 6px 4px; }
.bransje-panel.slide { animation: slidein .4s var(--spring); }
.bransje-panel.slide .br-result { animation: fadeUp .45s var(--spring) .12s both; } /* resultatkortet lander etter rådene */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }
.br-val { position: relative; padding-bottom: 6px; }
.br-val::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--flaske); transform-origin: 0 50%; }
.bransje-panel.slide .br-val::after { animation: strek .5s var(--spring) .4s both; } /* keyframe, ikke transition – panelet kommer fra display:none */
@keyframes strek { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .chips-ind, .chip .ic { transition: none; } .bransje-panel.slide .br-result, .bransje-panel.slide .br-val::after { animation: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.bransje-panel h3 { font-size: 1.5rem; }
.bransje-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 10px; }
.br-result { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; margin: 18px 0 4px; padding: 14px 18px; border-radius: var(--r-sm); }
.br-val { font-family: var(--font); font-weight: 600; font-size: 1.7rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); white-space: nowrap; }
.br-lab { color: var(--muted); font-size: .95rem; line-height: 1.45; }
@media (max-width: 480px) { .br-result { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; } .br-val { font-size: 1.5rem; } }
@media (max-width: 480px) { .bransje { padding: 16px; } .chip { padding: 0 13px 0 10px; font-size: .95rem; } .bransje-actions .btn { width: 100%; } }

/* ---- Tester (30-sek, nettside-sjekk) ---- */
.test-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .test-grid { grid-template-columns: 1fr; gap: 28px; } }
.test { display: grid; gap: 18px; min-height: 360px; align-content: start; }
.test-head { display: flex; align-items: center; gap: 18px; }
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; background: conic-gradient(var(--flaske) calc(var(--p) * 1%), var(--sage) 0); display: grid; place-items: center; position: relative; }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.ring-t { position: relative; font-weight: 700; font-size: .95rem; color: var(--green-deep); }
.ring.big { width: 120px; height: 120px; margin: 0 auto 16px; }
.ring.big::before { inset: 11px; }
.ring.big .ring-t { font-size: 1.6rem; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --mx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --my { syntax: '<length>'; inherits: false; initial-value: 0px; }
.test-q { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.test-n { font-size: .82rem; font-weight: 700; letter-spacing: 0; color: var(--muted); margin: 0; }
.test-opts { display: grid; gap: 10px; }
.test-opts.two { grid-template-columns: 1fr 1fr; }
.opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 18px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); font: inherit; font-weight: 700; font-size: 1.02rem; color: var(--ink); cursor: pointer; transition: transform .2s var(--spring); }
.opt .ic { width: 20px; height: 20px; color: var(--green); }
.opt:hover { border-color: var(--green); background: var(--sage); }
.test-result { text-align: center; }
.test-result.pop { animation: pop .5s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.result-check { width: 64px; height: 64px; border-radius: 50%; background: var(--flaske); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; }
.result-check .ic { width: 30px; height: 30px; animation: hake .5s var(--spring) .2s both; } /* bare opacity/transform */
@keyframes hake { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.test-result h3 { font-size: 1.6rem; }
.test-result .btns { justify-content: center; }
.sjekk-bar { height: 8px; border-radius: 10px; background: var(--sage); overflow: hidden; }
.sjekk-bar i { display: block; height: 100%; width: 100%; background: var(--flaske); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--spring); } /* transform, ikke width */
.opt.picked, .opt.picked:hover { background: var(--flaske); border-color: var(--green); color: #fff; } .opt.picked .ic { color: #fff; } /* bekreftet svar i 220 ms før neste spørsmål */
.test-q.in { animation: fadeUp .4s var(--spring); }
@media (prefers-reduced-motion: reduce) { .test-q.in { animation: none; } .sjekk-bar i { transition: none; } }
.misses { display: grid; gap: 8px; text-align: left; margin: 10px 0 18px; }
.misses li { position: relative; padding-left: 26px; color: var(--muted); }
.misses li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--flaske); }
.calc output { font-variant-numeric: tabular-nums; }

/* ---- Garanti ---- */
.garanti { padding-top: 0; }
.garanti-box { background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 34%), linear-gradient(165deg, rgba(232, 239, 233, .88), rgba(255, 255, 255, .72)); border: 1px solid var(--g-edge); box-shadow: var(--g-light); border-radius: 10px; padding: clamp(36px, 5vw, 60px); text-align: center; } /* salvie-tonet glass-lite */
.garanti-box .kicker { justify-content: center; }
.garanti-box .lead { margin-inline: auto; }
.garanti-check { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #2A2F2C, var(--black) 64%); color: var(--messing-lys); display: grid; place-items: center; margin: 0 auto 22px; box-shadow: 0 0 0 1px var(--messing), 0 0 0 9px #F3EEE3, 0 0 0 10px rgba(125, 95, 42, .40), inset 0 1px 0 rgba(255, 255, 255, .14), var(--e2); } /* segl i sort lakk */
.garanti-check .ic { width: 44px; height: 44px; opacity: 0; transform: scale(.6); transition: opacity .3s .3s, transform .5s var(--spring) .3s; }
.garanti-box.in .garanti-check .ic { opacity: 1; transform: none; } /* bare opacity/transform */

/* ---- Sitat-tillegg ---- */
.quote .kicker { justify-content: center; }
.quote-mark { font-family: var(--display); font-size: 5rem; line-height: .6; color: var(--messing); font-weight: 800; margin: 6px 0 14px; }

/* ---- Fotnoter i footer ---- */
.fotnoter { margin-bottom: 24px; position: relative; }
.fotnoter h2 { margin-bottom: 10px; }
.fotnoter ol { display: grid; gap: 6px; font-size: .9rem; color: rgba(255, 255, 255, .65); }
.fotnoter li { display: flex; gap: 10px; }
.fn-n { color: var(--green-light); font-weight: 700; flex: none; width: 1em; }

/* Frosted glass på kort (sjekkliste 7): fyll/kant/blur kommer fra mixin-lista sist i fila; seksjonsvasken står under «Seksjoner». */

/* ---- Neste steg (interne lenker) ---- */
.neste { display: flex; flex-direction: column; }
.neste p { color: var(--muted); flex: 1; }
.neste-sec { padding-top: 0; }
.quote-link { margin: 14px 0 0; display: flex; justify-content: center; }

/* ---- Fokus ---- */
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .chip:focus-visible, .opt:focus-visible, .totopp:focus-visible { border-radius: 10px; }
.cta-box :focus-visible, .site-footer :focus-visible { outline-color: var(--green-light); }

/* ---- Touch: ingen hengende hover-tilstander ---- */
@media (hover: none) {
  .btn-dark:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 8px 18px -10px rgba(var(--sk), .55); }
  .btn-green:hover { transform: none; background: var(--flaske); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 8px 18px -10px rgba(38, 74, 54, .6); }
  .btn-ghost:hover { transform: none; background: transparent; color: var(--black); box-shadow: none; }
  .hero-foto .btn-ghost:hover { background: var(--g-dark); color: #fff; }
  .project:hover .pc-mobile { transform: none; }
  .chip:not([aria-selected="true"]):hover { background: transparent; }
  .opt:hover { border-color: rgba(var(--sk), .14); background: var(--kort); }
  .card:hover, .tl-body:hover { transform: none; box-shadow: var(--topp), var(--e2); }
  .lenke:hover .ic-arrow { transform: none; }
  .totopp:hover { background: radial-gradient(circle at 34% 26%, #2A2F2C, var(--black) 64%); transform: none; }
  .deck-dot:hover i { transform: none; }
  .cta-box .btn-ghost:hover { border-color: var(--messing); }
}
/* Trykk: glasset løfter seg mot fingeren (ikke press-ned). Står ETTER (hover:none)-blokka og hover-reglene med lik spesifisitet. */
.btn.pressed, .chip.pressed, .opt.pressed, .card.pressed, .totopp.pressed { transform: scale(1.03); transition-duration: .12s; }
.deck-dot.pressed i { transform: scale(1.9); }

/* ---- Innvendinger som dropdowns ---- */
.objs .obj { padding: 0; }
.objs .obj summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px 18px 64px; min-height: 60px; position: relative; }
.objs .obj summary::-webkit-details-marker { display: none; }
.objs .obj::before { top: 30px; left: 16px; transform: translateY(-50%); width: 36px; height: 36px; background-size: 18px; }
.objs .obj-q { font-size: 1.08rem; margin: 0; }
.objs .obj-a { padding: 0 22px 20px 64px; margin: 0; }
@media (max-width: 480px) { .objs .obj summary { padding-left: 56px; } .objs .obj-a { padding-left: 56px; } .objs .obj::before { left: 12px; } }

/* ---- Redusert bevegelse: alt som pulserer, svever eller tegnes ---- */
@media (prefers-reduced-motion: reduce) {
  .call-card, .status-dot::after, .hv-dot::after, .bransje-panel.slide, .test-result.pop, .result-check .ic, .garanti-box.in .garanti-check .ic, .ph-icon::after, .hv-main, .hv-pill, .hv-badge, .ph-icon { animation: none !important; }
  .status-dot::after, .hv-dot::after { transform: scale(1.8); opacity: .4; } /* statisk ring */
  .result-check .ic, .garanti-check .ic { opacity: 1; transform: none; transition: none; }
}

/* ---- 404 ---- */
.page-404 .pagehero { min-height: 60vh; display: flex; align-items: center; }

/* ---- Landscape-mobil / Dynamic Island ---- */
@media (max-width: 1080px) and (orientation: landscape) {
  .site-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .wrap { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (max-width: 1080px) { .hdr { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } }

/* ---- Print ---- */
@media print { .site-header, .sticky-cta, .totopp, .hero-visual { display: none; } body { padding: 0; background: #fff; } .reveal { opacity: 1; transform: none; } }

/* ---- Telefon-forhåndsvisning av prosjekter (alle er på mobil) ---- */
.pc-shot { display: flex; justify-content: center; align-items: flex-start; padding: 26px 20px 0 !important; height: 340px; min-height: 0 !important; overflow: hidden; }
.phone { position: relative; width: 224px; max-width: 72%; aspect-ratio: 9 / 19; border-radius: 34px; background: var(--black); padding: 7px; box-shadow: 0 28px 54px -26px rgba(var(--sk), .65), 0 0 0 1px rgba(255, 255, 255, .25) inset; flex: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.phone-screen { position: relative; height: 100%; border-radius: 27px; overflow: hidden; background: #fff; }
.phone-shot { width: 100%; height: auto; display: block; transform: translate3d(0, var(--y, 0px), 0); will-change: transform; }
.phone.is-hover .phone-shot { transition: transform 6s linear; }
.phone-notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 38%; height: 20px; background: var(--black); border-radius: 0 0 14px 14px; z-index: 2; }
.phone-url { display: none; }
.project:hover .phone, .scard:hover .phone { transform: translateY(-8px); }
@media (max-width: 480px) { .pc-shot { height: 300px; padding-top: 20px !important; } .phone { width: 200px; border-radius: 30px; } .phone-screen { border-radius: 24px; } }
@media (hover: none) { .project:hover .phone, .scard:hover .phone { transform: none; } }
@media (prefers-reduced-motion: reduce) { .phone.is-hover .phone-shot { transition: none; } }

/* ================= Seksjoner og effekter fra konsept 2 (Kyst), restylet i konsept 1-paletten ================= */
/* ---- Hero-foto (forsiden) ---- */
.hero-foto { position: relative; min-height: 100svh; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--black); color: #fff; padding: calc(var(--hdr) + 40px) 0 clamp(64px, 9vh, 112px); isolation: isolate; }
.hf-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hf-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 0; will-change: transform; }
/* ≥761 px: headerkapselen svever over selve fotoet (fotoet starter på toppen) */
@media (min-width: 761px) { .hf-media { top: 0; } .hero.hero-foto { background: var(--black); } }
@media (max-width: 760px) { .hf-media img { object-position: 50% 28%; } }
.hf-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--shade), .80) 0%, rgba(var(--shade), .74) 56%, rgba(var(--shade), 0) 88%), radial-gradient(circle 520px at 30% 50%, rgba(var(--shade), .40), rgba(var(--shade), 0) 70%), radial-gradient(circle 900px at 16% 100%, rgba(var(--shade), .8), rgba(var(--shade), 0)), linear-gradient(180deg, rgba(var(--shade), .2) 0%, rgba(var(--shade), 0) 28% 42%, rgba(var(--shade), .55) 70%, rgba(var(--shade), .9) 100%); } /* skog-scrim fra venstre + sirkel bak h1: messingordet ≥ 4,5 i lyseste punkt */
.hf-copy { position: relative; z-index: 2; max-width: 760px; margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.hf-copy .kicker { border-radius: 10px; padding: 6px 14px 6px 10px; } /* mørkt glass fra mixin */
.hf-copy .kicker { color: var(--green-light); }
.hf-copy .kicker::before { background: var(--messing-lys); }
.hf-copy h1 { font-size: clamp(2.9rem, 2rem + 5vw, 6.2rem); letter-spacing: -.035em; line-height: 1.0; color: #fff; text-shadow: 0 2px 8px rgba(var(--shade), .65), 0 2px 24px rgba(var(--shade), .35); margin-bottom: .35em; }
.hf-copy .lead { color: rgba(255, 255, 255, .9); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); max-width: 40ch; text-shadow: 0 1px 14px rgba(var(--shade), .4); }
.hf-copy .hero-btns { margin-top: 1.6em; }
.hf-copy .btn-dark { background: var(--flaske); color: #fff; box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .6); }
.hf-copy .btn-dark:hover { box-shadow: 0 0 0 4px rgba(226, 200, 143, .45), 0 16px 36px -16px rgba(0, 0, 0, .6); }
.hero-foto .btn-ghost:hover { border-color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 34%), linear-gradient(165deg, rgba(var(--sk), .7), rgba(var(--sk), .56)); }
.hf-copy .trust { margin-top: 1.5em; }
.hf-copy .trust li { color: rgba(255, 255, 255, .88); }
.hf-copy .trust .ic { background: var(--messing-lys); color: var(--ink); }
.hf-pill { position: absolute; z-index: 2; top: calc(var(--hdr) + 56px); right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .95rem; will-change: transform; } /* kapsel som who-chippen; glass fra mixin */
.hf-pill b { font-weight: 700; }
.hf-pill .ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--flaske-soft); color: var(--ink); }
.hf-cue { position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom: 46px; width: 44px; height: 44px; display: grid; place-items: center; } /* høyre, så den aldri treffer trust-pillene (1081–1150 px) */
.hf-cue-dot { width: 22px; height: 36px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 10px; position: relative; }
.hf-cue-dot::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--messing-lys); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(12px); opacity: 0; } 61% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hf-cue-dot::after { animation: none; transform: translateY(6px); } }
@media (max-width: 980px) { .hf-pill { top: calc(var(--hdr) + 28px); font-size: .9rem; } }
@media (max-width: 760px) {
  .hero-foto { min-height: 100svh; justify-content: flex-end; }
  .hf-shade { background: radial-gradient(circle 300px at 30% 46%, rgba(var(--shade), .35), rgba(var(--shade), 0) 70%), radial-gradient(circle 480px at 45% 50%, rgba(var(--shade), .82), rgba(var(--shade), 0)), linear-gradient(180deg, rgba(var(--shade), .24) 0%, rgba(var(--shade), 0) 22% 32%, rgba(var(--shade), .66) 58%, rgba(var(--shade), .94) 100%); } /* to sirkler – messingordet ≥ 4,5 i lyseste punkt */
  .hf-copy h1 { font-size: clamp(2.3rem, 1.4rem + 5vw, 3.4rem); }
  .hf-copy .lead { max-width: none; }
  .hf-copy .hero-btns .btn { flex: 1 1 100%; white-space: nowrap; }
  .hf-copy .trust { gap: 6px 12px; }
  .hf-copy .trust li { font-size: .86rem; }
  .hf-pill { right: var(--gutter); left: auto; top: calc(var(--hdr) + 14px); font-size: .84rem; padding: 9px 13px 9px 9px; }
  .hf-pill .ic { width: 26px; height: 26px; }
  .hf-cue { display: none; }
}
@media (max-width: 360px) { .hf-pill span { max-width: 170px; line-height: 1.25; } }
@media (max-width: 760px) and (max-height: 700px) { .hf-pill { display: none; } } /* lave telefoner: hvem-brikken ville dekket ROAS-brikken */

/* ---- Tall-bånd ---- */
/* «Arket»: tallbåndet legger seg 28 px over fotoet med runde topphjørner (iOS-sheet) – fotoet ligger igjen bak mens siden glir over */
.tallband { position: relative; z-index: 2; margin-top: -28px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--bg) 0, var(--bg) 72px, rgba(248, 246, 241, 0) 220px); padding: clamp(64px, 8vw, 104px) 0 clamp(40px, 5vw, 72px); }
@media (max-width: 480px) { .tallband { border-radius: 10px 10px 0 0; } }
.tb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.tb-head .kicker { margin: 0; }
.tb-note { margin: 0; color: var(--muted); font-size: .92rem; max-width: 46ch; }
.tb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tb-item { border-radius: var(--r); padding: 26px 24px 24px; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 8px; transition: transform .5s var(--spring); } /* glass-sm fra mixin */
.tb-item::after { content: ""; position: absolute; left: 24px; bottom: 0; width: 56px; height: 1.5px; background: var(--flaske); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease) .2s; } /* messing-hårstreken vokser med telleren */
.tb-item.counted::after { transform: none; }
/* Pekerlys: én RUND lysflekk (280×280) flyttet med transform – ingen mix-blend-mode, ingen clip-path, ingen gradient-posisjon. z-index −1 i isolert kontekst = under innholdet, over fyllet. */
.tb-item::before, .quote::before, .bransje::before { content: ""; position: absolute; left: calc(50% - 140px); top: calc(30% - 140px); width: 280px; height: 280px; border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 68%); opacity: 0; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: opacity .35s; }
.quote, .bransje { position: relative; isolation: isolate; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .tb-item:hover::before, .quote:hover::before, .bransje:hover::before { opacity: 1; }
  .tb-item:hover { transform: translateY(-4px); box-shadow: var(--g-light), var(--g-lift-hi); }
}
@media (prefers-reduced-motion: reduce) { .tb-item::after { transform: none; transition: none; } .tb-item { transition: none; } }
.tb-v { font-family: var(--display); font-size: clamp(2.8rem, 1.8rem + 3vw, 4.4rem); font-weight: 740; letter-spacing: -.02em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.tb-l { color: var(--muted); font-weight: 500; line-height: 1.3; font-size: .98rem; }
@media (max-width: 980px) { .tb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .tb-grid { gap: 10px; } .tb-item { padding: 18px 16px 20px; } .tb-item::after { left: 16px; } .tb-l { font-size: .9rem; hyphens: auto; } }

/* ---- Pinned fortelling «Fra SMS til kunder» ---- */
.story-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.story-pin { --phone-w: min(300px, calc((100vh - var(--hdr) - 150px) * 9 / 18.5)); --phone-w: min(300px, calc((100svh - var(--hdr) - 150px) * 9 / 18.5)); position: sticky; top: calc(var(--hdr) + 16px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.phone { width: min(100%, var(--phone-w)); aspect-ratio: 9 / 18.5; border-radius: 42px; background: var(--black); padding: 10px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .5) inset; position: relative; }
.phone-top { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 12px; background: var(--black); z-index: 3; }
.phone-top i { position: absolute; right: 12px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #2A2F2B; }
.phone-screens { position: absolute; inset: 10px; border-radius: 34px; overflow: hidden; background: #fff; }
.scr { position: absolute; inset: 0; padding: 60px 16px 18px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.scr.on { opacity: 1; transform: none; }
.scr-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.scr-head b { display: block; font-size: .95rem; letter-spacing: -.01em; }
.scr-head small { display: block; color: var(--muted); font-size: .76rem; }
.scr-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; }
.scr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.scr-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--sage); display: grid; place-items: center; flex: none; color: var(--ink); }
.scr-ic.ok { background: var(--messing-lys); }
.scr-ic .ic { width: 20px; height: 20px; }
.scr-sms { background: #F6F7F9; }
.bubbles { display: flex; flex-direction: column; gap: 8px; }
.bub { margin: 0; max-width: 88%; padding: 10px 13px; border-radius: 10px; font-size: .86rem; line-height: 1.38; }
.bub.me { align-self: flex-end; background: var(--flaske); color: #fff; border-bottom-right-radius: 6px; }
.bub.them { align-self: flex-start; background: #fff; color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(var(--shade), .08); }
.bub-meta { align-self: flex-start; margin: 0; font-size: .72rem; color: var(--muted); padding-left: 6px; }
.notes { display: grid; gap: 10px; }
.notes li { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 600; }
.notes .ic { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--messing-lys); color: var(--ink); }
.notes .todo .ic { background: var(--sage); }
.notes .todo { color: var(--muted); }
.scr-shot { padding: 0; background: var(--bg); }
.scr-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scr-tag { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; text-align: center; font-size: .78rem; font-weight: 700; padding: 8px 10px; border-radius: 10px; color: var(--ink); }
.scr-res { background: linear-gradient(180deg, #fff, var(--bg)); }
.res-rows { display: grid; gap: 8px; }
.res-rows > div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 12px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(var(--shade), .07); }
.res-k { font-size: .78rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.res-v { font-family: var(--font); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; color: var(--green); font-variant-numeric: tabular-nums; }
.res-note { margin: 2px 0 0; font-size: .72rem; color: var(--muted); line-height: 1.35; }
.scr-sms .scr-tag { bottom: 10px; }
.scr-res .btn { margin-top: auto; min-height: 46px; font-size: .9rem; }
.story-hud { width: min(100%, var(--phone-w)); display: grid; gap: 8px; }
.story-chip { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 8px 14px; border-radius: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.story-chip b { color: var(--green-light); font-weight: 700; }
.story-bar { height: 6px; border-radius: 3px; background: var(--sage); overflow: hidden; }
.story-bar i { display: block; height: 100%; width: 100%; background: var(--flaske); transform: scaleX(0); transform-origin: 0 50%; } /* ingen transition – GSAP scrub .3 glatter */
.story-steps { display: grid; gap: clamp(20px, 3vw, 32px); padding-top: 8px; }
.st { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; min-height: 480px; opacity: .93; transition: opacity .4s var(--ease); } /* .93: dempet brødtekst ≥ 4,6:1 på faktisk bakgrunn (omgivelseslyset gjør beinet litt mørkere) – fokus bæres av .st.on .st-no (sort lakk + messing) og scale */
.st:last-child { min-height: 220px; }
.st.on, .story.static .st { opacity: 1; }
.st-no { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--sage); color: var(--ink); display: grid; place-items: center; font-family: var(--font); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1rem; letter-spacing: -.02em; transition: transform .3s var(--ease); }
.st-no i { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s var(--ease); }
.st-no .ic { width: 26px; height: 26px; }
.st.on .st-no { background: var(--black); color: var(--green-light); transform: scale(1.06); }
.st.done .st-no { background: var(--flaske-soft); color: var(--flaske); box-shadow: 0 0 0 1px rgba(125, 95, 42, .38); }
.st.done .st-no b { opacity: 0; }
.st.done .st-no i { opacity: 1; transform: none; }
.st h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.2rem); line-height: 1.15; letter-spacing: -.01em; margin-bottom: .4em; }
.st p { color: var(--muted); font-size: 1.06rem; max-width: 46ch; margin: 0; }
/* Belønning etter steg 4 = handling: «Send SMS – det er steg 1» ligger alltid under stegene; etiketten popper inn når hele løpet er lest (story.done) */
.story-cta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding-left: 76px; }
.story-done { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-deep); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .5s var(--spring); }
.story-done .ic { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--messing-lys); color: var(--ink); }
.story.done .story-done, .story.static .story-done { opacity: 1; transform: none; }
.phone.bump { animation: lift .55s var(--spring); } /* telefonen løfter seg 6 px ved stegbytte */
@keyframes lift { 40% { transform: translateY(-6px) scale(1.012); } }
@media (prefers-reduced-motion: reduce) { .story-done { transition: none; } .phone.bump { animation: none; } }
.story.static .st { min-height: 0; }
.story.static .story-pin { position: relative; top: 0; }
.story.static .scr { opacity: 0; } .story.static .scr-res { opacity: 1; transform: none; }
.story.static .story-hud { display: none; }
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: 20px; }
  .story-pin { --phone-w: min(184px, calc((100vh - var(--hdr) - 300px) * 9 / 18.5)); --phone-w: min(184px, calc((100svh - var(--hdr) - 300px) * 9 / 18.5)); position: sticky; top: var(--hdr); z-index: 2; gap: 8px; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 10px; background: var(--bg); box-shadow: 0 14px 18px -14px rgba(var(--shade), .22); }
  .phone { border-radius: 30px; padding: 6px; }
  .phone-top { top: 10px; width: 54px; height: 16px; }
  .phone-screens { inset: 6px; border-radius: 25px; }
  .scr { padding: 36px 10px 10px; gap: 8px; }
  .bub { font-size: .7rem; padding: 7px 9px; border-radius: 10px; }
  .scr-head b { font-size: .84rem; } .scr-head small { font-size: .68rem; }
  .notes li { font-size: .72rem; gap: 7px; } .notes { gap: 6px; } .notes .ic { width: 20px; height: 20px; padding: 4px; }
  .res-v { font-size: .95rem; } .res-k { font-size: .66rem; } .res-rows > div { padding: 6px 8px; } .res-rows { gap: 6px; }
  .res-note { display: block; font-size: .62rem; line-height: 1.3; }
  .scr-res .btn { display: none; } /* plass til kildelinjen; knappen er uansett tabindex=-1 i aria-hidden */
  .scr-sms .scr-tag { font-size: .56rem; letter-spacing: -.01em; padding: 5px 4px; white-space: nowrap; } /* Schibsted er bredere – 136 px tekst i 125 px pille ved .6rem */
  .scr-res .btn { min-height: 46px; font-size: .78rem; padding: 0 .8em; } /* 46 px: skjulte skjermer er skalert .985 */
  .scr-avatar, .scr-ic { width: 30px; height: 30px; } .scr-ic .ic { width: 16px; height: 16px; } .scr-head { gap: 8px; padding-bottom: 8px; }
  .story-hud { width: min(100%, 300px); display: flex; align-items: center; gap: 10px; }
  .story-hud .story-chip { min-height: 28px; }
  .story-hud .story-bar { flex: 1; }
  .story-chip { padding: 6px 11px; font-size: .74rem; white-space: nowrap; }
  .story-steps { padding-top: 12px; }
  .st { min-height: 320px; grid-template-columns: 44px 1fr; gap: 14px; opacity: .93; }
  .st:last-child { min-height: 200px; }
  .st-no { width: 44px; height: 44px; font-size: .95rem; }
  .st-no .ic { width: 22px; height: 22px; }
  .st h3 { font-size: 1.65rem; }
  .st p { font-size: 1rem; }
  .story.static .story-pin { position: relative; }
  .story-cta { grid-column: auto; padding-left: 0; }
}

/* ---- Prosjekt-kortstokk ---- */
/* ---------- Prosjekter: stablede kort ved scroll (sticky, ingen pinning-JS) ---------- */
.stack-sec { padding-bottom: clamp(40px, 5vw, 72px); }
.stack { display: grid; gap: clamp(28vh, 34vh, 360px); padding-bottom: 8vh; }
.scard { position: sticky; top: calc(var(--hdr) + 18px + var(--i) * 12px); display: grid; grid-template-columns: 1.05fr .95fr; min-height: min(560px, 72vh); overflow: hidden; transform-origin: 50% 0; transition: transform .35s var(--spring); }
.scard.behind { transform: scale(.955); } /* mørkningen ligger i ::before (opasitet), ikke filter */
.sc-shot { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 36px 24px 0; background: linear-gradient(135deg, var(--sage), var(--bg)); overflow: hidden; }
.sc-shot .phone { width: 250px; max-width: 78%; }
.sc-body { display: flex; flex-direction: column; padding: 30px 32px 28px; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; min-height: 36px; }
.sc-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .92rem; margin-left: auto; }
.sc-count b { color: var(--ink); }
.sc-body h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.2rem); line-height: 1.15; letter-spacing: -.01em; overflow-wrap: normal; hyphens: manual; } /* lange navn brytes kun ved &shy; (content.py name_html) */
.sc-body p { color: var(--muted); }
.sc-body .lenke { margin-top: auto; }
.logo-chip { height: 36px; width: auto; max-width: 150px; object-fit: contain; }
.logo-chip.on-dark { background: var(--black); padding: 6px 10px; border-radius: 10px; box-sizing: content-box; }
.pc-logo { display: block; height: 44px; max-width: 170px; margin-bottom: 14px; }
.blk-logo { display: block; height: 40px; max-width: 170px; margin-bottom: 18px; }
.tag-arkiv { background: var(--black); color: #fff; }
@media (max-width: 860px) {
  .scard { grid-template-columns: 1fr; min-height: 0; top: calc(var(--hdr) + 10px + var(--i) * 6px); }
  .sc-shot { height: 250px; padding: 22px 20px 0; }
  .sc-shot .phone { width: 190px; }
  .sc-body { padding: 22px 22px 22px; }
  .stack { gap: 22vh; }
}
@media (max-width: 480px) { .sc-shot { height: 210px; } .sc-shot .phone { width: 170px; } .sc-body h3 { font-size: 1.65rem; } .sc-body > p { font-size: .95rem; } .sc-body .kicker, .pc-body .kicker { font-size: .7rem; letter-spacing: .08em; } /* Schibsted er bredere enn Sofia – «Nettbutikk · annonsering · e-post» på én linje ved 390 */ }
@media (prefers-reduced-motion: reduce) { .scard { transition: none; } .scard.behind { transform: none; } }
/* Annonse-eksempel i telefonen (Meta-format) */
.phone-ad .phone-screen { background: #fff; display: flex; flex-direction: column; }
.ad { font-family: var(--font); color: #111; font-size: 10.5px; line-height: 1.35; padding: 34px 0 0; display: flex; flex-direction: column; height: 100%; }
.ad-top { display: flex; align-items: center; gap: 7px; padding: 0 10px 6px; }
.ad-avatar { width: 28px; height: 28px; border-radius: 50%; background: #F0F2F5; display: grid; place-items: center; overflow: hidden; flex: none; font-weight: 700; }
.ad-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.ad-who { display: flex; flex-direction: column; line-height: 1.2; } .ad-who b { font-size: 11px; } .ad-who small { font-size: 9px; color: #65676B; }
.ad-dots { margin-left: auto; color: #65676B; letter-spacing: 1px; }
.ad-text { margin: 0 10px 8px; font-size: 10.5px; }
.ad-img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.ad-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #F0F2F5; }
.ad-url { font-size: 9px; color: #65676B; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-btn { flex: none; font-size: 10px; font-weight: 700; padding: 6px 10px; border-radius: 6px; background: #E4E6EB; color: #111; }
.ad-bar { display: flex; justify-content: space-around; padding: 7px 10px; border-top: 1px solid #E4E6EB; color: #65676B; font-size: 9.5px; font-weight: 600; }
.ad-note { margin: auto 10px 10px; font-size: 8.5px; color: #65676B; text-align: center; }
.deck-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
@media (max-width: 640px) { .deck-dots { display: none; } .deck-count { font-size: 1rem; padding: 0 10px; } } /* på mobil: pil – «3 / 8» – pil; åtte prikker får ikke plass uten å bli under 44 px */ /* 8 prikker får ikke plass på 320 px uten å bli under 44 px – telleren «5 / 8» holder */
.deck-dot { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; padding: 0; }
.deck-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: transform .3s var(--spring); }
.deck-dot.on i { background: var(--black); transform: scale(1.5); }
.deck-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .92rem; }
.deck-count b { color: var(--ink); }
.deck-cta { margin-top: 32px; }


/* ---- Collage «Hei, jeg er Bror» ---- */
.collage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.collage-photos { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; aspect-ratio: 1 / 1.05; }
.cp { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid #fff; will-change: transform; }
.cp img { width: 100%; height: 100%; object-fit: cover; }
.cp-1 { grid-row: 1 / 3; }
.cp-badge { position: absolute; left: -20px; bottom: 10%; width: clamp(96px, 11vw, 140px); aspect-ratio: 1; border-radius: 50%; background: #fff; border: 0; padding: 8px; box-shadow: var(--shadow-lg); z-index: 2; }
.cp-badge img { object-fit: contain; }
.collage-copy .checks { margin-top: 22px; }
@media (max-width: 860px) {
  .collage-grid { grid-template-columns: 1fr; gap: 36px; }
  .collage-photos { aspect-ratio: 1 / .9; max-width: 560px; }
  .cp-badge { left: 8px; bottom: -12px; width: 92px; }
}

/* ---- Pagehero (undersider) med fotobånd ---- */
.pagehero { padding: clamp(32px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); position: relative; overflow: hidden; }
.pagehero::before { content: ""; position: absolute; width: 56vw; height: 56vw; max-width: 720px; max-height: 720px; right: -20vw; top: -28vw; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(var(--lampe), .16), rgba(var(--lampe), 0)); pointer-events: none; } /* lampa oppe til høyre */
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; }
.ph-grid > * { min-width: 0; }
.ph-copy .btns { margin-top: 1.8em; }
.ph-copy .trust { margin-top: 1.3em; }
.ph-foto { position: relative; }
.ph-frame { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--g-lift-hi), inset 0 0 0 1px rgba(255, 255, 255, .6); border: 5px solid #fff; aspect-ratio: 4 / 5; max-height: 560px; }
.ph-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 28%); } /* topprefleks – foto og pille er samme materialfamilie */
.ph-frame img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ph-pill { position: absolute; left: -14px; bottom: 32px; z-index: 2; border-radius: 10px; will-change: transform; } /* glass fra mixin; glir motsatt av fotoet (app.js) */
.ph-icon { width: 220px; height: 220px; border-radius: 50%; display: grid; place-items: center; color: var(--green); justify-self: center; animation: floaty 7s ease-in-out infinite; position: relative; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 760px) {
  .ph-grid { grid-template-columns: 1fr; gap: 28px; }
  .ph-foto { order: -1; margin: 0 calc(-1 * var(--gutter)); }
  .ph-frame { border-radius: 0; border: 0; aspect-ratio: 4 / 3; max-height: 340px; box-shadow: none; } /* 4/3: portrettet beholder hodet (16/10 kuttet panna) */
  .ph-pill { left: var(--gutter); bottom: -24px; }
  .ph-frame::after { display: none; }
  .ph-has-foto { padding-top: 0; }
  .ph-has-foto .ph-copy { padding-top: 14px; }
  .ph-icon { width: 150px; height: 150px; margin-inline: auto; }
  .ph-icon .ic-big { width: 80px; height: 80px; }
}

/* ---- Pill-kort (gjenbruk; .hv-card er tom alias – glasset kommer fra mixin-lista) ---- */
.hv-pill, .ph-pill { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 11px 12px; font-weight: 700; font-size: .95rem; }
.hv-pill .ic, .ph-pill .ic { width: 28px; height: 28px; color: var(--ink); background: var(--flaske-soft); border-radius: 50%; padding: 5px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 1.4em; }
.trust li { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; font-weight: 600; color: var(--muted); }
.trust .ic { width: 20px; height: 20px; color: var(--green); background: var(--flaske-soft); border-radius: 50%; padding: 4px; }
.hero-link { margin-top: 1.2em; }
/* Status-prikk: fyllet i ::before (over), pulsringen i ::after (under) – ringen animerer bare transform (uniform scale = fortsatt rund) + opacity, ingen box-shadow på hovedtråden */
.status-dot, .hv-dot { width: 10px; height: 10px; border-radius: 50%; position: relative; isolation: isolate; flex: none; }
.status-dot::before, .hv-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--flaske); z-index: 1; }
.status-dot::after, .hv-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pulse); z-index: 0; animation: pulse 2.8s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---- Hero: hvem-chip med ekte portrett ---- */
.hf-who { position: absolute; z-index: 3; left: max(20px, calc((100vw - var(--wrap, 1180px)) / 2)); top: calc(var(--hdr) + 28px); display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 10px; color: var(--ink); font-size: .9rem; line-height: 1.2; will-change: transform; } /* glass fra mixin */
.hf-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; flex: none; }
.hf-who span { display: flex; flex-direction: column; gap: 2px; }
.hf-who b { font-weight: 700; }
@media (max-width: 760px) { .hf-who { position: static; align-self: flex-start; max-width: calc(100% - 2 * var(--gutter)); margin: 0 var(--gutter) 18px; font-size: .85rem; } /* flex-barn av .hero-foto: ikke strekk, behold gutter */ .hf-who img { width: 40px; height: 40px; } }

/* Hero-foto skal ikke arve konsept-1-heroens glød; bunnpolstring gir plass til arket (−28 px) under trust-pillene */
.hero.hero-foto { padding: calc(var(--hdr) + 40px) 0 clamp(48px, 7vh, 96px); }
@media (max-width: 760px) { .hero.hero-foto { padding-bottom: 56px; } }
.hero.hero-foto::before { display: none; }
.hero-foto .kicker { color: var(--green-light); }
.hero-foto .kicker::before { background: var(--messing-lys); }
.hero-foto .btn-dark { background: var(--flaske); color: #fff; }
.hero-foto .trust li { color: #fff; }
.hero-foto .trust .ic { background: var(--messing-lys); color: var(--ink); }
.hero-foto h1 { color: #fff; }
.hero-foto .lead { color: rgba(255, 255, 255, .9); }
.hero-foto mark { font-family: var(--display); font-style: normal; font-weight: 800; color: var(--messing-lys); background-image: none; padding: 0; margin: 0; text-shadow: 0 2px 10px rgba(var(--shade), .7), 0 1px 2px rgba(var(--shade), .5); }
 /* champagne på én frase, ingen bånd */

/* ---------- Resultater (undersiden /resultater/) ---------- */
.resultat { position: relative; }
.resultat.glow-rosa { overflow: hidden; }
.resultat.glow-rosa .wrap { position: relative; isolation: isolate; }
.resultat.glow-rosa .wrap::before { content: ""; position: absolute; left: 50%; top: 40%; width: min(900px, 120%); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(244, 96, 161, .22) 0%, rgba(244, 96, 161, .08) 45%, rgba(244, 96, 161, 0) 70%); z-index: -1; pointer-events: none; }
.r-head { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.r-logo { height: 48px; max-width: 200px; flex: none; }
.r-head h2 { margin: .1em 0 .2em; }
.r-periode { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .95rem; margin: 0; }
.r-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.r-main h3 { font-size: 1.15rem; margin: 30px 0 12px; }
.r-kpi { margin-top: 18px; }
.rbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rbar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: center; gap: 12px; font-size: .95rem; }
.rbar-l { color: var(--ink); }
.rbar-track { position: relative; height: 10px; border-radius: 5px; background: var(--sage); overflow: hidden; }
.rbar-track i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: var(--flaske); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--spring); }
.in .rbar-track i, .rbars.in .rbar-track i { transform: scaleX(1); }
.rbar-v { font-variant-numeric: tabular-nums; color: var(--green-deep); white-space: nowrap; }
.r-aerlig { margin-top: 26px; padding: 14px 18px; border-radius: var(--r-sm); background: var(--sage); color: var(--muted); font-size: .95rem; }
.r-side { position: sticky; top: calc(var(--hdr) + 24px); }
.r-phone { display: flex; justify-content: center; }
.r-phone .phone { width: 260px; max-width: 100%; }
.r-quote { padding: 32px 30px; }
@media (max-width: 900px) { .r-grid { grid-template-columns: 1fr; } .r-side { position: static; } .r-phone { order: -1; } .r-phone .phone { width: 220px; } }
@media (max-width: 560px) { .r-head { align-items: flex-start; flex-direction: column; gap: 12px; } .rbar { grid-template-columns: 1fr auto; } .rbar-track { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .rbar-track i { transition: none; transform: scaleX(1); } }
/* Stabel på mobil: kortet skal få plass over sticky-CTA før neste kort dekker det */
@media (max-width: 480px) { .sc-shot { height: 180px; } .sc-shot .phone { width: 150px; } .sc-body > p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } }

/* ---- Lead-kalkulator (forsiden) – gjenbruker .card .calc .calc-out .calc-ring .chips .chip; brikkene er radio (aria-checked) ---- */
.lk .chips { margin-bottom: 0; }
.lk .chip[aria-checked="true"] { color: #fff; background: var(--flaske); }
.lk .chip[aria-checked="true"] .ic { opacity: 1; transform: none; }
.lk .calc-s + .calc-s { margin-top: 6px; }
.lk-dom { color: var(--ink); font-weight: 600; }
.vh { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 480px) { .lk { padding: 16px; } }
/* Resultater: KPI-fliser uten linjebrudd */
.r-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-kpi .stat-v { white-space: nowrap; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
.r-kpi .stat-l { font-size: .9rem; }

/* ---- Cookie-samtykke (Bror 17.10.2026) – selvhostet. Glasskort nederst (glass fra mixin-lista), «Velg selv» som <dialog>.
   Datatilsynet: avslå skal ha samme størrelse, farge og plassering som godta → tre like sorte knapper på samme lag. ---- */
.samtykke { position: fixed; z-index: 48; right: 24px; bottom: 24px; width: min(460px, calc(100% - 48px)); max-height: calc(100vh - var(--hdr) - 48px); max-height: calc(100dvh - var(--hdr) - 48px); overflow: auto; overscroll-behavior: contain; padding: 22px 22px 18px; border-radius: var(--r); font-size: .92rem; line-height: 1.55; color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease), transform .5s var(--spring); } /* z 48: over sticky-CTA (40), under mobilmenyen (49) og headeren (50) */
.samtykke.vis { opacity: 1; transform: none; }
.samtykke[hidden], .sk-panel:not([open]) { display: none; }
.samtykke h2, .sk-panel h2 { font-family: var(--font); font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 .5em; }
.samtykke p { margin: 0; }
.sk-mer, .sk-fot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px 0 2px; }
.samtykke .sk-top h2 { margin: 0; }
.sk-mer { flex: none; font-size: .88rem; }
.sk-knapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sk-knapper .btn { min-height: 48px; padding: 8px .5em; font-size: .95rem; white-space: nowrap; }
@media (max-width: 1080px) {
  /* nettbrett og liten laptop: samme glasskort som desktop, nede til høyre, løftet over sticky-CTA (66 px + 10 px luft) så Ring/SMS aldri dekkes;
     sticky vises mens banneret er åpent (app.js), og når den er skjult (ved footer) senkes kortet */
  .samtykke { right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--hdr) - 110px); max-height: calc(100dvh - var(--hdr) - 110px); }
  html:has(.sticky-cta:not(.show)) .samtykke { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 599px) {
  .samtykke { left: 12px; right: 12px; width: auto; padding: 12px 14px 12px; font-size: .86rem; line-height: 1.45; }
  .samtykke h2 { font-size: 1.02rem; }
  .sk-knapper { margin-top: 10px; }
  .sk-knapper .btn { min-height: 46px; }
  html:has(.sticky-cta:not(.show)) .samtykke { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) { .sk-knapper { gap: 6px; } .sk-knapper .btn { font-size: .86rem; padding: 6px .25em; } }
.sk-panel { width: min(580px, calc(100% - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; margin: auto; border-radius: var(--r); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.sk-panel::backdrop { background: rgba(16, 30, 23, .55); } /* skog-bakteppe, ingen blur */
html.sk-modal { overflow: hidden; }
.sk-inner { padding: 22px 24px 16px; }
.sk-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sk-panel-top h2 { font-size: 1.35rem; margin-top: 6px; }
.sk-lukk { flex: none; width: 44px; height: 44px; margin: -4px -10px 0 0; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--ink); border-radius: var(--r-sm); cursor: pointer; }
.sk-lukk:hover { background: var(--flaske-soft); }
.sk-lukk:focus-visible, .sk-sw:focus-visible { outline: 3px solid var(--flaske); outline-offset: 3px; }
.sk-lead { color: var(--muted); margin: 0 0 14px; font-size: .95rem; }
.sk-kater { display: grid; gap: 8px; }
.sk-kat { padding: 8px 16px 14px; border-radius: var(--r-sm); } /* lite-glass fra mixin */
.sk-kat-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sk-kat-top label { flex: 1; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; column-gap: .4em; cursor: pointer; }
.sk-verktoy { color: var(--muted); font-size: .9rem; }
.sk-verktoy::before { content: "· "; }
.sk-kat p { margin: 6px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.sk-merke { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); background: var(--flaske-soft); color: var(--flaske-dyp); font-size: .78rem; font-weight: 600; }
/* Bryter: avrundet rektangel (ingen pille), rund knott; av-sporet 3,4:1 mot hvitt (WCAG 1.4.11) */
.sk-sw { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0; border-radius: 10px; border: 1.5px solid #6E746C; cursor: pointer; background: radial-gradient(circle 11px at 15px 50%, var(--muted) 10px, transparent 11px), var(--kort); } /* av: kant 4,75:1, knott 6,69:1 */
.sk-sw::before { content: none; } /* knotten ligger i bakgrunnen – likt i Safari, Chrome og Firefox */
.sk-sw:checked { border-color: var(--flaske); background: radial-gradient(circle 11px at calc(100% - 15px) 50%, var(--bein-t) 10px, transparent 11px), var(--flaske); }
.sk-sw:disabled { cursor: not-allowed; opacity: .6; }
.sk-panel .sk-knapper { position: sticky; bottom: 0; z-index: 1; margin: 12px -24px 0; padding: 12px 24px; background: #FBF9F3; border-top: 1px solid var(--line); box-shadow: 0 -10px 16px -14px rgba(var(--sk), .25); } /* knappene er alltid synlige når panelet scroller (mobil) */
.sk-fot { margin: 6px 0 0; font-size: .86rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; }
@media (max-width: 480px) { .sk-inner { padding: 18px 16px 12px; } .sk-kat { padding: 6px 12px 12px; } .sk-panel .sk-knapper { margin-inline: -16px; padding: 10px 16px; } .sk-kat-top label { padding: 6px 0; line-height: 1.3; } .sk-verktoy { flex-basis: 100%; } .sk-verktoy::before { content: none; } }
.ftr-knapp { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ftr-knapp:hover { color: var(--messing-lys); text-decoration: underline; text-underline-offset: 3px; }
html:not(.js) [data-samtykke-apne] { display: none; }
@media (prefers-reduced-motion: reduce) { .samtykke { transform: none; transition: none; } }
@media print { .samtykke, .sk-panel { display: none !important; } }

/* ---- Personvern (/personvern/) ---- */
.prose h3 { margin: 1.5em 0 .5em; font-size: 1.15rem; }
.page-personvern .prose h3 { margin: 2.2em 0 .7em; padding-top: 1em; border-top: 1px solid var(--line); font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; } /* behandlingene skiller seg tydelig fra dt-etikettene */
.page-personvern .prose h2[id] { scroll-margin-top: calc(var(--hdr) + 20px); }
.page-personvern .prose h2 + h3 { margin-top: 1em; padding-top: 0; border-top: 0; }
.prose code { font-family: inherit; font-weight: 600; color: var(--green-deep); }
.pv-kort { padding: 26px 28px; border-radius: var(--r); margin-bottom: 2.6em; } /* glass-sm fra mixin */
.pv-kort h2 { margin-top: 0; }
.prose .pv-kort ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.pv-kort li { position: relative; padding-left: 22px; margin: 0; }
.pv-kort li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--flaske); }
.pv-valg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.pv-status { margin: 0; color: var(--muted); font-size: .92rem; }
.pv-tre { flex: 1 1 100%; max-width: 480px; margin-top: 0; } /* samme tre like knapper som banneret – vises til du har valgt */
html.sk-valgt .pv-tre, html:not(.js) .pv-tre, html:not(.sk-valgt) .pv-endre { display: none; }
.pv-hopp { margin: -1.2em 0 2.6em; }
.pv-hopp p { margin: 0 0 .5em; font-size: .86rem; font-weight: 600; color: var(--muted); }
.prose .pv-hopp ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prose .pv-hopp li { margin: 0; }
.prose .pv-hopp a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; }
.prose .pv-hopp a:hover { border-color: var(--green); color: var(--green); }
.page-personvern .pagehero + .section { padding-top: clamp(8px, 2vw, 24px); } /* «Kort fortalt» rett under ingressen */
@media (max-width: 760px) { .page-personvern .ph-icon { display: none; } } /* «Kort fortalt» og valget skal synes i første skjermbilde */
.pv-dl { margin: 0 0 1.2em; border-top: 1px solid var(--line); }
.pv-dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pv-dl dt { font-weight: 600; font-size: .86rem; color: var(--muted); padding-top: .15em; }
.pv-dl dd { margin: 0; }
@media (max-width: 560px) { .pv-dl > div { grid-template-columns: 1fr; gap: 2px; } }
.pv-tabell { margin: 1em 0 1.6em; }
.pv-tabell table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.45; }
.pv-tabell th, .pv-tabell td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.pv-tabell thead th { font-size: .85rem; color: var(--muted); font-weight: 600; border-bottom-color: rgba(125, 95, 42, .45); }
.pv-tabell tbody th { font-weight: 400; white-space: nowrap; }
@media (max-width: 760px) {
  .pv-tabell thead { display: none; } /* kortvisning: hver celle har egen etikett (data-l) */
  .pv-tabell table, .pv-tabell tbody { display: block; }
  .pv-tabell tr { display: block; padding: 12px 16px; margin-bottom: 8px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); }
  .pv-tabell tbody th, .pv-tabell td { display: grid; grid-template-columns: 6.2rem 1fr; gap: 10px; padding: 4px 0; border: 0; white-space: normal; }
  .pv-tabell [data-l]::before { content: attr(data-l); color: var(--muted); font-weight: 600; font-size: .84rem; }
}
.pv-protest { margin: 2.4em 0; padding: 22px 26px; border-radius: var(--r); background: var(--flaske-soft); border: 1px solid rgba(38, 74, 54, .25); box-shadow: var(--e0); }
.pv-protest h2 { margin-top: 0; }
.pv-protest p { margin: 0; }

/* ======================================================================
   MATERIALER – MIXIN (selektorlister SIST i fila; ren CSS har ikke @extend). Grønne rom 17.10.2026.
   Tre grupper: SVEVER (glass med blur – header, sticky, hero-brikker, pagehero-pille, ph-icon, HUD, cookie-kortet),
   LIGGER (tett porselen med mørk hårkant og lys toppkant – kort, lister, valgpanel) og INNFELT (spor, inndata, resultatfelt).
   Mørkt glass (skog) bare i hero og på story-chip. Aldri blur i rom, aldri glass bak brødtekst.
   Elevasjon: e0 (innfelt) · e1 (lister) · e2 (kort) · e3 (svever) · e-rom (lyse kort foran den grønne veggen).
   Pseudo-elementer på kort: .obj::before (ikon), .scard::before (dimming), .price-featured::after, .garanti-box::after, .pv-kort::after (panellister).
   ====================================================================== */
/* SVEVER → glass */
.site-header::before, .sticky-cta, .hf-pill, .hf-who, .ph-pill, .ph-icon, .deck-hud, .samtykke { background: var(--g-fill); border: 1px solid var(--g-edge); box-shadow: var(--g-light), var(--e2); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }
.ph-icon, .deck-hud { -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm); }
/* LIGGER → porselen (tett, ingen blur) */
.card, .stat, .step, .tb-item, .pv-kort { background: var(--kort-fyll); border: var(--kant); box-shadow: var(--topp), var(--e2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.faq, .tl-body, .cert, .objs .obj { background: var(--kort-fyll); border: var(--kant); box-shadow: var(--topp), var(--e1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sk-panel { background: var(--kort-fyll) var(--kort); border: var(--kant); box-shadow: var(--topp), var(--e3); -webkit-backdrop-filter: none; backdrop-filter: none; } /* skal leses → tett */
/* INNFELT → et trinn ned (kortet over løfter seg) */
.chips, .br-result, .calc-out, .sk-kat, .case { background: linear-gradient(180deg, #ECEFE8, #F3F4EE); border: var(--kant); box-shadow: var(--e0), inset 0 -1px 0 #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.scr-tag { background: var(--g-fill-lite); border: 1px solid var(--g-edge); box-shadow: var(--g-light), var(--e1); } /* liten etikett inne i telefonskjermen */
/* MØRKT GLASS – skog */
.hf-copy .kicker, .hf-copy .btn-ghost, .hero-foto .btn-ghost, .story-chip { background: var(--g-dark); border: 1px solid var(--g-dark-edge); box-shadow: var(--g-dark-light); color: #fff; }
.hf-copy .kicker, .hero-foto .btn-ghost { -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm); } /* svever over fotoet */
@media (max-width: 1080px) { .nav { background: var(--g-fill-solid); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); } }
@media (max-width: 860px) { .story-pin { background: var(--g-fill-solid); border-bottom: 1px solid var(--g-edge); box-shadow: var(--g-light), 0 14px 18px -14px rgba(var(--sk), .18); -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm); } }
@media (max-width: 560px) { :root { --g-blur: blur(14px) saturate(140%); } } /* billigere på små skjermer */
/* tallflisene svever over fotokanten fra 761 px → der er de glass og blurer fotoet */
@media (min-width: 761px) { .tb-item { background: var(--g-fill-solid); border: 1px solid var(--g-edge); box-shadow: var(--g-light), var(--e2); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* tett glassfyll uten blur: flisene ligger i første viewport, taket er 8 blur-flater */

/* ---- Overstyringer som MÅ stå etter mixin-lista ---- */
/* header og hero-brikker: tett glass – «PERFORMANCE» over mørk hero ved y = 0: .58 → 3,81:1, .84 → 7,02:1 */
.site-header::before, .hf-pill, .hf-who { background: var(--g-fill-solid); }
.site-header::after { box-shadow: var(--g-light), var(--e2); }
.site-header.scrolled::after { box-shadow: var(--g-light), inset 0 -1px 0 rgba(125, 95, 42, .22), var(--e3); }
.hf-pill, .hf-who, .ph-pill, .sticky-cta, .samtykke { box-shadow: var(--g-light), var(--e3); }
.site-header .logo-b { color: var(--flaske); } /* 7,02:1 på tett glass over mørk hero */
.hero-foto .kicker { color: var(--messing-lys); }
@media (hover: hover) { .card:hover, .tl-body:hover, .tb-item:hover { transform: translateY(-4px); box-shadow: var(--topp), var(--e3); } } /* skyggen byttes uten overgang */
@media (hover: hover) and (min-width: 761px) { .tb-item:hover { box-shadow: var(--g-light), var(--e3); } }
@media (hover: none) { .card:hover, .tl-body:hover { transform: none; box-shadow: var(--topp), var(--e2); } }
.price-featured { border-color: var(--flaske); box-shadow: var(--topp), 0 0 0 1px var(--flaske), 0 0 0 5px var(--flaske-soft), var(--e3); }
.ph-icon { border-color: #fff; box-shadow: var(--g-light), 0 0 0 12px rgba(220, 231, 223, .75), 0 0 0 26px rgba(232, 239, 233, .55), var(--e3); }
.ph-icon::after { border-color: rgba(125, 95, 42, .45); } /* stiplet messingring (40 s) – statisk ved reduced-motion */
/* pekerlyset blir lampelys (hvitt syntes ikke på porselen) */
.tb-item::before, .bransje::before { background: radial-gradient(circle, rgba(var(--lampe), .12), transparent 68%); }
.quote::before { background: radial-gradient(circle, rgba(244, 96, 161, .08), transparent 68%); }
.quote-sec.glow-rosa .quote { box-shadow: var(--topp), 0 24px 60px -28px rgba(229, 16, 108, .45), 0 2px 10px -4px rgba(229, 16, 108, .22), var(--e1); }
.section-tint .card, .section-tint .faq, .section-tint .objs .obj { box-shadow: var(--topp), var(--e2); }

/* ================= Innfelte flater og salviegulv ================= */
.section-tint { background: linear-gradient(180deg, #EDF1EB, #E6ECE5); border-top: 1px solid rgba(var(--sk), .06);
  box-shadow: inset 0 18px 24px -20px rgba(var(--sk), .12), inset 0 -18px 24px -20px rgba(var(--sk), .08); } /* gulv, ikke vask */
.calc input[type="number"] { background: var(--kort); border: 1.5px solid rgba(var(--sk), .18); box-shadow: inset 0 2px 4px rgba(var(--sk), .08); }
.calc input:focus-visible { outline-color: var(--flaske); border-color: var(--flaske); box-shadow: 0 0 0 7px var(--flaske-soft); }
.calc input[type="range"] { accent-color: var(--flaske); }
.chips-ind, .chip[aria-selected="true"], .lk .chip[aria-checked="true"], .opt.picked, .opt.picked:hover { background: var(--flaske); border-color: var(--flaske); }
.chips-ind { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 8px 18px -10px rgba(38, 74, 54, .6); }
.chips.has-ind .chip[aria-selected="true"] { background: transparent; }
.chip:hover { background: rgba(255, 255, 255, .7); }
.chip[aria-selected="true"] .ic, .lk .chip[aria-checked="true"] .ic { color: var(--messing-lys); }
.opt { border-color: rgba(var(--sk), .14); background: var(--kort); box-shadow: var(--topp), var(--e1); }
@media (hover: hover) { .opt:hover { border-color: var(--flaske); background: #fff; } }
.calc-ring, .ring { background: conic-gradient(var(--flaske) calc(var(--p) * 1%), var(--sage) 0); box-shadow: 0 0 0 1px rgba(125, 95, 42, .35), var(--e1); }
.calc-ring::before, .ring::before { background: var(--kort); box-shadow: inset 0 1px 3px rgba(var(--sk), .12); }
.calc-ring.warn { background: conic-gradient(var(--sennep) calc(var(--p) * 1%), #F6EEDC 0); } /* 3,64:1 mot sporet */
.sjekk-bar, .story-bar, .rbar-track { box-shadow: inset 0 1px 2px rgba(var(--sk), .14); }
.sjekk-bar i, .story-bar i, .bub.me, .misses li::before, .result-check, .status-dot::before, .hv-dot::before, .rbar-track i { background: var(--flaske); } /* konstanter, ikke var(--green) */
.tag { background: var(--flaske-soft); color: var(--flaske-dyp); }
.tb-item::after, .br-val::after { background: var(--messing-mork); }

/* ================= Sort lakk og messingringer – flaske-ringer på lyse ikoner ================= */
.step-n, .st.on .st-no, .totopp, .hdr-call { background: radial-gradient(circle at 34% 26%, #2A2F2C, var(--black) 64%); color: var(--messing-lys); border: 0;
  box-shadow: 0 0 0 1px var(--messing), inset 0 1px 0 rgba(255, 255, 255, .14), var(--e1); }
.hdr-call { color: #fff; }
.totopp:hover { background: var(--flaske); }
.price-flag, .tag-arkiv { background: var(--black); color: var(--messing-lys); box-shadow: inset 0 0 0 1px var(--messing), var(--e1); }
.obj::before { background-color: var(--black); box-shadow: 0 0 0 1px var(--messing), var(--e1); }
.svc-icon { background: radial-gradient(circle at 34% 28%, #FFFFFF, var(--flaske-soft) 72%); color: var(--flaske); box-shadow: 0 0 0 1px rgba(125, 95, 42, .38), inset 0 -2px 5px rgba(var(--sk), .10), var(--e1); }
.checks .ic, .trust .ic, .hv-pill .ic, .ph-pill .ic, .hf-pill .ic { background: var(--flaske-soft); color: var(--flaske); }
.hf-copy .trust .ic, .hero-foto .trust .ic, .faq[open] .chev, .notes .ic, .story-done .ic { background: radial-gradient(circle at 35% 30%, #F3E3B8, #D4B26E 55%, #B8975A); color: var(--flaske-dyp); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0 0 1px rgba(125, 95, 42, .35); } /* messing som metall: høylys oppe til venstre, mørk kant – hake flaske-dyp 5,96 på #D4B26E */
.faq[open] .chev::after { border-color: var(--flaske-dyp); } /* 7,39:1 */
.tl-when::after { background: var(--flaske); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(125, 95, 42, .45); }
::selection { background: var(--messing-lys); color: #141A16; }
.nav a[aria-current="page"] { background: var(--black); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.nav a:not([aria-current]):hover { background: rgba(255, 255, 255, .7); }

/* ================= Lampa og panellista på lyse flater ================= */
.garanti-box { position: relative; background: linear-gradient(200deg, #FFFDF7, #F3F1EA); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, var(--e2); }
.garanti-box::after { content: ""; position: absolute; inset: 12px; border-radius: 10px; pointer-events: none;
  box-shadow: inset 1px 1px 0 rgba(var(--sk), .08), inset -1px -1px 0 #fff, -1px -1px 0 rgba(var(--sk), .05), 1px 1px 0 #fff; } /* lys panelliste i bein */
.garanti-box > * { position: relative; z-index: 1; }

/* ================= Messing-passepartout rundt foto (speilrammen) ================= */
.cp { padding: 6px; border: 1px solid rgba(125, 95, 42, .45); border-radius: 10px; background: var(--kort-fyll); box-shadow: var(--topp), var(--e3); }
.cp img { border-radius: 10px; }
.cp-badge { border-radius: 50%; padding: 8px; border: 1px solid rgba(125, 95, 42, .45); background: var(--kort); box-shadow: 0 0 0 5px var(--kort), 0 0 0 6px rgba(125, 95, 42, .25), var(--e3); }
.cp-badge img { border-radius: 50%; }
.ph-mat { height: 100%; }
@media (min-width: 761px) {
  .ph-frame { padding: 6px; border: 1px solid rgba(125, 95, 42, .45); background: var(--kort-fyll); box-shadow: var(--topp), var(--e3); }
  .ph-mat { border-radius: 10px; overflow: hidden; } /* GSAP-skalaen 1,12 klippes her, ikke over passepartouten */
  .ph-frame::after { inset: 6px; border-radius: 10px; } /* topprefleksen følger bildet */
}

/* ================= Hero: skog-scrim og tallfliser som stikker 48 px opp i fotoet ================= */
.hf-copy .btn-dark, .hero-foto .btn-dark { background: var(--bein-t); color: var(--flaske-dyp); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(var(--sk), .12), 0 16px 36px -16px rgba(0, 0, 0, .6); } /* lyst foran mørkt: tekst 10,4:1, knappen mot fotoet ~14:1 */
.hf-copy .btn-dark:hover, .hero-foto .btn-dark:hover { background: #fff; color: var(--flaske-dyp); box-shadow: 0 0 0 1px var(--messing), 0 16px 36px -16px rgba(0, 0, 0, .6); } /* skyggen byttes uten overgang */
@media (min-width: 761px) {
  .hero.hero-foto { padding-top: calc(var(--hdr) + 104px); padding-bottom: calc(76px + clamp(24px, 3vh, 40px)); } /* who-chip og kicker kolliderer aldri; trust-raden går klar av flisene */
  .tallband { padding-top: 28px; }
  .tallband > .wrap { display: flex; flex-direction: column; }
  .tb-grid { margin-top: -76px; }   /* 28 px ark + 48 px inn i fotoet */
  .tb-head { order: 2; margin: 28px 0 0; }
  .hf-cue { bottom: 112px; }
}

/* ================= GRØNNE ROM ================= */
/* Ett flaskegrønt rom per side (build.py romify): panelvegg, bildelist i messing, én lampe oppe til høyre, lys ovenfra, mørkere gulv.
   Bare TEKSTROLLER snus her – flater bruker konstanter. ALDRI overflow på .rom/.rom-for/.rom-etter (dreper sticky); klippet skjer i .rom-bak. */
.section.rom { position: relative; isolation: isolate; background: var(--flaske); color: var(--ink);
  --ink: var(--bein-t); --muted: var(--rom-dempet); --green: var(--messing-lys); --green-deep: var(--messing-lys);
  --line: rgba(226, 200, 143, .22); --pulse: rgba(108, 199, 154, .35);
  margin-top: -28px; padding-top: calc(var(--section) + 28px); padding-bottom: calc(var(--section) + 28px); }
.section.rom.stack-sec { padding-bottom: calc(clamp(56px, 6vw, 96px) + 28px); }
.rom-bak { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--rom-topp) 0, var(--flaske) 38%, var(--flaske) 62%, var(--flaske-dyp) 100%); /* fallback uten min()/max() */
  background:
    radial-gradient(circle 560px at calc(100% - 140px) 0, rgba(var(--lampe), .16), rgba(var(--lampe), .05) 45%, rgba(var(--lampe), 0) 70%), /* lampa – forankret i px i taket (ikke % av romhøyden: galleriet er ~10 000 px) */
    radial-gradient(circle 900px at 28% 640px, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 70%),  /* fløyelsglans i px */
    linear-gradient(90deg, rgba(8, 22, 15, .30), rgba(8, 22, 15, 0) 16% 84%, rgba(8, 22, 15, .30)),    /* skygge i hjørnene */
    linear-gradient(180deg, var(--rom-topp) 0, var(--flaske) min(38%, 900px), var(--flaske) max(62%, calc(100% - 900px)), var(--flaske-dyp) 100%); } /* lys ovenfra, mørkere gulv */
.rom-vegg { position: absolute; inset: -40px 0; background: var(--panel-d) center top / 320px 680px repeat; } /* 40 px luft: laget glir ±17 px uten at kanten vises */
@media (max-width: 760px) { .rom-vegg { background: var(--panel-m) center top / 176px 420px repeat; }
  .rom-bak { background:
    radial-gradient(circle 240px at 100% 0, rgba(var(--lampe), .08), rgba(var(--lampe), 0) 70%),
    radial-gradient(circle 420px at 20% 480px, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 70%),
    linear-gradient(90deg, rgba(8, 22, 15, .22), rgba(8, 22, 15, 0) 14% 86%, rgba(8, 22, 15, .22)),
    linear-gradient(180deg, var(--rom-topp) 0, var(--flaske) min(38%, 700px), var(--flaske) max(62%, calc(100% - 700px)), var(--flaske-dyp) 100%); } }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) { .rom-vegg[data-speed] { will-change: transform; } }
/* glatt frise over panelene: seksjonshodet (kicker, h2, ingress) står på glatt vegg, panelene starter under – som i et ekte rom */
.section.rom { --vegg-fri: 300px; }
.section.rom.stack-sec { --vegg-fri: 420px; }
@media (max-width: 760px) { .section.rom { --vegg-fri: 380px; } .section.rom.stack-sec { --vegg-fri: 560px; } }
.rom-vegg { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .06) 0 var(--vegg-fri), #000 calc(var(--vegg-fri) + 140px)); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .06) 0 var(--vegg-fri), #000 calc(var(--vegg-fri) + 140px)); }
/* bildelist i børstet messing med skyggestrek under */
.section.rom::before { content: ""; position: absolute; left: 0; right: 0; top: calc(28px + clamp(14px, 1.6vw, 22px)); height: 1px; margin: 0; width: auto; pointer-events: none;
  background: linear-gradient(90deg, rgba(184, 151, 90, 0), rgba(184, 151, 90, .55) 12%, rgba(226, 200, 143, .8) 50%, rgba(184, 151, 90, .55) 88%, rgba(184, 151, 90, 0));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.rom :is(h2, h3):not(.card *) { text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.rom :focus-visible { outline-color: var(--messing-lys); }
.rom mark { background-image: none; color: var(--messing-lys); padding: 0; margin: 0; }
.rom .status-dot::before { background: var(--signal); }
.rom .r-logo, .rom .logo-chip:not(.card .logo-chip) { background: var(--bein-t); padding: 8px 12px; border-radius: 10px; box-sizing: content-box; }
:is(.rom, .hero-foto, .cta-box, .site-footer) .kicker::before { background: linear-gradient(90deg, #9C7C42, var(--messing-lys)); }
/* lyse ark som glir 28 px over og under rommet */
.rom-for, .rom-etter { position: relative; z-index: 1; }
.rom-for:not(.section-tint) { background: linear-gradient(0deg, var(--bg) 0 120px, rgba(248, 246, 241, 0) 320px); }
.rom-etter:not(.section-tint) { background: linear-gradient(180deg, var(--bg) 0 120px, rgba(248, 246, 241, 0) 320px); }
.rom-for { border-radius: 0 0 10px 10px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .9), 0 10px 14px -12px rgba(4, 12, 8, .35), 0 28px 44px -30px rgba(4, 12, 8, .6); }
.section.rom-etter { margin-top: -28px; padding-top: clamp(72px, 9vw, 128px); border-radius: 10px 10px 0 0;
  box-shadow: inset 0 1px 0 #fff, 0 -10px 14px -12px rgba(4, 12, 8, .35), 0 -28px 44px -30px rgba(4, 12, 8, .6); }
/* linpapir-kort foran veggen – tokens settes tilbake, så alle komponenter virker uendret */
.rom :is(.card, .stat, .tl-body, .faq, .cert), .rom .r-main > .checks {
  --ink: #141A16; --muted: #575D58; --green: var(--flaske); --green-deep: var(--flaske-dyp); --line: #E3E0D7; --pulse: rgba(38, 74, 54, .35);
  color: var(--ink);
  background: linear-gradient(200deg, var(--linpapir) 0%, #F8F6F1 46%, #F1EEE6 100%); /* lampelyset treffer øvre høyre hjørne */
  border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(var(--sk), .07), var(--e-rom);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.rom .r-main > .checks { padding: 20px 22px; border-radius: 10px; }
.rom .r-main > .checks .ic { background: var(--flaske-soft); color: var(--flaske); }
@media (hover: hover) { .rom .card:not(.scard):hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, var(--e-rom), -14px 56px 88px -36px rgba(4, 12, 8, .5); } }
.rom .price-featured { border-color: var(--messing); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--messing), 0 0 0 5px rgba(226, 200, 143, .22), var(--e-rom); }
.rom .price-featured::after { content: ""; position: absolute; inset: 10px; border-radius: 10px; border: 1px solid rgba(125, 95, 42, .30); pointer-events: none; } /* passepartout */
.rom .btn-green:not(.card .btn-green) { background: var(--bein-t); color: var(--flaske-dyp); box-shadow: inset 0 1px 0 #fff, var(--e-rom); }
.rom .btn-ghost:not(.card .btn-ghost) { background: var(--black); color: var(--bein-t); border-color: var(--messing); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), var(--e-rom); }
@media (hover: hover) { .rom .btn-ghost:not(.card .btn-ghost):hover { background: var(--black); color: var(--bein-t); border-color: var(--messing-lys); } }
@media (hover: none) { .rom .btn-ghost:not(.card .btn-ghost):hover { background: var(--black); color: var(--bein-t); } }
.rom .r-aerlig { background: rgba(0, 0, 0, .18); color: var(--rom-dempet); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .05); }
.rom .rbar-track { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.rom .rbar-track i { background: var(--messing-lys); } /* søylene i messing på grønt; på lyst er de flaske */
.rom .phone:not(.card .phone) { box-shadow: 0 0 0 1px rgba(226, 200, 143, .25), inset 0 0 0 1px rgba(255, 255, 255, .22), -8px 30px 50px -18px rgba(0, 0, 0, .75); } /* sort ramme mot grønt = 1,34:1 → messinghårstrek */
.rom .tl-when::after { background: var(--messing-lys); box-shadow: 0 0 0 4px var(--flaske), 0 0 0 5px rgba(226, 200, 143, .4); }
@media (min-width: 561px) { .rom .timeline::before { content: ""; position: absolute; left: 130px; top: 24px; bottom: 24px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(226, 200, 143, .45) 8% 92%, transparent); } } /* midt i prikkene */

/* Mørk andel ≤ 18 % på undersidene (check.py --morkhet): korte rom får litt mindre luft enn galleriet */
.section.rom:not(.stack-sec) { padding-top: calc(clamp(48px, 5.5vw, 80px) + 28px); padding-bottom: calc(clamp(48px, 5.5vw, 80px) + 28px); }
.rom:not(.stack-sec) .sec-head { margin-bottom: clamp(28px, 3.5vw, 48px); max-width: 960px; } /* overskriften på én linje der den får plass – mindre vegg uten innhold */
.rom .r-head { margin-bottom: 22px; }
/* /om/: tidslinjen i rommet får bredere ark (mer lyst foran veggen), linjene holdes lesbare */
/* /om/ fra 1081 px: tidslinjen som 2 × 2 i full bredde – årstallet i messing-lys på veggen med en messinglist mot høyre, kortet under.
   Halverer rommets høyde (mørk andel 23 → under 18 %), og lesingen går fortsatt 2018 → 2026. */
@media (min-width: 1081px) {
  .rom .wrap.narrow { max-width: var(--wrap); }
  .rom .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
  .rom .timeline::before { content: none; }
  .rom .tl { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0; }
  /* årstallet er et merke i sort lakk med messingring som ligger over kortets overkant (som «Mest valgt») */
  .rom .tl-when { justify-self: start; position: relative; z-index: 1; margin: 0 0 -15px 22px; padding: 5px 12px; border-radius: 10px; font-size: .95rem; line-height: 1.25;
    background: var(--black); color: var(--messing-lys); box-shadow: inset 0 0 0 1px var(--messing), var(--e1); }
  .rom .tl-when::after { content: none; }
  .rom .tl-body { padding-top: 28px; }
}
/* /resultater/: hele resultatet (tall, søyler, «det jeg gjorde», telefonen) er ett linpapirark foran veggen – les på lyst.
   Overskriften, logoen på beinplate og perioden står på veggen. */
.rom .r-grid { --ink: #141A16; --muted: #575D58; --green: var(--flaske); --green-deep: var(--flaske-dyp); --line: #E3E0D7; --pulse: rgba(38, 74, 54, .35);
  color: var(--ink); padding: clamp(18px, 3vw, 40px); border-radius: 10px;
  background: linear-gradient(200deg, var(--linpapir) 0%, #F8F6F1 46%, #F1EEE6 100%);
  border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(var(--sk), .07), var(--e-rom); }
.rom .r-grid .stat { background: var(--kort-fyll); border: var(--kant); box-shadow: var(--topp), var(--e1); }
.rom .r-grid .r-main > .checks { padding: 0; background: none; border: 0; box-shadow: none; }
.rom .r-grid .r-aerlig { background: linear-gradient(180deg, #ECEFE8, #F3F4EE); color: var(--muted); box-shadow: var(--e0), inset 0 -1px 0 #fff; }
.rom .r-grid .rbar-track { background: var(--sage); box-shadow: inset 0 1px 2px rgba(var(--sk), .14); }
.rom .r-grid .rbar-track i { background: var(--flaske); }
.rom .r-grid .phone { box-shadow: 0 0 0 1px rgba(125, 95, 42, .30), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 3px rgba(var(--sk), .25), -8px 30px 50px -18px rgba(var(--sk), .55); }
.rom .r-grid :focus-visible { outline-color: var(--flaske); }
@media (max-width: 900px) { .rom .r-phone { padding-top: 6px; } }

/* ================= Galleriet: kort som trekker seg inn i rommet ================= */
.scard::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 22, 15, .10), rgba(8, 22, 15, .18)); opacity: 0; transition: opacity .35s var(--spring); } /* app.js: .behind først når ≤ 12 % av kortet synes → synlig topp ≤ .11 → muted ≥ 4,85:1 */
.scard.behind::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scard::before { transition: none; } .scard.behind::before { opacity: 0; } }
.scard, .rom .scard { box-shadow: inset 0 1px 0 #fff, 0 -18px 36px -26px rgba(var(--sk), .25), var(--e-rom); } /* skygge oppover på kortet bak – .25, så den ikke mørkner synlig tekst */
/* nisje: mørk grønn i lyst rom (/prosjekter/) … */
.sc-shot, .pc-shot { border: 1px solid rgba(184, 151, 90, .35); border-radius: 10px;
  background: radial-gradient(circle 420px at 72% -10%, #34573F, var(--flaske-dyp) 70%);
  box-shadow: inset 0 22px 34px -20px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .28); }
.sc-shot { margin: 10px 0 10px 10px; }
.pc-shot { margin: 10px 10px 0; }
.pc-shot .phone { width: 224px; max-width: 72%; }
@media (max-width: 480px) { .pc-shot .phone { width: 200px; } }
@media (max-width: 860px) { .sc-shot { margin: 10px 10px 0; } }
:is(.sc-shot, .pc-shot) .phone { box-shadow: 0 0 0 1px rgba(226, 200, 143, .28), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 3px rgba(0, 0, 0, .4), -8px 30px 50px -18px rgba(0, 0, 0, .75); }
/* … og lys i mørkt rom (galleriet) – lyst foran mørkt, alltid */
.rom :is(.sc-shot, .pc-shot) { background: radial-gradient(circle 420px at 72% -10%, #FFFFFF, #EDF1EB 70%); border-color: rgba(125, 95, 42, .28);
  box-shadow: inset 0 22px 30px -22px rgba(var(--sk), .30), inset 0 0 0 1px rgba(var(--sk), .06); }
.rom :is(.sc-shot, .pc-shot) .phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 2px 3px rgba(var(--sk), .25), -8px 30px 50px -18px rgba(var(--sk), .55); }
@media (min-width: 1081px) { .rom .stack { width: min(100% - 2 * var(--gutter), 1240px); } .rom .scard { min-height: min(600px, 74vh); } }

/* ================= CTA-panel i flaskegrønn fløyel som overlapper den sorte footeren ================= */
main > .cta-sec:last-child { position: relative; z-index: 2; padding-bottom: 0; margin-bottom: calc(-1 * var(--cta-over)); } /* padding-bottom 0 – ellers spiser seksjonsluften overlappen */
.cta-box { color: var(--bein-t); border: 1px solid rgba(4, 12, 8, .5); -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(circle 520px at 88% -20%, rgba(var(--lampe), .08), rgba(var(--lampe), 0)), linear-gradient(180deg, var(--rom-topp), var(--flaske) 45%, var(--flaske-dyp));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), var(--e-rom), -16px 70px 110px -40px rgba(4, 12, 8, .7); }
.cta-box > * { position: relative; }
.cta-box h2 { color: var(--bein-t); text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.cta-box .lead { color: var(--rom-dempet); }
.cta-box .btn-dark { background: var(--bein-t); color: var(--flaske-dyp); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(var(--sk), .12), 0 10px 22px -12px rgba(0, 0, 0, .6); }
.cta-box .btn-ghost, .cta-box .btn-ghost:hover { background: var(--black); color: var(--bein-t); border: 1px solid var(--messing); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
@media (hover: hover) { .cta-box .btn-ghost:hover { border-color: var(--messing-lys); } }
@media (hover: none) { .cta-box .btn-dark:hover { background: var(--bein-t); transform: none; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(var(--sk), .12), 0 10px 22px -12px rgba(0, 0, 0, .6); } }
.site-footer { background: var(--black); border-top: 0; box-shadow: none; }
.site-footer.under-cta { margin-top: 0; padding-top: calc(var(--cta-over) + clamp(48px, 5vw, 80px)); }
.ftr-brand, .ftr-col { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%); border: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 0 rgba(255, 255, 255, .06); } /* innfelte paneler i sort */
.ftr-bottom { border-top-color: rgba(184, 151, 90, .22); }
.ftr h2 { color: var(--bein-t); }

/* ================= Cookie-kort, valgpanel og personvern ================= */
/* Kortet svever → glass med høyeste elevasjon og en messinglist. Plassering og klasser fra cookie-agenten er uendret. */
.samtykke { background: var(--g-fill-solid); border: 1px solid var(--g-edge); }
.samtykke::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(184, 151, 90, .7), transparent); }
.sk-panel .sk-knapper { background: #FBF9F3; border-top-color: var(--line); }
.pv-tabell { background: var(--kort-fyll); border: var(--kant); border-radius: 10px; box-shadow: var(--topp), var(--e1); padding: 4px 18px; overflow-x: auto; }
.pv-tabell tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 760px) {
  .pv-tabell { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
  .pv-tabell tr { background: var(--kort-fyll); border: var(--kant); box-shadow: var(--topp), var(--e1); }
}
.prose .pv-hopp a { background: var(--kort-fyll); border: var(--kant); box-shadow: var(--topp), var(--e1); }
.prose .pv-hopp a:hover { border-color: var(--flaske); color: var(--flaske); }
.pv-kort { position: relative; }
.pv-kort::after { content: ""; position: absolute; inset: 10px; border-radius: 10px; pointer-events: none; border: 1px solid rgba(125, 95, 42, .26); } /* messing-panelliste */
.pv-kort > * { position: relative; z-index: 1; }
.page-personvern .prose > h2::before, .pv-kort h2::before { content: ""; display: block; width: 24px; height: 1px; margin-bottom: .8em; background: linear-gradient(90deg, var(--messing-mork), var(--messing)); }
/* Fallback-nett: gjennomsiktighet av / forced-colors → tette hvite flater med samme kant og lys; ingen backdrop-filter → tett; Save-Data/≤2 GB (html.lite) → kant og innlys beholdes, blur bort */
@media (prefers-reduced-transparency: reduce), (forced-colors: active) { :root { --g-fill: #fff; --g-fill-solid: #fff; --g-fill-lite: #fff; --g-edge: var(--line); --g-dark: var(--black); --g-blur: none; --g-blur-sm: none; } body::before, body::after { display: none; } }
@media (forced-colors: active) { .rom-bak, .section.rom::before { display: none; } .sk-panel { background: Canvas; } .sk-sw { -webkit-appearance: auto; appearance: auto; width: 24px; height: 24px; background: none; border: 0; } } /* cookie-panelet tett, bryteren tegnes som systemets avkrysningsboks med synlig av/på */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --g-fill: #fff; --g-fill-solid: #fff; --g-blur: none; --g-blur-sm: none; } }
html.lite { --g-blur: none; --g-blur-sm: none; }
/* Redusert bevegelse for trykk-fysikk og hover-løft – står SIST så ingen senere regel (f.eks. .deck-dot i) kan slå den */
@media (prefers-reduced-motion: reduce) { .btn, .chip, .opt, .card, .tl-body, .deck-dot i, .totopp { transition: none; } }
/* Utskrift: rom og CTA blir hvite med mørk tekst */
@media print { .section.rom, .cta-box { background: #fff; color: #141A16; --ink: #141A16; --muted: #575D58; --green: #264A36; --green-deep: #1B3728; box-shadow: none; } .cta-box h2 { color: #141A16; } .cta-box .lead { color: #575D58; } .rom-bak, .section.rom::before { display: none; } main > .cta-sec:last-child { margin-bottom: 0; } }