@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 800;font-display:swap;src:url(/typsnitt/nr-normal-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:"Newsreader";font-style:normal;font-weight:300 800;font-display:swap;src:url(/typsnitt/nr-normal-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 800;font-display:swap;src:url(/typsnitt/nr-italic-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:"Newsreader";font-style:italic;font-weight:300 800;font-display:swap;src:url(/typsnitt/nr-italic-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";src:url(/typsnitt/ebg-normal-400-latin.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";src:url(/typsnitt/ebg-normal-400-latin-ext.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";src:url(/typsnitt/ebg-italic-400-latin.woff2) format("woff2");
  font-weight:400 800;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";src:url(/typsnitt/ebg-italic-400-latin-ext.woff2) format("woff2");
  font-weight:400 800;font-style:italic;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";src:url(/typsnitt/arc-normal-400-latin.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(/typsnitt/arc-normal-400-latin-ext.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* Ljust och naturfärgat: björk och trä snarare än grädde. Marinblått finns
     kvar som mörk accent eftersom det är logotypens färg. */
  --papper:#f7f5f0; --papper-2:#efece4; --papper-3:#e4e0d5;
  --text:#26221c; --text-2:#5d574e; --text-3:#6a6459;
  --ljus:#f7f5f0;                       /* text ovanpå foto och video */
  --linje:rgba(38,34,28,.14); --linje-ljus:rgba(247,245,240,.24);
  --gold:#846120;                       /* guldtext, nedtonad för ljus botten */
  --gold-fyll:#c9a24b; --gold-hi:#b8913c;
  --marin:#16304d;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  /* kickers ar sparrade versaler i sans. Kursiven togs bort 2026-09-05:
     guld + kursiv las som skrivstil. Samma familj som pris-badgen. */
  --kicker:"Newsreader",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:20px; --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--papper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:left}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:rgba(201,162,75,.30);color:var(--text)}
/* Hopplank forbi den fasta navigationen, syns bara vid tangentbordsfokus */
.skip{position:absolute;left:12px;top:-70px;z-index:200;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--text);color:var(--papper);border-radius:999px;font-weight:600;font-size:14px}
.skip:focus-visible{top:12px}

/* ── In View: allt bygger på .reveal, av under reduced-motion ── */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ── Text Effect: ord för ord, blur-preset ── */
/* Text Effect, preset fade-in-blur: blur(12px)+y20, duration .3s, stagger .05s (deras varden) */
.te span{display:inline-block;white-space:pre;opacity:0;filter:blur(12px);transform:translateY(20px);
  transition:opacity .3s ease-out,filter .3s ease-out,transform .3s ease-out}
.te.in span{opacity:1;filter:blur(0px);transform:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .te span{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .hero-media{transform:none!important}
}

/* ── header: helbreddsbar. Transparent over hjalten med en mjuk toning sa texten
   bar, papper med harlinje sa snart man skrollar. Emblem + namn i stallet for den
   staplade logotypen, som blev for liten i en horisontell list. ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:150;height:72px;display:flex;align-items:center;
  padding:0 var(--pad);border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,height .35s var(--ease)}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:150%;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(24,20,15,.70),rgba(24,20,15,.32) 60%,transparent);transition:opacity .35s}
@media(max-width:759px){.nav::before{height:190%;background:linear-gradient(rgba(24,20,15,.86),rgba(24,20,15,.45) 55%,transparent)}}
.nav.fast{height:64px;background:rgba(247,245,240,.94);border-bottom-color:var(--linje);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.nav.fast::before,.nav.open::before{opacity:0}
.nav.open{background:rgba(247,245,240,.97);border-bottom-color:var(--linje)}
.nav-inner{width:100%;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:6px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ljus);margin-right:auto}
/* 38px gjorde market till klotter bredvid ordmarket. 46 racker for att hasten ska synas. */
.brand img{height:46px;width:46px;display:block}
.brand .m,.nav.fast .brand .l,.nav.open .brand .l{display:none}
.nav.fast .brand .m,.nav.open .brand .m{display:block}
.brand b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.005em;line-height:1;transition:color .3s}
.nav.fast .brand,.nav.open .brand{color:var(--text)}
.nav-links{display:none;gap:2px;margin-right:8px}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font-size:14px;letter-spacing:.01em;color:rgba(247,245,240,.88);transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:11px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
.nav-links a:hover{color:var(--ljus)}
.nav.fast .nav-links a{color:var(--text-2)} .nav.fast .nav-links a:hover{color:var(--text)}
.nav-cta{display:none;background:var(--gold-fyll);color:#231c0c;font-weight:600;font-size:14px;
  padding:0 20px;border-radius:999px;min-height:44px;align-items:center;transition:background .25s,transform .25s}
.nav-cta:hover{background:var(--gold-hi);transform:translateY(-1px)}
.nav-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;border-radius:999px;flex:none;margin-right:-8px}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ljus);border-radius:2px;
  transition:transform .35s var(--ease),background .3s}
.nav.fast .nav-toggle span,.nav.open .nav-toggle span{background:var(--text)}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
.nav-panel{position:absolute;top:100%;left:0;right:0;padding:10px var(--pad) 16px;display:flex;flex-direction:column;gap:2px;
  background:var(--papper);border-bottom:1px solid var(--linje);box-shadow:0 18px 40px -24px rgba(24,20,15,.25);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nav.open .nav-panel{opacity:1;transform:none;pointer-events:auto}
.nav-panel a{padding:0 14px;min-height:52px;display:flex;align-items:center;color:var(--text-2);border-radius:12px;font-size:16px;transition:color .2s,background .2s}
.nav-panel a:hover{color:var(--text);background:rgba(38,34,28,.05)}
.nav-panel a.meny-cta{margin-top:8px;background:var(--gold-fyll);color:#231c0c;font-weight:600;justify-content:center}
.nav-panel a.meny-cta:hover{background:var(--gold-hi);color:#0a1220}
@media(min-width:900px){.nav-toggle,.nav-panel{display:none}.nav-links{display:flex}.nav-cta{display:inline-flex}}
@media(max-width:759px){.nav{height:60px}.nav.fast{height:56px}.brand img{height:38px;width:38px}.brand b{font-size:19px}}

/* ── hero ── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  padding:96px var(--pad) clamp(52px,9vh,96px);overflow:hidden}
/* Ingen overmatt. Hjalten har overflow:hidden och parallaxen flyttar bilden nedat
   langsammare an sidan scrollar uppat, sa kanterna kan aldrig komma in i bild.
   Uppmatt over 7 vyer: 0px glapp bade med och utan overmatt. */
.hero-media{position:absolute;inset:0;z-index:0;will-change:transform}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;
  filter:brightness(.82) saturate(.95)}
/* videon laggs ovanpa posterbilden och tonas in nar den kan spela, sa inget svart blinkar */
.hero-media video{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero-media video.spelar{opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* vansterankrad mork sida: haller rubriken lasbar utan att morka hela bilden */
    linear-gradient(90deg,rgba(20,17,12,.72) 0%,rgba(20,17,12,.56) 34%,rgba(20,17,12,.16) 58%,rgba(20,17,12,0) 74%),
    linear-gradient(180deg,rgba(24,20,15,.42) 0%,rgba(24,20,15,.24) 32%,rgba(24,20,15,.40) 66%,rgba(24,20,15,.74) 100%)}

/* ── Progressive Blur: staplade lager, skarpt uppe och suddigt nere ── */
/* Progressive Blur: 8 lager, segment 1/(n+1), blur = index*0.5px (deras formel, hojd intensitet) */
.pblur{position:absolute;left:0;right:0;bottom:0;height:42vh;z-index:1;pointer-events:none}
.pblur i{position:absolute;inset:0;display:block}
.pblur i:nth-child(1){-webkit-backdrop-filter:blur(0.00px);backdrop-filter:blur(0.00px);
  -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0) 0.000%,rgba(255,255,255,1) 11.111%,rgba(255,255,255,1) 22.222%,rgba(255,255,255,0) 33.333%);
          mask-image:linear-gradient(180deg,rgba(255,255,255,0) 0.000%,rgba(255,255,255,1) 11.111%,rgba(255,255,255,1) 22.222%,rgba(255,255,255,0) 33.333%)}
.pblur i:nth-child(2){-webkit-backdrop-filter:blur(0.50px);backdrop-filter:blur(0.50px);
  -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0) 11.111%,rgba(255,255,255,1) 22.222%,rgba(255,255,255,1) 33.333%,rgba(255,255,255,0) 44.444%);
          mask-image:linear-gradient(180deg,rgba(255,255,255,0) 11.111%,rgba(255,255,255,1) 22.222%,rgba(255,255,255,1) 33.333%,rgba(255,255,255,0) 44.444%)}
.pblur i:nth-child(3){-webkit-backdrop-filter:blur(1.00px);backdrop-filter:blur(1.00px);
  -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0) 22.222%,rgba(255,255,255,1) 33.333%,rgba(255,255,255,1) 44.444%,rgba(255,255,255,0) 55.556%);
          mask-image:linear-gradient(180deg,rgba(255,255,255,0) 22.222%,rgba(255,255,255,1) 33.333%,rgba(255,255,255,1) 44.444%,rgba(255,255,255,0) 55.556%)}
.pblur i:nth-child(4){-webkit-backdrop-filter:blur(1.50px);backdrop-filter:blur(1.50px);
  -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0) 33.333%,rgba(255,255,255,1) 44.444%,rgba(255,255,255,1) 55.556%,rgba(255,255,255,0) 66.667%);
          mask-image:linear-gradient(180deg,rgba(255,255,255,0) 33.333%,rgba(255,255,255,1) 44.444%,rgba(255,255,255,1) 55.556%,rgba(255,255,255,0) 66.667%)}
.pblur i:nth-child(5){-webkit-backdrop-filter:blur(2.00px);backdrop-filter:blur(2.00px);
  -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0) 44.444%,rgba(255,255,255,1) 55.556%,rgba(255,255,255,1) 66.667%,rgba(255,255,255,0) 77.778%);
          mask-image:linear-gradient(180deg,rgba(255,255,255,0) 44.444%,rgba(255,255,255,1) 55.556%,rgba(255,255,255,1) 66.667%,rgba(255,255,255,0) 77.778%)}
.pblur i:nth-child(6){-webkit-backdrop-filter:blur(2.50px);backdrop-filter:blur(2.50px);
  -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0) 55.556%,rgba(255,255,255,1) 66.667%,rgba(255,255,255,1) 77.778%,rgba(255,255,255,0) 88.889%);
          mask-image:linear-gradient(180deg,rgba(255,255,255,0) 55.556%,rgba(255,255,255,1) 66.667%,rgba(255,255,255,1) 77.778%,rgba(255,255,255,0) 88.889%)}
.pblur i:nth-child(7){-webkit-backdrop-filter:blur(3.00px);backdrop-filter:blur(3.00px);
  -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0) 66.667%,rgba(255,255,255,1) 77.778%,rgba(255,255,255,1) 88.889%,rgba(255,255,255,0) 100.000%);
          mask-image:linear-gradient(180deg,rgba(255,255,255,0) 66.667%,rgba(255,255,255,1) 77.778%,rgba(255,255,255,1) 88.889%,rgba(255,255,255,0) 100.000%)}
.pblur i:nth-child(8){-webkit-backdrop-filter:blur(3.50px);backdrop-filter:blur(3.50px);
  -webkit-mask-image:linear-gradient(180deg,rgba(255,255,255,0) 77.778%,rgba(255,255,255,1) 88.889%,rgba(255,255,255,1) 100.000%,rgba(255,255,255,0) 111.111%);
          mask-image:linear-gradient(180deg,rgba(255,255,255,0) 77.778%,rgba(255,255,255,1) 88.889%,rgba(255,255,255,1) 100.000%,rgba(255,255,255,0) 111.111%)}

/* margin-top:auto trycker ner blocket nar det finns luft; vaxer hjalten sa slutar den verka */
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:auto auto 0}
.eyebrow{font-family:var(--sans);font-style:normal;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--gold);display:flex;align-items:center;gap:11px;margin-bottom:20px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold)}
h1{font-family:var(--display);font-weight:700;line-height:1.0;letter-spacing:-.012em;
  font-size:min(clamp(42px,10.4vw,104px),11.6vh)}
h1 em{font-style:normal;color:var(--gold)}
.hero-sub{margin-top:24px;max-width:46ch;color:var(--text-2);font-size:clamp(16px,2.4vw,18px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{min-height:52px;padding:0 26px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;
  font-weight:600;font-size:16px;
  transition:transform .5s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s}
.btn-gold{background:var(--gold-fyll);color:#231c0c}
.btn-gold:hover{background:var(--gold-hi)}
.btn-ghost{border:1px solid var(--linje-ljus);color:var(--ljus)}
.btn-ghost:hover{border-color:var(--gold)}

/* Hjaltens text ligger ovanpa video och foljer darfor inte sidans mork-pa-ljust */
.hero h1{color:var(--ljus)}
.hero h1 em{color:var(--gold-fyll)}
.hero .hero-sub{color:rgba(247,245,240,.86)}
.hero .eyebrow{color:var(--gold-fyll)}
.hero .eyebrow::before{background:var(--gold-fyll)}

/* ── korta fonster: telefon i liggande lage, lagt webblasarfonster ──
   Hjaltens luft ar tilltagen for staende vyer. I en lag vy trycker den ner
   knapparna ur bild, sa har dras luften ihop i stallet for att vaxa. */
@media (min-width:760px) and (max-height:700px){
  .hero{padding-top:68px;padding-bottom:24px}
  .hero h1{font-size:min(clamp(42px,10.4vw,104px),10.2vh)}
  .hero-sub{margin-top:12px}
  .hero-pris{margin-top:8px;font-size:14px}
  .hero-actions{margin-top:16px}
  .eyebrow{margin-bottom:12px}
}
/* Liggande telefon under 760px: videobandet tar annars hela skarmen. */
@media (max-width:759px) and (max-height:500px){
  .hero{padding-top:0}
  .hero-media{aspect-ratio:auto;height:22vh}
  .hero-inner{padding:12px var(--pad) 0}
  .hero h1 br{display:none}
  .hero h1{font-size:clamp(26px,4.6vw,32px);line-height:1.05}
  .eyebrow{display:none}
  .hero-sub{margin-top:8px;max-width:none}
  .hero-pris{margin-top:6px}
  .hero-actions{margin-top:12px}
}
/* Liggande telefon over 760px: fyra tvingade rader far inte plats pa 390px hojd.
   Slapp radbrytningarna sa rubriken flodar pa tva, och lat texten ga bredare. */
@media (min-width:760px) and (max-height:500px){
  .hero{padding-top:64px;padding-bottom:18px}
  .hero h1 br{display:none}
  .hero h1{font-size:min(clamp(42px,10.4vw,104px),11vh);max-width:22ch}
  .eyebrow{margin-bottom:8px;font-size:16px}
  .hero-sub{max-width:64ch;margin-top:8px;font-size:16px}
  .hero-pris{margin-top:6px;font-size:14px}
  .hero-actions{margin-top:12px}
}

/* ── mobil: hjalten som band + text under ──────────────────────────────
   En 16:9-video i en staende vy visar bara ~23 % av bildrutan med cover.
   Under 760px far videon darfor eget band i sitt eget forhallande, sa hela
   miljon syns, och texten flyttar ner pa ljus botten dar den inte behover
   nagot morkt overlagg alls. */
@media (max-width:759px){
  .hero{min-height:0;display:block;padding:0;overflow:visible}
  .hero-media{position:relative;inset:auto;aspect-ratio:16/9;width:100%;
    border-radius:0;overflow:hidden;will-change:auto}
  .hero-media img,.hero-media video{height:100%;width:100%;object-fit:cover;
    filter:brightness(1) saturate(1.02)}
  .hero::after,.pblur{display:none}
  .hero-inner{margin:0;padding:26px var(--pad) 4px}
  .hero h1{color:var(--text);font-size:clamp(34px,9.2vw,46px);line-height:1.04}
  .hero h1 em{color:var(--gold)}
  .hero .hero-sub{color:var(--text-2)}
  .hero .eyebrow{color:var(--gold);font-size:18px}
  .hero .eyebrow::before{background:var(--gold)}
  .hero-actions{margin-top:26px;padding-bottom:6px}
  .btn-ghost{border-color:var(--linje);color:var(--text)}
  /* mer luft och mindre inzoomat i ovriga sektioner */
  section{padding:clamp(52px,9vh,84px) 0}
  .card-img{aspect-ratio:1/1;padding:30px 0}
  .card-img img{max-width:62%}
  .card-img.foto{padding:0}
  .card-img.foto img{max-width:none}
  .shot img,.sido-bild img{aspect-ratio:4/3}
  .band-bild img{height:clamp(240px,42vh,340px)}
}

/* ── sektioner ── */
h1,h2,h3{text-wrap:balance}
section{padding:clamp(72px,12vh,138px) var(--pad);scroll-margin-top:96px}
.wrap{max-width:var(--maxw);margin:0 auto}
.label{font-family:var(--sans);font-style:normal;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--gold);margin-bottom:14px}
h2{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.008em;
  font-size:clamp(34px,5.8vw,58px);max-width:20ch}
h2 em{font-style:normal;color:var(--gold)}
.lede{margin-top:20px;max-width:56ch;color:var(--text-2);font-size:clamp(16px,2.2vw,18px)}

/* ── produktkort ── */
.grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:46px}
@media(min-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
/* Tre kort i tva spalter lamnar ett ensamt. Centrera det sa tomrummet blir avsiktligt. */
@media(min-width:560px) and (max-width:999px){
  .grid>.card:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 11px)}
}
.card{position:relative;border:1px solid var(--linje);border-radius:16px;color:inherit;text-decoration:none;
  background:var(--papper-2);
  display:flex;flex-direction:column;transform-style:preserve-3d;will-change:transform;
  transition:transform .28s cubic-bezier(.22,1.1,.36,1),border-color .35s}
.card>*{border-radius:inherit}
.card-inner{position:relative;overflow:hidden;border-radius:16px;display:flex;flex-direction:column;flex:1}
.card:hover{border-color:rgba(201,162,75,.4)}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden;padding:38px 0;
  display:flex;align-items:center;justify-content:center;
  background:var(--papper-3)}
/* betongen i produktfotot toner ut i kortet i stallet for att sluta i en hard kant */
.card-img img{width:auto;height:100%;max-width:74%;object-fit:contain;
  -webkit-mask-image:radial-gradient(60% 84% at 50% 50%,#000 28%,rgba(0,0,0,.6) 66%,transparent 100%);
          mask-image:radial-gradient(60% 84% at 50% 50%,#000 28%,rgba(0,0,0,.6) 66%,transparent 100%);
  filter:brightness(1.02) contrast(1.06) saturate(.62);
  transition:transform .8s var(--ease),filter .8s}

.card:hover .card-img img{filter:brightness(1.05) contrast(1.08) saturate(.7);transform:scale(1.02)}
/* Riktiga produktfoton (ekbord) fyller kortet och behaller sin farg.
   Betongfotot pa vaggmodellen behaller contain + avfargning tills nytt foto finns. */
.card-img.foto{padding:0;background:var(--papper-2)}
.card-img.foto img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 45%;filter:none;-webkit-mask-image:none;mask-image:none}
.card-img.foto::before,.card-img.foto::after{display:none}
.card:hover .card-img.foto img{filter:none;transform:scale(1.03)}
.card-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;position:relative;z-index:1}
.card-tag{font-family:var(--sans);font-style:normal;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--gold);margin-bottom:10px}
.card h3{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.16}
.price{margin-top:22px;padding-top:18px;border-top:1px solid var(--linje);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.price b{font-family:var(--display);font-size:34px;font-weight:600}
.price small{font-family:var(--sans);font-size:12px;color:var(--text-2)}

/* ── mattlista, pris och ridhuspaket ── */
/* Ankra pris+kryss+knapp i botten sa alla kort star i linje aven nar rubriken
   gar pa tva rader. Luften hamnar over priset, inte under knappen. */
.pris{margin-top:auto;padding-top:16px;border-top:1px solid var(--linje)}
.card h3{margin-bottom:20px}
.pris-rad{display:flex;align-items:baseline;gap:11px}
.pris-rad{flex-wrap:wrap}
.pris-rad b{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.pris-rad s{color:var(--text-3);font-size:18px;text-decoration-thickness:1px}
.pris-not{color:var(--text-2);font-size:14px;margin-top:3px}
/* Lanseringspris och det kunden far pa kopet. Slutpriset ska synas direkt,
   utan frakt som dyker upp senare i kassan. */
.pris-badge{display:inline-block;margin-top:9px;padding:5px 11px;border-radius:999px;
  background:rgba(201,162,75,.16);border:1px solid rgba(132,97,32,.32);
  /* Djupare guld an ovrig guldtext: badgen star pa guldtonad botten, inte pa papper. */
  color:#74551a;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.kryss{list-style:none;margin:14px 0 0;display:grid;gap:7px}
.kryss li{position:relative;padding-left:23px;font-size:14px;color:var(--text-2);line-height:1.45}
.kryss li::before{content:"";position:absolute;left:2px;top:4px;width:11px;height:6px;
  border-left:1.8px solid var(--gold);border-bottom:1.8px solid var(--gold);
  transform:rotate(-45deg)}
.kop{margin-top:18px;width:100%;justify-content:center;min-height:52px;font-size:16px}
.card .arr{transition:transform .3s var(--ease)}
.card:hover .arr{transform:translateX(4px)}

.paket{margin-top:26px;display:grid;grid-template-columns:1fr;gap:22px;
  border:1px solid var(--linje);border-radius:16px;padding:30px 28px;background:var(--papper-2)}
@media(min-width:820px){.paket{grid-template-columns:1fr auto;gap:44px;align-items:center;padding:34px 36px}}
.paket-etikett{font-family:var(--sans);font-style:normal;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:var(--gold)}
.paket h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,3vw,28px);margin:6px 0 8px}
.paket p:last-of-type{color:var(--text-2);font-size:16px;max-width:46ch}
.paket-rad{display:flex;align-items:baseline;gap:11px}
.paket-rad b{font-family:var(--display);font-size:34px;font-weight:600}
.paket-rad s{color:var(--text-3);font-size:18px}
.paket-not{color:var(--text-2);font-size:14px;margin:3px 0 16px}
@media(min-width:820px){.paket-pris{text-align:right}.paket-rad{justify-content:flex-end}}

/* ── problem ── */
.split{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:88px;align-items:center}}
.shot{border-radius:16px;overflow:hidden;border:1px solid var(--linje);aspect-ratio:4/3}
.shot img{width:100%;height:100%;object-fit:cover}
/* 3:4 visade bara halva fotot; 4:3 ger 89 % och mycket mer miljo runt motivet */
@media(min-width:900px){.shot{aspect-ratio:4/3}}


/* ── Varfor Bomkroken: ljusa kort med fotot ovanfor texten ──
   Ersatter de morka bento-rutorna. Kunden tyckte de blev for morka mot den ljusa
   sidan, och ljus text pa foto var dessutom kansligt for kontrast. */
.vg{display:grid;grid-template-columns:1fr;gap:20px;margin-top:46px}
@media(min-width:560px){.vg{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(min-width:1000px){.vg{grid-template-columns:repeat(4,1fr);gap:22px}}
.vk{background:var(--papper-2);border:1px solid var(--linje);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .35s,transform .45s var(--ease)}
.vk:hover{border-color:rgba(201,162,75,.45);transform:translateY(-3px)}
.vk-bild{aspect-ratio:4/3;overflow:hidden;background:var(--papper-3)}
.vk-bild img{width:100%;height:100%;object-fit:cover}
.vk-txt{padding:22px 22px 26px}
.vk-txt i{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--gold);font-style:normal}
.vk-txt h3{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,28px);
  margin:9px 0 9px;line-height:1.18}
.vk-txt p{color:var(--text-2);font-size:14px;line-height:1.6}

/* AKT 2. Varfor-sektionen ar sidans tyngdpunkt: egen botten, bredare kortremsa
   an ovriga 1180 och mer luft over. Det delar sidan i kapitel. */
#varfor .vg{max-width:1560px;margin-left:auto;margin-right:auto}
@media(min-width:1240px){ #varfor > .wrap:last-of-type{max-width:none} }
#varfor{padding-top:clamp(88px,15vh,168px);padding-bottom:clamp(88px,15vh,168px)}
#produkter{padding-top:clamp(88px,15vh,168px)}
/* Fragorna ar uppslagsmaterial, inte pitch. De behover mindre tyngd. */
#fragor{padding-top:clamp(56px,8vh,92px);padding-bottom:clamp(56px,8vh,92px)}

#varfor{background:#0f2440}
#varfor .label{color:var(--gold-fyll)}
#varfor h2{color:var(--ljus)}
#varfor h2 em{color:var(--gold-fyll)}
#varfor .lede{color:rgba(247,245,240,.76)}
#varfor .shot img{border-color:rgba(247,245,240,.14)}
/* Rubrikerna radbryts olika. Subgrid later korten dela radspar sa nummer,
   rubrik och brodtext borjar pa samma hojd i hela raden. */
@media(min-width:560px){
  .vg{grid-template-rows:auto auto auto auto}
  .vk{grid-row:span 4;display:grid;grid-template-rows:subgrid}
  .vk-txt{grid-row:span 3;display:grid;grid-template-rows:subgrid;align-content:start}
}


/* Pris i hjalten: svaret pa "vad kostar det" innan forsta skrollet */
.hero-pris{margin-top:14px;font-weight:600;font-size:16px;color:rgba(247,245,240,.92)}
/* Mobil: fast forbestall-rad efter hjalten, sa knappen alltid ar inom rackhall pa 19 skarmar */
.kop-bar{display:none}
@media (max-width:759px){
  .hero .hero-pris{color:var(--text)}
  .kop-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:140;align-items:center;justify-content:space-between;gap:12px;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:var(--papper);border-top:1px solid var(--linje);
    transform:translateY(110%);transition:transform .35s var(--ease)}
  .kop-bar.syns{transform:none}
  .kop-bar-pris{font-size:14px;color:var(--text-2)}
  .kop-bar-pris b{font-family:var(--display);font-size:22px;color:var(--text);margin-right:4px}
  .kop-bar .btn{min-height:44px;padding:0 20px;font-size:14px}
  body.kop-bar-syns{padding-bottom:74px}
}
@media (prefers-reduced-motion:reduce){.kop-bar{transition:none}}

/* ── produktdetaljer: en jamforelse, inte tre likadana block ──
   Subgrid later varje rad (bild, namn, passar, langd, faste, pris) linjera
   over de tre modellerna. Etikettkolumnen syns bara pa desktop. */
.detaljer{background:var(--papper-2)}
.jamfor{display:grid;grid-template-columns:1fr;gap:20px;margin-top:46px}
@media(min-width:560px){.jamfor{gap:22px}}
.etikett{display:none}
.modell{background:var(--papper);border:1px solid var(--linje);border-radius:16px;overflow:hidden;scroll-margin-top:110px}
.m-bild{margin:0}
.m-bild img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.m-huvud{padding:22px 22px 14px}
.m-huvud h3{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.15}
.m-huvud p{color:var(--text-2);font-size:14px;line-height:1.5;margin-top:6px}
.m-cell{display:flex;justify-content:space-between;gap:12px;padding:11px 22px;border-top:1px solid var(--linje);font-size:14px;margin:0}
.m-cell span{color:var(--text-2)}
.m-cell b{font-weight:600;text-align:right}
.m-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px 22px;border-top:1px solid var(--linje);margin:0}
.m-pris{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.m-pris s{color:var(--text-3);font-size:14px;text-decoration-thickness:1px}
.m-pris b{font-family:var(--display);font-size:22px;font-weight:600}
.m-pris em{font-style:normal;font-size:12px;color:var(--text-2)}
.m-kop .btn{min-height:44px;padding:0 18px;font-size:14px}
.jamfor-not{margin:0 0 24px;color:var(--text-2);font-size:16px;line-height:1.6;max-width:52ch}
/* Under 880px: specifikationskort med tumnagel, inte ett tredje fotokort under produktkorten */
@media(max-width:879px){
  .modell{position:relative}
  .m-bild{position:absolute;right:16px;top:16px;width:84px;height:84px;border-radius:12px;overflow:hidden;border:1px solid var(--linje)}
  .m-bild img{width:100%;height:100%;aspect-ratio:auto}
  .m-huvud{padding:20px 118px 14px 22px;min-height:116px}
}
@media(min-width:880px){
  .jamfor{grid-template-columns:104px repeat(3,1fr);gap:0 18px;grid-template-rows:auto auto auto auto auto auto}
  .etikett,.modell{display:grid;grid-row:1/-1;grid-template-rows:subgrid}
  .etikett{align-items:center}
  .etikett span{font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:11px 0}
  .m-cell{justify-content:flex-start}
  .m-cell span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
/* rekommendationer + fotot pa kroken monterad, sida vid sida */
.rek-rad{display:grid;grid-template-columns:1fr;gap:26px;margin-top:38px;align-items:start}
.rek-kol{padding-top:4px}
@media(min-width:880px){.rek-rad{grid-template-columns:1.1fr .9fr;gap:44px}}
.rek-bild{margin:0;border:1px solid var(--linje);border-radius:16px;overflow:hidden;background:var(--papper)}
.rek-bild img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.rek-bild figcaption{padding:11px 16px 14px;border-top:1px solid var(--linje);font-family:var(--kicker);font-style:normal;font-size:16px;color:var(--text-3)}
.rek h4{font-family:var(--kicker);font-style:normal;font-size:16px;color:var(--text);margin:14px 0 2px}
.rek h4:first-child{margin-top:4px}
/* Fargen kommer fran .a p (text-2). Egen color har vore dod kod. */
.rek-not{font-size:14px;margin:12px 0 4px;max-width:56ch}
.rek{border-left:2px solid var(--gold-fyll);padding-left:20px}
/* Rekommendationerna ar langa och behovs sallan vid forsta lasningen. De far
   samma dragspel som fragorna, stangda som standard, med mindre typ. */
.q-rek{border-bottom:0}
.q.q-rek>button{padding:6px 0 10px;min-height:44px;justify-content:flex-start;gap:11px;
  font-family:var(--kicker);font-style:normal;font-weight:500;font-size:18px;color:var(--gold)}
.q.q-rek>button:hover{color:var(--gold-hi)}
.q-rek .chev{width:15px;height:15px}
.q-rek .chev::before{top:7px;width:15px}
.q-rek .chev::after{left:7px;height:15px}
.q-rek .a ul{padding-bottom:8px}
.rek ul{list-style:none;font-size:16px;color:var(--text-2);line-height:1.55}
.rek li{padding:6px 0 6px 20px;position:relative;max-width:56ch}
.rek li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:1px;background:var(--gold)}
.rek b{color:var(--text);font-weight:600}

/* ── bakgrundsberattelsen ── */
.bak-bild{margin:28px 0 0;border:1px solid var(--linje);border-radius:16px;overflow:hidden;background:var(--papper)}
.bak-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%}
.bak-bild figcaption{padding:11px 16px 14px;border-top:1px solid var(--linje);font-family:var(--kicker);font-style:normal;font-size:16px;color:var(--text-3)}
.bak-bild-desktop{display:none}
@media (min-width:900px){
  .bak-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,42%,520px);gap:clamp(40px,6vw,88px);align-items:start}
  .bak-bild-mobil{display:none}
  .bak-bild-desktop{display:block;margin:0;position:sticky;top:96px}
  .bak-bild-desktop img{aspect-ratio:3/4}
}
.berattelse{max-width:64ch;margin-top:26px}
.berattelse p{font-size:clamp(16px,2vw,18px);line-height:1.68;color:var(--text-2);margin-bottom:18px}
.berattelse-slut{font-family:var(--display);font-size:clamp(22px,2.6vw,28px)!important;
  line-height:1.4!important;color:var(--text)!important;margin-top:26px}



/* ── Accordion / FAQ ── */
.faq{margin-top:46px;border-top:1px solid var(--linje)}
.q{border-bottom:1px solid var(--linje)}
.q>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;min-height:64px;font-family:var(--display);font-weight:600;
  font-size:clamp(22px,2.8vw,28px);line-height:1.24;color:var(--text);transition:color .25s}
.q>button:hover{color:var(--gold)}
.chev{flex:none;width:20px;height:20px;position:relative;transition:transform .4s var(--ease)}
.chev::before,.chev::after{content:"";position:absolute;background:var(--gold);
  transition:opacity .3s,transform .4s var(--ease)}
.chev::before{top:9.5px;left:0;width:20px;height:1px}
.chev::after{left:9.5px;top:0;width:1px;height:20px}
.q.open .chev{transform:rotate(90deg)}
.q.open .chev::before{opacity:0}
.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.q.open .a{grid-template-rows:1fr}
.a>div{overflow:hidden;min-height:0}
.a p{color:var(--text-2);font-size:16px;max-width:62ch;padding:0 0 26px}
@media (prefers-reduced-motion:reduce){.a,.chev{transition:none}}

/* ── slut-cta ── */
.final{position:relative;overflow:hidden;text-align:center}
.final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%,rgba(201,162,75,.14),transparent 70%)}
.final .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.final h2{max-width:16ch}
.final .lede{margin-left:auto;margin-right:auto}
.mail{margin-top:30px;font-family:var(--sans);font-size:16px;color:var(--gold);
  border-bottom:1px solid rgba(201,162,75,.35);padding-bottom:3px;min-height:44px;
  display:inline-flex;align-items:center}

/* ── helbreddsbild med Smalands-texten: fotot far ett budskap, den tunna remsan forsvinner ── */
.band-bild{margin:0;position:relative;display:grid;align-items:end;min-height:clamp(420px,60vh,640px)}
.band-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%;filter:brightness(.72) saturate(.95)}
.band-bild figcaption{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:120px var(--pad) 56px;color:var(--ljus);
  background:linear-gradient(transparent,rgba(24,20,15,.62) 32%,rgba(24,20,15,.88) 62%)}
.band-bild .label{display:block;color:var(--gold-fyll);margin-bottom:12px}
.band-bild h2{color:var(--ljus);max-width:14ch;margin-bottom:14px}
.band-bild p{color:rgba(247,245,240,.88);max-width:52ch;font-size:clamp(16px,2vw,18px);line-height:1.6}
/* ── kundroster: citatet ar huvudsaken, videon star bredvid ── */
.kunder{display:grid;grid-template-columns:1fr;gap:20px;margin-top:46px}
@media(min-width:760px){.kunder{gap:22px}}
@media(min-width:760px){.kunder{grid-template-columns:1fr 1fr;gap:22px}}
/* Citaten ar olika langa. Topplinjen ska stamma mellan korten, darfor start
   och inte center: ogat laser bada citaten pa samma rad. */
.kund{margin:0;display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:start;padding:20px;
  background:var(--papper-2);border:1px solid var(--linje);border-radius:16px}
.kund-video video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px;background:var(--papper-3)}
.kund figcaption{min-width:0;padding-top:2px}
.kund blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(18px,1.8vw,22px);line-height:1.32;color:var(--text)}
.kund cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--gold)}
/* Citaten ar olika langa. Subgrid ger bada korten samma citatrad, sa bade
   citatets forsta rad och signaturen under hamnar pa samma hojd. */
@media(min-width:760px){
  .kunder{grid-template-rows:auto auto}
  .kund{grid-row:span 2;grid-template-rows:subgrid}
  .kund-video{grid-row:1/-1}
  .kund figcaption{grid-row:span 2;display:grid;grid-template-rows:subgrid;align-content:start}
}
@media(max-width:479px){.kund{grid-template-columns:1fr}.kund-video video{max-width:180px}}

/* ── emblem i slut-CTA: stilla, pa marinbla platta ── */
.emblem{width:92px;height:92px;margin:0 auto 30px;border-radius:50%;background:#0f2440;display:grid;place-items:center;box-shadow:0 3px 10px rgba(15,36,64,.10)}
/* Market ar brett och lagt. 58px gjorde hasten oigenkannlig i disken, 74 lasbar. */
/* 64 i en 92px disk ger luft runt market. 74 lag for nara kanten. */
.emblem img{width:64px;height:auto}

/* ── footer: marinblatt ger andra varumarkesfargen ett hem ── */
footer{background:#0f2440;color:rgba(247,245,240,.78);padding:60px var(--pad) 34px}
.fot{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
.fot-brand img{display:block;height:64px;width:auto}
.fot-text{font-size:14px;line-height:1.6}
.fot-kontakt a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold-fyll);font-size:16px;border-bottom:1px solid rgba(201,162,75,.4);transition:color .25s,border-color .25s}
.fot-kontakt a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
.fot-copy{font-size:14px;color:rgba(247,245,240,.55);margin-top:8px}
@media(min-width:760px){
  .fot{grid-template-columns:auto 1fr auto;gap:36px}
  .fot-copy{grid-column:1/-1;border-top:1px solid rgba(247,245,240,.14);padding-top:18px;margin-top:10px}
}

/* ══ Undersidor: produktsidor och guider. Ater bruker samma tokens som startsidan. ══ */
.und-topp{padding:clamp(96px,14vh,150px) var(--pad) clamp(40px,6vh,64px)}
.und-sek{padding:clamp(46px,7vh,80px) var(--pad)}
.und-lugn{background:var(--papper-2)}
.smulor{font-size:14px;color:var(--text-2);margin-bottom:20px}
.smulor a{color:var(--text-2);border-bottom:1px solid var(--linje)}
.smulor a:hover{color:var(--gold)}
.smulor span[aria-hidden]{padding:0 6px;color:var(--text-3)}
.und-topp h1{font-size:clamp(32px,5.4vw,54px);line-height:1.06;margin-top:6px}
.und-sek h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.2vw,34px);line-height:1.14}
.und-sek h2+.lede,.und-sek h2+p{margin-top:20px}
.und-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
@media(min-width:900px){.und-grid{grid-template-columns:1fr minmax(320px,44%);gap:clamp(40px,5vw,72px)}}
.und-bild,.und-bild2{margin:0;border:1px solid var(--linje);border-radius:16px;overflow:hidden;background:var(--papper-2)}
.und-bild img,.und-bild2 img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.und-text .pris-rad{margin-top:26px}
.und-text .kryss{margin-top:16px}
.und-cta{margin-top:26px}
.und-not{margin-top:20px;color:var(--text-2);font-size:15px;line-height:1.65;max-width:62ch}
.und-not a:not(.btn){color:var(--gold);border-bottom:1px solid rgba(132,97,32,.34)}
.und-not a:not(.btn):hover{color:var(--gold-hi)}
.und-spec{display:grid;grid-template-columns:1fr;gap:26px;margin-top:26px;align-items:start}
@media(min-width:900px){.und-spec{grid-template-columns:1fr minmax(300px,42%);gap:clamp(34px,4vw,56px)}}
.und-spec dl{margin:0;border-top:1px solid var(--linje)}
.und-spec dl>div{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--linje)}
.und-spec dt{font-family:var(--sans);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;color:var(--gold);align-self:center}
.und-spec dd{margin:0;font-size:16px;color:var(--text)}
.und-andra{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
@media(min-width:700px){.und-andra{grid-template-columns:repeat(2,1fr)}}
.und-andra a{display:block;padding:18px 20px;border:1px solid var(--linje);border-radius:12px;
  background:var(--papper-2);transition:border-color .3s,transform .3s var(--ease)}
.und-andra a:hover{border-color:rgba(201,162,75,.45);transform:translateY(-2px)}
.und-andra b{display:block;font-family:var(--display);font-weight:600;font-size:20px;color:var(--text)}
.und-andra span{display:block;margin-top:3px;font-size:14px;color:var(--text-2)}
.und-band{margin:0}
.und-band img{display:block;width:100%;height:clamp(220px,38vh,420px);object-fit:cover}
.artikel p{color:var(--text-2);font-size:clamp(16px,2vw,17px);line-height:1.72;margin-top:16px;max-width:66ch}
.artikel b{color:var(--text);font-weight:600}
.artikel h2{margin-top:46px}
.artikel h2:first-child{margin-top:0}
.artikel h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,22px);
  margin-top:30px;color:var(--text)}
.artikel a:not(.btn){color:var(--gold);border-bottom:1px solid rgba(132,97,32,.34)}
.artikel a:not(.btn):hover{color:var(--gold-hi)}
.artikel .kryss{margin-top:20px}
.artikel .kryss li{font-size:16px}

/* Landskapstelefoner: samma principen som hjalten pa startsidan, dra ihop
   toppluften sa priset hinner med ovanfor falsen aven nar ingressen gar pa tre rader. */
@media (max-height:520px){
  .und-topp{padding-top:84px;padding-bottom:26px}
  .und-topp h1{font-size:clamp(26px,4.4vw,34px)}
  .und-text .pris-rad{margin-top:16px}
  .und-text .lede{margin-top:14px}
}

/* Forbestallningsbeskedet: syns vid varje kopknapp sa villkoren star dar beslutet tas. */
.forbest-not{margin-top:16px;max-width:56ch;font-size:15px;line-height:1.6;color:var(--text-2)}
.final .forbest-not{margin-left:auto;margin-right:auto}
.forbest-not a{color:var(--gold);border-bottom:1px solid rgba(132,97,32,.34)}
.forbest-not a:hover{color:var(--gold-hi)}
.und-text .forbest-not{margin-top:18px}

/* Saljaruppgifter: e-handelslagen kraver att de ar latt och varaktigt tillgangliga,
   darfor i footern pa varje sida och inte pa en egen undansidan. */
.fot-bolag{font-size:13px;line-height:1.65;color:rgba(247,245,240,.62);margin-top:4px;max-width:52ch}
.fot-bolag b{color:rgba(247,245,240,.86);font-weight:600}