/* Tillägg till referensens stilmall: grund, scroll-animationer och tillgänglighet */
[hidden]{display:none!important}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;min-height:100svh;background-color:var(--color-bg);color:var(--color-fg);font-family:var(--font-sans);font-size:1rem;line-height:1.5}
h1,h2,h3{text-wrap:balance}
.rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.rv.rv-in{opacity:1;transform:none}
.rv img{transform:scale(1.035);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.rv.rv-in img{transform:none}
@media (max-width:640px){.rv{transform:translate3d(0,16px,0)}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none!important}.rv img{transform:none!important}}
#site-header{padding-top:env(safe-area-inset-top,0px)}
.compare-frame{touch-action:pan-y}

/* ---- Typografi: Manrope för rubriker, Inter för brödtext ---- */
@font-face{font-family:"Manrope Variable";font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations");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:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");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}
body{font-feature-settings:"cv11","ss01";letter-spacing:-.003em}
.font-display{font-weight:600;letter-spacing:-.025em;font-feature-settings:"ss01"}
h1.font-display{font-weight:700;letter-spacing:-.035em;line-height:1.04}
h2.font-display{line-height:1.1}
h3.font-display,p.font-display{letter-spacing:-.015em}

/* ---- Fullbreddssektioner med bild bakom text ---- */
.bleed{position:relative;overflow:hidden;isolation:isolate;background:var(--color-fg);color:var(--color-paper)}
.bleed-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1.03);animation:bleed-drift 20s ease-in-out infinite alternate;will-change:transform}
.bleed-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,36,24,.9) 0%,rgba(28,36,24,.74) 42%,rgba(28,36,24,.2) 100%)}
.bleed-inner{display:flex;align-items:center;min-height:min(78svh,720px);padding-top:6rem;padding-bottom:6rem}
.bleed-inner.top{padding-top:9rem;min-height:min(70svh,640px)}
.bleed-text{max-width:36rem}
.bleed .eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,248,242,.7)}
.bleed p{color:rgba(251,248,242,.85)}
.bleed ul li svg{color:rgba(251,248,242,.85)}
@keyframes bleed-drift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1%,-.6%,0)}}
@media (max-width:767px){
  .bleed-img{object-position:var(--mpos,50% 50%)}
  .bleed-shade{background:linear-gradient(0deg,rgba(28,36,24,.95) 0%,rgba(28,36,24,.9) 50%,rgba(28,36,24,.55) 68%,rgba(28,36,24,.12) 100%)}
  .bleed-inner{align-items:flex-end;min-height:0;padding-top:15rem;padding-bottom:3.5rem}
  .bleed-inner.top{padding-top:12rem}
  .bleed-img{animation-duration:26s}
}
@media (prefers-reduced-motion:reduce){.bleed-img{animation:none;transform:none}}

/* före/efter */
.compare-big{aspect-ratio:4/3}
@media (min-width:768px){.compare-big{aspect-ratio:16/9}}

/* logotyp i header */
#site-header [data-logo]{height:42px;width:auto}
@media (max-width:639px){#site-header [data-logo]{height:36px}}

/* ---- Rättning 2026-09-24: klippning på smal mobil ----
   Grid-barn får inte tvinga sin kolumn bredare än behållaren (min-width:auto = längsta ord).
   Långa sammansatta ord (Fastighetsstädning m.fl.) får brytas i stället för att klippas.
   Ändring: ingen automatisk avstavning med bindestreck i rubriker. */
.grid > *{min-width:0}
h1,h2,h3{overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
@media (max-width:419.98px){
  h1.font-display.text-4xl{font-size:clamp(1.75rem,8.6vw,2.25rem)}
  article h2.font-display.text-3xl{font-size:clamp(1.375rem,6.9vw,1.875rem)}
  .tilt-card h3.font-display.text-2xl{font-size:clamp(1.25rem,6.2vw,1.5rem)}
}
@media (max-width:339.98px){
  h2.font-display.text-3xl{font-size:1.5rem}
}

/* ---- Rättning 2026-09-24: bildvisaren som native <dialog> ---- */
dialog.lightbox-layer{margin:0;border:0;width:100%;height:100%;max-width:100%;max-height:100%;color:inherit;overflow:hidden}
dialog.lightbox-layer:not([open]){display:none}
dialog.lightbox-layer::backdrop{background:transparent}