
:root{
  --ink:#171915;
  --muted:#5e655c;
  --paper:#f4f1e8;
  --white:#fffdf7;
  --green:#273728;
  --green2:#43573a;
  --sand:#c7aa72;
  --rust:#8c4d2f;
  --line:#ded6c7;
  --shadow:0 18px 45px rgba(23,25,21,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif;line-height:1.55;font-size:18px}
a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.site-header{position:sticky;top:0;z-index:50;background:rgba(244,241,232,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}

.nav{

    max-width:1180px;

    margin:0 auto;

    padding:10px 22px;

    display:flex;

    align-items:center;

    gap:30px;

}
.brand{

    flex:0 0 auto;

}
.brand:hover{text-decoration:none}
.brand-logo{

    height:60px;

    width:auto;

    display:block;

}

.nav-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.nav-links{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}
.nav-links a:hover{color:var(--green2);text-decoration:none}

.hero{position:relative;min-height:72vh;display:grid;align-items:end;background:#111;overflow:hidden}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.18)),linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0) 45%);z-index:1}.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}.hero-content{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:110px 22px 70px;color:white}.eyebrow{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:14px;color:var(--sand);font-weight:700}
.hero h1{font-family:Arial,sans-serif;font-size:clamp(46px,8vw,112px);line-height:.92;letter-spacing:-.06em;margin:12px 0 18px;text-transform:uppercase}.lead{font-size:clamp(22px,3vw,34px);max-width:760px;line-height:1.25;margin:0 0 26px}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}.btn{display:inline-block;padding:13px 18px;border-radius:999px;background:var(--sand);color:#1b1b16;font-family:Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.btn.secondary{background:rgba(255,255,255,.14);color:white;border:1px solid rgba(255,255,255,.42)}
main{display:block}.section{padding:72px 22px}.wrap{max-width:1180px;margin:0 auto}.grid{display:grid;gap:28px}.grid.two{grid-template-columns:1.05fr .95fr}.grid.three{grid-template-columns:repeat(3,1fr)}

.btn.secondary.dark{

  background:transparent;

  color:var(--green);

  border:1px solid var(--green);

}

.grid.four{grid-template-columns:repeat(4,1fr)}
h2{font-family:Arial,sans-serif;font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;margin:0 0 22px;color:var(--green)}h3{font-family:Arial,sans-serif;font-size:24px;line-height:1.12;margin:0 0 12px;color:var(--green)}p{margin:0 0 18px}.muted{color:var(--muted)}
.card{background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.card-body{padding:24px}.card img{width:100%;height:260px;object-fit:cover}.card.small img{height:190px}.feature{background:var(--green);color:white}.feature h2,.feature h3{color:white}.feature .muted{color:#d8d0c0}.feature .card{background:#324632;border-color:rgba(255,255,255,.14);color:white;box-shadow:none}.feature a{color:white}
.kicker{font-family:Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--rust);margin-bottom:10px}.timeline{display:grid;gap:14px}.timeline-item{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:20px}.year{font-family:Arial,sans-serif;font-weight:900;color:#fff;background:var(--green);font-size:20px;line-height:1;padding:12px 14px;border-radius:999px;text-align:center;display:inline-block;min-width:96px;box-shadow:0 6px 16px rgba(23,25,21,.16)}.timeline-item h3,.timeline-item p{color:var(--ink)}.quote{font-size:27px;line-height:1.25;color:var(--green);border-left:6px solid var(--sand);padding-left:22px;margin:10px 0 22px}.image-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.image-pair img,.rounded{border-radius:22px;box-shadow:var(--shadow);object-fit:cover;width:100%}.image-pair img{height:330px}.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.badge{font-family:Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.06em;background:#e7dfcf;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--green);font-weight:800}.shop-embed{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.footer{background:#151814;color:#e9e2d2;padding:46px 22px}.footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer a{color:#e9e2d2}.footer small{color:#b7ad9b}.note{font-size:15px;color:var(--muted)}
@media (max-width:850px){body{font-size:17px}.nav{align-items:center;flex-direction:column;gap:12px;padding:12px 18px}.brand-logo{height:56px;max-width:210px}.nav-links{justify-content:center;gap:10px 14px}.nav-links a{font-size:13px}.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}.hero{min-height:68vh}.section{padding:52px 18px}.timeline-item{grid-template-columns:1fr}.year{margin-bottom:4px}.image-pair{grid-template-columns:1fr}.image-pair img{height:auto}.card img{height:auto}.hero h1{font-size:58px}}.nav{align-items:flex-start;flex-direction:column}.nav-links{justify-content:flex-start;gap:12px}.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}.hero{min-height:68vh}.section{padding:52px 18px}.timeline-item{grid-template-columns:1fr}.image-pair{grid-template-columns:1fr}.image-pair img{height:auto}.card img{height:auto}.hero h1{font-size:58px}}


/* Säkerhetsrad: loggan ska aldrig bli enorm i headern */
.site-header .brand-logo{
  height:64px !important;
  width:auto !important;
  max-width:220px !important;
  object-fit:contain !important;
}

/* Säkerhetsrad: årtalsrutor i tidslinjen */
.timeline .year{
  color:#fff !important;
  background:var(--green) !important;
}
