
/* Option 4 exact-style pillar integration */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.site-page .pelare-exakta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:start;
  margin-top:2.25rem;
}
.site-page .pelare-exakta .pillar-figure{
  margin:0;
  position:relative;
  transition:transform .24s ease, filter .24s ease;
  filter:drop-shadow(0 10px 18px rgba(36,34,27,.08));
}
.site-page .pelare-exakta .pillar-figure:hover{
  transform:translateY(-6px);
  filter:drop-shadow(0 14px 24px rgba(36,34,27,.10));
}
.site-page .pelare-exakta img{
  display:block;
  width:100%;
  height:auto;
}
.site-page .pelare-exakta--home{margin-bottom:.25rem}

.site-page .pelare-detaljer{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;
  margin-top:1.65rem;
}
.site-page .pelare-detaljer .pelare-text{
  background:linear-gradient(180deg, rgba(253,248,235,.9), rgba(248,242,229,.95));
  border:1px solid rgba(34,57,46,.12);
  border-radius:22px;
  padding:1.4rem 1.25rem 1.5rem;
  box-shadow:0 12px 24px rgba(37,35,29,.06);
}
.site-page .pelare-detaljer .pelare-text .eyebrow{margin-bottom:.55rem}
.site-page .pelare-detaljer .pelare-text h3{font-size:1.6rem;color:var(--cypress);margin-bottom:.8rem}
.site-page .pelare-detaljer .pelare-text p{font-size:1.02rem;line-height:1.7;color:#4d5146}
.site-page .pelare-detaljer .pelare-text p + p{margin-top:.85rem}

@media (max-width:980px){
  .site-page .pelare-exakta,
  .site-page .pelare-detaljer{grid-template-columns:1fr;gap:1rem}
  .site-page .pelare-exakta .pillar-figure,
  .site-page .pelare-detaljer .pelare-text{max-width:680px;width:100%;margin:0 auto}
}


/* Fine-tuning: tighter rhythm, centered CTA, and more native section integration */
.site-page #metoden{
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(31,33,26,.10);
  border-bottom:1px solid rgba(31,33,26,.10);
  background:
    radial-gradient(72rem 18rem at 50% -3rem, rgba(185,155,94,.10), transparent 58%),
    linear-gradient(180deg, rgba(229,219,204,.98) 0%, rgba(221,210,193,.98) 100%);
}
.site-page #metoden::before,
.site-page #metoden::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  pointer-events:none;
}
.site-page #metoden::before{
  top:0;
  height:100%;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 88% 22%, rgba(185,155,94,.05), transparent 22%),
    linear-gradient(transparent, transparent);
  opacity:.72;
}
.site-page #metoden::after{
  top:auto;
  bottom:0;
  height:7rem;
  background:linear-gradient(180deg, rgba(180,164,133,0), rgba(180,164,133,.08));
}
.site-page #metoden .inre{
  position:relative;
  z-index:1;
  padding-top:6.25rem;
  padding-bottom:6rem;
}
.site-page #metoden .smal{max-width:44rem}
.site-page .pelare-exakta{
  gap:clamp(1rem, 2vw, 1.7rem);
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  margin-top:2.35rem;
  justify-items:stretch;
}
.site-page .pelare-exakta .pillar-figure{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.site-page .pelare-exakta .pillar-figure img{
  border-radius:.2rem;
}
.site-page .pelare-exakta--home{margin-bottom:.15rem}
.site-page .pelare-detaljer{
  gap:1.1rem;
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
  margin-top:2rem;
}
.site-page .pelare-detaljer .pelare-text{
  border-radius:20px;
  border-color:rgba(34,57,46,.10);
  background:linear-gradient(180deg, rgba(255,251,244,.82), rgba(248,242,230,.92));
}
.site-page .pelarnot{
  margin-top:1.3rem;
  color:#5e6154;
}
.site-page.page-home #metoden .knappar{
  justify-content:center;
  margin-top:1.55rem;
}
.site-page.page-home #metoden .knapp{
  min-width:min(100%, 25rem);
  justify-content:center;
  background:rgba(244,236,223,.92);
  border-color:rgba(34,57,46,.26);
  box-shadow:0 8px 18px rgba(38,36,30,.07);
}
.site-page.page-home #metoden .knapp:hover{
  box-shadow:0 12px 24px rgba(38,36,30,.10);
}
@media (max-width:980px){
  .site-page #metoden .inre{
    padding-top:5rem;
    padding-bottom:4.6rem;
  }
  .site-page.page-home #metoden .knappar{margin-top:1.3rem}
}


/* Final polish: precise alignment, breathing room, and responsive tuning */
.site-page #metoden .eyebrow + h2{
  margin-bottom:1.15rem;
}
.site-page #metoden .smal p{
  font-size:1.08rem;
  line-height:1.72;
}
.site-page.page-home #metoden .smal,
.site-page.page-metoden #metoden .smal{
  margin-bottom:.35rem;
}
.site-page .pelare-exakta{
  align-items:stretch;
}
.site-page .pelare-exakta .pillar-figure{
  align-self:start;
}
.site-page .pelare-exakta .pillar-figure img{
  width:100%;
  max-width:100%;
}
.site-page.page-home .pelare-exakta .pillar-figure,
.site-page.page-metoden .pelare-exakta .pillar-figure{
  min-height:100%;
}
.site-page.page-home #metoden .knappar{
  margin-top:1.85rem;
}
.site-page.page-home #metoden .knapp{
  padding-inline:1.45rem;
}
.site-page.page-metoden .pelare-detaljer{
  margin-top:2.15rem;
}
.site-page.page-metoden .pelare-detaljer .pelare-text{
  min-height:100%;
}
.site-page.page-metoden .pelare-detaljer .pelare-text h3{
  line-height:1.16;
}
.site-page.page-metoden .pelare-detaljer .pelare-text p:last-child{
  margin-bottom:0;
}
@media (min-width:981px){
  .site-page.page-home #metoden .inre,
  .site-page.page-metoden #metoden .inre{
    max-width:1180px;
  }
  .site-page.page-home #metoden .smal,
  .site-page.page-metoden #metoden .smal{
    max-width:48rem;
  }
}
@media (max-width:1200px){
  .site-page .pelare-exakta{gap:1rem}
  .site-page .pelare-detaljer{gap:1rem}
}
@media (max-width:980px){
  .site-page #metoden .eyebrow + h2{margin-bottom:1rem}
  .site-page #metoden .smal{margin-bottom:.2rem}
  .site-page .pelare-exakta{
    gap:1.15rem;
    margin-top:1.8rem;
  }
  .site-page .pelare-exakta .pillar-figure,
  .site-page .pelare-detaljer .pelare-text{
    max-width:620px;
  }
  .site-page .pelare-detaljer{
    margin-top:1.5rem;
  }
  .site-page.page-home #metoden .knappar{
    margin-top:1.15rem;
  }
}
@media (max-width:760px){
  .site-page #metoden .inre{
    padding-top:4.5rem;
    padding-bottom:4.2rem;
  }
  .site-page #metoden .smal p{
    font-size:1rem;
    line-height:1.68;
  }
  .site-page .pelare-exakta{
    gap:1rem;
    margin-top:1.55rem;
  }
  .site-page .pelare-exakta .pillar-figure,
  .site-page .pelare-detaljer .pelare-text{
    max-width:540px;
  }
  .site-page .pelare-detaljer .pelare-text{
    padding:1.18rem 1rem 1.22rem;
    border-radius:18px;
  }
  .site-page .pelare-detaljer .pelare-text h3{
    font-size:1.42rem;
    margin-bottom:.65rem;
  }
  .site-page .pelare-detaljer .pelare-text p{
    font-size:.98rem;
    line-height:1.65;
  }
  .site-page.page-home #metoden .knapp{
    width:min(100%, 100%);
  }
}
@media (max-width:560px){
  .site-page #metoden .inre{
    padding-top:4rem;
    padding-bottom:3.7rem;
  }
  .site-page .pelare-exakta .pillar-figure,
  .site-page .pelare-detaljer .pelare-text{
    max-width:100%;
  }
  .site-page.page-home #metoden .knapp{
    font-size:.8rem;
    letter-spacing:.08em;
    padding:.95rem 1rem;
  }
  .site-page .pelarnot{
    font-size:.98rem;
    line-height:1.55;
  }
}
