/* ---------- Fonter (selvhostet, ingen tredjepart) ----------
   ITF Free Font License + OnlineWebFonts-konvertering (demo) – ikke lisensiert for kommersiell levering. Se assets/fonts/lisenser/
   Variable filer: én per stil dekker hele vektaksen 100-900.
   ---------------------------------------------------------- */
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('../assets/fonts/cabinet-grotesk-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Boska';
  src:url('../assets/fonts/boska-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Boska';
  src:url('../assets/fonts/boska-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-300-normal.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('../assets/fonts/switzer-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('../assets/fonts/switzer-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}

/* ===================== Tokens (Design DNA, se research/notat.md) ===================== */
:root{
  --c-papir:#FCFAF5; --c-flate:#F1E8D3; --c-kort:#FFFFFF; --c-blekk:#1D1912; --c-dempet:#5E5547;
  --c-aksent:#BC9C22; --c-aksent-tekst:#7A6210; --c-stjerne:#9A7B12; --c-stjerne-lys:#E6CB6E;
  --c-linje:rgba(29,25,18,.14); --c-fokus:#1D1912; --c-mork:#1D1912; --c-paa-mork:#FCFAF5;
  --f-display:'Cabinet Grotesk','Switzer',system-ui,sans-serif; --f-tekst:'Switzer',system-ui,sans-serif;
  --d-vekt:800; --d-lh:.98; --d-spor:-.02em; --d-skala:1;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  --r-kort:8px; --r-pille:999px;
  --ramme:1344px; --kant:48px; --topp:76px;
  --ease:cubic-bezier(.23,1,.32,1);
  --z-dekor:1; --z-sticky:100; --z-dokk:200; --z-overlay:300; --z-panel:400; --z-varsel:500;
}
html[data-pal="2"]{--c-papir:#FAF2F0; --c-flate:#F2DED9; --c-blekk:#231F20; --c-dempet:#695957; --c-aksent:#E3A196; --c-aksent-tekst:#A0473B; --c-stjerne:#A85246; --c-stjerne-lys:#F4B9AE; --c-fokus:#231F20; --c-mork:#2A2122;}
html[data-pal="3"]{--c-papir:#F4F4EF; --c-flate:#DFE3D5; --c-blekk:#1B1F19; --c-dempet:#51584D; --c-aksent:#C8B46C; --c-aksent-tekst:#5B6A37; --c-stjerne:#76661C; --c-stjerne-lys:#D9C77F; --c-fokus:#1B1F19; --c-mork:#232A22;}
html[data-font="2"]{--f-display:'Boska',Georgia,serif; --d-vekt:400; --d-lh:1.02; --d-spor:-.025em; --d-skala:1.06;}
html[data-font="3"]{--f-display:'Suisse Intl','Switzer',system-ui,sans-serif; --d-vekt:300; --d-lh:.98; --d-spor:-.035em; --d-skala:.98;}

/* ===================== Grunnlag ===================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topp) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-papir);color:var(--c-blekk);font:400 17px/1.55 var(--f-tekst);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--c-fokus);outline-offset:3px;border-radius:2px}
.vis-skjermleser{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hopp{position:absolute;left:16px;top:-80px;z-index:var(--z-varsel);background:var(--c-blekk);color:var(--c-papir);padding:12px 16px;border-radius:var(--r-pille)}
.hopp:focus{top:12px}
.ramme{max-width:var(--ramme);margin:0 auto;padding:0 var(--kant)}
.ikon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.h2{font-family:var(--f-display);font-weight:var(--d-vekt);letter-spacing:var(--d-spor);line-height:1.02;font-size:calc(clamp(36px,4.6vw,66px)*var(--d-skala));text-wrap:balance}

/* Knapper: piller som Anywell */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r-pille);font:700 16px/1 var(--f-tekst);text-decoration:none;border:1px solid transparent;background:transparent;transition:background-color .2s var(--ease),color .2s var(--ease),transform .16s var(--ease)}
.knapp:active{transform:scale(.97)}
.knapp--gull{background:var(--c-aksent);color:var(--c-blekk)}
.knapp--gull:hover{background:color-mix(in srgb,var(--c-aksent) 86%,#fff)}
.knapp--lys{border-color:rgba(255,255,255,.8);color:#fff}
.knapp--lys:hover{background:rgba(255,255,255,.12)}
.knapp--ramme{border-color:var(--c-blekk);color:var(--c-blekk)}
.knapp--ramme:hover{background:var(--c-blekk);color:var(--c-papir)}
.knapp--mork{background:var(--c-blekk);color:var(--c-papir)}
.lenke{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;text-decoration:none;color:var(--c-blekk);border-bottom:1px solid transparent}
.lenke:hover{border-bottom-color:currentColor}

/* Stjerner: fylles til snittet (4,9 = 98 %) */
.stjerner{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:2px;color:color-mix(in srgb,var(--c-stjerne) 28%,transparent)}
.stjerner::before{content:"★★★★★"}
.stjerner__fylt{position:absolute;inset:0 auto 0 0;width:var(--fyll);overflow:hidden;white-space:nowrap;color:var(--c-stjerne)}
.stjerner__fylt::before{content:"★★★★★"}
.stjerner--stor{font-size:20px}

/* ===================== Toppen ===================== */
.topp{position:fixed;inset:0 0 auto 0;z-index:var(--z-sticky);height:var(--topp);display:flex;align-items:center;gap:var(--s-4);padding:0 var(--kant);background:var(--c-papir);border-bottom:1px solid var(--c-linje);transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.topp__logo{display:flex;align-items:center;min-height:48px;margin-right:auto}
.topp__logo img{height:46px;width:auto}
.topp__logo-lys{display:none!important}
.topp__nav{display:flex;gap:var(--s-3)}
.topp__nav a{font-size:15px;font-weight:500;text-decoration:none;padding:12px 0}
.topp__nav a:hover{text-decoration:underline;text-underline-offset:4px}
.topp__knapp{min-height:46px;padding:0 20px;font-size:15px}
/* Over fotoheroen er toppen gjennomsiktig med lys tekst, til siden er rullet */
html[data-hero="1"] .topp:not(.er-rullet){background:transparent;border-bottom-color:transparent;color:#fff}
html[data-hero="1"] .topp:not(.er-rullet) .topp__logo-lys{display:block!important}
html[data-hero="1"] .topp:not(.er-rullet) .topp__logo-mork{display:none}
html[data-hero="1"] .topp:not(.er-rullet) .topp__knapp{border-color:rgba(255,255,255,.8);color:#fff}
html[data-hero="1"] .topp:not(.er-rullet) .topp__knapp:hover{background:rgba(255,255,255,.14)}
html[data-hero="1"] .topp:not(.er-rullet){--c-fokus:#fff}

/* ===================== Heroene: visningen styres bare av html[data-hero] ===================== */
.hero{display:none;position:relative}
html[data-hero="1"] .hero[data-hero="1"]{display:block}
html[data-hero="2"] .hero[data-hero="2"]{display:block}

.hero__line{display:block;overflow:hidden;padding:.2em .25em .26em;margin:-.2em -.25em -.26em}
.hero__line-in{display:block}
.hero__tittel{display:flex;flex-direction:column;font-family:var(--f-display);font-weight:var(--d-vekt);letter-spacing:var(--d-spor);line-height:var(--d-lh)}
html.anim-hero .hero__line-in{transform:translateY(150%)}
html.anim-hero .hero__sub{opacity:0}

/* Hero 1: kundens eget vippefoto i full bredde, tung grotesk */
.hero--foto{min-height:max(680px,100svh);color:#fff;background:#1D1912;overflow:hidden}
.hero__foto,.hero__foto img{position:absolute;inset:0;width:100%;height:100%}
.hero__foto img{object-fit:cover;object-position:62% 55%}
.hero--foto::after{content:"";position:absolute;inset:0;z-index:var(--z-dekor);pointer-events:none;
  background:linear-gradient(180deg,rgba(24,18,10,.62) 0,rgba(24,18,10,0) 150px),
             linear-gradient(90deg,rgba(24,18,10,.86) 0%,rgba(24,18,10,.72) 34%,rgba(24,18,10,.3) 62%,rgba(24,18,10,.12) 100%),
             linear-gradient(0deg,rgba(24,18,10,.6) 0%,rgba(24,18,10,0) 38%)}
.hero__innhold{position:relative;z-index:2;max-width:var(--ramme);margin:0 auto;padding:calc(var(--topp) + 32px) var(--kant) 104px;display:flex;flex-direction:column;align-items:flex-start;min-height:max(680px,100svh);justify-content:center}
.hero--foto .hero__tittel{font-size:calc(clamp(68px,10vw,148px)*var(--d-skala));margin:var(--s-2) 0 var(--s-3)}
.hero__ingress{max-width:600px;font-size:19px;line-height:1.55}
.hero__knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-4)}
.hero__vurdering{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500;color:#fff;text-decoration:none}
.hero__vurdering .stjerner{--c-stjerne:var(--c-stjerne-lys);color:rgba(255,255,255,.3)}
.hero__vurdering:hover span:last-child{text-decoration:underline;text-underline-offset:4px}
.hero__vurdering--mork{color:var(--c-blekk)}
.hero__vurdering--mork .stjerner{--c-stjerne:var(--c-stjerne);color:color-mix(in srgb,var(--c-stjerne) 28%,transparent)}
.hero__piller{position:absolute;z-index:2;right:var(--kant);bottom:96px;display:flex;gap:8px}
.hero__piller li{display:flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.6);border-radius:var(--r-pille);font-size:15px;background:rgba(24,18,10,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Hero 2: rund film i tynn ring, lett serif, rosetter (Likha) */
.hero--ring{padding:calc(var(--topp) + 40px) 0 56px;min-height:min(100svh,880px);display:none}
html[data-hero="2"] .hero--ring{display:flex;align-items:center}
.ring{width:100%;max-width:var(--ramme);margin:0 auto;padding:0 var(--kant);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s-4)}
.ring__tittel{color:var(--c-aksent-tekst);font-size:calc(clamp(52px,6vw,88px)*var(--d-skala))}
.ring__venstre{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:var(--s-3);position:relative;z-index:2;margin-right:-20px}
.ring__venstre .ring__tittel{align-items:flex-end}
.ring__hoyre{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);padding-top:16vh;position:relative;z-index:2;margin-left:-20px}
.ring__ingress{max-width:360px;font-size:17px;color:var(--c-dempet)}
.ring__hoyre .hero__knapper{margin-top:0}
.ring__midt{position:relative;padding:36px}
.ring__midt::before{content:"";position:absolute;inset:0;border:1px solid var(--c-aksent);border-radius:50%;pointer-events:none}
.ring__sirkel{width:clamp(280px,29vw,430px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--c-flate)}
.hero__film{width:100%;height:100%;object-fit:cover}
.rosett{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:116px;height:116px;border-radius:50%;background:var(--c-papir);border:1px solid var(--c-aksent);text-align:center;line-height:1.1;color:var(--c-blekk)}
.rosett span{font-size:14px;color:var(--c-dempet)}
.rosett b{font-family:var(--f-display);font-weight:var(--d-vekt);font-size:22px;letter-spacing:var(--d-spor)}
.rosett small{font-size:12px;color:var(--c-dempet);margin-top:2px}
.rosett--a{top:4%;right:-14px}
.rosett--b{bottom:2%;left:-14px}

/* ===================== Utsagn: svaret først ===================== */
.utsagn{padding:var(--s-8) 0 var(--s-7)}
.utsagn__rad{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s-6);align-items:end}
.utsagn__tittel{font-family:var(--f-display);font-weight:var(--d-vekt);letter-spacing:var(--d-spor);line-height:1.04;font-size:calc(clamp(30px,3.6vw,52px)*var(--d-skala));text-wrap:balance}
.utsagn__tekst{color:var(--c-dempet);font-size:17px}

/* ===================== Behandlinger ===================== */
.behandlinger{padding:0 0 var(--s-8)}
.seksjonstopp{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.seksjonstopp__tekst{max-width:420px;color:var(--c-dempet)}
.kort-rad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4) var(--s-3)}
.kort{position:relative;display:flex;flex-direction:column;gap:10px}
.kort__bilde{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-kort);margin-bottom:6px;transition:transform .5s var(--ease)}
.kort__navn{font-family:var(--f-display);font-weight:var(--d-vekt);letter-spacing:var(--d-spor);font-size:calc(26px*var(--d-skala));line-height:1.1}
.kort__tekst{color:var(--c-dempet);font-size:16px}
.kort__meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--c-linje);font-weight:600;font-size:15px}
.kort__lenke{position:absolute;inset:0;border-radius:var(--r-kort)}
.kort:hover .kort__navn{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){.kort{overflow:visible}.kort:hover .kort__bilde{transform:scale(1.015)}}

.prisliste{margin-top:var(--s-6);border-top:1px solid var(--c-linje);border-bottom:1px solid var(--c-linje)}
.prisliste summary{display:flex;align-items:center;justify-content:space-between;min-height:64px;cursor:pointer;list-style:none;font-family:var(--f-display);font-weight:var(--d-vekt);font-size:calc(24px*var(--d-skala));letter-spacing:var(--d-spor)}
.prisliste summary::-webkit-details-marker{display:none}
.prisliste summary .ikon,.faq__punkt summary .ikon{width:22px;height:22px;transition:transform .25s var(--ease)}
.prisliste[open] summary .ikon,.faq__punkt[open] summary .ikon{transform:rotate(45deg)}
.prisliste__kolonner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);padding:var(--s-2) 0 var(--s-5)}
.prisliste__gruppe div{display:flex;justify-content:space-between;gap:var(--s-2);padding:10px 0;border-bottom:1px solid var(--c-linje);font-size:15px}
.prisliste__gruppe dt{color:var(--c-dempet)}
.prisliste__gruppe dd{font-weight:600;white-space:nowrap}
.prisliste__navn{font-weight:700;color:var(--c-blekk)!important;padding-bottom:6px;font-size:17px}

/* ===================== Velgeren ===================== */
.velger{padding:var(--s-8) 0;background:var(--c-flate)}
.velger__rad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7);align-items:start}
.velger__ingress{margin-top:var(--s-3);color:var(--c-dempet);max-width:440px}
.velger__marianne{margin-top:var(--s-5);display:flex;align-items:center;gap:var(--s-2)}
.velger__marianne img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.velger__marianne figcaption{font-size:15px;color:var(--c-dempet);max-width:260px}
.velger__skjema{background:var(--c-papir);border-radius:var(--r-kort);padding:var(--s-5)}
.velger__topp{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.velger__steg{font-size:14px;font-weight:600;color:var(--c-dempet);white-space:nowrap}
.velger__fremdrift{flex:1;height:2px;background:var(--c-linje);overflow:hidden;border-radius:2px}
.velger__fremdrift span{display:block;height:100%;background:var(--c-blekk);transform:scaleX(.25);transform-origin:0 50%;transition:transform .3s var(--ease)}
.sporsmal{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sporsmal legend{padding:0;margin-bottom:var(--s-3);font-family:var(--f-display);font-weight:var(--d-vekt);letter-spacing:var(--d-spor);font-size:calc(clamp(26px,2.4vw,34px)*var(--d-skala));line-height:1.1}
.val{position:relative;display:block}
.val input{position:absolute;opacity:0;inset:0;margin:0;pointer-events:none}
.val__rad{display:flex;align-items:center;gap:var(--s-2);min-height:60px;padding:12px 18px;border:1px solid var(--c-linje);border-radius:var(--r-kort);background:var(--c-kort);font-size:17px;cursor:pointer;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.val__rad b{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border:1px solid var(--c-linje);border-radius:6px;font-size:14px}
.val__rad:hover{border-color:var(--c-blekk)}
.val input:focus-visible + .val__rad{outline:2px solid var(--c-fokus);outline-offset:2px}
.val input:checked + .val__rad{border-color:var(--c-blekk);background:var(--c-flate)}
.val input:checked + .val__rad b{background:var(--c-blekk);color:var(--c-papir);border-color:var(--c-blekk)}
.velger__knapper{margin-top:var(--s-3);display:flex;gap:12px}
.velger__knapper .knapp{min-height:46px}
.svar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-4);outline:none}
.svar__bilde{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-kort)}
.svar__tekst{display:flex;flex-direction:column;gap:12px}
.svar__merke{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--c-aksent-tekst)}
.svar__navn{font-family:var(--f-display);font-weight:var(--d-vekt);letter-spacing:var(--d-spor);font-size:calc(clamp(30px,3vw,42px)*var(--d-skala));line-height:1.05}
.svar__hvorfor{color:var(--c-dempet)}
.svar__meta{font-weight:700}
.svar__tillegg{font-size:15px;padding:12px 14px;border-radius:var(--r-kort);background:var(--c-flate)}
.svar__knapper{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.send{grid-column:1/-1;border-top:1px solid var(--c-linje);padding-top:var(--s-4);display:flex;flex-direction:column;gap:12px}
.send__tittel{font-weight:700;font-size:19px}
.send__ingress{color:var(--c-dempet);font-size:15px;margin-top:-6px}
.send__felt{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.send__felt label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.send__felt input{min-height:50px;padding:0 14px;border:1px solid color-mix(in srgb,var(--c-blekk) 45%,transparent);border-radius:var(--r-kort);background:var(--c-kort);font:400 16px/1 var(--f-tekst);color:var(--c-blekk)}
.send__felt input[aria-invalid="true"]{border-color:#A3261B}
.feil{color:#A3261B;font-weight:500}
.samtykke{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--c-dempet);cursor:pointer;min-height:44px}
.samtykke input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--c-blekk);flex:none}
.send .knapp{align-self:flex-start}
.send__kvittering{padding:14px 16px;border-radius:var(--r-kort);background:var(--c-flate);font-weight:600}

/* ===================== Om Marianne (Anywell: foto + stor overskrift + 2x2) ===================== */
.om{padding:var(--s-8) 0}
.om__rad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-7);align-items:start}
.om__bilde img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;border-radius:var(--r-kort);background:var(--c-flate)}
.om__tittel{font-size:calc(clamp(44px,5.6vw,80px)*var(--d-skala))}
.om__ingress{margin-top:var(--s-4);font-size:19px;max-width:560px}
.fakta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4);margin-top:var(--s-6)}
.fakta li{border-top:1px solid var(--c-linje);padding-top:var(--s-2)}
.fakta h3{font-size:17px;font-weight:700;margin-bottom:6px}
.fakta p{color:var(--c-dempet);font-size:16px}

/* ===================== Salongen ===================== */
.salong{padding:0 0 var(--s-8)}
.galleri{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-2)}
.galleri img{width:100%;height:520px;object-fit:cover;border-radius:var(--r-kort)}

/* ===================== Omtaler (som oppskalert.no) ===================== */
.omtaler{padding:var(--s-8) 0;background:var(--c-flate)}
.omtaler__topp{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.snitt{display:flex;align-items:center;gap:var(--s-3)}
.snitt__tall{font-family:var(--f-display);font-weight:var(--d-vekt);letter-spacing:var(--d-spor);font-size:calc(clamp(72px,8vw,120px)*var(--d-skala));line-height:.9}
.snitt__info{display:flex;flex-direction:column;gap:8px;font-size:16px;color:var(--c-dempet)}
.omtaler__handling{display:flex;align-items:center;gap:var(--s-3)}
.pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--c-linje);border-radius:var(--r-pille);font-size:14px;font-weight:600;color:var(--c-dempet)}
.pause:hover{border-color:var(--c-blekk);color:var(--c-blekk)}
.pause .ikon{width:14px;height:14px}
.vegg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);height:640px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.vegg__kol{overflow:hidden}
.vegg__spor{display:flex;flex-direction:column;gap:var(--s-3)}
.vegg.er-i-gang .vegg__spor{animation:rull var(--fart,48s) linear infinite}
.vegg.er-i-gang .vegg__kol:nth-child(2) .vegg__spor{--fart:58s;animation-direction:reverse}
.vegg.er-i-gang .vegg__kol:nth-child(3) .vegg__spor{--fart:52s}
.vegg.er-pauset .vegg__spor,.vegg:hover .vegg__spor,.vegg:focus-within .vegg__spor{animation-play-state:paused}
@keyframes rull{from{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--s-3)/2))}}
.omtale{background:var(--c-kort);border-radius:16px;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.omtale blockquote{font-size:18px;line-height:1.5}
.omtale figcaption{display:flex;align-items:center;gap:12px;margin-top:4px}
.omtale figcaption span:last-child{display:flex;flex-direction:column}
.omtale figcaption b{font-weight:600;font-size:15px}
.omtale figcaption small{font-size:13px;color:var(--c-dempet)}
.omtale__ini{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--c-flate);font-size:14px;font-weight:700}

/* ===================== Spørsmål ===================== */
.sporsmalseksjon{padding:var(--s-8) 0}
.faq__rad{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-7);align-items:start}
.faq__intro{position:sticky;top:calc(var(--topp) + 32px)}
.faq__ingress{margin-top:var(--s-3);color:var(--c-dempet)}
.faq__ingress a{color:var(--c-blekk);font-weight:600;display:inline-block;padding:11px 0}
.faq{border-top:1px solid var(--c-linje)}
.faq__punkt{border-bottom:1px solid var(--c-linje)}
.faq__punkt summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:68px;padding:12px 0;cursor:pointer;list-style:none;font-size:19px;font-weight:600}
.faq__punkt summary::-webkit-details-marker{display:none}
.faq__punkt p{padding:0 var(--s-6) var(--s-4) 0;color:var(--c-dempet);max-width:720px}

/* ===================== Kontakt og kart ===================== */
.kontakt{padding:var(--s-8) 0;background:var(--c-flate)}
.kontakt__rad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7);align-items:center}
.kontaktliste{margin-top:var(--s-4);display:flex;flex-direction:column}
.kontaktliste li{display:flex;align-items:center;gap:14px;min-height:52px;border-bottom:1px solid var(--c-linje);font-size:17px}
.kontaktliste a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600}
.kontaktliste a:hover{text-decoration:underline;text-underline-offset:4px}
.kontakt__knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-4)}
.kart{position:relative;border-radius:var(--r-kort);overflow:hidden}
.kart__bilde{width:100%;height:440px;object-fit:cover}
.kart__nal{position:absolute;left:50%;top:calc((440px - 40px)/2);transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.kart__nal span{background:var(--c-blekk);color:var(--c-papir);font-size:14px;font-weight:700;padding:8px 12px;border-radius:var(--r-pille);white-space:nowrap}
.kart__nal::after{content:"";width:16px;height:16px;margin-top:6px;border-radius:50%;background:var(--c-aksent);border:3px solid var(--c-blekk)}
.kart figcaption{display:flex;justify-content:space-between;gap:var(--s-2);padding:10px 4px 0;font-size:13px}
.kart figcaption a{color:var(--c-dempet);min-height:32px;display:inline-flex;align-items:center}

/* ===================== Bunn ===================== */
.bunn{background:var(--c-mork);color:var(--c-paa-mork);padding:var(--s-6) 0}
.bunn__rad{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;font-size:15px}
.bunn__logo{height:56px;width:auto}
.bunn__kreditt{color:rgba(252,250,245,.72)}
.bunn__kreditt a{color:var(--c-paa-mork);display:inline-flex;align-items:center;min-height:44px}
.bunn{--c-fokus:#fff}

/* ===================== Dokk (mobil) ===================== */
.dokk{display:none}

/* ===================== Design Lab ===================== */
.lab{position:fixed;right:16px;bottom:16px;z-index:var(--z-panel);display:flex;flex-direction:column-reverse;align-items:flex-end;font-family:var(--f-tekst);color:#1C1A18;transition:transform .28s var(--ease)}
.lab__veksle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:100px;border:.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);color:#1C1A18;font:600 .9375rem/1 var(--f-tekst);cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.16),inset 0 1.5px .5px rgba(255,255,255,.65);transition:transform .16s var(--ease)}
.lab__panel{margin-bottom:10px;padding:14px;border-radius:24px;border:.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);box-shadow:0 8px 32px rgba(0,0,0,.16),inset 0 1.5px .5px rgba(255,255,255,.65)}
.lab__gruppe{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.lab__merke{width:28px;text-align:center}
.lab__gruppe button{width:44px;height:44px;border-radius:100px;border:1px solid rgba(28,26,24,.18);background:rgba(255,255,255,.55);color:#1C1A18;font:600 1rem/1 var(--f-tekst);transition:transform .16s var(--ease),background-color .15s var(--ease)}
.lab__gruppe button[aria-pressed="true"]{background:#1C1A18;color:#fff}
.lab__gruppe button:active,.lab__veksle:active{transform:scale(.96)}
.design-lab__credit{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.75rem;color:#4A4642}
.design-lab__credit-logo{display:inline-flex;align-items:center;gap:2px;font-weight:700;color:#1C1A18;text-decoration:none}
.design-lab__credit-dot,.design-lab__credit-spark{color:#B4471A}
.design-lab__credit-spark{width:12px;height:12px}

/* ===================== Mellomstørrelse ===================== */
@media (max-width:1180px){
  .topp__nav{display:none}
  .ring__hoyre{padding-top:12vh}
}

/* ===================== Mobil: ruter, ikke ramser opp (regel 2) ===================== */
@media (max-width:760px){
  :root{--kant:20px;--topp:64px;--s-8:72px;--s-7:48px;--s-6:40px}
  body{font-size:16px}
  .topp{gap:12px}
  .topp__logo img{height:38px}
  .topp__knapp{min-height:44px;padding:0 16px;font-size:14px}
  .topp__knapp .ikon{display:none}

  .hero--foto{min-height:100svh}
  .hero__foto img{object-position:50% 40%}
  .hero--foto::after{background:linear-gradient(0deg,rgba(24,18,10,.92) 0%,rgba(24,18,10,.82) 44%,rgba(24,18,10,.35) 70%,rgba(24,18,10,.25) 100%)}
  .hero__innhold{min-height:100svh;justify-content:flex-end;padding:calc(var(--topp) + 24px) var(--kant) 76px}
  .hero--foto .hero__tittel{font-size:calc(clamp(58px,17vw,84px)*var(--d-skala));margin:8px 0 16px}
  .hero__ingress{font-size:16px}
  .hero__knapper{margin-top:20px;width:100%}
  .hero__knapper .knapp{flex:1;padding:0 14px}
  .hero__piller{display:none}

  .hero--ring{padding:calc(var(--topp) + 20px) 0 76px;min-height:100svh}
  .ring{grid-template-columns:1fr;justify-items:center;gap:16px;text-align:center}
  .ring__midt{order:-1;padding:18px}
  .ring__sirkel{width:min(58vw,250px)}
  .rosett{width:84px;height:84px}
  .rosett b{font-size:16px}
  .rosett span{font-size:12px}
  .rosett small{font-size:11px}
  .rosett--a{right:-30px}
  .rosett--b{left:-30px}
  .ring__venstre,.ring__hoyre{align-items:center;text-align:center;padding-top:0;gap:12px;margin:0}
  .ring__venstre .ring__tittel{align-items:center;flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:.25em}
  .ring__tittel{font-size:calc(clamp(44px,12.4vw,60px)*var(--d-skala))}
  .ring__tittel--sist{margin-top:-14px}
  .ring__ingress{font-size:15px}
  .ring__hoyre .hero__knapper{width:100%}
  .ring__hoyre .hero__knapper .knapp{flex:1;padding:0 12px}

  .utsagn{padding:var(--s-8) 0 var(--s-6)}
  .utsagn__rad{grid-template-columns:1fr;gap:var(--s-3)}
  .utsagn__tekst{font-size:16px}

  .seksjonstopp{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:var(--s-4)}
  /* Kortene: 2 x 3 rutenett, bilde 3:2, navn, ikon og én linje. Hele kortet er lenken. */
  .kort-rad{grid-template-columns:1fr 1fr;gap:20px 12px}
  .kort{gap:6px}
  .kort__bilde{aspect-ratio:3/2;margin-bottom:2px}
  .kort__navn{font-size:calc(17px*var(--d-skala));line-height:1.15}
  .kort__tekst{display:none}
  .kort__meta{padding-top:6px;font-size:13px;gap:6px}
  .kort__meta .ikon{width:15px;height:15px}
  .prisliste{margin-top:var(--s-5)}
  .prisliste__kolonner{grid-template-columns:1fr;gap:var(--s-3)}

  .velger__rad{grid-template-columns:1fr;gap:var(--s-4)}
  .velger__marianne{margin-top:var(--s-3)}
  .velger__marianne img{width:56px;height:56px}
  .velger__skjema{padding:20px}
  .velger__topp{margin-bottom:var(--s-3)}
  .val__rad{min-height:56px;font-size:16px}
  .svar{grid-template-columns:1fr;gap:var(--s-3)}
  .svar__bilde{aspect-ratio:3/2}
  .send__felt{grid-template-columns:1fr}

  .om__rad{grid-template-columns:1fr;gap:var(--s-4)}
  .om__bilde img{aspect-ratio:3/2;object-position:50% 12%}
  .om__ingress{font-size:16px;margin-top:var(--s-2)}
  .fakta{gap:var(--s-3) var(--s-2);margin-top:var(--s-4)}
  .fakta h3{font-size:15px}
  .fakta p{font-size:14px}

  .galleri{grid-template-columns:2fr 1fr;gap:8px}
  .galleri img{height:200px}

  /* Omtalene: snittet, to sitater og lenken (regel 20.6) */
  .omtaler__topp{flex-direction:column;align-items:flex-start;gap:var(--s-2);margin-bottom:var(--s-4)}
  .pause{display:none}
  .vegg{display:block;height:auto;-webkit-mask-image:none;mask-image:none}
  .vegg__kol:not(:first-child){display:none}
  .vegg__spor{animation:none!important;gap:12px}
  .vegg__spor .omtale:nth-child(n+3){display:none}
  .omtale{padding:20px}
  .omtale blockquote{font-size:16px}

  .faq__rad{grid-template-columns:1fr;gap:var(--s-3)}
  .faq__intro{position:static}
  .faq__punkt summary{font-size:16px;min-height:56px}
  .faq__punkt p{padding:0 0 var(--s-3);font-size:15px}

  .kontakt__rad{grid-template-columns:1fr;gap:var(--s-4)}
  .kontaktliste li{font-size:15px}
  .kontakt__knapper .knapp{flex:1}
  .kart__bilde{height:240px}
  .kart__nal{top:calc((240px - 40px)/2)}

  .bunn{padding:var(--s-5) 0 104px}
  .bunn__rad{flex-direction:column;align-items:flex-start;gap:12px}

  .dokk{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:var(--z-dokk);gap:8px;padding:8px;border-radius:var(--r-pille);background:var(--c-mork);transform:translateY(130%);transition:transform .28s var(--ease)}
  .dokk.er-synlig{transform:none}
  .dokk__knapp{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r-pille);color:var(--c-paa-mork);text-decoration:none;font-weight:700;font-size:15px}
  .dokk__knapp--gull{background:var(--c-aksent);color:var(--c-blekk)}

  .lab{right:12px;bottom:12px}
  html.dokk-ute .lab{transform:translateY(-72px)}
  .lab__veksle-tekst{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .vegg__spor{animation:none!important}
}