/* =====================================================================
   HÖRSELPUNKTEN — Design System
   Palett från horselpunkten.se
   #39BC90 · #11604A · #599081 · #212121 · #666

   REGLER:
   · Inga dekorativa gradienter. Endast hero-veil och why-veil (foto-scrim).
   · Inga skuggor. Separation sker med 1px hårstreck.
   · Ikoner är nakna — ingen ram, ingen platta, ingen rotation.
   · Endast bottom-bar-FAB har fylld cirkel.
   ===================================================================== */

/* ---------------------------------------------------------------
   0. TYPSNITT — självhostade (inga anrop till Google)
   Material Symbols är ett subset med bara ikonerna som används.
   Ny ikon? Lägg till namnet i icon_names och ladda ner filen igen.
   --------------------------------------------------------------- */
@font-face{
  font-family:'Rubik'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url(../assets/fonts/rubik.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Open Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../assets/fonts/opensans.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Material Symbols Rounded'; font-style:normal; font-weight:300 600; font-display:block;
  src:url(../assets/fonts/material-symbols-rounded.woff2) format('woff2');
}

/* ---------------------------------------------------------------
   1. TOKENS + FLYTANDE SKALA (320px  →  4K)
   --------------------------------------------------------------- */
:root{
  /* --- färg --- */
  --green:        #39BC90;
  --green-700:    #23906B;
  --deep:         #11604A;
  --deep-900:     #0C4738;
  --mint:         #EAF8F2;
  --ink:          #1C1C1C;
  --ink-2:        #333A38;
  --body:         #666666;
  --body-2:       #7C8683;
  --line:         #E2E7E5;
  --line-soft:    #EDF1EF;
  --soft:         #F4F6F5;
  --white:        #FFFFFF;

  /* de enda tillåtna gradienterna: foto-scrim för läsbarhet */
  --veil-hero: linear-gradient(100deg, rgba(17,96,74,.96) 0%, rgba(17,96,74,.88) 30%, rgba(41,116,92,.70) 52%, rgba(89,144,129,.42) 74%, rgba(17,96,74,.10) 100%);
  --veil-why:  linear-gradient(105deg, rgba(11,66,52,.97) 0%, rgba(17,96,74,.94) 42%, rgba(89,144,129,.82) 74%, rgba(17,96,74,.60) 100%);

  /* --- flytande förstärkning för stora skärmar --- */
  --gain: 1;

  /* --- typografi --- */
  --fs-3xs: calc(clamp(.625rem, .597rem + .124vw, .72rem)   * var(--gain));
  --fs-2xs: calc(clamp(.6875rem, .652rem + .156vw, .8rem)   * var(--gain));
  --fs-xs:  calc(clamp(.75rem,  .707rem + .19vw,  .895rem)  * var(--gain));
  --fs-sm:  calc(clamp(.8125rem,.764rem + .214vw, .975rem)  * var(--gain));
  --fs-md:  calc(clamp(.9375rem,.888rem + .219vw, 1.105rem) * var(--gain));
  --fs-lg:  calc(clamp(1.02rem, .952rem + .3vw,   1.25rem)  * var(--gain));
  --fs-xl:  calc(clamp(1.12rem, 1.02rem + .44vw,  1.46rem)  * var(--gain));
  --fs-h3:  calc(clamp(1.18rem, 1.05rem + .56vw,  1.62rem)  * var(--gain));
  --fs-h2:  calc(clamp(1.82rem, 1.42rem + 1.78vw, 3.2rem)   * var(--gain));
  --fs-h1:  calc(clamp(2.35rem, 1.62rem + 3.24vw, 4.9rem)   * var(--gain));
  --fs-num: calc(clamp(2.2rem,  1.63rem + 2.53vw, 4.1rem)   * var(--gain));

  /* --- ikoner (nakna, därför något större) --- */
  --ic-xs: calc(clamp(.9rem,  .86rem + .16vw, 1.05rem)   * var(--gain));
  --ic-sm: calc(clamp(1.05rem,.99rem + .26vw, 1.26rem)   * var(--gain));
  --ic-md: calc(clamp(1.3rem, 1.19rem + .46vw, 1.68rem)  * var(--gain));
  --ic-lg: calc(clamp(1.75rem,1.55rem + .85vw, 2.45rem)  * var(--gain));
  --ic-xl: calc(clamp(2.2rem, 1.9rem + 1.3vw, 3.3rem)    * var(--gain));

  /* --- rum --- */
  --gutter:  calc(clamp(1.15rem, .72rem + 1.9vw, 3.4rem)   * var(--gain));
  --sec-y:   calc(clamp(3.8rem,  2.2rem + 7vw,   9.2rem)   * var(--gain));
  --gap:     calc(clamp(1rem,   .68rem + 1.4vw, 2.2rem)    * var(--gain));
  --gap-lg:  calc(clamp(1.8rem, 1.15rem + 2.7vw, 4rem)     * var(--gain));
  --card-p:  calc(clamp(1.35rem, 1.02rem + 1.45vw, 2.4rem) * var(--gain));

  /* --- radier (återhållsamma) --- */
  --r-sm: calc(6px  * var(--gain));
  --r-md: calc(10px * var(--gain));
  --r-lg: calc(14px * var(--gain));
  --r-pill: 999px;

  /* --- layout --- */
  --shell: calc(1460px * var(--gain));
  --header-h: calc(clamp(56px, 1.5vw + 46px, 74px) * var(--gain));
  --topbar-h: calc(clamp(32px, .45vw + 28px, 38px) * var(--gain));
  --bbar-h: calc(clamp(60px, 2.4vw + 52px, 74px));

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

@media (min-width:1800px){ :root{ --gain:1.06 } }
@media (min-width:2100px){ :root{ --gain:1.13 } }
@media (min-width:2560px){ :root{ --gain:1.24 } }
@media (min-width:3200px){ :root{ --gain:1.36 } }
@media (min-width:3800px){ :root{ --gain:1.48 } }

/* ---------------------------------------------------------------
   2. RESET / BAS
   --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 14px);
  overflow-x:hidden;
  overflow-x:clip;
}

body{
  font-family:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size:var(--fs-md);
  line-height:1.8;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden }
[hidden]{ display:none !important }

img,svg,iframe{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--green); color:#fff }

h1,h2,h3,h4,h5{
  font-family:'Rubik', 'Open Sans', sans-serif;
  color:var(--ink);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.035em;
}
h3,h4{ line-height:1.25; letter-spacing:-.015em }
p{ margin:0 }
p + p{ margin-top:.95em }
strong,b{ font-weight:700; color:inherit }

::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:var(--soft) }
::-webkit-scrollbar-thumb{ background:#cfdad6; border:3px solid var(--soft) }
::-webkit-scrollbar-thumb:hover{ background:var(--green) }

/* ---------------------------------------------------------------
   3. MATERIAL SYMBOLS
   --------------------------------------------------------------- */
.ms{
  font-family:'Material Symbols Rounded';
  font-weight:normal; font-style:normal;
  font-size:var(--ic-sm);
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  vertical-align:middle;
  user-select:none;
}


/* ---------------------------------------------------------------
   3b. BILDLADDNING — LQIP + mjuk intoning
   Liten suddig platshållare visas direkt, skarp bild tonas in.
   --------------------------------------------------------------- */
.ph{ background-size:cover; background-position:center; background-repeat:no-repeat; background-color:var(--mint) }
.ph-about{ background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAXABYDASIAAhEBAxEB/8QAGQABAQEAAwAAAAAAAAAAAAAAAAUBAgME/8QAHRAAAgMBAQADAAAAAAAAAAAAAQIAAxEhBAUSMf/EABcBAQEBAQAAAAAAAAAAAAAAAAIBAAP/xAAYEQEBAAMAAAAAAAAAAAAAAAABAAISMv/aAAwDAQACEQMRAD8AqD5FgO/kw+w2DVM8jeS5lycqKmpBVh2c1Z4hUafX9lzeiJHa167GwHIh3ZaFYqLAFmnVZjNsRJjzZ6tFNbjo7EREFG//2Q==") }
.ph-svc1{  background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAcABYDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAUCAwQG/8QAHxAAAgIDAAMBAQAAAAAAAAAAAQIAEQMEEhMhMQUj/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwIE/8QAGBEBAAMBAAAAAAAAAAAAAAAAAAECEhH/2gAMAwEAAhEDEQA/ANVsqhj9jXR3k8Q7ajEezscIbmbHmLpYNQazw9q9douVWFg+oRL+fu/xpj8hE1AsyU5cDZVqV4ddsZ5IjXEo5uT8ak2RM8m6XL0hoQl+YU/qEXKNv//Z") }
.ph-svc2{  background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAWABYDASIAAhEBAxEB/8QAGQABAQEAAwAAAAAAAAAAAAAAAAYDBAUH/8QAIBAAAQQCAgMBAAAAAAAAAAAAAgABAwQFERIxBhQhUf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwChzmR9Cu5N2pSv5RYey3LfF3VJ5DEEtdxNR8NUBsi3H5tB6HRsezXGT9ZFnjBEagsPWkQaWqgWB0bLhjhYGLemREHYwxNEDCPSIiD/2Q==") }
.ph-svc3{  background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAcABYDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAwAEAgX/xAAfEAACAgICAwEAAAAAAAAAAAABAgADETESIQQTQSL/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oADAMBAAIRAxEAPwD23sXliKjADswAocZx3JqifuJSHa9E2ZTK/jezH61KEOjKNzolW+xGqUjUzXrwUlYB3OazhZQPGc2s3PvEoH//2Q==") }
.ph-why{   background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAMABYDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDBAb/xAAaEAEAAwEBAQAAAAAAAAAAAAABAAIDESEE/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgP/xAAYEQADAQEAAAAAAAAAAAAAAAAAARECIf/aAAwDAQACEQMRAD8A7EeEjpp0eMb6HmbyYMbttEWFucHnNVLFaqrCLfy3kJMqf//Z") }
.ph-hero{  background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAMABYDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFAv/EABwQAAIDAAMBAAAAAAAAAAAAAAABAgMRBBIhMf/EABQBAQAAAAAAAAAAAAAAAAAAAAP/xAAYEQADAQEAAAAAAAAAAAAAAAAAAQIRUf/aAAwDAQACEQMRAD8Ap2cmVb0do5HendJs0n9N0ycXifgCoZyOu+OgCrj1TwBNYbc8P//Z") }

.img-fade{ opacity:0; transition:opacity .7s var(--ease) }
.img-fade.is-loaded{ opacity:1 }

/* ---------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ position:relative; padding-block:var(--sec-y) }

/* filmkorn — ENDAST i hero */
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   5. TYPOGRAFISKA BYGGSTENAR
   --------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:'Rubik', sans-serif;
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green-700);
  line-height:1;
}
.eyebrow .ms{ font-size:var(--ic-sm); font-variation-settings:'FILL' 0,'wght' 400 }
.eyebrow-dash{
  display:inline-block; width:calc(28px * var(--gain)); height:1px;
  background:var(--green);
}
.eyebrow-light{ color:#A9E8CD }
.eyebrow-light .eyebrow-dash{ background:#A9E8CD }

.sec-head{ max-width:56ch; margin-bottom:var(--gap-lg) }
.sec-split{
  max-width:none;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:var(--gap-lg); align-items:end;
}
.sec-split .sec-title{ max-width:17ch }
.sec-split-aside{ padding-bottom:.5em; display:flex; flex-direction:column; align-items:flex-start; gap:calc(1.4rem * var(--gain)) }
.sec-split-aside p{
  padding-left:var(--gap); border-left:1px solid var(--line);
  font-size:var(--fs-md); line-height:1.9; max-width:46ch;
}
.sec-title{ font-size:var(--fs-h2); margin-top:.65em }
.sec-desc{ margin-top:1.15em; font-size:var(--fs-lg); line-height:1.76 }
.sec-head-light .sec-title{ color:#fff }
.sec-head-light .sec-desc{ color:rgba(255,255,255,.82) }

.lead{ font-size:var(--fs-lg); line-height:1.76; color:var(--ink-2) }

.stars{ display:inline-flex; gap:.12em; color:#E8A317 }
.stars .ms{ font-size:var(--ic-sm); font-variation-settings:'FILL' 1,'wght' 400 }

/* ---------------------------------------------------------------
   6. KNAPPAR — platta, utan skugga och gradient
   --------------------------------------------------------------- */
.btn{
  --btn-py: calc(clamp(.78rem,.6rem + .68vw,1.12rem) * var(--gain));
  --btn-px: calc(clamp(1.3rem,.95rem + 1.35vw,2.15rem) * var(--gain));
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:var(--btn-py) var(--btn-px);
  font-family:'Rubik', sans-serif;
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1;
  border-radius:var(--r-pill);
  white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn .ms{ font-size:var(--ic-sm); font-variation-settings:'FILL' 0,'wght' 400 }

.btn-primary{ background:var(--green); color:#fff }
.btn-primary:hover{ background:var(--green-700) }

.btn-ghost{ color:#fff; border-color:rgba(255,255,255,.45); background:transparent }
.btn-ghost:hover{ background:#fff; color:var(--deep); border-color:#fff }

.btn-light{ background:#fff; color:var(--deep) }
.btn-light:hover{ background:var(--mint) }

.btn-text{
  padding:0 0 .35em; background:none; color:var(--deep);
  text-transform:none; letter-spacing:0;
  font-size:var(--fs-md); font-weight:600;
  border:0; border-bottom:1px solid var(--line); border-radius:0;
}
.btn-text .ms{ color:var(--green) }
.btn-text:hover{ border-bottom-color:var(--deep) }

.btn-lg{ --btn-py: calc(clamp(.95rem,.72rem + .88vw,1.35rem) * var(--gain)); --btn-px: calc(clamp(1.55rem,1.1rem + 1.75vw,2.6rem) * var(--gain)); font-size:var(--fs-md) }
.btn-sm{ --btn-py:.72rem; --btn-px:1.35rem; font-size:var(--fs-xs) }
.btn-block{ display:flex; width:100% }

/* ---------------------------------------------------------------
   7. PRELOADER
   --------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
  background:var(--white);
  transition:opacity .55s var(--ease), visibility .55s;
}
.preloader.is-done{ opacity:0; visibility:hidden }
.pre-inner{ display:flex; flex-direction:column; align-items:center; gap:1.4rem }
.pre-logo{ width:clamp(170px,26vw,280px) }
.pre-eq{ display:flex; align-items:flex-end; gap:5px; height:24px }
.pre-eq i{ width:3px; background:var(--green); animation:preEq 1.05s ease-in-out infinite }
.pre-eq i:nth-child(1){ animation-delay:0s }
.pre-eq i:nth-child(2){ animation-delay:.1s }
.pre-eq i:nth-child(3){ animation-delay:.2s }
.pre-eq i:nth-child(4){ animation-delay:.3s; background:var(--deep) }
.pre-eq i:nth-child(5){ animation-delay:.4s }
.pre-eq i:nth-child(6){ animation-delay:.5s }
.pre-eq i:nth-child(7){ animation-delay:.6s }
@keyframes preEq{ 0%,100%{ height:6px; opacity:.45 } 50%{ height:24px; opacity:1 } }
.pre-bar{ width:min(200px,42vw); height:2px; background:var(--line); overflow:hidden }
.pre-bar span{ display:block; height:100%; width:0; background:var(--green); transition:width .3s var(--ease) }

/* ---------------------------------------------------------------
   9. TOPBAR
   --------------------------------------------------------------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:1001;
  height:var(--topbar-h);
  background:var(--deep);
  color:rgba(255,255,255,.78);
  font-size:var(--fs-2xs);
  transition:transform .45s var(--ease-out), opacity .35s var(--ease);
}
.topbar.is-hidden{ transform:translateY(-100%); opacity:0 }
.topbar-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.topbar-facts{ display:flex; align-items:center; gap:1rem; min-width:0 }
.topbar-facts li{ display:flex; align-items:center; gap:.5em; white-space:nowrap }
.topbar-facts .ms{ font-size:var(--ic-xs); color:var(--green) }
.topbar-facts .sep{ width:1px; height:12px; background:rgba(255,255,255,.2) }
.topbar-right{ display:flex; align-items:center; gap:1.2rem }
.topbar-badge{
  display:inline-flex; align-items:center; gap:.45em;
  color:#A9E8CD; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.topbar-badge .ms{ font-size:var(--ic-xs) }
.topbar-call{ display:inline-flex; align-items:center; gap:.45em; font-weight:700; color:#fff; transition:color .28s }
.topbar-call .ms{ font-size:var(--ic-xs); color:var(--green) }
.topbar-call:hover{ color:var(--green) }

/* ---------------------------------------------------------------
   10. HEADER — ingen skugga, hårstreck vid scroll
   --------------------------------------------------------------- */
.site-header{
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:1000;
  height:var(--header-h);
  transition:top .45s var(--ease-out), height .4s var(--ease);
}
.site-header::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:#fff;
  border-bottom:1px solid var(--line);
  opacity:0; transition:opacity .35s var(--ease);
}
.site-header.is-stuck{ top:0 }
.site-header.is-stuck::after{ opacity:1 }

.header-inner{ height:100%; display:flex; align-items:center; gap:var(--gap) }

.brand{ position:relative; flex-shrink:0; display:block; line-height:0 }
.brand-img{
  width:calc(clamp(116px, 7.4vw, 158px) * var(--gain));
  transition:opacity .35s var(--ease);
}
.brand-light{ position:absolute; inset:0 auto auto 0 }
.site-header.is-stuck .brand-light{ opacity:0 }
.site-header:not(.is-stuck) .brand-dark{ opacity:0 }

/* --- nav --- */
.nav{ margin-left:auto }
.nav-list{ display:flex; align-items:center; gap:calc(clamp(.3rem,.7vw,1rem) * var(--gain)) }
.nav-item{ position:relative }
.nav-link{
  position:relative;
  display:inline-flex; align-items:center; gap:.3em;
  padding:.62em calc(clamp(.8rem,1vw,1.2rem) * var(--gain));
  font-family:'Rubik', sans-serif;
  font-size:var(--fs-xs);
  font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  border:1px solid transparent; border-radius:var(--r-pill);
  transition:color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-stuck .nav-link{ color:var(--ink) }

/* hover + aktiv sida: ljus platta med grön kant — läsbar både över hero och på vit header */
.nav-link:hover,
.has-mega:hover > .nav-link,
.nav-link.is-current,
.site-header.is-stuck .nav-link:hover,
.site-header.is-stuck .has-mega:hover > .nav-link,
.site-header.is-stuck .nav-link.is-current{
  color:var(--green-700);
  background:var(--mint);
  border-color:var(--green);
}
.nav-caret{ font-size:var(--ic-xs); transition:transform .35s var(--ease) }
.has-mega:hover .nav-caret{ transform:rotate(180deg) }

/* --- mega --- */
.mega{
  position:absolute; top:calc(100% + 10px); left:50%; z-index:50;
  width:calc(clamp(520px, 44vw, 760px) * var(--gain));
  transform:translate(-50%,10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .4s var(--ease-out), visibility .3s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto }
.mega::before{ content:''; position:absolute; top:-12px; left:0; right:0; height:14px }
.mega-inner{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:calc(1.2rem * var(--gain));
  padding:calc(1.2rem * var(--gain));
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md);
}
.mega-label{
  display:block; padding:.3rem .6rem .8rem;
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--body-2);
}
.mega-link{
  display:flex; align-items:center; gap:.9em;
  padding:calc(.75rem * var(--gain)) calc(.6rem * var(--gain));
  border-top:1px solid var(--line-soft);
  transition:color .3s var(--ease);
}
.mega-link:last-child{ border-bottom:1px solid var(--line-soft) }
.mega-ico{ font-size:var(--ic-md); color:var(--deep); flex-shrink:0; transition:color .3s var(--ease) }
.mega-link:hover .mega-ico{ color:var(--green) }
.mega-txt{ display:flex; flex-direction:column; line-height:1.35; min-width:0 }
.mega-txt strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600; color:var(--ink) }
.mega-txt em{ font-style:normal; font-size:var(--fs-3xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--body-2) }
.mega-go{ margin-left:auto; font-size:var(--ic-sm); color:var(--green); opacity:0; transition:opacity .3s var(--ease) }
.mega-link:hover .mega-go{ opacity:1 }

.mega-visual{ position:relative; border-radius:var(--r-sm); overflow:hidden; min-height:calc(210px * var(--gain)) }
.mega-shot{ position:absolute; inset:0; opacity:0; transition:opacity .45s var(--ease) }
.mega-shot.is-on{ opacity:1 }
.mega-shot img{ width:100%; height:100%; object-fit:cover }
.mega-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:flex-start; gap:.6em;
  padding:calc(1.8rem * var(--gain)) calc(1rem * var(--gain)) calc(.9rem * var(--gain));
  /* funktionell scrim för läsbarhet över foto */
  background:linear-gradient(transparent,rgba(12,71,56,.94));
  color:#fff; font-size:var(--fs-2xs); line-height:1.5;
}
.mega-caption .ms{ font-size:var(--ic-sm); color:var(--green); flex-shrink:0; margin-top:1px }

.header-actions{ display:flex; align-items:center; gap:.7rem; flex-shrink:0 }

/* ---------------------------------------------------------------
   11. HERO — enda stället med veil och orbs
   --------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(600px, 100svh, calc(1080px * var(--gain)));
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + var(--topbar-h) + var(--gap-lg));
  padding-bottom:calc(var(--gap-lg) * 1.6);
  overflow:hidden;
  background:var(--deep-900);
}
.hero-media{ position:absolute; inset:-6% 0 -6%; z-index:-2 }
.hero-img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; will-change:transform }
.hero-veil{ position:absolute; inset:0; background:var(--veil-hero) }

.hero-orbs{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.orb{ position:absolute; border-radius:50%; filter:blur(calc(48px * var(--gain))) }
.orb-1{ width:30vw; height:30vw; top:-6%; left:6%; background:rgba(57,188,144,.26); animation:drift 18s ease-in-out infinite }
.orb-2{ width:22vw; height:22vw; bottom:4%; left:32%; background:rgba(143,226,196,.15); animation:drift 23s ease-in-out infinite reverse }
.orb-3{ width:26vw; height:26vw; top:22%; right:-4%; background:rgba(17,96,74,.30); animation:drift 21s ease-in-out infinite }
@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  33%{ transform:translate3d(3%,-5%,0) scale(1.06) }
  66%{ transform:translate3d(-4%,4%,0) scale(.95) }
}

.hero-shell{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--gap-lg); align-items:center;
}
.hero-copy{ max-width:min(100%, 70ch) }
.hero-title{
  font-size:var(--fs-h1);
  color:#fff;
  margin-top:.55em;
  letter-spacing:-.045em;
}
.hero-title em{ font-style:normal; color:#8FE2C4 }

.hero-sub{
  margin-top:calc(1.6rem * var(--gain)); max-width:58ch;
  font-size:var(--fs-lg); line-height:1.75;
  color:rgba(255,255,255,.88);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:calc(.85rem * var(--gain)); margin-top:calc(2.1rem * var(--gain)) }

.hero-proof{
  display:flex; align-items:center; flex-wrap:wrap; gap:calc(1.2rem * var(--gain));
  margin-top:calc(2.3rem * var(--gain));
  padding-top:calc(1.6rem * var(--gain));
  border-top:1px solid rgba(255,255,255,.18);
}
.proof-rating,.proof-region{ display:flex; align-items:center; gap:.6em }
.proof-region .ms{ font-size:var(--ic-md); color:var(--green) }
.proof-text{ font-size:var(--fs-sm); color:rgba(255,255,255,.78); line-height:1.4 }
.proof-text strong{ color:#fff; font-weight:700 }
.proof-div{ width:1px; height:26px; background:rgba(255,255,255,.2) }

/* hero-panel */
.hero-panel{ position:relative; align-self:center; padding-block:calc(2.2rem * var(--gain)) }
.hp-card{
  position:relative;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px);
  border-radius:var(--r-lg);
}
.hp-main{ padding:var(--card-p) }
.hp-head{ display:flex; align-items:center; gap:.8em; margin-bottom:calc(1.4rem * var(--gain)) }
.hp-ico{ font-size:var(--ic-lg); color:#8FE2C4; flex-shrink:0 }
.hp-head div{ display:flex; flex-direction:column; line-height:1.3 }
.hp-head strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600; color:#fff }
.hp-head em{ font-style:normal; font-size:var(--fs-3xs); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6) }

.hp-eq{ display:flex; align-items:flex-end; gap:calc(clamp(4px,.5vw,9px) * var(--gain)); height:calc(clamp(74px,7vw,120px) * var(--gain)) }
.hp-eq i{
  flex:1; height:34%; border-radius:2px 2px 0 0;
  background:#8FE2C4; opacity:.72;
  transform-origin:bottom; transform:scaleY(.15);
}
.hp-eq i:nth-child(even){ opacity:.5 }
/* staplarnas höjd — i CSS, inte inline, så att CSP kan förbjuda inline-stil */
.hp-eq i:nth-child(2){ height:52% } .hp-eq i:nth-child(3){ height:44% } .hp-eq i:nth-child(4){ height:68% }
.hp-eq i:nth-child(5){ height:58% } .hp-eq i:nth-child(6){ height:82% } .hp-eq i:nth-child(7){ height:70% }
.hp-eq i:nth-child(8){ height:95% } .hp-eq i:nth-child(9){ height:78% } .hp-eq i:nth-child(10){ height:60% }
.hp-eq i:nth-child(11){ height:72% } .hp-eq i:nth-child(12){ height:48% }
.is-in .hp-eq i{ animation:eqIn .8s var(--ease-out) forwards, eqIdle 2.8s ease-in-out infinite }
.hp-eq i:nth-child(1){ animation-delay:.05s,1.0s } .hp-eq i:nth-child(2){ animation-delay:.11s,1.1s }
.hp-eq i:nth-child(3){ animation-delay:.17s,1.2s } .hp-eq i:nth-child(4){ animation-delay:.23s,1.3s }
.hp-eq i:nth-child(5){ animation-delay:.29s,1.4s } .hp-eq i:nth-child(6){ animation-delay:.35s,1.5s }
.hp-eq i:nth-child(7){ animation-delay:.41s,1.6s } .hp-eq i:nth-child(8){ animation-delay:.47s,1.7s }
.hp-eq i:nth-child(9){ animation-delay:.53s,1.8s } .hp-eq i:nth-child(10){ animation-delay:.59s,1.9s }
.hp-eq i:nth-child(11){ animation-delay:.65s,2.0s } .hp-eq i:nth-child(12){ animation-delay:.71s,2.1s }
@keyframes eqIn{ to{ transform:scaleY(1) } }
@keyframes eqIdle{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.8) } }

.hp-scale{
  display:flex; justify-content:space-between; margin-top:.9rem;
  padding-top:.8rem; border-top:1px solid rgba(255,255,255,.18);
  font-size:var(--fs-3xs); letter-spacing:.08em; color:rgba(255,255,255,.55);
}

.hp-pill{
  display:flex; align-items:center; gap:.8em;
  padding:calc(.85rem * var(--gain)) calc(1.2rem * var(--gain));
  background:#fff;
  border-color:#fff;
  backdrop-filter:none;
}
.hp-pill > .ms{ font-size:var(--ic-md); color:var(--green); flex-shrink:0 }
.hp-pill div{ display:flex; flex-direction:column; line-height:1.15 }
.hp-pill strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-xl); font-weight:700; color:var(--deep) }
.hp-pill em{ font-style:normal; font-size:var(--fs-3xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--body-2) }
.hp-pill-a{ position:absolute; left:calc(-2.2rem * var(--gain)); bottom:calc(-.6rem * var(--gain)); animation:float 7s ease-in-out infinite }
.hp-pill-b{ position:absolute; right:calc(-1.4rem * var(--gain)); top:calc(-.4rem * var(--gain)); animation:float 8.5s ease-in-out infinite reverse }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }

.hero-scroll{
  position:absolute; left:50%; bottom:calc(1.6rem * var(--gain)); z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  color:rgba(255,255,255,.7);
}
.hs-line{ width:1px; height:clamp(26px,3vw,46px); background:rgba(255,255,255,.4) }
.hero-scroll .ms{ font-size:var(--ic-md); animation:bob 2s ease-in-out infinite }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.7 } 50%{ transform:translateY(5px); opacity:1 } }

/* ---------------------------------------------------------------
   12. TRUST BAR — statisk, hårstrecksdelad
   --------------------------------------------------------------- */
.trustbar{ background:var(--deep); color:#fff }
.tb-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:calc(clamp(1.6rem,1.1rem + 2vw,2.9rem) * var(--gain));
}
.tb-item{
  display:flex; flex-direction:column; gap:.35em;
  padding-inline:var(--gap);
}
.tb-item:first-child{ padding-left:0 }
.tb-item:last-child{ padding-right:0 }
.tb-item + .tb-item{ border-left:1px solid rgba(255,255,255,.18) }
.tb-ico{ font-size:var(--ic-lg); color:var(--green); margin-bottom:.25em }
.tb-stars{ display:flex; gap:.1em; color:#FBBC04; margin-bottom:.3em; height:var(--ic-lg); align-items:center }
.tb-stars .ms{ font-size:var(--ic-sm); font-variation-settings:'FILL' 1,'wght' 400 }
.tb-item strong{
  font-family:'Rubik',sans-serif; font-size:var(--fs-lg); font-weight:600;
  letter-spacing:-.02em; color:#fff; line-height:1.25;
}
.tb-item > span:not(.tb-ico):not(.tb-stars){
  font-size:var(--fs-xs); line-height:1.5; color:rgba(255,255,255,.62);
}

/* ---------------------------------------------------------------
   13. SERVICES — fyllda kort, invertering vid hover
   --------------------------------------------------------------- */
.services{ background:#fff }
.svc-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}
.svc{
  display:flex; flex-direction:column;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:background-color .5s var(--ease), border-color .5s var(--ease);
}
.svc:hover{ background:var(--deep); border-color:var(--deep) }

.svc-media{ overflow:hidden }
.svc-media img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.svc:hover .svc-media img{ transform:scale(1.05) }

.svc-body{ display:flex; flex-direction:column; flex:1; padding:var(--card-p) }

.svc-meta{ display:flex; align-items:center; gap:.7em }
.svc-ico{ font-size:var(--ic-lg); color:var(--deep); transition:color .5s var(--ease) }
.svc:hover .svc-ico{ color:var(--green) }
.svc-tag{
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--green-700);
  transition:color .5s var(--ease);
}
.svc:hover .svc-tag{ color:var(--green) }
.svc-num{
  margin-left:auto;
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600;
  letter-spacing:.14em; color:#B6C1BD;
  transition:color .5s var(--ease);
}
.svc:hover .svc-num{ color:rgba(255,255,255,.4) }

.svc-body h3{ font-size:var(--fs-h3); margin-top:.75em; transition:color .5s var(--ease) }
.svc:hover .svc-body h3{ color:#fff }
.svc-body p{ margin-top:.8em; font-size:var(--fs-sm); line-height:1.8; transition:color .5s var(--ease) }
.svc:hover .svc-body p{ color:rgba(255,255,255,.8) }

.svc-points{
  display:flex; flex-wrap:wrap; gap:.45em 1.1em;
  margin-top:calc(1.2rem * var(--gain));
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--body-2);
  transition:color .5s var(--ease);
}
.svc-points span{ display:inline-flex; align-items:center; gap:.55em }
.svc-points span::before{
  content:''; width:4px; height:4px; border-radius:50%;
  background:var(--green); flex-shrink:0;
}
.svc:hover .svc-points{ color:rgba(255,255,255,.62) }

.svc-link{
  display:flex; align-items:center; justify-content:space-between; gap:.5em;
  margin-top:auto;
  padding-top:calc(1.4rem * var(--gain));
  border-top:1px solid var(--line);
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600;
  color:var(--deep);
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.svc-link .ms{ font-size:var(--ic-md); color:var(--green); transition:transform .45s var(--ease-out) }
.svc:hover .svc-link{ color:#fff; border-top-color:rgba(255,255,255,.22) }
.svc:hover .svc-link .ms{ transform:translateX(5px) }

/* ---------------------------------------------------------------
   14. ABOUT
   --------------------------------------------------------------- */
.about{ background:var(--soft) }
.about-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:calc(var(--gap-lg) * 1.35); align-items:center;
}
.about-visual{ position:relative }
.av-frame{ overflow:hidden; border-radius:var(--r-md) }
.av-frame img{ width:100%; aspect-ratio:698/735; object-fit:cover }

.av-badge{
  position:absolute; right:calc(-1rem * var(--gain)); bottom:calc(2rem * var(--gain)); z-index:3;
  display:flex; align-items:center; gap:.8em;
  padding:calc(.95rem * var(--gain)) calc(1.3rem * var(--gain));
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.av-badge .ms{ font-size:var(--ic-md); color:var(--green) }
.av-badge div{ display:flex; flex-direction:column; line-height:1.2 }
.av-badge strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-xl); font-weight:700; color:var(--deep) }
.av-badge em{ font-style:normal; font-size:var(--fs-3xs); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--body-2) }

.av-chip{
  position:absolute; left:calc(-1rem * var(--gain)); top:calc(1.8rem * var(--gain)); z-index:3;
  display:inline-flex; align-items:center; gap:.55em;
  padding:calc(.65rem * var(--gain)) calc(1.1rem * var(--gain));
  background:var(--deep); color:#fff; border-radius:var(--r-sm);
  font-family:'Rubik',sans-serif; font-size:var(--fs-2xs); font-weight:500; letter-spacing:.05em;
}
.av-chip .ms{ font-size:var(--ic-sm); color:var(--green) }

.about-copy .sec-title{ margin-bottom:.75em }
.checks{ margin-top:calc(2rem * var(--gain)); border-top:1px solid var(--line) }
.checks li{
  display:flex; align-items:flex-start; gap:.8em;
  padding:calc(.95rem * var(--gain)) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2); font-weight:500;
}
.checks .ms{ font-size:var(--ic-md); color:var(--green); flex-shrink:0 }
.about-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(1.6rem * var(--gain)); margin-top:calc(2.2rem * var(--gain)) }

/* ---------------------------------------------------------------
   15. WHY / STATS
   --------------------------------------------------------------- */
.why{ position:relative; isolation:isolate; overflow:hidden; color:#fff }
.why-media{ position:absolute; inset:-8% 0; z-index:-1 }
.why-media img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; will-change:transform }
.why-veil{ position:absolute; inset:0; background:var(--veil-why) }
.why-inner{ position:relative; z-index:1 }
.why .sec-head{ max-width:66ch }

.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:calc(var(--gap-lg) * 1.1);
  border-top:1px solid rgba(255,255,255,.2);
}
.stat{ padding:calc(var(--gap-lg) * .75) var(--gap) 0 }
.stat:first-child{ padding-left:0 }
.stat:last-child{ padding-right:0 }
.stat + .stat{ border-left:1px solid rgba(255,255,255,.2) }
.stat-ico{ font-size:var(--ic-lg); color:#8FE2C4; display:block; margin-bottom:calc(1.1rem * var(--gain)) }
.stat-num{
  display:block;
  font-family:'Rubik',sans-serif; font-size:var(--fs-num); font-weight:700;
  line-height:1; letter-spacing:-.05em; color:#fff;
}
.stat p{
  margin-top:.75em;
  font-family:'Rubik',sans-serif; font-size:var(--fs-2xs); font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.7); line-height:1.55;
}

/* ---------------------------------------------------------------
   16. STEPS — stora siffror, redaktionell rytm
   --------------------------------------------------------------- */
.steps{ background:#fff; padding-bottom:calc(var(--sec-y) * .55) }
.steps .sec-head{ margin-inline:auto; text-align:center; max-width:calc(680px * var(--gain)) }
.steps .eyebrow{ justify-content:center }
.steps .sec-desc{ font-size:var(--fs-lg) }

.steps-wrap{
  position:relative;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-lg);
  padding-top:calc(2.4rem * var(--gain));
}
.steps-rail{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--line) }
.steps-rail i{ display:block; height:100%; width:0; background:var(--green); transition:width 1.6s var(--ease-out) }

.step{ position:relative }
.step-node{
  position:absolute; top:calc(-2.4rem * var(--gain) - 3px); left:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--line);
  transition:background-color .5s var(--ease);
}
.step.is-in .step-node{ background:var(--green) }

.step-top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:calc(1.3rem * var(--gain));
  margin-bottom:calc(1.5rem * var(--gain));
  border-bottom:1px solid var(--line);
}
.step-index{
  font-family:'Rubik',sans-serif; font-size:calc(var(--fs-num) * .88); font-weight:700;
  line-height:1; letter-spacing:-.055em; color:#DCE4E1;
  transition:color .45s var(--ease);
}
.step:hover .step-index{ color:var(--green) }
.step-ico{ font-size:var(--ic-xl); color:var(--deep); transition:color .45s var(--ease) }
.step:hover .step-ico{ color:var(--green) }
.step-tag{
  display:block;
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--green-700);
}
.step h3{ font-size:var(--fs-h3); margin-top:.55em }
.step p{ margin-top:.85em; font-size:var(--fs-sm); line-height:1.85 }

/* ---------------------------------------------------------------
   17. CTA — copy + produktbild
   --------------------------------------------------------------- */
.cta{ padding:0 0 var(--sec-y); background:#fff }
.cta-box{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--gap-lg); align-items:center;
  padding:calc(var(--card-p) * 1.5) calc(var(--card-p) * 1.35);
  border-radius:var(--r-lg);
  background:var(--deep);
  color:#fff;
}
.cta-copy{ max-width:42ch }
.cta-copy .sec-title{ color:#fff; margin-top:.6em }
.cta-sub{
  margin-top:1.1em; font-size:var(--fs-md); line-height:1.8;
  color:rgba(255,255,255,.78); max-width:44ch;
}
.cta-actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:calc(1.5rem * var(--gain)); margin-top:calc(2rem * var(--gain));
}
.cta-call{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600;
  color:rgba(255,255,255,.88); transition:color .3s var(--ease);
}
.cta-call .ms{ font-size:var(--ic-md); color:var(--green) }
.cta-call:hover{ color:#fff }

.cta-facts{
  display:flex; flex-wrap:wrap; gap:.7em 1.8em;
  margin-top:calc(2.1rem * var(--gain));
  padding-top:calc(1.5rem * var(--gain));
  border-top:1px solid rgba(255,255,255,.18);
}
.cta-facts li{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--fs-xs); color:rgba(255,255,255,.7);
}
.cta-facts .ms{ font-size:var(--ic-sm); color:var(--green) }

.cta-visual{
  align-self:stretch;
  display:grid; place-items:center;
  background:var(--mint);
  border-radius:var(--r-md);
  padding:calc(var(--card-p) * .8);
  min-height:calc(230px * var(--gain));
  overflow:hidden;
}
.cta-visual img{
  width:124%; max-width:none;
  /* vit bakgrund försvinner mot mint — inget urklipp behövs */
  mix-blend-mode:multiply;
}

/* ---------------------------------------------------------------
   18. REFERENSER — Google-omdömen
   --------------------------------------------------------------- */
.testi{ background:var(--soft); overflow:hidden }
.testi-head{ align-items:center }

.g-summary{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center; gap:calc(1.1rem * var(--gain));
  padding:calc(1.15rem * var(--gain)) calc(1.35rem * var(--gain));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
}
.g-mark{ display:block; width:calc(clamp(30px,2.6vw,40px) * var(--gain)) }
.g-mark svg{ width:100%; height:auto }
.g-summary-txt{ display:flex; flex-direction:column; gap:.15em; min-width:0 }
.g-biz{ font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600; color:var(--ink) }
.g-rate{ display:flex; align-items:center; gap:.45em }
.g-rate b{ font-family:'Rubik',sans-serif; font-size:var(--fs-lg); font-weight:700; color:var(--ink); line-height:1 }
.g-stars{ display:inline-flex; gap:.05em; color:#FBBC04 }
.g-stars .ms{ font-size:var(--ic-sm); font-variation-settings:'FILL' 1,'wght' 400 }
.g-src{ font-size:var(--fs-2xs); color:var(--body-2) }
.g-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:.75rem }
.btn-google{
  display:inline-flex; align-items:center; gap:.6em; white-space:nowrap;
  padding:calc(.7rem * var(--gain)) calc(1.15rem * var(--gain));
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:#fff;
  font-family:'Rubik',sans-serif; font-size:var(--fs-xs); font-weight:600;
  color:#3C4043;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.btn-google svg{ width:calc(16px * var(--gain)); height:auto; flex-shrink:0 }
.btn-google:hover{ border-color:#C8D2CE; background:var(--soft) }

.g-link{
  display:inline-flex; align-items:center; gap:.4em; white-space:nowrap;
  font-family:'Rubik',sans-serif; font-size:var(--fs-xs); font-weight:600;
  color:#1A73E8; transition:color .3s var(--ease);
}
.g-link .ms{ font-size:var(--ic-sm) }
.g-link:hover{ color:#174EA6; text-decoration:underline }

.testi-rails{ margin-top:var(--gap-lg); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent) }
@keyframes marq{ to{ transform:translateX(-50%) } }
.testi-rail{ display:flex; width:max-content; animation:marq 64s linear infinite }
.testi-rail:hover{ animation-play-state:paused }
.testi-set{ display:flex; gap:var(--gap); padding-right:var(--gap) }

.gcard{
  width:calc(clamp(280px,24vw,380px) * var(--gain));
  display:flex; flex-direction:column;
  padding:calc(var(--card-p) * .92);
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color .35s var(--ease);
}
.gcard-wide{ width:calc(clamp(310px,32vw,520px) * var(--gain)) }
.gcard:hover{ border-color:#C8D2CE }

.gcard-top{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8em }
.gav{
  width:calc(clamp(38px,3vw,46px) * var(--gain)); aspect-ratio:1;
  border-radius:50%; object-fit:cover; background:var(--mint);
}
.gwho{ display:flex; flex-direction:column; line-height:1.35; min-width:0 }
.gwho strong{
  font-family:'Open Sans',sans-serif; font-size:var(--fs-sm); font-weight:600; color:#202124;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gwho em{ font-style:normal; font-size:var(--fs-2xs); color:#70757A }
.gbadge{ display:block; width:calc(20px * var(--gain)); flex-shrink:0 }
.gbadge svg{ width:100%; height:auto }

.gstars{ display:flex; gap:.05em; color:#FBBC04; margin-top:calc(.9rem * var(--gain)) }
.gstars .ms{ font-size:var(--ic-sm); font-variation-settings:'FILL' 1,'wght' 400 }

.gcard blockquote{
  margin-top:.7em;
  font-size:var(--fs-sm); line-height:1.75; color:#3C4043;
}

/* ---------------------------------------------------------------
   19. CONTACT
   --------------------------------------------------------------- */
.contact{ background:#fff }
.contact .sec-head{ margin-inline:auto; text-align:center; max-width:calc(760px * var(--gain)) }
.contact .eyebrow{ justify-content:center }
.contact-grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--gap-lg); align-items:stretch;
}
.contact-cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden;
}
.ccard{
  position:relative; display:flex; flex-direction:column; gap:.25em;
  padding:var(--card-p);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background-color .35s var(--ease);
}
.ccard:nth-child(2n){ border-right:0 }
.ccard:nth-last-child(-n+2){ border-bottom:0 }
.ccard:not(.ccard-static):hover{ background:var(--soft) }
.ccard-ico{ font-size:var(--ic-lg); color:var(--deep); margin-bottom:calc(1.1rem * var(--gain)) }
.ccard strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600; color:var(--ink) }
.ccard > span:not(.ccard-ico):not(.ccard-go){ font-size:var(--fs-sm); line-height:1.55; color:var(--body) }
.ccard-go{
  position:absolute; top:var(--card-p); right:var(--card-p);
  font-size:var(--ic-sm); color:var(--line); transition:color .35s var(--ease);
}
.ccard:hover .ccard-go{ color:var(--green) }
.ccard-static{ cursor:default }

.contact-map{
  position:relative; min-height:calc(340px * var(--gain));
  border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line);
  background:var(--soft);
}

/* karta: statisk bild tills besökaren klickar — då laddas OSM-iframen */
.map-frame{ position:absolute; inset:0 }
.map-static{ width:100%; height:100%; object-fit:none; object-position:50% 50%; filter:saturate(.88) }
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.88) }
.map-load{
  position:absolute; top:calc(1rem * var(--gain)); right:calc(1rem * var(--gain)); z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  padding:calc(.62rem * var(--gain)) calc(1.05rem * var(--gain));
  background:#fff; color:var(--deep);
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:'Rubik',sans-serif; font-size:var(--fs-2xs); font-weight:600; letter-spacing:.04em;
  white-space:nowrap;
  transition:border-color .28s var(--ease), color .28s var(--ease);
}
.map-load .ms{ font-size:var(--ic-sm); color:var(--green) }
.map-load:hover{ border-color:var(--green); color:var(--green-700) }
.map-attr{
  position:absolute; right:0; bottom:0; z-index:1;
  padding:2px 6px; background:rgba(255,255,255,.8);
  font-size:10px; line-height:1.4; color:#555;
}
.map-lazy.is-live .map-load,.map-lazy.is-live .map-attr{ display:none }
.map-pin{
  position:absolute; left:calc(1rem * var(--gain)); bottom:calc(2.2rem * var(--gain));
  display:flex; align-items:center; gap:.75em;
  padding:calc(.85rem * var(--gain)) calc(1.2rem * var(--gain));
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.map-pin .ms{ font-size:var(--ic-md); color:var(--green) }
.map-pin div{ display:flex; flex-direction:column; line-height:1.3 }
.map-pin strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600; color:var(--ink) }
.map-pin em{ font-style:normal; font-size:var(--fs-2xs); color:var(--body) }

/* ---------------------------------------------------------------
   20. FOOTER
   --------------------------------------------------------------- */
.site-footer{
  background:var(--deep);
  color:rgba(255,255,255,.72);
  font-size:var(--fs-sm);
}

/* --- servicebandet överst --- */
.foot-band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--gap);
  padding-block:calc(clamp(1.6rem,1.1rem + 2.2vw,3rem) * var(--gain));
  border-bottom:1px solid rgba(255,255,255,.16);
}
.fb-txt{ display:flex; align-items:center; gap:calc(1rem * var(--gain)); min-width:0 }
.fb-ico{ font-size:var(--ic-xl); color:var(--green); flex-shrink:0 }
.fb-txt div{ display:flex; flex-direction:column; gap:.2em; min-width:0 }
.fb-txt strong{
  font-family:'Rubik',sans-serif; font-size:var(--fs-xl); font-weight:600;
  color:#fff; letter-spacing:-.02em; line-height:1.25;
}
.fb-txt span{ font-size:var(--fs-sm); color:rgba(255,255,255,.66); line-height:1.6 }
.fb-act{ display:flex; flex-wrap:wrap; align-items:center; gap:calc(1.4rem * var(--gain)) }
.fb-call{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600;
  color:#fff; transition:color .28s var(--ease);
}
.fb-call .ms{ font-size:var(--ic-md); color:var(--green) }
.fb-call:hover{ color:var(--green) }

/* --- huvudrutnät --- */
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.35fr;
  gap:var(--gap-lg);
  padding-block:calc(var(--sec-y) * .62);
}
.footer-logo{ width:calc(clamp(160px,13vw,220px) * var(--gain)); height:auto; margin-bottom:calc(1.3rem * var(--gain)) }
.fcol-brand p{ line-height:1.85; max-width:46ch }
.fcol h4{
  color:#fff; font-size:var(--fs-md); font-weight:600;
  margin-bottom:calc(1.3rem * var(--gain));
  padding-bottom:.8em;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.fcol-label{
  display:block; margin:calc(1.8rem * var(--gain)) 0 .9rem;
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5);
}

.flinks{ display:flex; flex-direction:column; gap:.15em }
.flinks a{
  display:inline-flex; align-items:center; gap:.65em;
  padding-block:.45em;
  transition:color .28s var(--ease), gap .28s var(--ease);
}
.flinks .ms{ font-size:var(--ic-sm); color:var(--green) }
.flinks a:hover{ color:#fff; gap:.95em }

.fcontact{ display:flex; flex-direction:column }
.fcontact li{
  display:flex; align-items:flex-start; gap:.8em;
  padding-block:calc(.85rem * var(--gain));
}
.fcontact li + li{ border-top:1px solid rgba(255,255,255,.12) }
.fcontact > li > .ms{ font-size:var(--ic-md); color:var(--green); flex-shrink:0; margin-top:.1em }
.fc-txt{ display:flex; flex-direction:column; gap:.2em; min-width:0 }
.fc-txt em{
  font-style:normal; font-family:'Rubik',sans-serif; font-size:var(--fs-3xs);
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.fc-txt a,.fc-txt > span{ color:#fff; font-weight:500; line-height:1.5; transition:color .28s var(--ease) }
.fc-txt a:hover{ color:var(--green) }

/* --- sociala ikoner --- */
.socials{ display:flex; align-items:center; gap:calc(1.35rem * var(--gain)) }
.socials a{
  display:grid; place-items:center;
  color:rgba(255,255,255,.72);
  transition:color .28s var(--ease), transform .35s var(--ease);
}
.socials svg{ width:var(--ic-md); height:var(--ic-md); fill:currentColor }
.socials .ms{ font-size:var(--ic-md) }
.socials a:hover{ color:var(--green); transform:translateY(-2px) }

/* --- vårdnot --- */
.footer-note{
  display:flex; align-items:flex-start; gap:.75em;
  padding-block:calc(1.3rem * var(--gain));
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-xs); line-height:1.7; color:rgba(255,255,255,.55);
}
.footer-note .ms{ font-size:var(--ic-sm); color:var(--green); flex-shrink:0; margin-top:.15em }
.footer-note strong{ color:rgba(255,255,255,.8); font-weight:600 }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem;
  padding-block:calc(1.4rem * var(--gain));
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-xs);
}
.footer-bottom strong{ color:#fff; font-weight:600 }
.footer-bottom a{ color:var(--green); transition:color .28s }
.footer-bottom a:hover{ color:#8FE2C4 }
.powered{ opacity:.7 }

/* ---------------------------------------------------------------
   21. TILL TOPPEN
   --------------------------------------------------------------- */
.to-top{
  position:fixed; right:calc(1.3rem * var(--gain)); bottom:calc(1.5rem * var(--gain)); z-index:900;
  display:grid; place-items:center;
  width:calc(46px * var(--gain)); aspect-ratio:1; border-radius:50%;
  background:var(--deep); color:#fff;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s, background-color .3s var(--ease);
}
.to-top.is-on{ opacity:1; visibility:visible }
.to-top:hover{ background:var(--green) }
.to-top .ms{ font-size:var(--ic-md) }

/* ---------------------------------------------------------------
   22. MOBIL BOTTOM-BAR + POPUP
   --------------------------------------------------------------- */
.bbar{
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  display:none; align-items:stretch; justify-content:space-between;
  height:calc(var(--bbar-h) + env(safe-area-inset-bottom));
  padding:0 .35rem env(safe-area-inset-bottom);
  background:#fff;
  border-top:1px solid var(--line);
}

.bb-item{
  position:relative; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding-top:4px;
  color:var(--body-2);
  transition:color .3s var(--ease);
  min-width:0;
}
.bb-item .ms{ font-size:clamp(1.28rem,5.4vw,1.55rem) }
.bb-item em{
  font-style:normal; font-family:'Rubik',sans-serif;
  font-size:clamp(.56rem,2.5vw,.7rem); font-weight:500; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.bb-item.is-active{ color:var(--deep) }
.bb-item.is-active .ms{ font-variation-settings:'FILL' 1,'wght' 400 }
.bb-item.is-active::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:24px; height:2px; background:var(--green);
}
.bb-item:nth-of-type(2){ margin-right:calc(clamp(30px,9vw,40px)) }
.bb-item:nth-of-type(3){ margin-left:calc(clamp(30px,9vw,40px)) }

/* enda fyllda ikoncirkeln på hela sajten */
.bb-fab{
  position:absolute; left:50%; top:calc(clamp(-28px,-6vw,-20px));
  transform:translateX(-50%);
  display:grid; place-items:center;
  width:clamp(56px,15vw,66px); aspect-ratio:1; border-radius:50%;
  background:var(--green); color:#fff;
  border:5px solid #fff;
  transition:background-color .3s var(--ease);
  z-index:2;
}
.bb-fab .ms{ position:absolute; font-size:clamp(1.5rem,6vw,1.8rem); transition:opacity .28s var(--ease) }
.bb-fab-close{ opacity:0 }
body.sheet-open .bb-fab{ background:var(--deep) }
body.sheet-open .bb-fab-open{ opacity:0 }
body.sheet-open .bb-fab-close{ opacity:1 }

/* popup-ark */
.bsheet-veil{
  position:fixed; inset:0; z-index:960;
  background:rgba(8,44,34,.55);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.bsheet-veil.is-on{ opacity:1; visibility:visible }

.bsheet{
  position:fixed; left:0; right:0; bottom:0; z-index:970;
  max-height:88svh; overflow-y:auto; overscroll-behavior:contain;
  padding:.7rem clamp(1rem,4.6vw,1.6rem) calc(var(--bbar-h) + env(safe-area-inset-bottom) + 1.4rem);
  background:#fff;
  border-top:1px solid var(--line);
  border-radius:clamp(18px,5vw,24px) clamp(18px,5vw,24px) 0 0;
  transform:translateY(105%);
  transition:transform .5s var(--ease-out);
}
.bsheet.is-on{ transform:translateY(0) }
.bsheet-grab{
  display:block; width:40px; height:3px; border-radius:99px;
  background:var(--line); margin:0 auto 1rem;
}
.bsheet-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem }
.bsheet-logo{ width:clamp(132px,38vw,168px) }
.bsheet-x{
  display:grid; place-items:center; flex-shrink:0;
  width:36px; aspect-ratio:1;
  color:var(--ink);
  transition:color .3s;
}
.bsheet-x:hover{ color:var(--green) }
.bsheet-x .ms{ font-size:1.3rem }

.bsheet-label{
  display:block; margin:.4rem 0 .8rem;
  padding-bottom:.55rem; border-bottom:1px solid var(--line);
  font-family:'Rubik',sans-serif; font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--body-2);
}
.bsheet-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem }
@media (max-width:400px){ .bsheet-grid{ grid-template-columns:repeat(3,1fr) } }
.bsheet-grid a{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:.95rem .3rem;
  border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--deep);
  opacity:0; transform:translateY(12px);
  transition:border-color .3s, color .3s;
}
.bsheet.is-on .bsheet-grid a{ animation:sheetIn .45s var(--ease-out) forwards }
.bsheet-grid a:nth-child(1){ animation-delay:.05s } .bsheet-grid a:nth-child(2){ animation-delay:.09s }
.bsheet-grid a:nth-child(3){ animation-delay:.13s } .bsheet-grid a:nth-child(4){ animation-delay:.17s }
.bsheet-grid a:nth-child(5){ animation-delay:.21s } .bsheet-grid a:nth-child(6){ animation-delay:.25s }
.bsheet-grid a:nth-child(7){ animation-delay:.29s } .bsheet-grid a:nth-child(8){ animation-delay:.33s }
@keyframes sheetIn{ to{ opacity:1; transform:none } }
.bsheet-grid a:active{ border-color:var(--green) }
.bsheet-grid .ms{ font-size:1.5rem }
.bsheet-grid em{
  font-style:normal; font-family:'Rubik',sans-serif;
  font-size:.66rem; font-weight:500; color:var(--ink-2); text-align:center; line-height:1.25;
}

.bsheet-contact{ display:flex; flex-direction:column }
.bsheet-contact a{
  display:flex; align-items:center; gap:.9rem;
  padding:.95rem .2rem;
  border-bottom:1px solid var(--line);
}
.bsheet-contact > a > .ms{ font-size:1.45rem; color:var(--green); flex-shrink:0 }
.bsc-txt{ display:flex; flex-direction:column; line-height:1.3; min-width:0 }
.bsc-txt strong{ font-family:'Rubik',sans-serif; font-size:.92rem; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis }
.bsc-txt em{ font-style:normal; font-size:.72rem; color:var(--body-2) }
.bsheet-cta{ margin-top:1.3rem }

/* ---------------------------------------------------------------
   23. SCROLL-ANIMATIONER — diskreta, med syfte
   --------------------------------------------------------------- */
[data-anim]{
  opacity:0; will-change:transform,opacity;
  transition:opacity .85s var(--ease-out), transform .95s var(--ease-out), filter .85s var(--ease-out), clip-path 1.1s var(--ease-out);
}
[data-anim="fade-up"]{ transform:translateY(26px) }
[data-anim="fade-left"]{ transform:translateX(32px) }
[data-anim="fade-right"]{ transform:translateX(-32px) }

/* mjuk textinfällning: lyft + lätt oskärpa som klarnar */
[data-anim="soft"]{ transform:translateY(16px); filter:blur(5px) }

/* bildsvep underifrån — klippet ligger på barnet, annars
   räknar IntersectionObserver elementet som osynligt och trigger aldrig */
[data-anim="mask"]{ opacity:1 }
[data-anim="mask"] > *{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s var(--ease-out);
}

[data-anim].is-in{ opacity:1; transform:none; filter:none }
[data-anim="mask"].is-in > *{ clip-path:inset(0 0 0 0) }

/* rubriker: ord för ord */
[data-split]{ opacity:1 }
[data-split] .wd{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em }
[data-split] .wd > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .9s var(--ease-out);
}
[data-split].is-in .wd > span{ transform:none }

/* ---------------------------------------------------------------
   24. RESPONSIVT
   --------------------------------------------------------------- */
/* --- trustbar --- */
@media (max-width:1080px){
  .tb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:calc(1.8rem * var(--gain)) }
  .tb-item{ padding-inline:var(--gap) }
  .tb-item:nth-child(odd){ padding-left:0 }
  .tb-item:nth-child(even){ padding-right:0 }
  .tb-item:nth-child(2n+1){ border-left:0 }
  .tb-item:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.18); padding-top:calc(1.8rem * var(--gain)) }
}
@media (max-width:560px){
  .tb-grid{ grid-template-columns:1fr; row-gap:0 }
  .tb-item{ padding:calc(1.3rem * var(--gain)) 0; border-left:0 !important }
  .tb-item + .tb-item{ border-top:1px solid rgba(255,255,255,.18) }
  .tb-item:first-child{ padding-top:0 }
  .tb-item:last-child{ padding-bottom:0 }
}

/* --- CTA + Google-sammanfattning --- */
@media (max-width:1080px){
  .cta-box{ grid-template-columns:1fr }
  .cta-copy{ max-width:100% }
  .cta-visual{ order:-1; min-height:calc(180px * var(--gain)) }
  .cta-visual img{ width:110% }
  .testi-head .g-summary{ justify-self:start }
}
@media (max-width:860px){
  .g-summary{ grid-template-columns:auto 1fr; row-gap:1rem }
  .g-actions{
    grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:1rem 1.4rem; padding-top:1rem; border-top:1px solid var(--line);
  }
}
@media (max-width:420px){
  .g-actions{ flex-direction:column; align-items:stretch }
  .btn-google{ justify-content:center }
}

/* --- services + delad rubrik --- */
@media (max-width:1080px){
  .sec-split{ grid-template-columns:1fr; gap:calc(var(--gap-lg) * .6); align-items:start }
  .sec-split .sec-title{ max-width:22ch }
  .sec-split-aside{ padding-bottom:0 }
  .sec-split-aside p{ max-width:60ch }

  .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .svc:last-child{ grid-column:1 / -1; flex-direction:row }
  .svc:last-child .svc-media{ width:42%; flex-shrink:0 }
  .svc:last-child .svc-media img{ height:100%; aspect-ratio:auto; min-height:100% }
  .svc:last-child .svc-body{ width:58% }
}

@media (max-width:760px){
  .svc-grid{ grid-template-columns:1fr }
  .svc:last-child{ flex-direction:column }
  .svc:last-child .svc-media{ width:100% }
  .svc:last-child .svc-media img{ aspect-ratio:16/10; min-height:0 }
  .svc:last-child .svc-body{ width:100% }
}

@media (max-width:1240px){
  .hero-shell{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) }
  .hp-pill-a{ left:calc(-1rem * var(--gain)) }
  .hp-pill-b{ right:calc(-.5rem * var(--gain)) }
  .contact-grid{ grid-template-columns:1fr }
  .contact-cards{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .ccard{ border-bottom:0 }
  .ccard:nth-child(2n){ border-right:1px solid var(--line) }
  .ccard:last-child{ border-right:0 }
}

@media (max-width:1080px){
  .about-grid{ grid-template-columns:1fr; gap:var(--gap-lg) }
  .about-visual{ max-width:560px; margin-inline:auto; width:100% }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .stat{ padding-inline:var(--gap); padding-bottom:calc(var(--gap-lg) * .5) }
  .stat:nth-child(odd){ padding-left:0 }
  .stat:nth-child(even){ padding-right:0 }
  .stat:nth-child(2n+1){ border-left:0 }
  .stat:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.2); padding-top:calc(var(--gap-lg) * .6) }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--gap-lg) }
  .fcol-brand{ grid-column:1 / -1 }
  .fcol-contact{ grid-column:1 / -1 }
  .foot-band{ flex-direction:column; align-items:flex-start }
}

@media (max-width:991px){
  :root{ --header-h: clamp(54px, 7vw, 66px) }

  .nav,.header-actions{ display:none }
  .header-inner{ justify-content:space-between }
  .bbar{ display:flex }
  .to-top{ bottom:calc(var(--bbar-h) + env(safe-area-inset-bottom) + .8rem); right:1rem }

  .hero{ min-height:auto; padding-bottom:calc(var(--gap-lg) * 2.2) }
  .hero-shell{ grid-template-columns:1fr; gap:calc(var(--gap-lg) * 1.25) }
  .hero-copy{ max-width:100% }
  .hero-panel{ max-width:440px; width:100%; margin-inline:auto; padding-block:calc(1.8rem * var(--gain)) }
  .hero-scroll{ display:none }

  .steps-wrap{ grid-template-columns:1fr; gap:0; padding-top:0 }
  .steps-rail,.step-node{ display:none }
  .step{ padding-block:var(--gap-lg) }
  .step + .step{ border-top:1px solid var(--line) }
  .step-index{ font-size:calc(var(--fs-num) * .62) }

  .cta-copy{ max-width:100% }
}

@media (max-width:767px){
  .topbar-facts li:not(:first-child),.topbar-facts .sep{ display:none }
  .topbar-badge{ display:none }

  .contact-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ccard{ border-bottom:1px solid var(--line) }
  .ccard:nth-child(2n){ border-right:0 }
  .ccard:nth-last-child(-n+2){ border-bottom:0 }

  .footer-grid{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column; text-align:center; gap:.5rem }
  .fb-act{ width:100% }
  .fb-act .btn{ flex:1; justify-content:center }
  .cta-box{ flex-direction:column; align-items:flex-start }
  .cta-actions{ width:100% }
  .hero-proof{ gap:.9rem }
  .proof-div{ display:none }
}

@media (max-width:560px){
  .stats{ grid-template-columns:1fr }
  .stat{ padding:calc(var(--gap-lg) * .55) 0; border-left:0 !important; border-top:1px solid rgba(255,255,255,.2) }
  .stat:first-child{ border-top:0; padding-top:calc(var(--gap-lg) * .6) }
  .stat-ico{ margin-bottom:.7rem }
  .stat-num{ font-size:calc(var(--fs-num) * .78) }

  .topbar{ display:none }
  .site-header{ top:0 }

  .hero-cta{ flex-direction:column; align-items:stretch }
  .hero-cta .btn{ width:100% }
  .hp-pill-a,.hp-pill-b{ position:static; margin-top:.75rem; animation:none }
  .hero-panel{ padding-block:0 }
  .av-badge{ right:0; bottom:calc(1rem * var(--gain)) }
  .av-chip{ left:0; top:1rem }
  .contact-cards{ grid-template-columns:1fr }
  .ccard{ border-right:0 !important }
  .ccard:not(:last-child){ border-bottom:1px solid var(--line) }
  .about-actions{ flex-direction:column; align-items:stretch }
  .about-actions .btn{ justify-content:center }
  .cta-actions{ flex-direction:column; align-items:stretch }
  .cta-actions .btn{ width:100% }
  .cta-call{ justify-content:center }
}

@media (max-width:380px){
  :root{ --gutter:.95rem }
  .bb-item em{ font-size:.55rem }
  .gcard{ width:min(84vw,300px) }
  .gcard-wide{ width:min(90vw,330px) }
}

@media (max-height:560px) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:calc(var(--header-h) + 2rem) 3rem }
  .bsheet{ max-height:94svh }
}

/* ---------------------------------------------------------------
   25. TILLGÄNGLIGHET
   --------------------------------------------------------------- */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-anim],[data-anim="mask"] > *,[data-split] .wd > span,.bsheet-grid a{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important }
  .hp-eq i{ transform:scaleY(1) }
}

@media print{
  .topbar,.site-header,.bbar,.bsheet,.bsheet-veil,.to-top,.preloader,.trustbar{ display:none !important }
  .hero{ min-height:auto; color:#000 }
}


/* ===============================================================
   26. UNDERSIDOR
   =============================================================== */

/* --- sidhuvud med bild --- */
/* innehållet centreras mellan headerns underkant och heroens botten:
   lika luft (--ph-pad) ovanför och under, headerhöjden läggs bara till upptill */
.page-hero{
  --ph-top: calc(var(--header-h) + var(--topbar-h));
  --ph-pad: calc(var(--gap-lg) * .9);
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(340px, 54svh, calc(600px * var(--gain)));
  padding-top:calc(var(--ph-top) + var(--ph-pad));
  padding-bottom:var(--ph-pad);
  background:var(--deep-900);
}
.page-hero > .ph-inner{ width:100% }
.ph-media{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center }
.ph-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 45% }
.ph-veil{
  position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(17,96,74,.95) 0%, rgba(17,96,74,.86) 34%, rgba(41,116,92,.66) 60%, rgba(17,96,74,.22) 100%);
}
.ph-test .ph-media{    background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAMABYDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFAv/EABoQAAMBAQEBAAAAAAAAAAAAAAECAwARIQT/xAAVAQEBAAAAAAAAAAAAAAAAAAACAf/EABgRAQADAQAAAAAAAAAAAAAAAAABAjER/9oADAMBAAIRAxEAPwCxGDSBZ9vrUQnvmc+n2J0l6MsWAOXAmxiVQoI7jKQJK+40wtf/2Q==") }
.ph-skydd .ph-media{   background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAMABYDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwAEBf/EABwQAAICAwEBAAAAAAAAAAAAAAABAhEDBCEiMv/EABUBAQEAAAAAAAAAAAAAAAAAAAID/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAECESH/2gAMAwEAAhEDEQA/ANWJKg9pXHgsuTdAZpNRC54NPpzpT9OyD2fqyAp0o7xn/9k=") }
.ph-app .ph-media{     background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAMABYDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAQFA//EAB0QAAICAgMBAAAAAAAAAAAAAAABAgMEERMxQRL/xAAVAQEBAAAAAAAAAAAAAAAAAAACA//EABcRAQEBAQAAAAAAAAAAAAAAAAEAEQL/2gAMAwEAAhEDEQA/AKtt8PlpMTpynzNeE7km7OzWDcbVr0LuyEytrNrrWgEZQT7AL0lQ5E2//9k=") }
.ph-om .ph-media{      background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAMABYDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABAAF/8QAHRAAAgICAwEAAAAAAAAAAAAAAQIAAwQRBRMhMf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAh/9oADAMBAAIRAxEAPwBWDa+TWLni2zHI0g+Q/GeYC6jkqTqJ17CTbGu522mwqQZRNmHS9hLLsykjUl//2Q==") }
.ph-kontakt .ph-media{ background-image:url("data:image/jpeg;base64,/9j/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAAMABYDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEBQb/xAAfEAACAgEEAwAAAAAAAAAAAAABAgADBBESIUEFEzH/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABcRAQEBAQAAAAAAAAAAAAAAAAARIQH/2gAMAwEAAhEDEQA/AOjNgLFe5HYWqtLt8Es2Lv105islQwIMTVuF0eSS0kDqExaz68iwLwIQnH//2Q==") }

.ph-inner{ position:relative; z-index:1 }
.crumb{
  display:flex; align-items:center; gap:.5em;
  font-family:'Rubik',sans-serif; font-size:var(--fs-2xs); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.62);
  margin-bottom:calc(1.1rem * var(--gain));
}
.crumb a{ transition:color .28s var(--ease) }
.crumb a:hover{ color:var(--green) }
.crumb .ms{ font-size:var(--ic-xs) }
.crumb [aria-current]{ color:#fff }
.ph-title{ font-size:var(--fs-h1); color:#fff; letter-spacing:-.045em }
.ph-sub{
  margin-top:calc(1.1rem * var(--gain)); max-width:46ch;
  font-size:var(--fs-lg); line-height:1.7; color:rgba(255,255,255,.85);
}

/* mjuk platshållare för innehållsbilder */
.ph-soft{ background:var(--mint) }

/* --- intro: text + bild --- */
.intro{ background:#fff }
.intro-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:calc(var(--gap-lg) * 1.3); align-items:center;
}
.intro-copy .sec-title{ margin-bottom:.75em }
.feat-label{
  margin-top:1.4em;
  font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600; color:var(--ink);
}
.feats{ margin-top:calc(1.6rem * var(--gain)); border-top:1px solid var(--line) }
.feats li{
  display:flex; align-items:flex-start; gap:.8em;
  padding:calc(.95rem * var(--gain)) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2); font-weight:500;
}
.feats .ms{ font-size:var(--ic-md); color:var(--green); flex-shrink:0 }
.intro-media{ border-radius:var(--r-md); overflow:hidden }
.intro-media img{ width:100%; aspect-ratio:4/5; object-fit:cover }

/* --- flöde: numrerade kort --- */
.flow{ background:var(--soft) }
.flow-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap) }
.flow-card{
  display:flex; flex-direction:column;
  padding:var(--card-p);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  transition:background-color .5s var(--ease), border-color .5s var(--ease);
}
.flow-card:hover{ background:var(--deep); border-color:var(--deep) }
.flow-num{
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600;
  letter-spacing:.14em; color:var(--green);
}
.flow-ico{
  font-size:var(--ic-xl); color:var(--deep);
  margin:calc(1.3rem * var(--gain)) 0 calc(1.2rem * var(--gain));
  transition:color .5s var(--ease);
}
.flow-card:hover .flow-ico{ color:var(--green) }
.flow-card h3{ font-size:var(--fs-h3); transition:color .5s var(--ease) }
.flow-card p{ margin-top:.75em; font-size:var(--fs-sm); line-height:1.8; transition:color .5s var(--ease) }
.flow-card:hover h3{ color:#fff }
.flow-card:hover p{ color:rgba(255,255,255,.8) }

/* --- bokning: stora .01 .02 .03 --- */
.booking{ background:#fff }
.bk-grid{
  position:relative;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-lg); padding-top:calc(2.2rem * var(--gain));
}
.bk-rail{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--line) }
.bk-rail i{ display:block; height:100%; width:0; background:var(--green); transition:width 1.6s var(--ease-out) }
.bk-step{ display:flex; gap:calc(1.2rem * var(--gain)); align-items:flex-start }
.bk-num{
  font-family:'Rubik',sans-serif; font-size:calc(var(--fs-num) * .8); font-weight:700;
  line-height:.9; letter-spacing:-.055em; color:#DCE4E1; flex-shrink:0;
  transition:color .45s var(--ease);
}
.bk-step:hover .bk-num{ color:var(--green) }
.bk-body h3{ font-size:var(--fs-h3) }
.bk-body p{ margin-top:.7em; font-size:var(--fs-sm); line-height:1.8 }

/* --- om oss: varför-block --- */
.om-why{ background:var(--soft) }
.om-why-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:calc(var(--gap-lg) * 1.3); align-items:center;
}
.om-why-media{ border-radius:var(--r-md); overflow:hidden }
.om-why-media img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.om-why-copy .sec-title{ margin-bottom:.75em }

/* --- om oss: fyra löften --- */
.om-cards{ background:#fff }
.omc-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap-lg) }
.omc{ text-align:center }
.omc-img{
  display:block; width:calc(clamp(110px,11vw,168px) * var(--gain));
  aspect-ratio:1; border-radius:50%; overflow:hidden; margin:0 auto calc(1.4rem * var(--gain));
}
.omc-img img{ width:100%; height:100%; object-fit:cover }
.omc h4{ font-size:var(--fs-xl); font-weight:600 }
.omc p{
  margin-top:.5em; font-family:'Rubik',sans-serif; font-size:var(--fs-2xs); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--body-2);
}

/* --- kontakt --- */
.kontakt-intro{ background:#fff }
.kontakt-intro .sec-head{ margin-inline:auto; text-align:center; max-width:calc(820px * var(--gain)) }
.kontakt-intro .eyebrow{ justify-content:center }
.kontakt-cards{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.kontakt-cards .ccard{ border-bottom:0 }
.kontakt-cards .ccard:nth-child(2n){ border-right:1px solid var(--line) }
.kontakt-cards .ccard:last-child{ border-right:0 }

.form-sec{ background:var(--soft) }
.form-head{ max-width:calc(760px * var(--gain)) }
/* formulär och karta sida vid sida — kartan sträcks till exakt formulärets höjd */
.form-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--gap-lg); align-items:stretch;
}
.cform-wrap{ display:flex; flex-direction:column }
.cform{ display:flex; flex-direction:column; gap:calc(1.1rem * var(--gain)) }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:calc(1.1rem * var(--gain)) }
.cf-field{ display:flex; flex-direction:column; gap:.5em; min-width:0 }
.cf-field > label{
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--body-2);
}
.cf-field.is-req > label::after{ content:' *'; color:var(--green-700) }
.cf-field input,.cf-field textarea{
  font-family:'Open Sans',sans-serif; font-size:var(--fs-sm); color:var(--ink);
  padding:calc(.85rem * var(--gain)) calc(1.05rem * var(--gain));
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .28s var(--ease);
  width:100%;
}
.cf-field textarea{ resize:vertical; min-height:calc(130px * var(--gain)) }
.cf-field input:focus,.cf-field textarea:focus{ outline:none; border-color:var(--deep) }
.cf-field.has-err input,.cf-field.has-err textarea{ border-color:#C0392B }
.cf-err{ font-style:normal; font-size:var(--fs-2xs); line-height:1.4; color:#C0392B }
.cf-err:empty{ display:none }
.cf-submit{ align-self:flex-start }
.cf-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem calc(1.4rem * var(--gain)); margin-top:.3rem }
.cf-note{ font-size:var(--fs-xs); line-height:1.5; color:var(--body-2) }
.cf-note:empty{ display:none }
.cf-note.is-err{ color:#C0392B }

.form-map{
  position:relative; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line); background:var(--mint);
  min-height:calc(320px * var(--gain));
}

.synpunkter{ background:#fff }
.syn-box{
  display:flex; gap:calc(1.3rem * var(--gain));
  padding:calc(var(--card-p) * 1.15);
  border-radius:var(--r-md); background:var(--mint);
}
.syn-ico{ font-size:var(--ic-xl); color:var(--green); flex-shrink:0 }
.syn-copy h3{ font-size:var(--fs-h3) }
.syn-copy p{ margin-top:.85em; font-size:var(--fs-sm); line-height:1.85 }
.syn-copy a{ color:var(--deep); font-weight:600; border-bottom:1px solid var(--line) }
.syn-copy a:hover{ border-bottom-color:var(--deep) }


/* --- responsivt --- */
@media (max-width:1080px){
  .intro-grid,.om-why-grid{ grid-template-columns:1fr; gap:var(--gap-lg) }
  .intro-media,.om-why-media{ max-width:560px; margin-inline:auto; width:100% }
  .om-why-media{ order:2 }
  .flow-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .omc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .form-grid{ grid-template-columns:1fr }
  .form-map{ min-height:calc(320px * var(--gain)) }
}
@media (max-width:860px){
  .bk-grid{ grid-template-columns:1fr; gap:0; padding-top:0 }
  .bk-rail{ display:none }
  .bk-step{ padding-block:calc(1.6rem * var(--gain)) }
  .bk-step + .bk-step{ border-top:1px solid var(--line) }
  .bk-num{ font-size:calc(var(--fs-num) * .58) }
}
@media (max-width:767px){
  .kontakt-cards{ grid-template-columns:1fr }
  .kontakt-cards .ccard{ border-right:0 !important; border-bottom:1px solid var(--line) }
  .kontakt-cards .ccard:last-child{ border-bottom:0 }
}
@media (max-width:640px){
  .flow-grid{ grid-template-columns:1fr }
  .omc-grid{ grid-template-columns:1fr; gap:var(--gap) }
  .omc{ display:grid; grid-template-columns:auto 1fr; align-items:center; text-align:left; column-gap:1.2rem }
  .omc-img{ grid-row:1 / 3; width:calc(88px * var(--gain)); margin:0 }
  .omc p{ margin-top:.3em }
  .cf-row{ grid-template-columns:1fr }
  .syn-box{ flex-direction:column; gap:1rem }
  .ph-sub{ font-size:var(--fs-md) }
}
@media (max-width:560px){
  /* topbaren är dold här — headern sitter i toppen */
  .page-hero{ --ph-top: var(--header-h) }
}


/* ===============================================================
   27. FORMULÄRDETALJER — kryssruta, honeypot, bekräftelse
   =============================================================== */
.cf-check{
  display:flex; align-items:flex-start; gap:.75em; cursor:pointer;
  font-size:var(--fs-xs); line-height:1.6; color:var(--body);
  text-transform:none; letter-spacing:0; font-family:'Open Sans',sans-serif; font-weight:400;
}
.cf-check input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.cf-box{
  flex-shrink:0; display:grid; place-items:center;
  width:calc(20px * var(--gain)); height:calc(20px * var(--gain)); margin-top:.1em;
  background:#fff; border:1.5px solid #B9C6C1; border-radius:5px;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.cf-box .ms{ font-size:calc(15px * var(--gain)); color:#fff; opacity:0; font-variation-settings:'FILL' 0,'wght' 600; transition:opacity .2s var(--ease) }
.cf-check input:checked + .cf-box{ background:var(--green); border-color:var(--green) }
.cf-check input:checked + .cf-box .ms{ opacity:1 }
.cf-check input:focus-visible + .cf-box{ outline:2px solid var(--green); outline-offset:2px }
.cf-field.has-err .cf-box{ border-color:#C0392B }
.cf-check a{ color:var(--deep); font-weight:600; border-bottom:1px solid var(--line); transition:border-color .28s var(--ease) }
.cf-check a:hover{ border-bottom-color:var(--deep) }
.cf-consent{ margin-top:.2rem }
/* samtyckesraden ska se ut som brödtext, inte som fältetikett */
.cf-field > .cf-check{
  font-family:'Open Sans',sans-serif; font-size:var(--fs-xs); font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--body); white-space:normal;
}

/* honeypot — osynligt för människor, lockar botar */
.cf-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }

.cf-turnstile:empty{ display:none }

.btn.is-busy{ opacity:.7; cursor:progress }
.btn:disabled{ cursor:not-allowed }

/* bekräftelse i kontaktformuläret — fyller samma yta som formuläret */
.cf-done{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:calc(var(--card-p) * 1.3);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  outline:none;
}
.cf-done-ico{ font-size:calc(var(--ic-xl) * 1.2); color:var(--green); font-variation-settings:'FILL' 1,'wght' 400 }
.cf-done h3{ margin-top:.7em; font-size:var(--fs-h3) }
.cf-done p{ margin-top:.7em; font-size:var(--fs-md); line-height:1.75 }
.cf-done .cf-done-small{ font-size:var(--fs-sm); color:var(--body-2) }
.cf-done strong{ color:var(--ink); font-weight:600 }

/* ===============================================================
   28. BOKNINGSMODAL
   =============================================================== */
.bm{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  padding:calc(clamp(1rem,3vw,2.5rem) * var(--gain));
}
.bm[hidden]{ display:none }
.bm-veil{
  position:absolute; inset:0; background:rgba(8,44,34,.62);
  opacity:0; transition:opacity .38s var(--ease);
}
.bm-dialog{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  width:min(100%, calc(1080px * var(--gain)));
  height:min(calc(100svh - 2 * clamp(1rem,3vw,2.5rem)), calc(760px * var(--gain)));
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity .38s var(--ease), transform .5s var(--ease-out);
}
.bm.is-on .bm-veil{ opacity:1 }
.bm.is-on .bm-dialog{ opacity:1; transform:none }

/* --- vänster: stegöversikt --- */
.bm-aside{
  display:flex; flex-direction:column;
  padding:calc(var(--card-p) * 1.1);
  background:var(--deep); color:#fff;
  min-width:0;
}
.bm-logo{ width:calc(150px * var(--gain)); height:auto; margin-bottom:calc(2.2rem * var(--gain)) }
.bm-title{ margin-top:.55em; font-size:calc(var(--fs-h2) * .78); color:#fff }
.bm-steps{ margin-top:calc(1.8rem * var(--gain)); border-bottom:1px solid rgba(255,255,255,.14) }
.bm-steps li{
  display:flex; align-items:center; gap:.9em;
  padding:calc(.85rem * var(--gain)) 0;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:500;
  color:rgba(255,255,255,.5);
  white-space:nowrap;
  transition:color .35s var(--ease);
}
.bm-sn{ font-size:var(--fs-2xs); font-weight:600; letter-spacing:.14em; color:rgba(255,255,255,.4); transition:color .35s var(--ease) }
.bm-steps li.is-past{ color:rgba(255,255,255,.78) }
.bm-steps li.is-past .bm-sn{ color:#8FE2C4 }
.bm-steps li.is-on{ color:#fff }
.bm-steps li.is-on .bm-sn{ color:var(--green) }
.bm-call{
  margin-top:auto; padding-top:calc(1.6rem * var(--gain));
  display:flex; align-items:center; gap:.8em;
  color:#fff; transition:color .28s var(--ease);
}
.bm-call > .ms{ font-size:var(--ic-md); color:var(--green) }
.bm-call span{ display:flex; flex-direction:column; line-height:1.3 }
.bm-call em{ font-style:normal; font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55) }
.bm-call strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600 }
.bm-call:hover{ color:#8FE2C4 }

/* --- höger: innehåll --- */
.bm-main{ display:flex; flex-direction:column; min-width:0; min-height:0 }
.bm-head{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:calc(1.1rem * var(--gain));
  padding:calc(1rem * var(--gain)) calc(var(--card-p) * 1.1);
  border-bottom:1px solid var(--line);
}
.bm-mtitle{ display:none }
.bm-count{
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--body-2); white-space:nowrap;
}
.bm-bar{ display:block; height:2px; background:var(--line); overflow:hidden }
.bm-bar i{ display:block; height:100%; width:25%; background:var(--green); transition:width .5s var(--ease-out) }
.bm-x{ display:grid; place-items:center; width:calc(38px * var(--gain)); aspect-ratio:1; color:var(--ink); transition:color .28s var(--ease) }
.bm-x .ms{ font-size:var(--ic-md) }
.bm-x:hover{ color:var(--green) }

.bm-form{ display:flex; flex-direction:column; flex:1; min-height:0 }
.bm-body{
  position:relative; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:calc(var(--card-p) * 1.1);
}
.bm-pane.is-on{ animation:bmIn .45s var(--ease-out) both }
@keyframes bmIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.bm-h{ font-size:calc(var(--fs-h3) * 1.12); outline:none }
.bm-hint{ margin-top:.55em; font-size:var(--fs-sm); line-height:1.7; color:var(--body); max-width:60ch }
.bm-label{
  display:block;
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--body-2);
}
.bm-errbox{ margin-top:.9rem }
.bm-opt{ text-transform:none; letter-spacing:0; font-weight:400; font-family:'Open Sans',sans-serif; color:var(--body-2) }

/* steg 1: tjänster */
.bm-services{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(.8rem * var(--gain)); margin-top:calc(1.5rem * var(--gain)) }
.bm-svc{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.9em;
  padding:calc(1.15rem * var(--gain)) calc(1.2rem * var(--gain));
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
  cursor:pointer;
  transition:border-color .28s var(--ease), background-color .28s var(--ease);
}
.bm-svc input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.bm-svc:hover{ border-color:#C8D2CE }
.bm-svc-ico{ font-size:var(--ic-lg); color:var(--deep); transition:color .28s var(--ease) }
.bm-svc-txt{ display:flex; flex-direction:column; line-height:1.3; min-width:0 }
.bm-svc-txt strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600; color:var(--ink); white-space:nowrap }
.bm-svc-txt em{ font-style:normal; margin-top:.2em; font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--body-2); white-space:nowrap }
.bm-svc-tick{ font-size:var(--ic-md); color:var(--green); opacity:0; font-variation-settings:'FILL' 1,'wght' 400; transition:opacity .25s var(--ease) }
.bm-svc:has(input:checked){ border-color:var(--green); background:var(--mint) }
.bm-svc:has(input:checked) .bm-svc-ico{ color:var(--green-700) }
.bm-svc:has(input:checked) .bm-svc-tick{ opacity:1 }
.bm-svc:has(input:focus-visible){ outline:2px solid var(--green); outline-offset:2px }

/* steg 2: kalender + tid på dagen */
.bm-when{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:calc(1.4rem * var(--gain)); margin-top:calc(1.5rem * var(--gain));
}
.bm-cal{
  padding:calc(1rem * var(--gain));
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:opacity .3s var(--ease);
}
.bm-when.is-first .bm-cal{ opacity:.42 }
.bm-cal-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:calc(.8rem * var(--gain)) }
.bm-cal-title{ font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600; color:var(--ink) }
.bm-cal-nav{ display:grid; place-items:center; width:calc(36px * var(--gain)); aspect-ratio:1; color:var(--deep); border-radius:var(--r-sm); transition:color .25s var(--ease), background-color .25s var(--ease) }
.bm-cal-nav:hover:not(:disabled){ color:var(--green); background:var(--soft) }
.bm-cal-nav:disabled{ opacity:.28; cursor:default }
.bm-cal-nav .ms{ font-size:var(--ic-md) }
.bm-cal-week,.bm-cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:calc(4px * var(--gain)) }
.bm-cal-week span{
  text-align:center; padding-bottom:.5em;
  font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--body-2);
}
.bm-day{
  position:relative; aspect-ratio:1; display:grid; place-items:center;
  border-radius:var(--r-sm);
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:500; color:var(--ink);
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.bm-day:not(:disabled):hover{ background:var(--mint); color:var(--green-700) }
.bm-day:disabled{ color:#C3CCC9; cursor:default }
.bm-day.is-today::after{ content:''; position:absolute; bottom:18%; width:4px; height:4px; border-radius:50%; background:var(--body-2) }
.bm-day.is-sel,.bm-day.is-sel:hover{ background:var(--green); color:#fff }
.bm-day.is-blank{ pointer-events:none }

.bm-side{ display:flex; flex-direction:column; gap:calc(.9rem * var(--gain)) }
.bm-first{
  padding:calc(.95rem * var(--gain)) calc(1rem * var(--gain));
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:500; color:var(--ink);
  align-items:center;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.bm-first .cf-box{ margin-top:0 }
.bm-first:has(input:checked){ border-color:var(--green); background:var(--mint) }
.bm-side .bm-label{ margin-top:.4rem }
.bm-tod{ display:flex; flex-direction:column; gap:calc(.5rem * var(--gain)) }
.bm-pill{ position:relative; cursor:pointer }
.bm-pill input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.bm-pill span{
  display:block; padding:calc(.75rem * var(--gain)) calc(1rem * var(--gain));
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:500; color:var(--ink-2);
  white-space:nowrap;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.bm-pill:hover span{ border-color:#C8D2CE }
.bm-pill input:checked + span{ border-color:var(--green); background:var(--mint); color:var(--green-700) }
.bm-pill input:focus-visible + span{ outline:2px solid var(--green); outline-offset:2px }
.bm-picked{
  margin-top:auto;
  display:flex; align-items:center; gap:.8em;
  padding:calc(.95rem * var(--gain)) calc(1rem * var(--gain));
  background:var(--soft); border-radius:var(--r-sm);
}
.bm-picked > .ms{ font-size:var(--ic-md); color:var(--green) }
.bm-picked span{ display:flex; flex-direction:column; line-height:1.35; min-width:0 }
.bm-picked em{ font-style:normal; font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--body-2) }
.bm-picked strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600; color:var(--ink) }

/* steg 3: uppgifter */
.bm-fields{ display:flex; flex-direction:column; gap:calc(1rem * var(--gain)); margin-top:calc(1.5rem * var(--gain)) }
.bm-fields textarea{ min-height:calc(96px * var(--gain)) }

/* steg 4: sammanfattning */
.bm-sum{ margin-top:calc(1.4rem * var(--gain)); border-top:1px solid var(--line) }
.bm-sum-row{
  display:grid; grid-template-columns:calc(130px * var(--gain)) minmax(0,1fr) auto;
  align-items:baseline; gap:1rem;
  padding:calc(.8rem * var(--gain)) 0;
  border-bottom:1px solid var(--line);
}
.bm-sum dt{ font-family:'Rubik',sans-serif; font-size:var(--fs-3xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--body-2); white-space:nowrap }
.bm-sum dd{ font-size:var(--fs-sm); color:var(--ink); white-space:pre-line; overflow-wrap:anywhere }
.bm-edit{ font-family:'Rubik',sans-serif; font-size:var(--fs-2xs); font-weight:600; color:var(--deep); border-bottom:1px solid var(--line); transition:border-color .25s var(--ease), color .25s var(--ease) }
.bm-edit:hover{ color:var(--green-700); border-bottom-color:var(--green) }
.bm-note{
  display:flex; align-items:flex-start; gap:.65em;
  margin:calc(1.2rem * var(--gain)) 0;
  padding:calc(.85rem * var(--gain)) calc(1rem * var(--gain));
  background:var(--mint); border-radius:var(--r-sm);
  font-size:var(--fs-xs); line-height:1.6; color:var(--ink-2);
}
.bm-note .ms{ font-size:var(--ic-sm); color:var(--green-700); flex-shrink:0; margin-top:.05em }
.bm-pane .cf-turnstile{ margin-top:1rem }

/* klart */
.bm-done{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:100%; padding-block:calc(2rem * var(--gain)); outline:none }
.bm-done-ico{ font-size:calc(var(--ic-xl) * 1.35); color:var(--green); font-variation-settings:'FILL' 1,'wght' 400 }
.bm-done .bm-h{ margin-top:.6em; font-size:calc(var(--fs-h3) * 1.3) }
.bm-done-txt{ margin-top:.8em; max-width:44ch; font-size:var(--fs-md); line-height:1.75 }
.bm-done-small{ margin-top:.6em; font-size:var(--fs-sm); color:var(--body-2) }
.bm-done-small:empty{ display:none }
.bm-done-small strong{ color:var(--ink); font-weight:600 }
.bm-done .btn{ margin-top:calc(1.8rem * var(--gain)) }

/* fot */
.bm-foot{
  display:flex; align-items:center; gap:1rem;
  padding:calc(.95rem * var(--gain)) calc(var(--card-p) * 1.1);
  border-top:1px solid var(--line); background:#fff;
}
.bm-foot[hidden]{ display:none }
.bm-note-live{ flex:1; min-width:0 }
.bm-btns{ display:flex; align-items:center; gap:calc(1rem * var(--gain)); margin-left:auto }
.bm-back{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.6rem .3rem;
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600; color:var(--deep);
  white-space:nowrap; transition:color .25s var(--ease);
}
.bm-back .ms{ font-size:var(--ic-sm) }
.bm-back:hover{ color:var(--green-700) }
.bm-back[hidden],.bm-next[hidden],.bm-send[hidden]{ display:none }
.bm.is-done .bm-steps li .bm-sn{ color:#8FE2C4 }

@media (max-width:980px){
  .bm-dialog{ grid-template-columns:minmax(0,.3fr) minmax(0,1fr) }
  .bm-when{ grid-template-columns:1fr }
  .bm-picked{ margin-top:0 }
}
@media (max-width:767px){
  .bm{ padding:0; place-items:stretch }
  .bm-dialog{
    grid-template-columns:1fr;
    width:100%; height:100%; height:100dvh; border-radius:0;
    transform:translateY(28px);
  }
  .bm-aside{ display:none }
  .bm-head{ grid-template-columns:minmax(0,1fr) auto; row-gap:.7rem; padding:.85rem 1rem .9rem 1.15rem }
  .bm-mtitle{ display:block; grid-column:1; font-family:'Rubik',sans-serif; font-size:1.05rem; font-weight:600; color:var(--ink) }
  .bm-x{ grid-column:2; grid-row:1 }
  .bm-count{ grid-column:1; grid-row:2 }
  .bm-bar{ grid-column:1 / -1; grid-row:3 }
  .bm-body{ padding:1.3rem 1.15rem 1.6rem }
  .bm-services{ grid-template-columns:1fr }
  .bm-foot{ flex-wrap:wrap; padding:.8rem 1.15rem calc(.8rem + env(safe-area-inset-bottom)) }
  .bm-note-live{ flex-basis:100%; order:2 }
  .bm-btns{ width:100%; justify-content:space-between }
  .bm-btns .btn{ flex:1; justify-content:center }
  .bm-sum-row{ grid-template-columns:minmax(0,1fr) auto; row-gap:.2rem }
  .bm-sum dt{ grid-column:1 }
  .bm-sum dd{ grid-column:1; grid-row:2 }
  .bm-edit{ grid-column:2; grid-row:1 / 3; align-self:center }
}

/* ===============================================================
   29. INTEGRITETSPOLICY
   =============================================================== */
.ph-plain{ min-height:clamp(300px, 44svh, calc(480px * var(--gain))) }
.ph-plain .ph-media{ background:var(--deep-900) }
.legal{ background:#fff }
.legal-grid{
  display:grid; grid-template-columns:calc(290px * var(--gain)) minmax(0,1fr);
  gap:calc(var(--gap-lg) * 1.3); align-items:start;
}
.legal-aside{
  position:sticky; top:calc(var(--header-h) + 1.6rem);
  display:flex; flex-direction:column; gap:calc(.8rem * var(--gain));
  padding:var(--card-p);
  background:var(--mint); border-radius:var(--r-md);
}
.legal-ico{ font-size:var(--ic-xl); color:var(--green-700) }
.legal-aside strong{ font-family:'Rubik',sans-serif; font-size:var(--fs-lg); font-weight:600; color:var(--ink); margin-bottom:.3rem }
.legal-aside a{ display:inline-flex; align-items:center; gap:.6em; font-size:var(--fs-sm); font-weight:600; color:var(--deep); white-space:nowrap; transition:color .25s var(--ease) }
.legal-aside a .ms{ font-size:var(--ic-sm); color:var(--green) }
.legal-aside a:hover{ color:var(--green-700) }
.legal-body{ max-width:74ch }
.legal-lead p{ font-size:var(--fs-lg); line-height:1.75; color:var(--ink-2) }
.legal-body h2{ margin-top:calc(2.6rem * var(--gain)); padding-top:calc(2rem * var(--gain)); border-top:1px solid var(--line); font-size:calc(var(--fs-h2) * .72) }
.legal-body h3{ margin-top:calc(2rem * var(--gain)); font-size:var(--fs-h3) }
.legal-body p{ margin-top:.85em; font-size:var(--fs-md); line-height:1.85 }
.legal-body a{ color:var(--deep); font-weight:600; border-bottom:1px solid var(--line); transition:border-color .25s var(--ease) }
.legal-body a:hover{ border-bottom-color:var(--deep) }
.legal-list{ margin-top:1rem; border-top:1px solid var(--line) }
.legal-list li{ padding:calc(.8rem * var(--gain)) 0; border-bottom:1px solid var(--line); font-size:var(--fs-md); line-height:1.75 }
.legal-list strong{ color:var(--ink); font-weight:600 }
@media (max-width:1080px){
  .legal-grid{ grid-template-columns:1fr }
  .legal-aside{ position:static }
}

/* ===============================================================
   30. RADBRYTNING
   Desktop (1024px+): korta texter bryts aldrig — layouten ger plats.
   Längre rubriker/stycken bryts naturligt men utan ensamma ord.
   =============================================================== */
h1,h2,h3,h4{ text-wrap:balance }
p,li,blockquote,dd{ text-wrap:pretty }

@media (min-width:1024px){
  .btn,.nav-link,.eyebrow,.crumb,
  .topbar-facts li,.topbar-badge,.topbar-call,
  .hp-head strong,.hp-head em,.hp-pill em,.proof-text,
  .tb-item strong,.tb-item > span:not(.tb-ico):not(.tb-stars),
  .svc-tag,.svc-link,.svc-body h3,.step-tag,.step h3,
  .stat p,
  .av-badge em,.av-chip,.checks li,.feats li,.feat-label,
  .cta-facts li,.cta-call,
  .g-biz,.g-src,.btn-google,.g-link,.gwho em,
  .mega-label,.mega-txt strong,.mega-txt em,
  .ccard strong,.ccard > span:not(.ccard-ico):not(.ccard-go),
  .map-pin strong,.map-pin em,.map-load,
  .flow-num,.flow-card h3,.bk-body h3,
  .omc h4,.omc p,
  .cf-field > label:not(.cf-check),
  .fcol h4,.flinks a,.fcol-label,.fc-txt em,.fc-txt a,.fc-txt > span,.fb-call,.fb-txt strong,
  .footer-bottom > span,
  .bm-steps li,.bm-picked strong{
    white-space:nowrap;
  }
}