/* Winthers Revisionsbyra. Ljus yta, lila blackfarg, kundens egna foton. */

@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/Archivo-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('assets/fonts/Archivo-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;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('assets/fonts/InstrumentSerif-latin.woff2') format('woff2');
  font-weight:400; 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:'Instrument Serif';
  src:url('assets/fonts/InstrumentSerif-latin-ext.woff2') format('woff2');
  font-weight:400; 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{
  --black:#171515;
  --black-2:#474A52;
  --black-3:#767B85;
  --lila:#833CA3;
  --lila-mork:#5C2874;
  --lila-tunn:#F4EBF8;
  --yta:#FFFFFF;
  --yta-2:#F1F4F7;
  --blagra:#E2EBEE;
  --linje:#E3E6EC;
  --linje-2:#EDEFF3;
  --marg:clamp(20px,5vw,64px);
  --brett:1320px;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --lyft:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--yta); color:var(--black);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{margin:0; font-weight:680; letter-spacing:-.032em; line-height:1.04; color:var(--black); overflow-wrap:break-word}
h1{font-size:clamp(31px,6.4vw,72px)}
h1.lang{font-size:clamp(26px,5.6vw,58px)}
h2{font-size:clamp(29px,4.2vw,55px); line-height:1.06}
h3{font-size:clamp(19px,2vw,25px); letter-spacing:-.02em; line-height:1.2}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

.inre{max-width:var(--brett); margin:0 auto; padding-inline:var(--marg)}
.smal{max-width:820px}
section{position:relative}

.kick{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--lila);
  margin:0 0 1.1rem; display:flex; align-items:center; gap:.7rem;
}
.kick::before{content:''; width:22px; height:1px; background:var(--lila); flex:none}
.kick.utan::before{display:none}

.hoppa{position:absolute;left:-9999px;top:0;background:var(--black);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 10px 0}
.hoppa:focus{left:0}
:focus-visible{outline:2px solid var(--lila); outline-offset:3px; border-radius:4px}

/* ---------- forslagsbandet, samma pa alla sajter, forlaga Carlshalls ---------- */
.th-band{background:#1E4230;color:#EAF3EE;font-size:14px;line-height:1.45;padding:4px 20px;position:relative;z-index:70}
.th-band-inre{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
.th-band-inre>span{flex:1 1 320px;min-width:0;padding:8px 0}
.th-band b{font-weight:600;color:#fff}
.th-band a{color:#B9EBD1;text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.th-band a:hover{color:#fff}

/* ---------- Sidhuvud ---------- */
.list{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--linje-2);
}
.list-inre{
  max-width:var(--brett); margin:0 auto; padding:0 var(--marg);
  height:70px; display:flex; align-items:center; gap:1.4rem;
}
.marke{display:flex; flex-direction:column; text-decoration:none; margin-right:auto; line-height:1}
.marke b{font-size:19px; font-weight:700; letter-spacing:.02em}
.marke span{font-family:var(--mono); font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--black-3); margin-top:5px}
.meny{display:none; gap:.2rem; align-items:center}
.meny a{
  text-decoration:none; font-size:14.5px; color:var(--black-2); padding:9px 12px;
  border-radius:8px; transition:color .2s, background .2s; white-space:nowrap;
}
.meny a:hover{color:var(--black); background:var(--yta-2)}
.meny a[aria-current="page"]{color:var(--lila); font-weight:600}
.ring{
  display:none; text-decoration:none; background:var(--lila); color:#fff;
  padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600;
  white-space:nowrap; transition:background .22s, transform .22s var(--lyft);
}
.ring:hover{background:var(--lila-mork); transform:translateY(-1px)}
.knapp-meny{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; border:1px solid var(--linje);
  background:#fff; border-radius:10px; cursor:pointer;
}
.knapp-meny i{display:block; height:1.6px; background:var(--black); transition:transform .3s var(--lyft), opacity .2s}
.knapp-meny i:nth-child(2){width:70%}
.knapp-meny[aria-expanded="true"] i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.knapp-meny[aria-expanded="true"] i:nth-child(2){opacity:0}
.knapp-meny[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.panel{
  display:none; border-top:1px solid var(--linje-2); background:#fff;
  padding:10px var(--marg) 22px;
}
.panel.oppen{display:block}
.panel a{
  display:block; text-decoration:none; font-size:17px; color:var(--black);
  padding:12px 2px; border-bottom:1px solid var(--linje-2);
}
.panel a[aria-current="page"]{color:var(--lila)}
.panel .panel-ring{
  margin-top:16px; background:var(--lila); color:#fff; text-align:center;
  border-radius:999px; border:0; font-weight:600; padding:14px;
}
.progress{position:absolute; left:0; bottom:-1px; height:2px; background:var(--lila); width:0; transform-origin:0 50%}

@media (min-width:1030px){
  .meny{display:flex}
  .ring{display:inline-block}
  .knapp-meny{display:none}
  .panel{display:none !important}
}

/* ---------- Hjaltesektion ---------- */
.hjalte{padding:clamp(34px,5vw,58px) 0 0; overflow:hidden}
.hjalte-inre{
  max-width:var(--brett); margin:0 auto; padding-inline:var(--marg);
  display:grid; gap:clamp(28px,4vw,52px); align-items:center;
}
.hjalte h1{font-size:clamp(35px,8.4vw,56px)}
.rad{display:block; overflow:hidden; padding-bottom:.06em}
.rad>span{display:block}
.bp{position:relative; display:inline-block; color:var(--lila); white-space:nowrap}
.bp svg{position:absolute; left:-2%; right:-2%; bottom:-.16em; width:104%; height:.32em; overflow:visible}
.bp path{fill:none; stroke:var(--lila); stroke-width:7; stroke-linecap:round; opacity:.5}
.hjalte-om{margin:1.5rem 0 0; max-width:46ch; color:var(--black-2); font-size:clamp(16px,1.5vw,18.5px)}
.hjalte-kn{display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem}

.kn{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  border-radius:999px; padding:14px 26px; font-size:15px; font-weight:600;
  transition:transform .25s var(--lyft), background .25s, color .25s, border-color .25s;
  border:1.5px solid transparent; cursor:pointer;
}
.kn-fyll{background:var(--lila); color:#fff}
.kn-fyll:hover{background:var(--lila-mork); transform:translateY(-2px)}
.kn-tom{border-color:var(--linje); color:var(--black); background:#fff}
.kn-tom:hover{border-color:var(--black); transform:translateY(-2px)}
.kn-svart{background:var(--black); color:#fff}
.kn-svart:hover{transform:translateY(-2px); background:#000}

/* fotosekvensen */
.scen-hallare{position:relative; perspective:1400px}
.scen{
  position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden;
  background:var(--yta-2); box-shadow:0 26px 60px -30px rgba(23,21,21,.42);
  transform-style:preserve-3d; will-change:transform;
}
.scen::after{
  content:''; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); z-index:2;
}
.scen .bild{position:absolute; inset:0; margin:0; opacity:0; will-change:opacity}
.scen .bild.pa{opacity:1}
.scen .bild img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); will-change:transform}
.scen .bild.pa img{animation:kenburns 8.4s linear forwards}
@keyframes kenburns{from{transform:scale(1.085)} to{transform:scale(1.005)}}
.svep{
  position:absolute; top:-12%; bottom:-12%; left:0; width:56%;
  background:linear-gradient(100deg,rgba(131,60,163,0) 0%,rgba(131,60,163,.85) 45%,rgba(131,60,163,0) 100%);
  transform:translateX(-190%) skewX(-11deg); pointer-events:none; opacity:0;
}
.scen-nr{
  position:absolute; left:16px; bottom:14px; z-index:3;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.rail{display:flex; gap:8px; margin-top:14px; padding:0; list-style:none}
.rail li{flex:1}
.rail button{
  display:block; width:100%; height:26px; padding:0; border:0; background:none;
  cursor:pointer; position:relative;
}
.rail button::before{content:''; position:absolute; left:0; right:0; top:11px; height:3px; border-radius:2px; background:var(--linje)}
.rail button i{
  position:absolute; left:0; top:11px; height:3px; width:100%; border-radius:2px;
  background:var(--lila); transform:scaleX(0); transform-origin:0 50%;
}
.rail button[aria-selected="true"] i{transform:scaleX(1)}

@media (min-width:940px){
  .hjalte{padding-top:clamp(40px,4.4vw,72px)}
  .hjalte-inre{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(32px,4vw,64px)}
  .hjalte h1{font-size:clamp(38px,4.35vw,60px)}
  .scen{aspect-ratio:5/4}
}
@media (min-width:1240px){
  .scen{aspect-ratio:1/1; max-height:620px}
}

/* fakta-remsa */
.fakta{
  margin-top:clamp(40px,5vw,72px); border-top:1px solid var(--linje);
  border-bottom:1px solid var(--linje); background:var(--yta-2);
}
.fakta ul{
  list-style:none; margin:0 auto; padding:clamp(24px,3vw,36px) var(--marg); max-width:var(--brett);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,32px);
}
.fakta li b{display:block; font-size:clamp(28px,3.6vw,44px); font-weight:680; letter-spacing:-.035em; line-height:1}
.fakta li span{display:block; margin-top:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--black-3)}
@media (min-width:760px){.fakta ul{grid-template-columns:repeat(4,1fr)}}

/* tjanstremsa som glider */
.remsa{border-bottom:1px solid var(--linje); overflow:hidden; padding:15px 0; background:#fff}
.remsa-spar{display:flex; width:max-content; gap:0; animation:glid 38s linear infinite}
.remsa-spar span{
  display:inline-flex; align-items:center; gap:26px; padding-right:26px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--black-3);
  white-space:nowrap;
}
.remsa-spar span::after{content:''; width:5px; height:5px; border-radius:50%; background:var(--lila); flex:none}
@keyframes glid{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- generella block ---------- */
.blk{padding:clamp(60px,8vw,120px) 0}
.blk-tunn{padding:clamp(44px,6vw,86px) 0}
.grund-2{background:var(--yta-2)}
.grund-lila{background:var(--lila-tunn)}
.rubrikrad{display:grid; gap:clamp(18px,3vw,44px); align-items:end; margin-bottom:clamp(30px,4vw,54px)}
@media (min-width:900px){.rubrikrad{grid-template-columns:1.35fr 1fr}}
.rubrikrad p{color:var(--black-2); margin:0}
.led{color:var(--black-2); max-width:62ch; font-size:clamp(16.5px,1.5vw,19px)}

.lank{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-weight:600; color:var(--lila); font-size:15px; border-bottom:1.5px solid rgba(131,60,163,.28);
  padding-bottom:2px; transition:border-color .22s, gap .22s var(--lyft);
}
.lank:hover{border-color:var(--lila); gap:.8rem}

/* citat / affarside */
.citat{
  background:var(--black); color:#fff; border-radius:24px;
  padding:clamp(32px,5vw,68px); position:relative; overflow:hidden;
}
.citat::after{
  content:''; position:absolute; right:-16%; top:-40%; width:60%; aspect-ratio:1;
  background:radial-gradient(circle,rgba(131,60,163,.55),transparent 66%); pointer-events:none;
}
.citat blockquote{
  margin:0; font-family:'Instrument Serif',Georgia,serif; font-weight:400;
  font-size:clamp(25px,3.6vw,48px); line-height:1.16; letter-spacing:-.01em; position:relative; z-index:1;
}
.citat.lang blockquote{font-size:clamp(21px,2.5vw,34px); line-height:1.28}
@media (min-width:920px){
  .citat.lang{display:grid; grid-template-columns:1.3fr .82fr; gap:clamp(32px,4vw,60px); align-items:start}
  .citat.lang blockquote{grid-column:1}
  .citat.lang ul{grid-column:2; margin-top:.45em}
  .citat.lang cite{grid-column:1 / -1}
}
.citat blockquote em{font-style:italic; color:#D9AEEE}
.citat ul{list-style:none; margin:clamp(24px,3vw,38px) 0 0; padding:0; display:grid; gap:14px; position:relative; z-index:1}
.citat li{
  display:flex; gap:.85rem; align-items:flex-start; color:rgba(255,255,255,.86);
  font-size:clamp(15.5px,1.5vw,18px); line-height:1.5; max-width:56ch;
}
.citat li::before{content:''; width:7px; height:7px; border-radius:50%; background:#C98FE3; margin-top:.6em; flex:none}
.citat cite{display:block; margin-top:clamp(22px,3vw,32px); font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:rgba(255,255,255,.5); position:relative; z-index:1}

/* tjanstekort */
.tk-rut{list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,1.8vw,22px)}
@media (min-width:620px){.tk-rut{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.tk-rut{grid-template-columns:repeat(3,1fr)}}
.tk a{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
  background:#fff; border:1px solid var(--linje); border-radius:18px; overflow:hidden;
  transition:transform .32s var(--lyft), box-shadow .32s, border-color .32s;
}
.tk a:hover{transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(23,21,21,.34); border-color:#D6D9E0}
.tk-bild{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--yta-2)}
.tk-bild img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--lyft)}
.tk a:hover .tk-bild img{transform:scale(1.055)}
.tk-txt{padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; flex:1}
.tk-nr{font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; color:var(--lila); margin:0 0 .7rem}
.tk-namn{font-size:clamp(19px,1.7vw,23px); font-weight:680; letter-spacing:-.024em; line-height:1.15; margin:0}
.tk-om{margin:.6rem 0 1.2rem; color:var(--black-2); font-size:15.5px; line-height:1.55; flex:1}
.tk-mer{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--black-3); display:inline-flex; gap:.5rem; align-items:center}
.tk a:hover .tk-mer{color:var(--lila)}

/* loften */
.lofte-rut{list-style:none; margin:0; padding:0; display:grid; gap:clamp(14px,2vw,20px)}
@media (min-width:820px){.lofte-rut{grid-template-columns:1fr 1fr}}
.lofte{background:#fff; border:1px solid var(--linje); border-radius:18px; padding:clamp(24px,3vw,38px)}
.lofte b{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--lila); margin-bottom:1rem; font-weight:500}
.lofte p{margin:0; font-size:clamp(18px,2.1vw,26px); font-weight:600; letter-spacing:-.02em; line-height:1.25}

/* medarbetare */
.mk-rut{list-style:none; margin:0; padding:0; display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.mk-rut{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.mk-rut{grid-template-columns:repeat(4,1fr)}}
.mk{background:#fff; border:1px solid var(--linje); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.mk-bild{aspect-ratio:237/300; background:var(--blagra); overflow:hidden}
.mk-bild img{width:100%; height:100%; object-fit:cover; filter:saturate(.96)}
.mk-txt{padding:16px 16px 18px; display:flex; flex-direction:column; flex:1}
.mk-txt h3{font-size:clamp(15.5px,1.5vw,18px); letter-spacing:-.02em}
.mk-roll{margin:5px 0 12px; font-size:12.5px; line-height:1.4; color:var(--lila); font-weight:500}
.mk-nr,.mk-mejl{
  display:block; text-decoration:none; font-size:13px; color:var(--black-2);
  padding:5px 0; border-top:1px solid var(--linje-2); line-height:1.4; word-break:break-word;
}
.mk-nr span{display:inline-block; width:46px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--black-3)}
.mk-nr:hover,.mk-mejl:hover{color:var(--lila)}
.mk-mejl{margin-top:auto}

/* horisontell portrattrad */
.pspar{display:flex; gap:14px; overflow-x:auto; padding:4px var(--marg) 18px 0; margin-right:calc(var(--marg) * -1); scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
.pspar::-webkit-scrollbar{height:6px}
.pspar::-webkit-scrollbar-thumb{background:var(--linje); border-radius:3px}
.pspar figure{margin:0; flex:0 0 168px; scroll-snap-align:start}
.pspar img{width:100%; aspect-ratio:237/300; object-fit:cover; border-radius:12px; background:var(--blagra)}
.pspar figcaption{margin-top:9px; font-size:13.5px; font-weight:600; letter-spacing:-.01em}
.pspar span{display:block; font-size:12px; color:var(--black-3); line-height:1.35; margin-top:2px}

/* delad bild plus text */
.delad{display:grid; gap:clamp(26px,4vw,60px); align-items:center}
@media (min-width:900px){.delad{grid-template-columns:1fr 1fr} .delad.omvand .delad-txt{order:2}}
.delad-bild{border-radius:20px; overflow:hidden; background:var(--yta-2)}
.delad-bild img{width:100%; height:100%; object-fit:cover}
.faktalista{list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:12px}
.faktalista li{display:flex; gap:.85rem; align-items:flex-start; color:var(--black-2); font-size:16px; line-height:1.55}
.faktalista li::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--lila); margin-top:.62em; flex:none}
.faktalista b{color:var(--black); font-weight:600}

/* nyhetskort */
.ny{display:block; text-decoration:none; background:#fff; border:1px solid var(--linje); border-radius:18px; padding:clamp(24px,3vw,36px); transition:transform .3s var(--lyft), box-shadow .3s}
.ny-rad{display:grid; gap:clamp(24px,4vw,52px); align-items:center}
@media (min-width:960px){.ny-rad{grid-template-columns:1fr 1.05fr}}
.ny:hover{transform:translateY(-4px); box-shadow:0 20px 44px -28px rgba(23,21,21,.34)}
.ny time{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--black-3)}
.ny h3{margin:.8rem 0 .7rem; max-width:20ch}
.ny p{color:var(--black-2); margin:0 0 1.1rem; max-width:66ch; font-size:16px}

/* artikeltext */
.brod{max-width:70ch}
.brod h2{font-size:clamp(22px,2.6vw,32px); margin:2.4rem 0 .9rem}
.brod h2:first-child{margin-top:0}
.brod p{color:var(--black-2); font-size:17.5px}
.brod a{color:var(--lila)}

/* kontaktblock */
.kt-rut{display:grid; gap:clamp(20px,3vw,32px)}
@media (min-width:860px){.kt-rut{grid-template-columns:1.1fr .9fr}}
.kt-kort{background:#fff; border:1px solid var(--linje); border-radius:20px; padding:clamp(24px,3.4vw,44px)}
.kt-lista{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.kt-lista li{padding:15px 0; border-bottom:1px solid var(--linje-2); display:grid; gap:4px}
.kt-lista li:last-child{border-bottom:0}
.kt-lista b{font-family:var(--mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--black-3); font-weight:500}
.kt-lista a,.kt-lista span{font-size:clamp(17px,1.9vw,21px); font-weight:600; letter-spacing:-.02em; text-decoration:none; color:var(--black)}
.kt-lista a:hover{color:var(--lila)}
.kt-bild{border-radius:20px; background:var(--blagra); padding:clamp(22px,3vw,40px); display:grid; place-items:center; align-content:center; gap:14px; text-align:center}
.kt-bild img{width:100%; max-width:264px; height:auto; border-radius:12px; box-shadow:0 16px 40px -22px rgba(23,21,21,.5)}
.kt-bild figcaption{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--black-3)}

/* uhy */
.uhy-kort{background:#fff; border:1px solid var(--linje); border-radius:20px; padding:clamp(20px,3vw,32px)}
.uhy-kort img{margin:0 auto}
.pdf-rut{list-style:none; margin:0; padding:0; display:grid; gap:12px}
@media (min-width:700px){.pdf-rut{grid-template-columns:repeat(2,1fr)}}
.pdf-rut li{background:#fff; border:1px solid var(--linje); border-radius:14px; padding:18px 20px}
.pdf-rut b{display:block; font-size:16px; letter-spacing:-.01em}
.pdf-rut span{display:block; margin-top:5px; font-size:14.5px; color:var(--black-2); line-height:1.5}

/* sidfot */
.fot{background:var(--black); color:rgba(255,255,255,.72); padding:clamp(52px,7vw,86px) 0 30px; font-size:15px}
.fot-rut{display:grid; gap:clamp(28px,4vw,44px)}
@media (min-width:760px){.fot-rut{grid-template-columns:1.3fr 1fr 1fr}}
.fot h4{color:#fff; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; margin:0 0 1.1rem}
.fot p{margin:0 0 .4rem; line-height:1.7}
.fot a{color:rgba(255,255,255,.82); text-decoration:none}
.fot a:hover{color:#D9AEEE}
.fot-lankar{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.fot-marke b{display:block; color:#fff; font-size:20px; font-weight:700; letter-spacing:.02em; margin-bottom:6px}
.fot-uhy{margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14)}
.fot-uhy img{width:150px; filter:brightness(0) invert(1); opacity:.85}
.fot-uhy p{margin-top:12px; font-size:13.5px; color:rgba(255,255,255,.6); max-width:32ch}
.fot-slut{
  margin-top:clamp(38px,5vw,58px); padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-size:13px; color:rgba(255,255,255,.5);
}

/* mobil ringrad */
.mobilring{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--linje);
}
.mobilring a{
  flex:1; text-align:center; text-decoration:none; border-radius:999px; padding:12px;
  font-size:14.5px; font-weight:600;
}
.mobilring .a1{background:var(--lila); color:#fff}
.mobilring .a2{border:1.5px solid var(--linje); color:var(--black)}
@media (min-width:900px){.mobilring{display:none}}
@media (max-width:899px){body{padding-bottom:70px}}

/* ---------- Erbjudandeblock ---------- */
.bd{background:#0C3B2E; color:#F2F7F4; padding:clamp(64px,9vw,120px) var(--marg)}
.bd-wrap{max-width:1340px; margin:0 auto}
.bd-tag{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(242,247,244,.66); margin:0 0 1.1rem; font-weight:500}
.bd-tag::before{content:''; width:8px; height:8px; border-radius:50%; background:#3DFFB4}
.bd-rubrik{font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:clamp(30px,4.6vw,58px); line-height:1.1; margin:0 0 1.4rem; color:#F2F7F4; letter-spacing:0}
.bd-rubrik em{font-style:italic; color:#9FE8C9}
.bd-intro{max-width:64ch}
.bd-intro p{color:rgba(242,247,244,.84); margin:0 0 1rem; font-size:16.5px; line-height:1.65}
.bd-intro b{color:#fff}
.bd-over{display:flex; gap:1.1rem; align-items:flex-start; margin:2.2rem 0 0; max-width:74ch; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:clamp(18px,2.4vw,26px)}
.bd-ov-ikon{color:#3DFFB4; font-size:.7rem; line-height:1.9; flex:none}
.bd-over h3{margin:0; font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:clamp(20px,2.2vw,26px); color:#fff; letter-spacing:0}
.bd-over p{margin:.5rem 0 0; color:rgba(242,247,244,.86); font-size:15.5px; line-height:1.65}
.bd-over b{color:#9FE8C9}
.bd-kort-rad{display:grid; gap:16px; margin:2.4rem 0 0; grid-template-columns:1fr}
@media (min-width:700px){.bd-kort-rad{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.bd-kort-rad{grid-template-columns:repeat(3,1fr); align-items:stretch}}
.bd-kort{position:relative; display:flex; flex-direction:column; border-radius:14px; padding:clamp(20px,2.2vw,26px); background:#fff; color:#10241C; box-shadow:0 10px 34px rgba(0,0,0,.18); transition:transform .3s var(--lyft), box-shadow .3s}
.bd-kort:hover{transform:translateY(-5px); box-shadow:0 20px 48px rgba(0,0,0,.26)}
.bd-kort.popular{box-shadow:0 18px 54px rgba(0,0,0,.28); outline:3px solid #3DFFB4; outline-offset:-3px}
.bd-badge{position:absolute; top:-12px; left:20px; margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:#0C3B2E; background:#3DFFB4; border-radius:999px; padding:5px 12px}
.bd-kort-namn{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#5E7A6E; font-weight:500}
.bd-kort h3{margin:.5rem 0 0; font-size:clamp(21px,2vw,27px); font-weight:400; color:#10241C; font-family:'Instrument Serif',Georgia,serif; line-height:1.15; letter-spacing:0}
.bd-vad{margin:.9rem 0 0; font-size:15px; line-height:1.55; color:#33473E; padding-bottom:.9rem; border-bottom:1px solid rgba(16,36,28,.12)}
.bd-pris{margin:.8rem 0 0; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap}
.bd-pris b{font-size:clamp(24px,2.3vw,31px); font-weight:700; letter-spacing:-.03em; color:#0C3B2E}
.bd-pris span{font-size:12.5px; color:#5E7A6E}
.bd-kort ul{list-style:none; margin:1rem 0 1.3rem; padding:0; flex:1; align-content:start}
.bd-kort li{display:block; position:relative; padding-left:16px; font-size:14.5px; line-height:1.5; color:#33473E; margin-bottom:.5rem}
.bd-kort li b{color:#10241C}
.bd-kort li::before{content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:#0C3B2E}
.bd-btn{display:block; text-align:center; border-radius:999px; padding:12px 18px; font-weight:600; font-size:15px; color:#0C3B2E; border:1.5px solid #0C3B2E; text-decoration:none; transition:transform .25s var(--lyft), background .25s, color .25s}
.bd-btn:hover{transform:translateY(-2px); background:#0C3B2E; color:#fff}
.bd-btn.primar{background:#0C3B2E; color:#fff; border-color:#0C3B2E}
.bd-btn.primar:hover{background:#092E24}
.bd-timmar{margin:1.6rem 0 0; font-size:15px; color:rgba(242,247,244,.74)}
.bd-timmar b{color:#9FE8C9}
.bd-boka{margin:2rem 0 0; display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:clamp(20px,2.6vw,28px)}
.bd-boka h3{margin:0; color:#fff; font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:clamp(20px,2.2vw,27px); letter-spacing:0}
.bd-boka p{margin:.4rem 0 0; color:rgba(242,247,244,.82); font-size:15.5px; max-width:56ch}
.bd-boka .bd-btn{flex:none; background:#fff; color:#0C3B2E; border:none}
.bd-boka .bd-btn:hover{background:#3DFFB4; color:#0C3B2E}
.bd-fin{margin:2.2rem 0 0; max-width:72ch; font-size:14px; line-height:1.6; color:rgba(242,247,244,.62)}
.bd-fin a{color:#9FE8C9; text-decoration:underline; text-underline-offset:3px}
.bd-pill{position:fixed; left:14px; bottom:80px; z-index:75; display:inline-flex; align-items:center; gap:.55rem; background:#0C3B2E; color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:9px 15px; font-size:13px; font-weight:600; text-decoration:none; box-shadow:0 6px 24px rgba(0,0,0,.35)}
.bd-pill::before{content:''; width:7px; height:7px; border-radius:50%; background:#3DFFB4; animation:bdpuls 2.2s ease-in-out infinite}
@keyframes bdpuls{0%,100%{opacity:1} 50%{opacity:.35}}
.bd-pill:hover{border-color:#3DFFB4}
@media (min-width:900px){.bd-pill{bottom:16px}}
@media (max-width:420px){.bd-pill{font-size:11.5px; padding:8px 12px}}

/* ---------- rorelse: startlagen ---------- */
.rev{opacity:1}
html.gsap-redo .rev{opacity:0}
html.gsap-redo .rad>span{transform:translateY(105%)}

@media (prefers-reduced-motion:reduce){
  .scen .bild.pa img{animation:none; transform:scale(1)}
  .remsa-spar{animation:none}
  .bd-pill::before{animation:none}
  html.gsap-redo .rev{opacity:1}
  html.gsap-redo .rad>span{transform:none}
  *{transition-duration:.01ms !important}
}