/* Swekompani Drift AB: grund, typografi, animationer och tillgänglighet (samma system som Swekompani-familjen) */
[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)}

/* ---- 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(14,27,48,.9) 0%,rgba(14,27,48,.74) 42%,rgba(14,27,48,.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(14,27,48,.95) 0%,rgba(14,27,48,.9) 50%,rgba(14,27,48,.55) 68%,rgba(14,27,48,.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}}


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

/* ---- 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. */
.grid > *{min-width:0}
h1,h2,h3{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@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)}
}

/* ---- 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}

/* ---- Drift: färgidentitet (blå huvudton och grön accent från logotypen) ---- */
:root{--color-fg:#0e1b30;--color-muted:#56607a;--color-primary:#003f89;--color-primary-fg:#f7f4ee;--color-ring:#003f89;--color-accent:#1f9a3a;--color-accent-light:#5ccf78;--color-danger:#b42318}
.text-accent-light{color:var(--color-accent-light)}
.eyebrow-accent::before,.bleed .eyebrow::before{content:"";display:inline-block;width:1.75rem;height:2px;margin:0 .75rem .22em 0;vertical-align:middle;background:var(--color-accent-light)}
@media (min-width:64rem){.lg-order-2{order:2}}
[id]{scroll-margin-top:5.5rem}

/* ---- Hero-rubrik på smal mobil ---- */
@media (max-width:639.98px){.parallax-hero h1.font-display.text-5xl{font-size:clamp(2.1rem,10vw,3rem)}}

/* ---- Fokusmarkering: tydlig på både ljus och mörk bakgrund ---- */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.bg-fg a:focus-visible,.bg-fg button:focus-visible,.bg-primary a:focus-visible,.bg-primary button:focus-visible,.bleed a:focus-visible,.bleed button:focus-visible,.parallax-hero a:focus-visible,#site-header[data-variant="light"] a:focus-visible,#site-header[data-variant="light"] button:focus-visible{outline-color:var(--color-paper)}
.notice:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}

/* ---- Formulär (inom befintligt designsystem) ---- */
.lbl{display:block;font-size:.875rem;font-weight:600;line-height:1.35;color:var(--color-fg)}
.req{color:var(--color-danger);font-weight:700}
.fld{display:block;width:100%;margin-top:.5rem;min-height:3rem;padding:.7rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;color:var(--color-fg);font:inherit;font-size:1rem;line-height:1.4;transition:border-color .15s ease-out,box-shadow .15s ease-out}
.fld:hover{border-color:#b9b0a1}
.fld:focus-visible,.fld:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0,63,137,.2)}
.fld[aria-invalid="true"]{border-color:var(--color-danger);box-shadow:0 0 0 1px var(--color-danger)}
textarea.fld{min-height:7.5rem;resize:vertical}
select.fld{appearance:none;-webkit-appearance:none;padding-right:2.75rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2356607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.hint{margin-top:.4rem;font-size:.8125rem;line-height:1.45;color:var(--color-muted)}
.err{margin-top:.4rem;font-size:.8125rem;line-height:1.45;font-weight:600;color:var(--color-danger)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.chk{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;line-height:1.5;color:var(--color-fg);cursor:pointer}
.chk input{flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:var(--color-primary);cursor:pointer}
.chk input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
fieldset .chk{min-height:2.75rem;align-items:center;padding:.5rem .875rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff}
fieldset[aria-invalid="true"] .chk{border-color:var(--color-danger)}
.notice{margin-top:1.5rem;padding:1rem 1.25rem;border:1px solid;border-radius:var(--radius-sm);font-size:.9375rem;line-height:1.5}
.notice-err{border-color:var(--color-danger);background:#fdf1f0;color:#7a1a12}
.notice-ok{border-color:var(--color-accent);background:#eef8f0;color:#10421d}
.notice h3{font-family:var(--font-display);font-size:1.125rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.25rem}
.notice ul{margin-top:.5rem;list-style:disc;padding-left:1.25rem}
.notice a{text-decoration:underline;text-underline-offset:2px;font-weight:500}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
button[aria-busy="true"]{opacity:.7;cursor:wait}

/* ---- Minska rörelse: inget får döljas, inga transformer, inga animationer ---- */
@media (prefers-reduced-motion:reduce){
  .group-hover\:scale-105,.group:hover .group-hover\:scale-105{scale:none!important;transform:none!important;transition:none!important}
  .hover\:-translate-y-1:hover,.group:hover .group-hover\:translate-x-0\.5,.group:hover .group-hover\:-translate-y-0\.5{translate:none!important}
  .tilt-card,.tilt-card>a{transform:none!important}
  .fld{transition:none}
}
.pt-6{padding-top:1.5rem}

/* ---- Huvudmeny: sju sidor får plats först från 80rem, därunder mobilmeny ---- */
.desk-nav a{white-space:nowrap}
.desk-nav [data-navhome]{display:none}
@media (min-width:80rem){.desk-nav{display:flex}.mob-only{display:none!important}}

/* ---- Långa knapptexter får bryta rad på mycket smala skärmar ---- */
@media (max-width:399.98px){.btn-wrap{white-space:normal;height:auto;min-height:3rem;padding-top:.625rem;padding-bottom:.625rem;text-align:center}}