:root{
    --green:#2ea44f;
    --green-dark:#248a41;
    --text:#111;
    --muted:#5b5b5b;
    --line:#e9e9e9;
    --bg:#ffffff;
    --container: 1180px;
    --radius: 18px;
  }

  *{ box-sizing:border-box; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }

  .container{
    max-width: var(--container);
    margin:0 auto;
    padding: 0 24px;
  }

  /* Header */
  .header{
    position: sticky;
    top:0;
    z-index:20;
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  .header__row{
    display:grid;
    grid-template-columns: 220px 1fr 320px;
    align-items:center;
    gap:16px;
    padding: 14px 0;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .brand__logo{
    width:44px; height:28px;
    display:grid; place-items:center;
    border-radius:6px;
    background:transparent;
    overflow:hidden;
  }
  .brand__logo img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .brand__name{
    font-weight:800;
    letter-spacing:.2px;
    font-size:14px;
    line-height:1.1;
  }

  .nav{
    display:flex;
    justify-content:center;
    gap:26px;
    font-weight:600;
    font-size:15px;
  }
  .nav a{ color:#1a1a1a; }
  .nav a.active{ color:var(--green); }
  .nav a:hover{ color:var(--green); }

  .header__actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:16px;
    white-space:nowrap;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight:700;
    font-size:14px;
    border:1px solid transparent;
    transition:.15s ease;
  }
  .btn--green{
    background:var(--green);
    color:#fff;
  }
  .btn--green:hover{ background:var(--green-dark); transform: translateY(-1px); }

  .phone{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    color:var(--green);
  }
  .phone svg{ width:18px; height:18px; }

  /* Hero */
  .hero{
    padding: 34px 0 26px;
  }
  .hero__grid{
    display:grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 44px;
    align-items:center;
  }
  h1{
    margin:0 0 14px;
    font-size: clamp(34px, 3.4vw, 54px);
    line-height:1.12;
    letter-spacing:-.5px;
    font-weight:900;
  }
  .lead{
    margin:0 0 18px;
    color:var(--muted);
    max-width: 56ch;
    font-size: 16.5px;
  }

  .bullets{
    list-style:none;
    padding:0;
    margin: 18px 0 0;
    display:grid;
    gap:14px;
    color:#3a3a3a;
    font-weight:500;
  }
  .bullets li{
    display:flex;
    gap:12px;
    align-items:flex-start;
  }
  .bicon{
    width:22px; height:22px;
    flex: 0 0 22px;
    margin-top: 2px;
    color: var(--green);
  }

  .hero__image{
    border-radius: var(--radius);
    overflow:hidden;
    box-shadow: 0 16px 30px rgba(0,0,0,.12);
    background:#f3f3f3;
    aspect-ratio: 16 / 9;
  }
  .hero__image img{
    width:100%;
    height:100%;
    object-fit: cover;
  }

  /* Section: Energy */
  .section{
    padding: 30px 0 50px;
  }
  .energy{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items:center;
  }
  .energy__img{
    border-radius: var(--radius);
    overflow:hidden;
    background:#f3f3f3;
    box-shadow: 0 16px 30px rgba(0,0,0,.10);
    aspect-ratio: 16 / 10;
  }
  .energy__img img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  h2{
    margin:0 0 10px;
    font-size: clamp(28px, 2.5vw, 44px);
    font-weight:900;
    letter-spacing:-.4px;
  }
  .muted{
    margin:0 0 16px;
    color:var(--muted);
    font-size: 16px;
    max-width: 60ch;
  }

  /* Responsive */
  @media (max-width: 980px){
    .header__row{
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "brand actions"
        "nav nav";
    }
    .brand{ grid-area: brand; }
    .header__actions{ grid-area: actions; }
    .nav{
      grid-area: nav;
      justify-content:flex-start;
      overflow:auto;
      padding-bottom: 6px;
    }
    .hero__grid{ grid-template-columns: 1fr; }
    .hero__image{ aspect-ratio: 16/10; }
    .energy{ grid-template-columns: 1fr; }
  }

  @media (max-width: 520px){
    .header__actions{ gap:10px; }
    .btn{ padding: 9px 12px; border-radius: 10px; }
    .phone span{ display:none; } /* bara ikonen på väldigt små skärmar */
  }



/* WHY SECTION (Varför välja oss?) */
.why{
padding: 70px 0 55px;
background:#fff;
}

.why__head{
text-align:center;
margin-bottom: 34px;
}

.why__head h2{
margin:0 0 10px;
font-size: clamp(30px, 3vw, 44px);
font-weight: 900;
letter-spacing: -0.4px;
color:#111;
}

.why__head p{
margin:0;
font-size: 16px;
color:#6a6a6a;
}

.why__cards{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin-top: 26px;
}

.whyCard{
border:1px solid #ececec;
border-radius: 12px;
background:#fff;
padding: 22px 22px 18px;
box-shadow: 0 10px 20px rgba(0,0,0,.04);
min-height: 170px;
}

.whyIcon{
width: 34px;
height: 34px;
color: var(--green);
margin-bottom: 12px;
}

.whyIcon svg{ width:100%; height:100%; }

.whyCard h3{
margin:0 0 10px;
font-size: 18px;
font-weight: 800;
color:#111;
}

.whyCard p{
margin:0;
color:#6a6a6a;
font-size: 14.8px;
line-height: 1.6;
}

/* Gallery row */
.why__gallery{
margin-top: 34px;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}

.whyImg{
border-radius: 14px;
overflow:hidden;
background:#f2f2f2;
box-shadow: 0 14px 26px rgba(0,0,0,.06);
aspect-ratio: 16 / 9;
}

.whyImg img{
width:100%;
height:100%;
object-fit: cover;
}

/* Responsive */
@media (max-width: 1020px){
.why__cards{ grid-template-columns: repeat(2, 1fr); }
.why__gallery{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
.why__cards{ grid-template-columns: 1fr; }
}



/* CONTACT / OFFERT SECTION */
.contactSection{
padding: 28px 0 70px;
background:#fff;
}

.contactTopText{
text-align:center;
color:#6a6a6a;
margin: 0 0 18px;
font-size: 16px;
}

.contactGrid{
display:grid;
grid-template-columns: 1.05fr .95fr;
gap: 26px;
align-items:start;
}

/* Generic card */
.cardBox{
background:#fff;
border: 1px solid #ececec;
border-radius: 12px;
padding: 22px;
box-shadow: 0 10px 20px rgba(0,0,0,.04);
}

.cardTitle{
font-size: 18px;
font-weight: 800;
margin: 0 0 6px;
color:#111;
}

.cardSubtitle{
margin: 0 0 16px;
color:#6a6a6a;
font-size: 14.5px;
}

/* Form */
.offerForm{
display:grid;
gap: 14px;
}

.field label,
.field legend{
display:block;
font-size: 13.5px;
font-weight: 700;
color:#1a1a1a;
margin: 0 0 6px;
}

.req{ color:#111; font-weight:900; }

.field input,
.field select{
width:100%;
height: 44px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #e2e2e2;
background:#fff;
outline:none;
font-size: 14.5px;
}

.field input::placeholder{ color:#a2a2a2; }

.field input:focus,
.field select:focus{
border-color: rgba(46,164,79,.55);
box-shadow: 0 0 0 4px rgba(46,164,79,.12);
}

/* Radio group */
.radioField{
border: none;
padding: 0;
margin: 2px 0 0;
}

.radio{
display:flex;
align-items:center;
gap:10px;
margin: 8px 0;
color:#2a2a2a;
font-size: 14.5px;
}

.radio input{
width: 16px;
height: 16px;
accent-color: var(--green);
}

.submitBtn{
margin-top: 6px;
width:100%;
height: 46px;
border-radius: 8px;
border: none;
background: var(--green);
color:#fff;
font-weight: 800;
font-size: 14.5px;
cursor:pointer;
transition:.15s ease;
}
.submitBtn:hover{ background: var(--green-dark); transform: translateY(-1px); }

/* Right side stack */
.rightStack{
display:grid;
gap: 18px;
}

.infoCard .infoRow{
display:flex;
gap: 14px;
align-items:flex-start;
padding: 14px 0;
}
.infoCard .infoRow + .infoRow{ border-top: 1px solid #efefef; }

.infoIcon{
width: 22px;
height: 22px;
color: var(--green);
margin-top: 2px;
}
.infoIcon svg{ width:100%; height:100%; }

.infoLabel{
font-size: 13.5px;
font-weight: 800;
color:#111;
margin-bottom: 3px;
}
.infoValue{
color: var(--green);
font-weight: 700;
text-decoration:none;
}
.infoValue:hover{ text-decoration: underline; }

/* Special offer card */
.specialCard{
background: rgba(46,164,79,.06);
border-color: rgba(46,164,79,.18);
}
.specialHead{
display:flex;
align-items:center;
gap: 10px;
margin-bottom: 8px;
}
.bulb{ font-size: 18px; }
.specialText{
margin:0;
color:#6a6a6a;
font-size: 14.5px;
line-height: 1.6;
}

/* Image */
.contactImage{
border-radius: 14px;
overflow:hidden;
background:#f2f2f2;
border: 1px solid #ececec;
box-shadow: 0 14px 26px rgba(0,0,0,.06);
aspect-ratio: 16 / 9;
}
.contactImage img{
width:100%;
height:100%;
object-fit: cover;
}

/* Responsive */
@media (max-width: 980px){
.contactGrid{ grid-template-columns: 1fr; }
}



/* FOOTER */
.siteFooter{
margin-top: 24px;
border-top: 1px solid #ededed;
background:#fff;
}

.footerGrid{
display:grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
gap: 40px;
padding: 28px 0 22px;
}

.footerBrand{
display:flex;
align-items:center;
gap: 10px;
margin-bottom: 12px;
}

.footerBrandIcon{
width: 18px;
height: 18px;
color: var(--green);
}
.footerBrandIcon svg{ width:100%; height:100%; }

.footerBrandName{
font-weight: 800;
color: var(--green);
}

.footerTitle{
font-weight: 800;
color:#111;
margin: 2px 0 12px;
}

.footerText{
color:#6a6a6a;
font-size: 14.5px;
line-height: 1.75;
margin: 2px 0;
}

.footerList{
list-style:none;
padding:0;
margin:0;
display:grid;
gap: 8px;
}
.footerList a{
color:#6a6a6a;
font-size: 14.5px;
}
.footerList a:hover{ color:#111; text-decoration: underline; }

.footerInfo{
display:flex;
align-items:flex-start;
gap: 10px;
margin: 10px 0;
color:#6a6a6a;
font-size: 14.5px;
}
.footerInfo a{ color:#6a6a6a; }
.footerInfo a:hover{ color:#111; text-decoration: underline; }

.footerInfoIcon{
width: 18px;
height: 18px;
color: var(--green);
margin-top: 2px;
}
.footerInfoIcon svg{ width:100%; height:100%; }

.footerBottom{
border-top: 1px solid #efefef;
padding: 16px 0 20px;
display:flex;
align-items:center;
justify-content:center;
gap: 10px;
flex-wrap:wrap;
color:#8a8a8a;
font-size: 13.5px;
text-align:center;
}

.heart{ color:#d14; margin: 0 2px; }

.footerLink{
color: var(--green);
font-weight: 700;
}
.footerLink:hover{ text-decoration: underline; }

@media (max-width: 980px){
.footerGrid{
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
}

@media (max-width: 560px){
.footerGrid{
  grid-template-columns: 1fr;
  gap: 18px;
}
}




/* HERO BILLBOARD */
.heroBillboard{
    position: relative;
    padding: 84px 0 96px;
    background:
      radial-gradient(900px 360px at 50% 100%, rgba(46,164,79,.12), transparent 55%),
      linear-gradient(180deg, rgba(46,164,79,.06) 0%, rgba(255,255,255,1) 70%);
    overflow: hidden;
  }

/* Bakgrundsbild + “ljus dimma” som i screenshot */
.heroBillboard__bg{
position:absolute;
inset:0;
background:
  linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 55%, rgba(255,255,255,.88) 100%),
  url("tekniker.png");
background-size: cover;
background-position: center;
transform: scale(1.02);
filter: saturate(1.05) contrast(1.02);
}

/* Content */
.heroBillboard__content{
position:relative;
text-align:center;
max-width: 920px;
margin: 0 auto;
padding: 0 12px;
}

.heroBillboard h1{
margin: 0 0 18px;
font-size: clamp(40px, 4.6vw, 64px);
line-height: 1.06;
letter-spacing: -0.8px;
font-weight: 900;
color:#111;
}

.heroBillboard__lead{
margin: 0 auto 22px;
max-width: 70ch;
font-size: 16.5px;
color:#6a6a6a;
}

.heroBillboard__actions{
display:flex;
justify-content:center;
align-items:center;
gap: 14px;
flex-wrap:wrap;
margin-top: 14px;
}

/* Buttons */
.heroBtn{
display:inline-flex;
align-items:center;
justify-content:center;
height: 42px;
padding: 0 18px;
border-radius: 10px;
font-weight: 800;
font-size: 14.5px;
border: 1px solid transparent;
transition: .15s ease;
box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.heroBtn--primary{
background: var(--green);
color:#fff;
}
.heroBtn--primary:hover{
background: var(--green-dark);
transform: translateY(-1px);
}

.heroBtn--ghost{
background:#fff;
color:#111;
border-color: #e3e3e3;
}
.heroBtn--ghost:hover{
border-color:#cfcfcf;
transform: translateY(-1px);
}

/* Lite extra luft så heron känns “stor” som i bilden */
@media (min-width: 980px){
.heroBillboard{
  padding: 108px 0 120px;
}
}

    /* PAGE HERO (undersidor) */
    .pageHero{
        padding: 88px 0 78px; /* mycket luft som i screenshot */
        background:
          radial-gradient(900px 360px at 50% 100%, rgba(46,164,79,.12), transparent 55%),
          linear-gradient(180deg, rgba(46,164,79,.06) 0%, rgba(255,255,255,1) 70%);
      }
      
      .pageHero__inner{
        text-align:center;
        max-width: 860px;
        margin: 0 auto;
      }
      
      .pageHero__icon{
        width: 56px;
        height: 56px;
        margin: 0 auto 16px;
        color: var(--green);
      }
      .pageHero__icon svg{ width:100%; height:100%; }
      
      .pageHero__title{
        margin: 0 0 14px;
        font-size: clamp(40px, 4vw, 64px);
        line-height: 1.06;
        letter-spacing: -0.8px;
        font-weight: 900;
        color:#111;
      }
      
      .pageHero__lead{
        margin: 0 auto;
        max-width: 78ch;
        font-size: 16.5px;
        color:#6a6a6a;
      }
      
      /* Responsivt: lite mindre luft på mobil */
      @media (max-width: 640px){
        .pageHero{ padding: 70px 0 60px; }
        .pageHero__icon{ width: 50px; height: 50px; }
      }


      /* Ventilation: Servicekort-grid */
.serviceCards{
    padding: 28px 0 70px;
    background:#fff;
  }
  
  .serviceGrid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    max-width: 980px;      /* centrerat och “smalare” som i screenshot */
    margin: 0 auto;
  }
  
  .svcCard{
    position:relative;
    background:#fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 18px 18px 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .svcCard--popular{
    border-color: rgba(46,164,79,.55);
    box-shadow: 0 14px 26px rgba(46,164,79,.10);
  }
  
  .svcBadge{
    position:absolute;
    top: 12px;
    right: 12px;
    background: var(--green);
    color:#fff;
    font-weight: 800;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
  }
  
  .svcTop{
    display:flex;
    gap: 12px;
    align-items:flex-start;
  }
  
  .svcIcon{
    width: 26px;
    height: 26px;
    color: var(--green);
    margin-top: 2px;
    flex: 0 0 26px;
  }
  .svcIcon svg{ width:100%; height:100%; }
  
  .svcTitle{
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color:#111;
    line-height: 1.25;
  }
  
  .svcDesc{
    margin: 4px 0 0;
    color:#6a6a6a;
    font-size: 13.5px;
  }
  
  .svcMeta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin: 10px 0 10px;
  }
  
  .svcPrice{
    display:flex;
    align-items:center;
    gap: 10px;
  }
  
  .svcPriceValue{
    color: var(--green);
    font-weight: 900;
    font-size: 18px;
  }
  
  .svcChip{
    font-size: 11px;
    font-weight: 800;
    color:#666;
    border: 1px solid #e6e6e6;
    padding: 3px 7px;
    border-radius: 999px;
    background:#fff;
  }
  
  .svcTime{
    display:flex;
    align-items:center;
    gap: 6px;
    color:#777;
    font-size: 12.5px;
  }
  
  .svcTimeIcon{ font-size: 13px; opacity:.8; }
  
  .svcBlock{
    margin-top: 10px;
  }
  
  .svcLabel{
    font-size: 12px;
    font-weight: 900;
    color:#222;
    margin-bottom: 8px;
  }
  
  .svcList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap: 7px;
    color:#555;
    font-size: 12.8px;
  }
  
  .svcList li{
    display:flex;
    gap: 8px;
    align-items:flex-start;
  }
  
  .svcCheck{
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display:inline-grid;
    place-items:center;
    flex: 0 0 16px;
    background: rgba(46,164,79,.10);
    color: var(--green);
    border: 1px solid rgba(46,164,79,.25);
    font-size: 11px;
    line-height: 1;
    margin-top: 1px;
  }
  
  .svcSmall{
    margin: 0;
    color:#777;
    font-size: 12.5px;
    line-height: 1.55;
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .serviceGrid{
      max-width: 100%;
      grid-template-columns: 1fr;
    }
  }
  /* Ventilation: Varför rengöra ventilationen? */
.whyClean{
    padding: 34px 0 70px;
    background:#fff;
  }
  
  .whyClean__title{
    text-align:center;
    margin: 0 0 22px;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 900;
    letter-spacing: -0.4px;
    color:#111;
  }
  
  /* 2x2 cards */
  .whyClean__grid{
    max-width: 980px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  
  .whyCleanCard{
    border: 1px solid #ececec;
    border-radius: 12px;
    background:#fff;
    padding: 18px 18px 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .whyCleanCard h3{
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 900;
    color:#111;
  }
  
  .whyCleanCard p{
    margin: 0;
    color:#6a6a6a;
    font-size: 14.5px;
    line-height: 1.7;
  }
  
  /* Images row */
  .whyClean__images{
    max-width: 980px;
    margin: 26px auto 0;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  
  .whyCleanImg{
    border-radius: 14px;
    overflow:hidden;
    background:#f2f2f2;
    box-shadow: 0 14px 26px rgba(0,0,0,.06);
    aspect-ratio: 16 / 7;
  }
  
  .whyCleanImg img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .whyClean__grid{ grid-template-columns: 1fr; }
    .whyClean__images{ grid-template-columns: 1fr; }
    .whyCleanImg{ aspect-ratio: 16 / 9; }
  }

  /* Ventilation: Vår professionella metod */
.methodBox{
    padding: 10px 0 70px;
    background:#fff;
  }
  
  .methodBox__card{
    max-width: 980px;
    margin: 0 auto;
    background: rgba(46,164,79,.06);         /* ljus grön ton */
    border: 1px solid rgba(46,164,79,.18);   /* tunn grön border */
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .methodBox__card h3{
    margin: 0 0 10px;
    font-size: 14px;        /* lite mindre än vanliga rubriker, som i screenshot */
    font-weight: 900;
    color:#111;
  }
  
  .methodBox__card p{
    margin: 0 0 10px;
    color:#6a6a6a;
    font-size: 13.8px;
    line-height: 1.75;
  }
  
  .methodBox__card p:last-child{
    margin-bottom: 0;
  }
  /* Luftvärmepump: 2-kortssektion */
.hpCards{
    padding: 28px 0 70px;
    background:#fff;
  }
  
  .hpGrid{
    max-width: 980px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
  }
  
  .hpCard{
    background:#fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 18px 18px 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .hpTop{
    display:flex;
    gap: 12px;
    align-items:flex-start;
  }
  
  .hpIcon{
    width: 26px;
    height: 26px;
    color: var(--green);
    margin-top: 2px;
    flex: 0 0 26px;
  }
  .hpIcon svg{ width:100%; height:100%; }
  .hpIcon--bolt{ color: var(--green); }
  
  .hpTitle{
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color:#111;
    line-height: 1.25;
  }
  
  .hpDesc{
    margin: 4px 0 0;
    color:#6a6a6a;
    font-size: 13.5px;
  }
  
  .hpPriceRow{
    display:flex;
    align-items:center;
    gap: 10px;
    margin: 10px 0 10px;
  }
  
  .hpPrice{
    color: var(--green);
    font-weight: 900;
    font-size: 18px;
  }
  
  .hpChip{
    font-size: 11px;
    font-weight: 800;
    color:#666;
    border: 1px solid #e6e6e6;
    padding: 3px 7px;
    border-radius: 999px;
    background:#fff;
  }
  
  .hpLabel{
    font-size: 12px;
    font-weight: 900;
    color:#222;
    margin: 8px 0 10px;
  }
  
  .hpList{
    list-style:none;
    margin:0 0 14px;
    padding:0;
    display:grid;
    gap: 8px;
    color:#555;
    font-size: 12.8px;
  }
  
  .hpList li{
    display:flex;
    gap: 8px;
    align-items:flex-start;
  }
  
  .hpCheck{
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display:inline-grid;
    place-items:center;
    flex: 0 0 16px;
    background: rgba(46,164,79,.10);
    color: var(--green);
    border: 1px solid rgba(46,164,79,.25);
    font-size: 11px;
    line-height: 1;
    margin-top: 1px;
  }
  
  /* Buttons inside cards */
  .hpBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height: 38px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12.5px;
    border: 1px solid transparent;
    transition: .15s ease;
  }
  
  .hpBtn--primary{
    background: var(--green);
    color:#fff;
  }
  .hpBtn--primary:hover{
    background: var(--green-dark);
    transform: translateY(-1px);
  }
  
  .hpBtn--outline{
    background:#fff;
    color:#111;
    border-color:#e3e3e3;
  }
  .hpBtn--outline:hover{
    border-color:#cfcfcf;
    transform: translateY(-1px);
  }
  
  /* Big image under */
  .hpImage{
    max-width: 980px;
    margin: 22px auto 0;
    border-radius: 14px;
    overflow:hidden;
    background:#f2f2f2;
    box-shadow: 0 14px 26px rgba(0,0,0,.06);
    aspect-ratio: 16 / 9;
  }
  .hpImage img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .hpGrid{ grid-template-columns: 1fr; }
  }

  /* Luftvärmepump: Fördelar + rekommendation */
.hpBenefits{
    padding: 34px 0 70px;
    background:#fff;
  }
  
  .hpBenefits__title{
    text-align:center;
    margin: 0 0 18px;
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 900;
    letter-spacing: -0.35px;
    color:#111;
  }
  
  .hpBenefits__grid{
    max-width: 760px; /* i screenshot är den ganska smal */
    margin: 0 auto;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  
  .hpBenefitsCard{
    border: 1px solid #ececec;
    border-radius: 12px;
    background:#fff;
    padding: 16px 16px 14px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .hpBenefitsCard h3{
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 900;
    color:#111;
  }
  
  .hpBenefitsCard p{
    margin: 0;
    color:#6a6a6a;
    font-size: 12.8px;
    line-height: 1.7;
  }
  
  /* Rekommenderad serviceintervall (ljusgrön ruta) */
  .hpAdvice{
    max-width: 760px;
    margin: 18px auto 0;
    background: rgba(46,164,79,.06);
    border: 1px solid rgba(46,164,79,.18);
    border-radius: 12px;
    padding: 16px 16px 14px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .hpAdvice h3{
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 900;
    color:#111;
  }
  
  .hpAdvice p{
    margin: 0 0 10px;
    color:#6a6a6a;
    font-size: 12.8px;
    line-height: 1.75;
  }
  
  .hpAdvice p:last-child{ margin-bottom: 0; }
  
  /* Responsive */
  @media (max-width: 820px){
    .hpBenefits__grid{ grid-template-columns: 1fr; max-width: 980px; }
    .hpAdvice{ max-width: 980px; }
  }
  /* Avlopp: Priser */
.drainPricing{
    padding: 34px 0 70px;
    background:#fff;
  }
  
  .drainPricing__head{
    text-align:center;
    margin-bottom: 18px;
  }
  
  .drainPricing__head h2{
    margin:0 0 8px;
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 900;
    letter-spacing: -0.35px;
    color:#111;
  }
  
  .drainPricing__head p{
    margin:0;
    color:#6a6a6a;
    font-size: 14.5px;
  }
  
  /* 3 pris-kort */
  .drainPricing__grid{
    max-width: 760px; /* som i din bild – ganska smal och centrerad */
    margin: 0 auto;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }
  
  .priceCard{
    position:relative;
    background:#fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .priceCard--popular{
    border-color: rgba(46,164,79,.55);
    box-shadow: 0 14px 26px rgba(46,164,79,.10);
  }
  
  .priceBadge{
    position:absolute;
    top: 12px;
    right: 12px;
    background: var(--green);
    color:#fff;
    font-weight: 800;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
  }
  
  .priceCard__top{
    display:grid;
    gap: 8px;
  }
  
  .priceIcon{
    width: 26px;
    height: 26px;
    color: var(--green);
  }
  .priceIcon svg{ width:100%; height:100%; }
  
  .priceTitle{
    margin:0;
    font-size: 14.5px;
    font-weight: 900;
    color:#111;
  }
  
  .priceDesc{
    margin:0;
    color:#6a6a6a;
    font-size: 12.5px;
    line-height: 1.55;
    min-height: 36px; /* håller höjd jämn mellan kort */
  }
  
  .priceRow{
    display:flex;
    align-items:center;
    gap: 10px;
    margin: 12px 0 12px;
  }
  
  .priceValue{
    color: var(--green);
    font-weight: 900;
    font-size: 18px;
  }
  
  .priceChip{
    font-size: 11px;
    font-weight: 800;
    color:#666;
    border: 1px solid #e6e6e6;
    padding: 3px 7px;
    border-radius: 999px;
    background:#fff;
  }
  
  .priceBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height: 36px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid transparent;
    transition: .15s ease;
  }
  
  .priceBtn--primary{
    background: var(--green);
    color:#fff;
  }
  .priceBtn--primary:hover{ background: var(--green-dark); transform: translateY(-1px); }
  
  .priceBtn--outline{
    background:#fff;
    color:#111;
    border-color:#e3e3e3;
  }
  .priceBtn--outline:hover{ border-color:#cfcfcf; transform: translateY(-1px); }
  
  /* Vad ingår-boxen */
  .includedBox{
    max-width: 760px;
    margin: 20px auto 0;
    background:#fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .includedBox h3{
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 900;
    color:#111;
  }
  
  .includedList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap: 10px;
    color:#5a5a5a;
    font-size: 12.8px;
  }
  
  .includedList li{
    display:flex;
    gap: 10px;
    align-items:flex-start;
  }
  
  .includedCheck{
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display:inline-grid;
    place-items:center;
    flex: 0 0 16px;
    background: rgba(46,164,79,.10);
    color: var(--green);
    border: 1px solid rgba(46,164,79,.25);
    font-size: 11px;
    line-height: 1;
    margin-top: 1px;
  }
  
  .includedNote{
    margin-top: 14px;
    background: #f6f6f6;
    border-radius: 10px;
    padding: 10px 12px;
    display:flex;
    gap: 10px;
    color:#6a6a6a;
    font-size: 12px;
    line-height: 1.6;
  }
  
  .noteIcon{ opacity:.85; }
  
  /* Responsive */
  @media (max-width: 860px){
    .drainPricing__grid{ grid-template-columns: 1fr; max-width: 980px; }
    .includedBox{ max-width: 980px; }
    .priceDesc{ min-height: auto; }
  }
  /* Avlopp: Vår process */
.drainProcess{
    padding: 34px 0 70px;
    background:#fff;
  }
  
  .drainProcess__title{
    text-align:center;
    margin: 0 0 18px;
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 900;
    letter-spacing: -0.35px;
    color:#111;
  }
  
  /* Cards */
  .procCard{
    background:#fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .procCard--wide{
    max-width: 760px;
    margin: 0 auto 16px;
  }
  
  .procCard h3{
    margin: 0 0 10px;
    font-size: 12.8px;
    font-weight: 900;
    color:#111;
  }
  
  .procCard p{
    margin: 0 0 10px;
    color:#6a6a6a;
    font-size: 12.8px;
    line-height: 1.75;
  }
  .procCard p:last-child{ margin-bottom: 0; }
  
  .procGrid{
    max-width: 760px;
    margin: 0 auto;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  
  .procSmall{
    margin: 0 0 10px !important;
    color:#6a6a6a;
    font-size: 12.8px;
  }
  
  .procList{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    gap: 10px;
    color:#5a5a5a;
    font-size: 12.8px;
  }
  
  .procList li{
    display:flex;
    gap: 10px;
    align-items:flex-start;
  }
  
  .procCheck{
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display:inline-grid;
    place-items:center;
    flex: 0 0 16px;
    background: rgba(46,164,79,.10);
    color: var(--green);
    border: 1px solid rgba(46,164,79,.25);
    font-size: 11px;
    line-height: 1;
    margin-top: 1px;
  }
  
  /* Image */
  .procImage{
    max-width: 760px;
    margin: 18px auto 0;
    border-radius: 14px;
    overflow:hidden;
    background:#f2f2f2;
    box-shadow: 0 14px 26px rgba(0,0,0,.06);
    aspect-ratio: 16 / 9;
  }
  .procImage img{
    width:100%;
    height:100%;
    object-fit: cover;
  }
  
  /* Ljusgrön ruta */
  .procBenefitBox{
    max-width: 760px;
    margin: 18px auto 0;
    background: rgba(46,164,79,.06);
    border: 1px solid rgba(46,164,79,.18);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,.04);
  }
  
  .procBenefitBox h3{
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 900;
    color:#111;
  }
  
  .procBenefitBox p{
    margin: 0 0 10px;
    color:#6a6a6a;
    font-size: 12.8px;
    line-height: 1.75;
  }
  .procBenefitBox p:last-child{ margin-bottom: 0; }
  
  /* Responsive */
  @media (max-width: 860px){
    .procGrid{ grid-template-columns: 1fr; max-width: 980px; }
    .procCard--wide,
    .procImage,
    .procBenefitBox{ max-width: 980px; }
  }
  /* =========================
   OM OSS (i samma stil)
   ========================= */

.aboutIntro{
  padding: 34px 0 70px;
  background:#fff;
}

.aboutIntro__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:center;
}

.aboutIntro__text h2{
  margin: 0 0 10px;
}

.aboutFacts{
  list-style:none;
  padding:0;
  margin: 18px 0 0;
  display:grid;
  gap: 12px;
  color:#3a3a3a;
  font-weight: 600;
}

.aboutFacts li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.aboutFactIcon{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:inline-grid;
  place-items:center;
  flex: 0 0 18px;
  background: rgba(46,164,79,.10);
  color: var(--green);
  border: 1px solid rgba(46,164,79,.25);
  font-size: 12px;
  line-height: 1;
  margin-top: 2px;
}

.aboutIntro__image{
  border-radius: 14px;
  overflow:hidden;
  background:#f2f2f2;
  box-shadow: 0 14px 26px rgba(0,0,0,.06);
  aspect-ratio: 16 / 10;
}
.aboutIntro__image img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* Values */
.aboutValues{
  padding: 34px 0 70px;
  background:#fff;
}

.aboutHead{
  text-align:center;
  margin-bottom: 18px;
}

.aboutHead h2{
  margin:0 0 8px;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 900;
  letter-spacing: -0.35px;
  color:#111;
}

.aboutHead p{
  margin:0;
  color:#6a6a6a;
  font-size: 14.5px;
}

.aboutCards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 20px;
}

.aboutCard{
  border:1px solid #ececec;
  border-radius: 12px;
  background:#fff;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.04);
  min-height: 160px;
}

.aboutIcon{
  width: 34px;
  height: 34px;
  color: var(--green);
  margin-bottom: 12px;
}
.aboutIcon svg{ width:100%; height:100%; }

.aboutCard h3{
  margin:0 0 10px;
  font-size: 16px;
  font-weight: 900;
  color:#111;
}

.aboutCard p{
  margin:0;
  color:#6a6a6a;
  font-size: 14.5px;
  line-height: 1.7;
}

/* Steps */
.aboutSteps{
  padding: 34px 0 70px;
  background:#fff;
}

.aboutCenterTitle{
  text-align:center;
  margin: 0 0 18px;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 900;
  letter-spacing: -0.35px;
  color:#111;
}

.aboutSteps__grid{
  max-width: 980px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.stepCard{
  border: 1px solid #ececec;
  border-radius: 12px;
  background:#fff;
  padding: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.04);
}

.stepTop{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

.stepNo{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:inline-grid;
  place-items:center;
  background: rgba(46,164,79,.10);
  color: var(--green);
  border: 1px solid rgba(46,164,79,.25);
  font-weight: 900;
  font-size: 13px;
}

.stepCard h3{
  margin:0;
  font-size: 14px;
  font-weight: 900;
  color:#111;
}

.stepCard p{
  margin:0;
  color:#6a6a6a;
  font-size: 12.8px;
  line-height: 1.75;
}

/* Ljusgrön notis (som dina andra) */
.aboutNote{
  max-width: 980px;
  margin: 18px auto 0;
  background: rgba(46,164,79,.06);
  border: 1px solid rgba(46,164,79,.18);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.04);
}

.aboutNote h3{
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 900;
  color:#111;
}

.aboutNote p{
  margin:0;
  color:#6a6a6a;
  font-size: 12.8px;
  line-height: 1.75;
}

/* Responsive */
@media (max-width: 1020px){
  .aboutCards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .aboutIntro__grid{ grid-template-columns: 1fr; }
  .aboutSteps__grid{ grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 520px){
  .aboutCards{ grid-template-columns: 1fr; }
}