/* Kolibrigruppen – statisk återskapning av Squarespace-sidan */
@import url("fonts.css");

:root{
  --dark:#272725;          /* sektionsbakgrund (dark / dark-bold) */
  --white:#fff;
  --text:#fff;
  --muted:#949189;         /* inaktiv nav-länk på mörk bakgrund */
  --font:"Poppins",sans-serif;
  --heading:"Archivo","Acumin Pro","Helvetica Neue",Arial,sans-serif; /* Acumin Pro (Adobe) ersatt med Archivo */
  --fs:clamp(16px, calc(14.1px + .55vw), 22px);
  --pad:3vw;               /* 43px vid 1440 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:300;font-size:var(--fs);line-height:1.8;color:var(--text);background:var(--dark)}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:600}
.large{font-size:1.393em;line-height:1.8;margin-bottom:1em}
.small{font-size:.9215em}
.center{text-align:center}.right{text-align:right}
h3{font-family:var(--heading);font-weight:500;font-size:1.9425em;line-height:1.333;margin:0 0 .5em}
h3 strong{font-weight:700}

/* ---------- Header ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:10;text-align:center;padding:26px var(--pad) 0}
.logo{display:inline-block}
.logo img{width:598px;max-width:42vw;height:auto}
.nav{max-width:690px;margin:26px auto 0;display:flex;flex-wrap:wrap;justify-content:center;line-height:1.8}
.nav a{margin:0 34.5px;padding:2px 0;text-decoration:none;color:#fff;font-size:var(--fs);position:relative}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor}
.on-dark-plain .nav a{color:var(--muted)}
.on-dark-plain .nav a[aria-current="page"]{color:var(--muted)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:34px;height:1px;background:#fff;margin:9px 0;transition:transform .3s,opacity .3s}
.mobile-menu{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;background:#000 center/cover no-repeat;padding:355px var(--pad) 95px;min-height:var(--h)}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15)}
.hero>*{position:relative}
.hero .inner{width:100%}
.hero.indent p{margin-left:80px}
.spacer-top{height:312px}

/* ---------- Sections ---------- */
.section{background:var(--dark);padding:48px var(--pad)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--pad)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.quotes{padding:79px 26px 60px;gap:0}
.quotes .quote{padding:0 17px}
.quote p em{font-style:italic}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:43px var(--pad)}
.gallery.wide{gap:36px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* koncept cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;padding:48px 26px 60px}
.card img{width:100%;aspect-ratio:694/457;object-fit:cover;padding:0 17px}
.card .txt{padding:34px 17px 0}
.card h3{margin-bottom:.6em}

/* boka */
.contact a{text-decoration:none}
.contact{display:grid;grid-template-columns:578px 1fr;gap:0 116px;padding:48px var(--pad) 95px}
.form label{display:block;margin:0 0 .3em;font-size:.8em}
.form input,.form textarea{width:100%;font:inherit;font-size:.8em;padding:12px;border:1px solid #a9a9a9;background:#fafafa;color:#000;border-radius:0;margin-bottom:1em}
.form textarea{min-height:120px}
.form button{font:inherit;font-weight:500;font-size:.8em;background:#fff;color:#000;border:0;padding:1em 2.2em;cursor:pointer}
.form .req{opacity:.7;font-size:.8em}
.form .note{font-size:.7em;opacity:.7;margin-top:1em}

/* samarbeten */
.partners-head{padding:366px var(--pad) 0}
.partners{display:grid;grid-template-columns:repeat(3,330px);justify-content:center;column-gap:68px;row-gap:11px;padding:51px var(--pad) 100px}
.partners div{height:270px;display:flex;align-items:center;justify-content:center}
.partners img{max-width:100%;max-height:100%;object-fit:contain}

/* sagt om oss */
.tm-head{padding-top:48px}
.tm-row{display:grid;grid-template-columns:1fr 1fr;gap:0 68px;padding:48px 100px;align-items:center}

/* ---------- Footer ---------- */
.site-footer{background:#fff;color:#000;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:14px var(--pad) 29px;min-height:99px}
.site-footer .social a{display:inline-block;width:32px;height:32px;color:#fff}
.site-footer .social svg{width:100%;height:100%;fill:currentColor}
.site-footer p{text-align:center}

/* ---------- Mobil ---------- */
@media (max-width:767px){
  :root{--pad:6vw}
  .site-header{display:flex;justify-content:space-between;align-items:center;padding:23px 23px 0;text-align:left}
  .logo img{width:262px;max-width:70vw}
  .nav{display:none}
  .burger{display:block}
  body.menu-open{overflow:hidden}
  .mobile-menu{position:fixed;inset:0;z-index:9;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;opacity:0;visibility:hidden;transition:opacity .3s}
  .mobile-menu a{color:#fff;text-decoration:none;font-size:1.6em}
  body.menu-open .mobile-menu{opacity:1;visibility:visible}
  body.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
  .hero{padding:139px 23px 59px;min-height:var(--hm)}
  .hero.indent p{margin-left:0}
  .grid-3,.grid-2,.cards,.contact,.tm-row{grid-template-columns:1fr}
  .quotes{padding:40px 23px}
  .quotes .quote{padding:0;margin-bottom:2.5em}
  .gallery,.gallery.wide{grid-template-columns:1fr 1fr;gap:12px;padding:30px 12px}
  .cards{padding:30px 6px}
  .card{margin-bottom:2em}
  .contact{padding:30px 23px;gap:2em}
  .partners-head{padding-top:160px}
  .partners{grid-template-columns:1fr;padding:30px 23px}
  .partners div{height:200px}
  .tm-row{padding:24px 23px;gap:2.5em}
  .site-footer{grid-template-columns:1fr;padding:18px 23px;text-align:center}
  .site-footer .social{display:none}
}

/* ---------- Språkval (flaggor) ---------- */
.lang{position:absolute;top:14px;right:var(--pad);display:flex;gap:8px;z-index:11}
.lang a{display:block;width:24px;height:16px;line-height:0;opacity:.55;transition:opacity .2s,transform .2s;outline-offset:2px}
.lang a svg{width:100%;height:100%;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.lang a:hover,.lang a:focus-visible{opacity:1;transform:translateY(-1px)}
.lang a.active{opacity:1}
.lang a.active svg{box-shadow:0 0 0 2px #fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:767px){.lang{top:6px;right:23px;gap:6px}.lang a{width:21px;height:14px}}