:root{
  --teal:#39f0cf; --teal-soft:#c9fbf1; --ink:#33383d; --grey:#8a9096;
  --stone:#eceeee; --white:#fff;
  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --body:"Nunito Sans","Avenir Next",Avenir,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font:300 1.125rem/1.65 var(--body);color:var(--ink);background:var(--white);padding-right:28px}
body::after{content:"";position:fixed;inset:0 0 0 auto;width:28px;background:var(--teal)}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.14em;line-height:1.15}
h1{font-size:clamp(2.2rem,6vw,4.4rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem);margin-bottom:1.25rem}
h3{font-size:1rem;letter-spacing:.1em;margin-bottom:.5rem}
p{max-width:62ch}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
section{padding:clamp(4rem,9vw,7rem) 0}

/* Header */
header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--stone)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:4rem}
.logo{font-family:var(--display);text-decoration:none;letter-spacing:.14em;font-size:1.05rem}
.logo span{color:var(--grey)}
nav{display:flex;gap:1.75rem;align-items:center}
nav a{text-decoration:none;font-size:1rem;font-weight:400}
nav a:hover{text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:3px;text-underline-offset:6px}
.btn{display:inline-block;background:var(--ink);color:var(--white);padding:.85rem 1.6rem;text-decoration:none;font-weight:700;border:2px solid var(--ink)}
.btn:hover{background:var(--teal);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--white)}
nav .btn{padding:.5rem 1.1rem}

/* Hero: teal circle cut by a striped concrete slab, as in the deck cover */
.hero{position:relative;overflow:hidden;padding:clamp(4rem,10vw,8rem) 0 clamp(9rem,18vw,14rem)}
.hero .kicker{font-weight:300;letter-spacing:.3em;text-transform:uppercase;font-size:.95rem;margin-bottom:1rem}
.hero h1{max-width:12ch}
.hero p.lead{margin:1.75rem 0 2.25rem;font-size:1.3rem;max-width:44ch}
.hero .cta{display:flex;gap:1rem;flex-wrap:wrap;position:relative;z-index:2}
.hero .wrap{position:relative;z-index:2}
.circle{position:absolute;width:min(56vw,520px);aspect-ratio:1;border-radius:50%;background:var(--teal);right:8%;bottom:-8%;z-index:0}
.slab{position:absolute;right:-6%;bottom:-2rem;width:min(46vw,460px);height:min(56vw,540px);z-index:1;
  clip-path:polygon(0 22%,100% 0,100% 100%,0 100%);
  background:repeating-linear-gradient(-16deg,#a9adb0 0 26px,#8f9396 26px 28px)}
@media(max-width:760px){.circle{right:-20%;width:90vw}.slab{width:70vw;right:-12%}}

/* Intro band */
.band{background:var(--stone)}
.band .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.stats{display:grid;gap:1.5rem}
.stats div{border-left:6px solid var(--teal);padding-left:1.25rem}
.stats strong{display:block;font-family:var(--display);font-weight:400;font-size:2rem;letter-spacing:.06em}
.about p+p{margin-top:1rem}

/* Services */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.5rem 2rem;margin-top:2.5rem}
.grid article{border-top:3px solid var(--ink);padding-top:1.1rem}
.grid article p{font-size:1.02rem}
.benefits{margin-top:4rem;display:flex;flex-wrap:wrap;gap:.75rem}
.benefits li{list-style:none;background:var(--teal-soft);padding:.55rem 1.1rem;font-weight:400}

.private{margin-top:4rem;border-left:6px solid var(--teal);padding:.25rem 0 .25rem 1.5rem}
.private p{margin-bottom:1.25rem}

/* Why us */
.why{background:var(--ink);color:var(--white)}
.why h2{color:var(--white)}
.why ul{list-style:none;padding:0;margin-top:2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem 3rem}
.why li{padding:1rem 0;border-bottom:1px solid #545a60;display:flex;gap:1rem;align-items:baseline}
.why li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--teal)}

/* Offer */
.offer .box{position:relative;overflow:hidden;background:var(--teal);padding:clamp(2rem,6vw,4.5rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.offer .big{font-family:var(--display);font-size:clamp(4rem,12vw,8rem);line-height:1;letter-spacing:.02em}
.offer p{margin:.5rem 0 1.5rem}
@media(max-width:640px){.offer .box,.band .cols{grid-template-columns:1fr}}

/* Founders */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;margin-top:2.5rem}
.person{display:flex;gap:1.25rem}
.avatar{flex:none;width:72px;height:72px;border-radius:50%;background:var(--stone);display:grid;place-items:center;font-family:var(--display);letter-spacing:.06em;border:3px solid var(--teal)}
.role{color:var(--grey);font-weight:400;margin-bottom:.4rem}

/* Contact */
.contact{background:var(--stone)}
.contact dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;margin:2.5rem 0}
.contact dt{font-weight:700;margin-bottom:.25rem}
.contact dd{margin:0}
.contact dd a{font-size:1.3rem;font-weight:400}
.contact small{display:block;color:#5c6268;margin-top:.3rem;font-size:.95rem}

footer{padding:2rem 0;font-size:.95rem;color:#5c6268}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media(max-width:820px){nav a:not(.btn){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Tjänstesida */
.pagehead{padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,3rem);position:relative;overflow:hidden}
.pagehead p{font-size:1.25rem;margin-top:1rem}
.pagehead .circle{width:min(36vw,320px);right:6%;bottom:auto;top:-20%}
.group{padding:clamp(2.5rem,6vw,4.5rem) 0;border-top:1px solid var(--stone)}
.group .intro{margin-bottom:.5rem}
.list{display:grid;gap:0;margin-top:1.5rem}
.item{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:1rem 3rem;padding:1.5rem 0;border-top:3px solid var(--ink)}
.item+.item{margin-top:1.5rem}
.item h3{margin:0}
.item p{font-size:1.02rem}
.item ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:1rem}
.note{margin-top:2rem;background:var(--teal-soft);padding:1.25rem 1.5rem;max-width:70ch;font-size:1rem}
.more{margin-top:2.5rem}
@media(max-width:700px){.item{grid-template-columns:1fr}}