/* ── Scener.se v1.11 · färgskala V1.14 · Inria Serif + Schibsted Grotesk ── */
:root{
  color-scheme: light;
  --papper:#ECE7E1; --ark:#F8F5F1; --sten:#E2DBD3; --sand:#D6CCC1;
  --bark:#2A221F; --bark-2:#4A403A; --rok:#6B625B;
  --salong:#2E3D51; --salong-2:#24303F; --spot:#DE6522; --glod:#F2C9AE; --dis:#D3DAE2;
  --line:rgba(42,34,31,.14); --line-2:rgba(42,34,31,.24); --line-inv:rgba(248,245,241,.2);
  --serif:"Inria Serif", Georgia, "Times New Roman", serif;
  --sans:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter:clamp(16px,4vw,56px); --head-h:72px; --max:1240px;
  --sh:0 1px 2px rgba(42,34,31,.10), 0 30px 60px -36px rgba(42,34,31,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--papper); scroll-behavior:smooth; scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--papper); color:var(--bark); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; line-height:1.06; letter-spacing:-.012em; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:inherit}
img{display:block; max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
.eb{font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--rok)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--spot); outline-offset:3px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* logga */
.logo{display:inline-flex; align-items:baseline; gap:.3em; font-family:var(--serif); font-size:26px; letter-spacing:-.01em; line-height:1; text-decoration:none; color:inherit}
.logo .d{width:.34em; height:.34em; border-radius:50%; background:var(--spot); align-self:center; flex:none}
.logo small{font-size:.58em; color:var(--rok); letter-spacing:0}
.inv .logo small{color:var(--dis)}

/* knappar */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 var(--sans); padding:14px 20px; border-radius:3px; text-decoration:none; border:0; cursor:pointer; transition:background-color .2s, box-shadow .2s}
.btn-p{background:var(--spot); color:var(--bark)}
.btn-p:hover{background:#E8783A}
.btn-s{background:transparent; color:var(--bark); box-shadow:inset 0 0 0 1.5px var(--bark)}
.btn-s:hover{box-shadow:inset 0 0 0 2px var(--bark)}
.inv .btn-s{color:var(--ark); box-shadow:inset 0 0 0 1.5px var(--line-inv)}
.inv .btn-s:hover{box-shadow:inset 0 0 0 1.5px var(--ark)}

/* sidhuvud */
.head{position:sticky; top:0; z-index:15; background:var(--papper); border-bottom:1px solid transparent; transition:border-color .25s}
.head.is-scrolled{border-bottom-color:var(--line)}
.head .wrap{height:var(--head-h); display:flex; align-items:center; gap:28px}
.menu{display:flex; gap:26px; margin-left:20px; font-size:15px}
.menu a{text-decoration:none; padding:6px 0; border-bottom:1.5px solid transparent; transition:border-color .2s}
.menu a:hover{border-bottom-color:var(--bark)}
.head .right{margin-left:auto; display:flex; align-items:center; gap:12px}
.head .btn{padding:11px 16px; font-size:14px}
.burger{display:none; appearance:none; background:none; border:1px solid var(--line-2); border-radius:3px; width:42px; height:38px; cursor:pointer; position:relative}
.burger span{position:absolute; left:11px; right:11px; height:1.5px; background:var(--bark); transition:transform .25s, opacity .2s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:18px}.burger span:nth-child(3){top:23px}
.head.is-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.head.is-open .burger span:nth-child(2){opacity:0}
.head.is-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* sektioner */
.sec{padding-block:clamp(72px,9vw,128px)}
.sec-h{max-width:760px}
.sec-h h2{font-size:clamp(36px,4.6vw,60px); font-weight:300; margin-top:14px}
.sec-h .ing{font-size:clamp(18px,1.6vw,20px); margin-top:20px; max-width:56ch}
.ing{font-size:19px}
.muted{color:var(--rok)}
.tag{display:inline-flex; align-items:center; font:600 12px/1 var(--sans); padding:7px 10px; border-radius:99px; background:var(--glod); color:var(--bark)}
.ph{background:var(--sten) center/cover no-repeat}

/* ── HERO ── */
.hero{padding-block:clamp(36px,5vw,72px) clamp(64px,8vw,112px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,80px); align-items:center}
.hero h1{font-weight:300; font-size:clamp(48px,6.6vw,92px); line-height:1.0; margin:18px 0 24px}
.hero .ing{max-width:34ch; font-size:clamp(19px,1.7vw,22px)}
.hero .for{margin-top:18px; font-size:15.5px; color:var(--rok); max-width:42ch}
.hero .acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero .pilotline{display:flex; align-items:center; gap:10px; margin-top:28px; font-size:14.5px; color:var(--rok)}
.hero .pilotline i{width:8px; height:8px; border-radius:50%; background:var(--spot)}
.mosaic{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:12px}
.mosaic figure{margin:0; position:relative; overflow:hidden; border-radius:3px; background:var(--sten)}
.mosaic figure img{width:100%; height:100%; object-fit:cover}
.mosaic .a{grid-column:1 / -1; aspect-ratio:21/9}
.mosaic .b{aspect-ratio:4/5}
.mosaic .c{aspect-ratio:4/5}
.mosaic figcaption{position:absolute; left:12px; bottom:12px}
.mosaic .credit{position:absolute; right:10px; bottom:10px; font-size:11px; color:rgba(248,245,241,.75)}

/* ── MÖJLIGHETEN ── */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(40px,5vw,64px); border-top:1.5px solid var(--bark)}
.fact{padding:24px 24px 0 0}
.fact + .fact{padding-left:24px; border-left:1px solid var(--line)}
.fact b{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(36px,3.6vw,52px); line-height:1}
.fact p{margin-top:12px; font-size:15.5px; color:var(--rok); max-width:26ch}
.src{margin-top:22px; font-size:13px; color:var(--rok)}
.conclusion{margin-top:clamp(48px,6vw,80px); padding-top:28px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:baseline}
.conclusion p{font-family:var(--serif); font-size:clamp(26px,2.8vw,38px); line-height:1.15; max-width:28ch}

/* ── SÅ FUNGERAR DET ── */
.how{background:var(--ark)}
.rows{margin-top:clamp(48px,6vw,80px); display:flex; flex-direction:column; gap:clamp(72px,9vw,128px)}
.row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(32px,5vw,88px); align-items:center}
.row.flip .txt{order:2}
.row .n{font-family:var(--serif); font-size:20px; color:var(--rok)}
.row .txt h3{font-size:clamp(30px,3vw,42px); margin:10px 0 16px}
.row .txt > p{font-size:18px; max-width:42ch; color:var(--bark-2)}
.row .pts{list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--line)}
.row .pts li{padding:11px 0; border-bottom:1px solid var(--line); font-size:15.5px; display:flex; gap:12px; align-items:baseline}
.row .pts li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--salong); flex:none; transform:translateY(-2px)}
.visual{position:relative}
.visual .cap{margin-top:14px; font-size:13px; color:var(--rok)}

/* produktbild: lunchrumsskärm */
.tv-frame{padding:clamp(8px,1vw,12px); background:#1F1A17; border-radius:10px; box-shadow:var(--sh)}
.tv{aspect-ratio:16/9; container-type:inline-size; background:var(--papper); display:grid; grid-template-columns:42% 1fr; overflow:hidden; border-radius:2px}
.tv .l{background:var(--sten) center/cover}
.tv .r{padding:3.2cqw 3.6cqw 2.6cqw; display:flex; flex-direction:column}
.tv .top{display:flex; justify-content:space-between; align-items:center}
.tv .top .logo{font-size:2.6cqw}
.tv .top .eb{font-size:1.2cqw}
.tv h4{font-size:4cqw; font-weight:300; margin:2.8cqw 0 2.4cqw; line-height:1.04}
.tv .rows-tv{background:var(--ark); padding:0 1.8cqw}
.tv .ev{display:grid; grid-template-columns:6.4cqw 1fr auto; gap:1.8cqw; align-items:center; padding-block:1.2cqw; border-bottom:1px solid var(--line)}
.tv .ev:last-child{border-bottom:0}
.tv .day{display:flex; flex-direction:column; line-height:1}
.tv .day span{font-size:1.05cqw; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--rok)}
.tv .day b{font-family:var(--serif); font-weight:400; font-size:3.2cqw; margin-top:.3cqw}
.tv .ev h5{margin:0; font-family:var(--sans); font-weight:600; font-size:1.75cqw; line-height:1.2}
.tv .ev p{font-size:1.2cqw; color:var(--rok); margin-top:.2cqw}
.tv .ev .pr{font-size:1.25cqw; white-space:nowrap}
.tv .tv-foot{margin-top:auto; display:flex; align-items:center; gap:1.6cqw; padding-top:1.6cqw}
.qr{aspect-ratio:1; padding:.5cqw; background:var(--ark); flex:none}
.qr canvas{width:100%; height:100%; display:block; image-rendering:pixelated}
.tv .qr{width:6cqw}
.tv .tv-foot p{font-size:1.2cqw; color:var(--rok); line-height:1.4}
.tv .tv-foot p b{display:block; color:var(--bark); font-weight:600; font-size:1.5cqw}
.tv .tv-foot .host{margin-left:auto; text-align:right}
.tv .tv-foot .host b{font-family:var(--serif); font-weight:400; font-size:1.8cqw}
.tv-stand{width:18%; height:14px; margin:0 auto; background:linear-gradient(#2a2420,#1F1A17); border-radius:0 0 6px 6px}

/* produktbild: telefoner */
.phones{display:flex; justify-content:center; gap:clamp(14px,2.4vw,28px); align-items:flex-start}
.phone-w{width:min(300px,48%); container-type:inline-size}
.phone-w.lift{margin-top:48px}
.phone{aspect-ratio:9/19.5; border-radius:13cqw; border:3cqw solid #1F1A17; background:var(--ark); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh)}
.sb{display:flex; justify-content:space-between; padding:3.6cqw 7cqw 0; font-weight:600; font-size:3.8cqw}
.a-top{display:flex; justify-content:space-between; align-items:center; padding:5cqw 6cqw 3cqw}
.a-top .logo{font-size:6.6cqw}
.a-top .city{font-size:3.4cqw; padding:1.4cqw 3cqw; border-radius:99px; box-shadow:inset 0 0 0 1px var(--line-2)}
.a-body{flex:1; overflow:hidden; padding:0 6cqw; display:flex; flex-direction:column; gap:3.6cqw}
.a-kick{font-family:var(--serif); font-style:italic; font-weight:300; font-size:4.4cqw; color:var(--rok); margin-top:1cqw}
.a-h{font-weight:300; font-size:8.6cqw; line-height:1.03; margin-top:-1.6cqw}
.a-pick .img{aspect-ratio:16/11; border-radius:1.6cqw; background:var(--sten) center/cover; position:relative}
.a-pick .img .tag{position:absolute; left:2.6cqw; top:2.6cqw; font-size:2.9cqw; padding:1.4cqw 2.2cqw}
.a-pick h5{font-family:var(--serif); font-weight:400; font-size:6.2cqw; margin:2.6cqw 0 .6cqw; line-height:1.08}
.a-pick p{font-size:3.4cqw; color:var(--rok)}
.a-row{display:grid; grid-template-columns:12cqw 1fr; gap:3cqw; padding-block:2.8cqw; border-bottom:1px solid var(--line); font-size:3.5cqw}
.a-row:first-of-type{border-top:1px solid var(--line)}
.a-row .t{color:var(--rok)}
.a-row b{display:block; font-weight:600; font-size:3.9cqw; line-height:1.25}
.a-row span{color:var(--rok); font-size:3.2cqw}
.tabbar{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); padding:2.6cqw 2cqw 6.4cqw; background:var(--ark); font-size:3.1cqw; color:var(--rok); text-align:center}
.tabbar div{display:flex; flex-direction:column; align-items:center; gap:1.4cqw}
.tabbar i{width:1.8cqw; height:1.8cqw; border-radius:50%}
.tabbar .on{color:var(--bark); font-weight:600}
.tabbar .on i{background:var(--spot)}
.invite{background:var(--salong); color:var(--ark); border-radius:2cqw; padding:5.4cqw; margin:0 6cqw}
.invite .eb{font-size:2.9cqw; color:var(--dis)}
.invite h5{font-family:var(--serif); font-weight:300; font-size:7cqw; line-height:1.06; margin:2.4cqw 0 2cqw}
.invite p{font-size:3.5cqw; color:var(--dis); line-height:1.45}
.invite .who{display:flex; align-items:center; gap:2.4cqw; margin-top:4cqw}
.invite .who i{width:9cqw; height:9cqw; border-radius:50%; background:var(--glod); display:grid; place-items:center; font-style:normal; font-family:var(--serif); font-size:4cqw; color:var(--bark)}
.invite .who i + i{margin-left:-4.4cqw; background:var(--dis)}
.invite .who span{font-size:3.2cqw; color:var(--dis)}
.invite .b{margin-top:4.4cqw; background:var(--spot); color:var(--bark); text-align:center; font-weight:600; font-size:3.9cqw; padding:3.4cqw; border-radius:1.2cqw}
.invite .s{text-align:center; font-size:3cqw; color:var(--dis); margin-top:2.4cqw}
.inv-img{aspect-ratio:16/10; margin:4cqw 6cqw 4cqw; border-radius:1.6cqw; background:var(--sten) center/cover}
.inv-top{padding:3cqw 6cqw 0; font-size:3.4cqw; color:var(--rok)}

/* produktbild: veckoblad */
.wall{background:var(--sten); padding:clamp(28px,4vw,56px); border-radius:4px; display:flex; justify-content:center}
.poster{width:min(420px,100%); aspect-ratio:1/1.414; background:var(--ark); container-type:inline-size; padding:6.4% 6.8% 5.6%; display:flex; flex-direction:column; box-shadow:0 2px 3px rgba(42,34,31,.12), 0 28px 50px -24px rgba(42,34,31,.55)}
.poster .mast{display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:2.4cqw; border-bottom:1.5px solid var(--bark)}
.poster .mast .logo{font-size:8cqw}
.poster .mast .eb{font-size:2.5cqw; text-align:right; line-height:1.4}
.poster h4{font-weight:300; font-size:9.6cqw; line-height:1.02; margin:5cqw 0 4cqw}
.poster .ev{display:grid; grid-template-columns:13cqw 1fr; gap:3cqw; padding-block:2.4cqw; border-top:1px solid var(--line); font-size:3cqw}
.poster .ev .t{color:var(--rok); line-height:1.35}
.poster .ev .t b{display:block; color:var(--bark); font-weight:600}
.poster .ev h5{margin:0; font-family:var(--sans); font-weight:600; font-size:3.6cqw; line-height:1.2}
.poster .ev p{color:var(--rok); margin-top:.4cqw; font-size:3cqw}
.poster .thanks{margin-top:auto; background:var(--salong); color:var(--ark); padding:4cqw 4.4cqw; display:grid; grid-template-columns:1fr auto; gap:3cqw; align-items:end}
.poster .thanks .eb{font-size:2.4cqw; color:var(--dis)}
.poster .thanks p{font-family:var(--serif); font-size:4.4cqw; line-height:1.25; margin-top:1.6cqw}
.poster .thanks .qr{width:13cqw; background:var(--ark)}
.poster .thanks small{display:block; font-size:2.4cqw; color:var(--dis); margin-top:1cqw; text-align:center}

/* ── VÄRDE (bildbakgrund) ── */
.value{position:relative; color:var(--ark); background:#1F1A17 center/cover no-repeat; isolation:isolate}
.value::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,26,23,.78) 0%, rgba(31,26,23,.86) 55%, rgba(31,26,23,.94) 100%); z-index:-1}
.value .eb{color:rgba(248,245,241,.7)}
.value .sec-h .ing{color:rgba(248,245,241,.86)}
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:clamp(48px,6vw,80px)}
.vgrid div{border-top:1.5px solid rgba(248,245,241,.5); padding-top:20px}
.vgrid h3{font-size:clamp(24px,2.2vw,30px); margin-bottom:10px}
.vgrid p{color:rgba(248,245,241,.8); font-size:16px; max-width:36ch}
.vgrid .big{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(56px,5.6vw,80px); line-height:.9; margin-bottom:14px; color:var(--glod)}
.goal{margin-top:clamp(40px,5vw,64px); padding-top:22px; border-top:1px solid rgba(248,245,241,.2); font-family:var(--serif); font-size:clamp(20px,1.9vw,26px); max-width:40ch}
.photo-credit{position:absolute; right:var(--gutter); bottom:14px; font-size:11px; color:rgba(248,245,241,.5)}

/* ── UPPLÄGG ── */
.setup .two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); margin-top:clamp(40px,5vw,64px)}
.option .eb{margin-bottom:10px; display:block}
.option h3{font-size:clamp(26px,2.4vw,32px); margin:14px 0 6px}
.option p{color:var(--rok); font-size:16px; max-width:44ch}
.browser{background:var(--ark); border-radius:8px; overflow:hidden; box-shadow:var(--sh); container-type:inline-size}
.chrome{display:flex; align-items:center; gap:1.4cqw; padding:1.8cqw 2.4cqw; background:var(--sten); border-bottom:1px solid var(--line)}
.chrome i{width:1.6cqw; height:1.6cqw; border-radius:50%; background:var(--sand)}
.chrome .url{flex:1; max-width:60%; margin-inline:auto; background:var(--ark); border-radius:1cqw; padding:.8cqw 2cqw; font-size:2.2cqw; color:var(--rok); text-align:center}
.site{padding:3cqw 4cqw 4cqw}
.site .nav{display:flex; align-items:center; gap:3cqw; padding-bottom:2.6cqw; border-bottom:1px solid var(--line); font-size:2.2cqw}
.site .nav .logo{font-size:4cqw; margin-right:auto}
.site .nav .own{display:inline-flex; align-items:center; gap:1.4cqw; font-family:var(--sans); font-weight:600; font-size:3.4cqw; letter-spacing:-.01em; margin-right:auto}
.site .nav .own i{width:3.6cqw; height:3.6cqw; border-radius:.8cqw; background:#3F5B4C}
.site .nav span.b{padding:1.2cqw 2.2cqw; border-radius:.6cqw; font-weight:600}
.site .hero-s{display:grid; grid-template-columns:1fr 1.1fr; gap:3cqw; align-items:end; padding-block:3.4cqw}
.site .hero-s .k{font-family:var(--serif); font-style:italic; font-size:2.6cqw; color:var(--rok)}
.site .hero-s h4{font-weight:300; font-size:5.4cqw; line-height:1.04; margin-top:1cqw}
.site .hero-s .img{aspect-ratio:16/10; border-radius:.8cqw; background:var(--sten) center/cover}
.site .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:2.4cqw}
.site .cards div{aspect-ratio:4/3; border-radius:.8cqw; background:var(--sten) center/cover}
.site .cards p{font-size:2.2cqw; font-weight:600; margin-top:1.2cqw}
.wl .site .nav span.b{background:#3F5B4C; color:#fff}
.sc .site .nav span.b{background:var(--spot); color:var(--bark)}
.modules{margin-top:clamp(48px,6vw,72px); padding-top:24px; border-top:1px solid var(--line); display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips span{font-size:15px; padding:9px 14px; border-radius:99px; background:var(--ark); box-shadow:inset 0 0 0 1px var(--line)}
.modules .note{grid-column:2; color:var(--rok); font-size:15.5px; margin-top:8px}

/* ── PILOT ── */
.pilot{background:var(--salong); color:var(--ark)}
.pilot .grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center}
.pilot .eb{color:var(--dis)}
.pilot h2{font-weight:300; font-size:clamp(40px,5vw,68px); margin:14px 0 18px}
.pilot .ing{color:var(--dis)}
.roles{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px}
.roles div{border-top:1.5px solid rgba(248,245,241,.4); padding-top:16px}
.roles h3{font-size:22px; margin-bottom:6px}
.roles p{color:var(--dis); font-size:15.5px}
.pilot .fine{margin-top:26px; color:var(--dis); font-size:15.5px; max-width:52ch}
.pilot .acts{margin-top:30px}
.pilot figure{margin:0; position:relative}
.pilot figure img{width:min(100%,460px); height:auto; aspect-ratio:4/5; object-fit:cover; object-position:74% 45%; border-radius:3px; display:block; margin-left:auto}
.pilot figure{width:fit-content; margin-left:auto!important; overflow:hidden; border-radius:3px}
.pilot figure img{transform:scale(1.45); transform-origin:76% 62%}
@media (max-width:900px){.pilot figure{margin-left:0!important; width:100%} .pilot figure img{width:100%; aspect-ratio:4/4.4}}
.pilot figure .tag{position:absolute; left:14px; top:14px}

/* ── FAQ ── */
.faq-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,80px)}
.faq{border-top:1.5px solid var(--bark)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:22px; font-family:var(--serif); font-size:clamp(22px,2vw,26px); line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--sans); font-size:24px; font-weight:400; color:var(--rok); transition:transform .25s; flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px; color:var(--bark-2); max-width:60ch}

/* ── KONTAKT ── */
.contact{background:var(--ark)}
.people{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(40px,5vw,64px)}
.person .av{width:72px; height:72px; border-radius:50%; background:var(--sten); display:grid; place-items:center; font-family:var(--serif); font-size:26px; color:var(--rok); margin-bottom:18px}
.person h3{font-size:26px}
.person .role{color:var(--rok); margin-top:4px}
.person .ways{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; font-size:16px}
.person .ways a{text-decoration:none; border-bottom:1px solid transparent; width:fit-content}
.person .ways a:hover{border-bottom-color:var(--spot)}
.orgs{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); margin-top:clamp(48px,6vw,72px)}
.org{background:var(--papper); padding:clamp(22px,3vw,34px); border-radius:4px}
.org h3{font-size:28px; margin:10px 0 8px}
.org p{color:var(--rok); font-size:16px; max-width:46ch}
.org a{display:inline-block; margin-top:14px; text-decoration:none; border-bottom:1.5px solid var(--spot); padding-bottom:1px; font-size:15.5px}

/* sidfot */
.foot{background:var(--bark); color:var(--ark)}
.foot .wrap{padding-block:48px 28px}
.foot .top{display:grid; grid-template-columns:1.6fr 1fr; gap:32px}
.foot p.about{color:rgba(248,245,241,.7); margin-top:14px; max-width:42ch; font-size:15.5px}
.foot h4{font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(248,245,241,.6); margin-bottom:12px}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:15px}
.foot a, .foot button{color:var(--ark); text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; text-align:left}
.foot a:hover, .foot button:hover{text-decoration:underline; text-underline-offset:3px}
.foot .logo small{color:rgba(248,245,241,.6)}
.foot .base{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:40px; padding-top:18px; border-top:1px solid var(--line-inv); font-size:13.5px; color:rgba(248,245,241,.6)}

/* cookie + policy */
.cookie{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--ark); border-top:1px solid var(--line); box-shadow:0 -18px 40px -30px rgba(42,34,31,.5); transform:translateY(100%); transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.cookie.is-visible{transform:translateY(0)}
.cookie__inner{max-width:var(--max); margin:0 auto; padding:18px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px}
.cookie__copy{font-size:14.5px; color:var(--rok); max-width:72ch}
.cookie__copy b{color:var(--bark); font-weight:600; margin-right:4px}
.cookie__more{appearance:none; background:none; border:0; padding:0; margin-left:4px; font:inherit; color:var(--bark); cursor:pointer; border-bottom:1px solid var(--line-2)}
.cookie__actions{display:flex; gap:10px; flex-shrink:0}
.cookie .btn{padding:11px 16px; font-size:14px}
.policy[hidden]{display:none}
.policy{position:fixed; inset:0; z-index:30; display:flex; padding:clamp(14px,4vw,40px); opacity:0; transition:opacity .3s}
.policy.is-visible{opacity:1}
.policy__backdrop{position:absolute; inset:0; background:rgba(42,34,31,.4); border:0; padding:0; appearance:none; cursor:pointer}
.policy__card{position:relative; margin:auto; width:min(620px,100%); max-height:calc(100svh - 60px); overflow:auto; background:var(--ark); border-radius:4px; box-shadow:0 30px 80px -30px rgba(42,34,31,.6)}
.policy__top{position:sticky; top:0; background:var(--ark); padding:20px 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line)}
.policy__top h2{font-size:24px}
.policy__close{appearance:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:none; cursor:pointer; font-size:15px; color:var(--bark)}
.policy__body{padding:26px 28px}
.policy__body h3{font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--rok); margin-bottom:6px}
.policy__body p{color:var(--bark-2); margin-bottom:20px; font-size:16px}
.policy__body a{color:var(--bark)}

/* ── responsivt ── */
@media (max-width:1060px){
  .menu{display:none}
  .burger{display:block}
  .head.is-open .menu{display:flex; position:absolute; top:var(--head-h); left:0; right:0; margin:0; flex-direction:column; gap:0; background:var(--papper); border-bottom:1px solid var(--line); padding:6px var(--gutter) 18px}
  .head.is-open .menu a{padding:14px 0; border-bottom:1px solid var(--line); font-size:17px}
}
@media (max-width:900px){
  .hero-grid,.row,.pilot .grid,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .row.flip .txt{order:0}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){padding-left:0; border-left:0}
  .fact:nth-child(n+3){margin-top:24px; border-top:1px solid var(--line)}
  .vgrid,.people{grid-template-columns:1fr}
  .setup .two,.orgs{grid-template-columns:1fr}
  .modules{grid-template-columns:1fr}
  .modules .note{grid-column:1}
  .foot .top{grid-template-columns:1fr 1fr}
  .conclusion{grid-template-columns:1fr; gap:8px}
}
@media (max-width:620px){
  .head .btn{display:none}
  .roles{grid-template-columns:1fr}
  .phone-w.lift{margin-top:28px}
  .foot .top{grid-template-columns:1fr}
  .cookie__inner{flex-direction:column; align-items:stretch; gap:14px}
  .cookie__actions .btn{flex:1}
  .mosaic .credit{display:none}
}
@media (prefers-reduced-motion:reduce){.cookie,.policy{transition:none}}

/* ── v1.12: köparens perspektiv ── */
.hero-visual{position:relative; padding-bottom:12%}
.hero-visual .photo{aspect-ratio:4/3.2; width:88%; margin-left:auto; border-radius:3px; background:var(--sten) center/cover}
.hero-visual .photo-cap{position:absolute; right:0; top:calc(100% - 12% + 10px); font-size:12px; color:var(--rok)}
.mapcard{position:absolute; left:0; bottom:0; width:58%; background:var(--ark); border-radius:4px; box-shadow:var(--sh); padding:16px 16px 14px; container-type:inline-size}
.mapcard .hd{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px}
.mapcard .hd b{font-family:var(--serif); font-weight:400; font-size:clamp(15px,5.6cqw,20px)}
.mapcard .hd span{font-size:11px; color:var(--rok); letter-spacing:.06em; text-transform:uppercase; font-weight:500}
.mapcard svg{display:block; width:100%; height:auto; border-radius:2px}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:12px; color:var(--rok)}
.legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.legend .k1{background:var(--spot)} .legend .k2{background:var(--salong)}

/* fyra delar – översikt */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(40px,5vw,64px); border-top:1.5px solid var(--bark)}
.pillars a{display:block; padding:20px 22px 4px 0; text-decoration:none}
.pillars a + a{padding-left:22px; border-left:1px solid var(--line)}
.pillars .n{font-family:var(--serif); color:var(--rok); font-size:18px}
.pillars h3{font-size:clamp(21px,1.9vw,25px); margin:8px 0 8px}
.pillars p{font-size:15px; color:var(--rok)}
.pillars a:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}

/* app-ramar (verktyg för staden) */
.tool{background:var(--ark); border-radius:8px; overflow:hidden; box-shadow:var(--sh); container-type:inline-size}
.tool .bar{display:flex; align-items:center; gap:1.2cqw; padding:1.5cqw 2.2cqw; background:var(--sten); border-bottom:1px solid var(--line)}
.tool .bar i{width:1.2cqw; height:1.2cqw; border-radius:50%; background:var(--sand)}
.tool .bar span{margin-left:1.4cqw; font-size:1.5cqw; color:var(--rok); background:var(--ark); padding:.5cqw 1.8cqw; border-radius:3cqw}
.tool .bar em{margin-left:auto; font-style:normal; font-size:1.4cqw; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--rok)}
.tool .in{display:grid; grid-template-columns:20cqw 1fr}
.tool aside{border-right:1px solid var(--line); padding:2.6cqw 2.2cqw; display:flex; flex-direction:column; gap:1.5cqw; background:#F3EEE9}
.tool aside .logo{font-size:2.8cqw; margin-bottom:2cqw}
.tool aside .tname{font-size:1.4cqw; color:var(--rok); font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin:-1.2cqw 0 1.4cqw}
.tool aside a{font-size:1.65cqw; text-decoration:none; color:var(--rok); display:flex; align-items:center; gap:1cqw}
.tool aside a i{width:.9cqw; height:.9cqw; border-radius:50%}
.tool aside a.on{color:var(--bark); font-weight:600}
.tool aside a.on i{background:var(--spot)}
.tool main{padding:2.8cqw 3.2cqw 3.2cqw}
.tool .th{display:flex; justify-content:space-between; align-items:flex-end; gap:2cqw; margin-bottom:2.4cqw}
.tool .th h5{margin:0; font-family:var(--serif); font-weight:400; font-size:3.4cqw; line-height:1.05}
.tool .th span{font-size:1.4cqw; color:var(--rok)}
.tool .lbl{font-size:1.25cqw; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--rok); margin-bottom:1cqw}
.pill{display:inline-flex; align-items:center; font-size:1.3cqw; font-weight:600; padding:.55cqw 1.2cqw; border-radius:3cqw; white-space:nowrap}
.pill.val{background:var(--glod); color:var(--bark)}
.pill.pub{background:var(--dis); color:var(--bark)}
.pill.draft{box-shadow:inset 0 0 0 1px var(--line-2); color:var(--rok)}

/* Studio */
.studio .cols{display:grid; grid-template-columns:1.55fr 1fr; gap:2.6cqw}
.studio .ev{display:grid; grid-template-columns:2cqw 1fr auto; gap:1.4cqw; align-items:center; padding:1.3cqw 0; border-bottom:1px solid var(--line)}
.studio .ev:first-of-type{border-top:1px solid var(--line)}
.studio .ev .h{color:var(--sand); font-size:1.8cqw; line-height:1}
.studio .ev b{display:block; font-size:1.7cqw; font-weight:600; line-height:1.2}
.studio .ev small{display:block; font-size:1.35cqw; color:var(--rok)}
.studio .box{background:var(--papper); border-radius:.8cqw; padding:1.8cqw 2cqw; margin-bottom:1.8cqw}
.studio .box .row2{display:flex; justify-content:space-between; gap:1.4cqw; padding:1cqw 0; border-bottom:1px solid var(--line); font-size:1.45cqw}
.studio .box .row2:last-child{border-bottom:0}
.studio .box .row2 b{font-weight:600}
.studio .box .row2 span{color:var(--rok); text-align:right}
.studio .box .big{font-family:var(--serif); font-size:3.6cqw; line-height:1}
.studio .box p{font-size:1.4cqw; color:var(--rok); margin-top:.6cqw}

/* Scenvän-översikt */
.patron .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6cqw}
.patron .kpi{background:var(--papper); border-radius:.8cqw; padding:1.8cqw 2cqw}
.patron .kpi b{display:block; font-family:var(--serif); font-weight:400; font-size:4cqw; line-height:1.05; margin-top:.6cqw}
.patron .kpi span{font-size:1.35cqw; color:var(--rok)}
.patron .split{margin-top:2.6cqw}
.patron .sbar{display:flex; height:2cqw; gap:.4cqw; border-radius:.4cqw; overflow:hidden}
.patron .sbar i{display:block}
.patron .skey{display:flex; flex-wrap:wrap; gap:.8cqw 2.6cqw; margin-top:1.2cqw; font-size:1.4cqw; color:var(--rok)}
.patron .skey i{display:inline-block; width:1.2cqw; height:1.2cqw; border-radius:.3cqw; margin-right:.8cqw; vertical-align:-.1cqw}
.patron .list{margin-top:2.6cqw}
.patron .co{display:grid; grid-template-columns:1fr auto auto; gap:2cqw; align-items:center; padding:1.2cqw 0; border-bottom:1px solid var(--line); font-size:1.6cqw}
.patron .co:first-of-type{border-top:1px solid var(--line)}
.patron .co b{font-weight:600}
.patron .co span{color:var(--rok); font-size:1.4cqw}

/* Insikter */
.insight .cols{display:grid; grid-template-columns:1.15fr 1fr; gap:2.8cqw}
.insight svg{display:block; width:100%; height:auto}
.insight .scale{display:flex; align-items:center; gap:1cqw; margin-top:1cqw; font-size:1.3cqw; color:var(--rok)}
.insight .scale i{flex:1; height:1cqw; border-radius:.5cqw; background:linear-gradient(90deg,#E5E0DA,#2E3D51)}
.insight .bars div{display:grid; grid-template-columns:11cqw 1fr; gap:1.4cqw; align-items:center; padding:.8cqw 0; font-size:1.5cqw}
.insight .bars u{display:block; height:1.6cqw; border-radius:.3cqw; background:var(--salong); text-decoration:none}
.insight .gaps{margin-top:2.4cqw}
.insight .gap{padding:1.2cqw 0; border-top:1px solid var(--line)}
.insight .gap b{display:block; font-size:1.55cqw; font-weight:600}
.insight .gap span{font-size:1.4cqw; color:var(--rok)}

/* produktbild i rad */
.row .visual .scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 26px; margin:-2px -2px -26px}

/* värde – bildbakgrund */
.value.dance{background-position:30% 40%}

@media (max-width:900px){
  .pillars{grid-template-columns:1fr 1fr}
  .pillars a:nth-child(3){padding-left:0; border-left:0}
  .pillars a:nth-child(n+3){border-top:1px solid var(--line); margin-top:18px}
  .hero-visual{padding-bottom:22%}
  .mapcard{width:70%}
}
@media (max-width:620px){
  .tool,.tv-frame{min-width:560px}
  .mapcard{width:84%}
  .pillars{grid-template-columns:1fr}
  .pillars a{padding-left:0!important; border-left:0!important}
  .pillars a + a{border-top:1px solid var(--line); margin-top:14px}
}

/* bredare rader för verktygsvyer */
.row.wide{grid-template-columns:minmax(0,.72fr) minmax(0,1.7fr); gap:clamp(28px,4vw,64px)}
.row.wide.flip{grid-template-columns:minmax(0,1.7fr) minmax(0,.72fr)}
.tool{font-size:115%}
.tool .in{grid-template-columns:18cqw 1fr}
.tool aside a{font-size:1.85cqw}
.tool .th h5{font-size:3.6cqw}
.tool .th span,.tool .bar span{font-size:1.6cqw}
.tool .lbl{font-size:1.4cqw}
.pill{font-size:1.45cqw}
.studio .ev b{font-size:1.95cqw}
.studio .ev small{font-size:1.55cqw}
.studio .box .row2{font-size:1.6cqw}
.studio .box p{font-size:1.55cqw}
.patron .kpi span{font-size:1.55cqw}
.patron .skey{font-size:1.55cqw}
.patron .co{font-size:1.8cqw}
.patron .co span{font-size:1.55cqw}
.insight .bars div{font-size:1.7cqw}
.insight .gap b{font-size:1.75cqw}
.insight .gap span{font-size:1.55cqw}
.insight .scale{font-size:1.45cqw}
.hero-grid{align-items:start}
.hero-visual{margin-top:clamp(0px,3vw,40px)}
@media (max-width:900px){.row.wide,.row.wide.flip{grid-template-columns:minmax(0,1fr)} .row.wide.flip .txt{order:0}}

/* ── v1.12b: tydligare sektioner ── */
.secno{display:inline-block; font-family:var(--serif); font-size:15px; letter-spacing:0; color:inherit; margin-right:12px; padding-right:12px; border-right:1px solid currentColor; opacity:.9}
.value .eb .secno,.pilot .eb .secno{border-right-color:rgba(248,245,241,.4)}
.value.opp{background-position:50% 40%}
.value .facts{border-top-color:rgba(248,245,241,.55)}
.value .fact + .fact{border-left-color:rgba(248,245,241,.18)}
.value .fact b{color:var(--ark)}
.value .fact p{color:rgba(248,245,241,.78)}
.value .src{color:rgba(248,245,241,.6)}
.value .sec-h .ing{color:rgba(248,245,241,.86)}
.rows .row + .row{border-top:1px solid var(--line); padding-top:clamp(56px,7vw,96px)}
.rows{gap:clamp(56px,7vw,96px)}
.pillars .n,.row .n{font-family:var(--serif)}
.contact{border-top:1px solid var(--line)}
.hero{padding-bottom:clamp(72px,9vw,128px)}
@media (max-width:900px){
  .value .fact:nth-child(n+3){border-top-color:rgba(248,245,241,.18)}
}

/* ── v1.14: faktarader som siffror ── */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,64px); margin-top:clamp(44px,5vw,72px); padding-top:clamp(28px,3vw,40px); border-top:1px solid rgba(248,245,241,.4)}
.stat b{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(56px,6.4vw,92px); line-height:.95; letter-spacing:-.02em; color:var(--ark); white-space:nowrap}
.dots{display:flex; gap:8px; margin:22px 0 18px}
.dots i{width:13px; height:13px; border-radius:50%; box-shadow:inset 0 0 0 1.25px rgba(248,245,241,.4)}
.dots i.on{background:var(--glod); box-shadow:none}
.stat p{font-size:16.5px; line-height:1.5; color:rgba(248,245,241,.8); max-width:28ch}
.verdict{margin-top:clamp(48px,6vw,80px); padding-top:clamp(24px,3vw,36px); border-top:1px solid rgba(248,245,241,.2); font-family:var(--serif); font-weight:300; font-size:clamp(26px,2.9vw,40px); line-height:1.15; color:var(--ark); max-width:30ch}
.value .src{margin-top:28px}
@media (max-width:900px){.stats{grid-template-columns:1fr; gap:36px}}

/* ── v1.16: produktbilder som levande prototyper (iframe skalas till kolumnen) ── */
.mock{position:relative; width:100%; max-width:calc(var(--w) * 1px); aspect-ratio:var(--w) / var(--h); margin-inline:auto}
.mock iframe{position:absolute; left:0; top:0; width:calc(var(--w) * 1px); height:calc(var(--h) * 1px); border:0; transform-origin:0 0; transform:scale(var(--s,1)); background:transparent; display:block}
.mock.lift{max-width:calc(var(--w) * 1.12px)}

/* hero: foto + telefon */
.hero-visual{display:grid; padding-bottom:0}
.hero-visual > *{grid-area:1 / 1}
.hero-visual .photo{width:70%; justify-self:end; align-self:start; aspect-ratio:4 / 4.9}
.hero-phone{justify-self:start; align-self:start; width:min(70%,420px); margin:clamp(32px,5vw,72px) 0 0 -28px; position:relative; z-index:2}
@media (max-width:900px){
  .hero-visual{margin-top:8px}
  .hero-visual .photo{width:72%; aspect-ratio:4 / 5}
  .hero-phone{width:min(82%,340px); margin:44px 0 0 -12px}
}

/* 04 värde: ljusare bakgrund och telefon */
.value.dance::before{background:radial-gradient(circle at 78% 46%, rgba(242,201,174,.20) 0%, rgba(242,201,174,0) 42%), linear-gradient(180deg, rgba(74,64,58,.70) 0%, rgba(66,57,51,.80) 55%, rgba(58,50,45,.88) 100%)}
.varde-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,400px); gap:clamp(40px,6vw,96px); align-items:center}
.varde-grid .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.varde-grid .vgrid > div:nth-child(3){grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; column-gap:28px; align-items:start}
.varde-grid .vgrid > div:nth-child(3) .big{grid-row:span 2; margin:0}
.varde-phone{margin:0}
.varde-phone figcaption{margin-top:6px; text-align:center; font-size:13px; color:rgba(248,245,241,.72)}
@media (max-width:900px){
  .varde-grid{grid-template-columns:minmax(0,1fr)}
  .varde-grid .vgrid{grid-template-columns:1fr}
  .varde-grid .vgrid > div:nth-child(3){display:block}
  .varde-phone .mock{max-width:360px}
}

/* 05 upplägg: växlare mellan Scener.se och eget varumärke */
.setup-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:clamp(40px,6vw,96px); align-items:center}
.setup-txt .brandswitch{margin-top:clamp(32px,4vw,48px)}
.brandswitch{display:inline-flex; padding:4px; border-radius:99px; background:var(--ark); box-shadow:inset 0 0 0 1px var(--line)}
.brandswitch button{appearance:none; border:0; background:transparent; font:600 15px/1 var(--sans); color:var(--bark); padding:13px 20px; border-radius:99px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:background-color .25s, color .25s}
.brandswitch button[aria-checked="true"]{background:var(--bark); color:var(--ark)}
.brandswitch .d{width:8px; height:8px; border-radius:50%; background:var(--spot)}
.brandswitch .o{width:12px; height:12px; border-radius:3px; background:#24493F; box-shadow:inset 0 0 0 1.5px rgba(248,245,241,.5)}
.bs-opt{display:none; margin-top:clamp(28px,3.4vw,44px); padding-top:22px; border-top:1.5px solid var(--bark); max-width:46ch}
.bs-opt.is-on{display:block; animation:bsIn .4s ease}
.bs-opt h3{font-size:clamp(28px,2.8vw,38px); margin:12px 0 10px}
.bs-opt p{color:var(--bark-2); font-size:18px}
@keyframes bsIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.setup-phone{margin:0}
.setup .modules{margin-top:clamp(56px,7vw,88px)}
@media (max-width:900px){
  .setup-grid{grid-template-columns:minmax(0,1fr)}
  .setup-phone .mock{max-width:360px}
}
@media (max-width:420px){.brandswitch button{padding:12px 15px; font-size:14px}}
@media (prefers-reduced-motion:reduce){.bs-opt.is-on{animation:none}}


/* ── v1.19: 05 varumärkeskort och ekosystem ── */
.brandcards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:clamp(32px,4vw,48px)}
.bc{appearance:none; text-align:left; font:inherit; color:var(--bark); background:transparent; border:1.5px solid var(--line); border-radius:12px; padding:0 0 20px; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; transition:border-color .25s, background-color .25s, box-shadow .25s}
.bc:hover{border-color:var(--line-2)}
.bc[aria-checked="true"]{background:var(--ark); border-color:var(--bark); box-shadow:0 14px 28px -18px rgba(42,34,31,.45)}
.bc:focus-visible{outline:2px solid var(--salong); outline-offset:3px}
.bc-bar{display:flex; align-items:center; gap:8px; height:44px; padding:0 16px; font-size:14px; white-space:nowrap; border-bottom:1px solid var(--line)}
.bc-bar.sc{background:#F3EEE9; font-family:var(--serif); font-size:16px}
.bc-bar.sc small{font-size:.62em}
.bc-bar.sc i{width:7px; height:7px; border-radius:50%; background:var(--spot)}
.bc-bar.own{background:#24493F; color:var(--ark); font-weight:600; border-bottom-color:#24493F}
.bc-bar.own i{width:16px; height:16px; border-radius:4px; background:var(--ark); position:relative}
.bc-bar.own i::after{content:""; position:absolute; inset:4.5px; border-radius:50%; background:#24493F}
.bc-eb{margin:18px 18px 0; font:600 11.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--rok); display:flex; align-items:center; gap:8px}
.bc-eb::after{content:""; margin-left:auto; width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line-2); transition:box-shadow .25s}
.bc[aria-checked="true"] .bc-eb::after{box-shadow:inset 0 0 0 5px var(--bark)}
.bc-h{margin:12px 18px 6px; font-family:var(--serif); font-size:clamp(22px,2vw,27px); line-height:1.1}
.bc-p{margin:0 18px; font-size:15.5px; line-height:1.45; color:var(--bark-2)}
.bc:not([aria-checked="true"]) .bc-h,.bc:not([aria-checked="true"]) .bc-p{opacity:.62}
.bc-now{display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; color:var(--rok); margin-bottom:2px}
.bc-now .sw{width:10px; height:10px; border-radius:3px; background:var(--spot); transition:background-color .3s}
.bc-now .sw.sc{border-radius:50%}
.bc-now .sw.own{background:#24493F}
@media (max-width:900px){.setup-phone{margin-top:-8px}}
@media (max-width:560px){
  .brandcards{gap:10px}
  .bc{padding-bottom:16px}
  .bc-bar{height:38px; padding:0 11px; font-size:12.5px; gap:6px}
  .bc-bar.sc{font-size:13px}
  .bc-eb{margin:14px 12px 0; font-size:10px; letter-spacing:.08em}
  .bc-h{margin:10px 12px 4px; font-size:19px}
  .bc-p{margin:0 12px; font-size:13.5px}
}

.eco{margin-top:clamp(72px,9vw,128px); padding-top:clamp(40px,5vw,64px); border-top:1px solid var(--line)}
.eco-h{max-width:720px}
.eco-h h3{font-size:clamp(30px,3.4vw,48px); line-height:1.05; margin:14px 0 14px}
.eco-h p{font-size:18px; color:var(--bark-2); max-width:58ch}
.eco-map{display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1.2fr) 34px minmax(0,1fr) 34px minmax(0,.72fr); align-items:center; margin-top:clamp(36px,4.5vw,60px)}
.ec{display:flex; flex-direction:column; gap:10px}
.ec-l{margin:0 0 4px; font:600 11.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--rok)}
.en{display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; background:var(--ark); border-radius:10px; padding:14px 15px; box-shadow:inset 0 0 0 1px rgba(42,34,31,.06)}
.en b{display:block; font-weight:600; font-size:15.5px; line-height:1.25}
.en span{display:block; font-size:14px; line-height:1.4; color:var(--rok); margin-top:2px}

.ei{width:24px; height:24px; fill:none; stroke:var(--salong); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-top:1px}
.core{background:var(--salong); border-radius:14px; padding:18px 16px 16px; display:flex; flex-direction:column; gap:6px; box-shadow:0 24px 40px -26px rgba(36,48,63,.7)}
.core-wm{display:flex; align-items:baseline; gap:0; margin:0 0 8px 2px; font-family:var(--serif); font-size:21px; color:var(--ark); white-space:nowrap}
.core-wm i{width:8px; height:8px; border-radius:50%; background:var(--spot); margin-right:10px; align-self:center}
.core-wm small{font-size:.6em}
.core .en{background:rgba(248,245,241,.07); box-shadow:none; padding:11px 12px}
.core .en b{color:var(--ark)}
.core .en span{color:rgba(248,245,241,.68)}
.core .ei{stroke:var(--glod)}
.ea{display:flex; align-items:center; justify-content:center; padding-top:22px}
.ea span{width:30px; height:30px; border-radius:50%; background:var(--ark); box-shadow:inset 0 0 0 1px rgba(42,34,31,.10); display:grid; place-items:center}
.ea svg{width:16px; height:16px; fill:none; stroke:var(--salong); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pub{border-top:1.5px solid var(--bark); padding:12px 0 8px}
.pub b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.2vw,30px); line-height:1.05}
.pub span{display:block; font-size:14px; color:var(--rok); margin-top:4px}
.eco-back{margin-top:clamp(28px,3vw,40px); background:rgba(46,61,81,.07); border-radius:14px; padding:clamp(16px,2vw,22px)}
.eb-head{margin:0 0 14px; font:600 11.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--rok)}
.eb-items{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.eco .note{margin-top:28px}
@media (max-width:1000px){
  .eco-map{grid-template-columns:minmax(0,1fr); gap:0}
  .ea{height:auto; padding:12px 0 10px}
  .ea svg{transform:rotate(90deg)}
  .ec-l{text-align:center}
  .ec-pub{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
  .ec-pub .ec-l{grid-column:1 / -1}
  .eb-items{grid-template-columns:1fr 1fr}
}


/* ── v1.19: pulserande punkt i logotypen, som på nuvarande scener.se ── */
.logo .d{position:relative; animation:dot-breathe 2.8s ease-in-out infinite}
.logo .d::before,.logo .d::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--spot); animation:dot-ring 2.8s cubic-bezier(.22,.61,.36,1) infinite}
.logo .d::after{animation-delay:1.4s}
@keyframes dot-breathe{0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(222,101,34,0)}50%{transform:scale(1.12); box-shadow:0 0 16px 2px rgba(222,101,34,.5)}}
@keyframes dot-ring{0%{transform:scale(1); opacity:.6}70%{transform:scale(3.2); opacity:0}100%{transform:scale(3.2); opacity:0}}
@media (prefers-reduced-motion:reduce){.logo .d{animation:none}.logo .d::before,.logo .d::after{display:none}}


/* ── v1.19: bildspel i 3.1 och 3.3 ── */
.slides{position:relative}
.sl-track{display:grid; align-items:start; overflow:hidden; transition:height .35s ease}
.sl{grid-area:1 / 1; margin:0; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s .45s}
.sl.is-on{opacity:1; visibility:visible; transition:opacity .45s ease}
.sl img{display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 22px 40px -26px rgba(31,26,23,.5)}
.sl-nav{display:flex; align-items:center; gap:14px; margin-top:18px}
.sl-prev,.sl-next{appearance:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--bark); font:400 22px/1 var(--serif); cursor:pointer; display:grid; place-items:center; padding-bottom:3px; transition:background-color .2s, border-color .2s}
.sl-prev:hover,.sl-next:hover{background:var(--ark); border-color:var(--bark)}
.sl-dots{display:flex; gap:8px}
.sl-dot{appearance:none; width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--line-2); cursor:pointer; transition:background-color .2s, transform .2s}
.sl-dot.is-on{background:var(--bark); transform:scale(1.15)}
.sl-count{margin-left:auto; font-size:13px; color:var(--rok); font-variant-numeric:tabular-nums}
.slides .cap{margin-top:10px; min-height:2.9em}
@media (prefers-reduced-motion:reduce){.sl,.sl.is-on{transition:none}}

/* ── v1.17: utan toppmeny, hero med stadskarta ── */
.brandline .wrap{padding-top:clamp(22px,3vw,34px)}
.brandline .logo{font-size:28px}
.hero{padding-top:clamp(28px,4vw,56px)}
.hero-visual .photo.map{background-size:cover; background-position:50% 50%; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(42,34,31,.06)}

/* ── v1.18 ── */
.pilot figure .photo-by{position:absolute; right:12px; bottom:10px; font-size:11px; color:rgba(248,245,241,.78)}
.sec-h .genres{margin-top:14px; font-size:15px; color:var(--rok); letter-spacing:.01em}

/* ── v1.21: större telefoner i mobilen (beskär luften runt telefonen) ── */
@media (max-width:900px){
  .mock.pc{--fw:var(--cw); max-width:none!important; width:100%; aspect-ratio:var(--cw) / var(--h); overflow:hidden}
  .mock.pc iframe{left:calc((var(--cw) - var(--w)) * .5px * var(--s))}
  .hero-phone{width:min(86%,350px)}
  .varde-phone .mock.pc,.setup-phone .mock.pc{max-width:400px!important; margin-inline:auto}
}

/* ── v1.21: kontaktformulär ── */
.ask{margin-top:clamp(48px,6vw,72px); background:var(--papper); border-radius:4px; padding:clamp(22px,3vw,34px)}
.ask-head{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.ask-head h3{font-size:clamp(24px,2.4vw,30px)}
.ask-head p{color:var(--bark-2); margin-top:6px}
.ask-form{margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.ask-to{display:flex; align-items:center; gap:12px; font-size:15.5px; color:var(--bark-2); margin:0 0 22px}
.ask-to .av{width:40px; height:40px; border-radius:50%; background:var(--sten); display:grid; place-items:center; font-family:var(--serif); font-size:16px; color:var(--rok); flex:none}
.ask-to b{color:var(--bark); font-weight:600}
.ask-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px 24px}
.f-plats{margin-top:22px; max-width:calc(66.6% - 8px)}
.f{display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:500; color:var(--bark-2)}
.f input[type=text],.f input[type=email],.f input[type=tel]{font:400 17px/1.3 var(--sans); color:var(--bark); background:var(--ark); border:1px solid var(--line-2); border-radius:3px; padding:13px 14px; width:100%}
.f input:focus{outline:2px solid var(--salong); outline-offset:1px; border-color:transparent}
.f.err input,.roles-pick.err{border-color:#B4441A}
.roles-pick{border:0; padding:0; margin:22px 0 0; flex-direction:row; flex-wrap:wrap; gap:10px}
.roles-pick legend{width:100%; margin-bottom:9px; padding:0}
.roles-pick label{position:relative; cursor:pointer}
.roles-pick input{position:absolute; opacity:0; pointer-events:none}
.roles-pick span{display:inline-block; font-size:15px; font-weight:500; color:var(--bark); padding:10px 16px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--line-2); background:var(--ark); transition:background-color .2s, color .2s, box-shadow .2s}
.roles-pick input:checked + span{background:var(--bark); color:var(--ark); box-shadow:none}
.roles-pick input:focus-visible + span{outline:2px solid var(--salong); outline-offset:2px}
.roles-pick.err span{box-shadow:inset 0 0 0 1px #B4441A}
.ask-foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:26px}
.ask-note{font-size:13.5px; color:var(--rok); max-width:52ch; margin:0}
.ask-note.bad{color:#9A3E0E}
.ask-ts{margin-top:24px; max-width:420px; min-height:65px}
@media (max-width:700px){.ask-grid{grid-template-columns:1fr} .f-plats{max-width:none} .ask-head .btn{width:100%}}

@media (max-width:600px){.eb-items{grid-template-columns:1fr}}
@media (min-width:1001px) and (max-width:1200px){.eb-items{grid-template-columns:1fr 1fr}}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ask-done{padding:8px 0 4px}
.ask-done h4{font-family:var(--serif); font-weight:400; font-size:26px; margin:0 0 6px}
.ask-done p{color:var(--bark-2); margin:0}
.ask-form button[disabled]{opacity:.6; cursor:wait}

/* ── v1.23: konstnärlig hero med långsamt bildspel i helbild ── */
.stage-hero{position:relative; height:100vh; height:100svh; min-height:560px; max-height:1000px; overflow:hidden; background:#1D1714; color:var(--ark)}
.sh-slides{position:absolute; inset:0}
.sh-s{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.03); transition:opacity 2s ease, transform 0s linear 2.1s; will-change:transform,opacity}
.sh-s.is-on{opacity:1; transform:scale(1.1); transition:opacity 2s ease, transform 10s linear}
@keyframes sh-kb{from{transform:scale(1.03)}to{transform:scale(1.11)}}
.sh-shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,14,.55) 0%,rgba(20,16,14,.12) 30%,rgba(20,16,14,.2) 55%,rgba(20,16,14,.82) 100%)}
.sh-in{position:relative; height:100%; display:flex; flex-direction:column; padding-top:clamp(22px,3vw,34px); padding-bottom:clamp(22px,3.5vw,40px)}
.sh-logo{font-size:28px; color:var(--ark); width:fit-content}
.sh-logo small{color:rgba(248,245,241,.7)}
.sh-text{margin-top:auto}
.sh-text .eb{color:rgba(248,245,241,.82)}
.sh-text .eb .secno{border-right-color:rgba(248,245,241,.4); color:rgba(248,245,241,.82)}
.sh-text h1{font-weight:300; font-size:clamp(46px,7.6vw,118px); line-height:.98; letter-spacing:-.025em; max-width:13ch; margin-top:clamp(14px,1.6vw,22px); color:var(--ark); text-wrap:balance}
.sh-foot{display:flex; align-items:center; gap:18px; margin-top:clamp(30px,4.5vw,56px); padding-top:16px; border-top:1px solid rgba(248,245,241,.24)}
.sh-cat{font:600 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; min-width:86px; color:rgba(248,245,241,.9)}
.sh-bars{display:flex; gap:6px; flex:0 1 260px}
.sh-bars i{flex:1; height:2px; background:rgba(248,245,241,.25); overflow:hidden; border-radius:2px}
.sh-bars u{display:block; height:100%; width:0; background:var(--ark)}
.sh-bars i.is-on u{animation:sh-fill 6.5s linear forwards}
.sh-bars i.done u{width:100%}
@keyframes sh-fill{to{width:100%}}
.sh-down{margin-left:auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--ark); text-decoration:none; box-shadow:inset 0 0 0 1px rgba(248,245,241,.35); font-size:16px}
.sh-down:hover{box-shadow:inset 0 0 0 1px var(--ark)}
.hero{padding-top:clamp(56px,7vw,104px)}
.hero .hero-lead{font-size:clamp(20px,1.8vw,24px); line-height:1.45; color:var(--bark); max-width:30ch; margin-top:0}
@media (max-width:620px){.sh-foot{gap:12px} .sh-cat{min-width:72px} .sh-text h1{max-width:11ch}}
@media (prefers-reduced-motion:reduce){.sh-s,.sh-s.is-on{transition:none; transform:none} .sh-bars i.is-on u{animation:none; width:100%}}

/* v1.23: rubriken på fem rader i desktop */
@media (min-width:901px){.sh-text h1{max-width:none; font-size:clamp(44px,5.6vw,92px); line-height:1} .sh-text h1 .l{display:block}}
/* v1.23: nodnätverk – plattform och ekosystem */
.sh-net{position:absolute; right:clamp(16px,5vw,90px); top:50%; transform:translateY(-54%); width:min(44vw,620px); height:auto; overflow:visible; pointer-events:none}
.sh-net .ed path{stroke:rgba(248,245,241,.42); stroke-width:1; fill:none}
.sh-net .pl{fill:#F8F5F1; opacity:.9}
.sh-net .rg{fill:rgba(248,245,241,.06); stroke:rgba(248,245,241,.55); stroke-width:1}
.sh-net .dt{fill:#F8F5F1}
.sh-net .lab{font:600 11.5px/1 "Schibsted Grotesk",sans-serif; letter-spacing:.14em; text-transform:uppercase; fill:rgba(248,245,241,.9)}
.sh-net .lab-c{font-family:"Inria Serif",Georgia,serif; font-weight:400; font-size:17px; letter-spacing:0; text-transform:none; fill:#F8F5F1}
.sh-net .cr1{fill:none; stroke:rgba(222,101,34,.45); stroke-width:1; transform-origin:300px 300px; animation:sh-ring 3.4s ease-out infinite}
.sh-net .cr2{fill:rgba(20,16,14,.35); stroke:rgba(248,245,241,.7); stroke-width:1}
.sh-net .cd{fill:#DE6522}
@keyframes sh-ring{0%{transform:scale(.6); opacity:1}80%{transform:scale(1.5); opacity:0}100%{opacity:0}}
@media (max-width:900px){
  .sh-net{width:118vw; right:-34vw; top:13%; transform:none; opacity:.5}
  .sh-net .lab{display:none}
}
@media (prefers-reduced-motion:reduce){.sh-net .pls{display:none} .sh-net .cr1{animation:none}}

/* v1.23: mer luft kring logotypen i hero */
.sh-in{padding-top:clamp(40px,4.6vw,64px)}
@media (max-width:620px){.sh-in{padding-top:52px} .sh-logo{font-size:30px}}
/* v1.23: andra sektionen – text centrerad mot telefonen, ingress i serif */
.hero .hero-grid{align-items:center}
.hero .hero-eb{margin-bottom:18px}
.hero .hero-lead{font-family:var(--serif); font-weight:300; font-size:clamp(28px,2.7vw,40px); line-height:1.16; letter-spacing:-.01em; color:var(--bark); max-width:21ch}
.hero .for{margin-top:24px; padding-top:18px; border-top:1px solid var(--line); max-width:36ch; font-size:16px}
.hero .acts{margin-top:28px}
@media (max-width:900px){.hero .hero-lead{font-size:clamp(26px,7vw,32px)}}

/* v1.23: mörk gradient från höger bakom nätverket */
@media (min-width:901px){.sh-shade{background:linear-gradient(270deg,rgba(12,9,8,.6) 0%,rgba(12,9,8,.38) 22%,rgba(12,9,8,0) 46%),linear-gradient(90deg,rgba(12,9,8,.42) 0%,rgba(12,9,8,.18) 28%,rgba(12,9,8,0) 48%),linear-gradient(180deg,rgba(20,16,14,.55) 0%,rgba(20,16,14,.12) 30%,rgba(20,16,14,.2) 55%,rgba(20,16,14,.82) 100%)}}
/* v1.23: läsbarare ingress i andra sektionen */
.hero .hero-lead{font-weight:400; font-size:clamp(24px,2.15vw,31px); line-height:1.32; letter-spacing:0; max-width:26ch; color:var(--bark)}
@media (max-width:900px){.hero .hero-lead{font-size:clamp(22px,6vw,26px); line-height:1.34}}

/* v1.23 – mobilhero: tunn mörk platta under nätverket, tydligare nätverk */
@media (max-width:900px){
  .sh-shade{background:linear-gradient(rgba(10,8,7,.3),rgba(10,8,7,.3)),linear-gradient(180deg,rgba(20,16,14,.55) 0%,rgba(20,16,14,.12) 30%,rgba(20,16,14,.2) 55%,rgba(20,16,14,.82) 100%)}
  .sh-net{opacity:.75}
  .sh-net .ed path{stroke:rgba(248,245,241,.55); stroke-width:1.3}
  .sh-net .rg{stroke:rgba(248,245,241,.7); stroke-width:1.3}
  .sh-net .pl{opacity:1}
}

/* v1.24 – karuseller: samma höjd för alla bilder, svep i mobilen */
.sl-track{align-items:center; touch-action:pan-y}
@media (hover:none){.slides .sl iframe{pointer-events:none}}
@media (max-width:900px){.slides .mock.pc{max-width:300px!important}}
/* beskuren prototyp: visar översta delen (--ch av --h) och tonar ut nedåt */
.mock.crop{aspect-ratio:var(--w) / var(--ch); overflow:hidden; -webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent); mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}

/* v1.26: sektion 2 på ljus bakgrund som avsnitt 03 */
.hero{background:var(--ark)}
/* v1.26: tredje värdet utan siffra – samma uppbyggnad som de andra */
.varde-grid .vgrid > div:nth-child(3){display:block}
.varde-grid .vgrid > div:nth-child(3) p{max-width:52ch}


/* språkväljare i toppen */
.sh-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.lang{display:flex; align-items:center; gap:2px; font:600 13px/1 var(--sans); letter-spacing:.12em}
.lang a{color:rgba(248,245,241,.68); text-decoration:none; padding:8px 8px; border-radius:2px}
.lang a + a{border-left:1px solid rgba(248,245,241,.35); border-radius:0}
.lang a:hover{color:var(--ark)}
.lang a[aria-current="page"]{color:var(--ark); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px}
.lang a:focus-visible{outline:2px solid var(--ark); outline-offset:2px}
/* engelska rubriken har längre rader – lite mindre så att den inte går in i nätverket */
@media (min-width:901px){html[lang="en"] .sh-text h1{font-size:clamp(42px,4.9vw,80px)}}

/* v1.29 · 04 två spår: stöd och uppdrag */
.vtwo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:34px; max-width:760px}
.vtwo > div{border-top:1px solid rgba(248,245,241,.55); padding-top:16px}
.vtwo .vt-n{display:block; font:600 11.5px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--glod)}
.vtwo h3{font-size:clamp(22px,2vw,26px); font-weight:300; line-height:1.15; margin-top:10px; color:var(--ark)}
.vtwo p{font-size:15.5px; line-height:1.5; margin-top:8px; color:rgba(248,245,241,.8)}
.vt-out{margin-top:26px; max-width:56ch; font-size:17px; line-height:1.5; color:var(--ark)}
@media (max-width:700px){.vtwo{grid-template-columns:1fr}}