:root{
  --bg:#e9eef2; --paper:#f7f9fa; --ink:#0f2233; --ink2:#27455f; --muted:#52667a;
  --signal:#f2b705; --green:#1f7a6d; --line:#c3d0da;
  --head:"Familjen Grotesk","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1300px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.65;color:var(--ink);background:var(--bg)}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);line-height:1.1;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 3rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}

/* buttons */
.btn{display:inline-block;background:var(--signal);color:var(--ink);font-family:var(--head);font-weight:700;font-size:1.05rem;padding:.9rem 1.7rem;border:2px solid var(--ink);text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-ghost{background:transparent}
.btn-small{padding:.55rem 1.1rem;font-size:.95rem;box-shadow:3px 3px 0 var(--ink)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-family:var(--head);font-weight:700;font-size:1.15rem;line-height:1.1}
.brand small{display:block;font-weight:500;font-size:.8rem;color:var(--muted)}
.nav{display:flex;align-items:center;gap:2rem}
.nav a:not(.btn){text-decoration:none;font-weight:500;padding:.25rem 0;background:linear-gradient(var(--signal),var(--signal)) 0 100%/0 3px no-repeat;transition:background-size .25s}
.nav a:not(.btn):hover{background-size:100% 3px}
.nav-toggle{display:none;width:44px;height:44px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;position:relative}
.nav-toggle span{position:absolute;left:10px;right:10px;height:3px;background:var(--ink);transition:transform .2s,top .2s}
.nav-toggle span:first-child{top:14px}.nav-toggle span:last-child{top:25px}
.nav-toggle[aria-expanded="true"] span:first-child{top:19px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{top:19px;transform:rotate(-45deg)}

/* hero */
.hero{padding:clamp(3rem,6vw,5.5rem) 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.tag{display:inline-block;background:var(--ink);color:#fff;font-weight:500;font-size:.9rem;padding:.3rem .8rem;margin-bottom:1.5rem}
.lead{font-size:1.2rem;color:var(--ink2);max-width:60ch;margin:1.6rem 0 2rem}
.actions{display:flex;flex-wrap:wrap;gap:1rem}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:2.5rem;margin:3rem 0 0;padding-top:1.5rem;border-top:2px solid var(--ink)}
.facts dt{font-size:.85rem;color:var(--muted)}
.facts dd{margin:0;font-weight:600}
.hero-art{margin:0;border:2px solid var(--ink);box-shadow:12px 12px 0 var(--green)}
.hero-art figcaption{background:var(--paper);padding:.7rem 1rem;font-size:.9rem;border-top:2px solid var(--ink)}
.wire{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.4s .3s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* strip */
.strip{background:var(--ink);color:#e9eef2}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.strip p{margin:0;padding:1.8rem 2rem;border-left:1px solid var(--ink2);font-size:.98rem}
.strip p:first-child{border-left:0;padding-left:0}
.strip strong{display:block;font-family:var(--head);font-size:1.2rem;color:var(--signal);margin-bottom:.2rem}

/* sections */
.section{padding:clamp(4rem,8vw,7.5rem) 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:3rem}
.sec-head p{color:var(--ink2);margin:0}

/* about */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.about-head{position:sticky;top:110px}
.img-block{margin-top:2rem;border:2px solid var(--ink)}
.img-block span{display:block;padding:.6rem .9rem;font-size:.85rem;color:var(--muted);background:var(--paper);border-top:2px solid var(--ink)}
.big{font-family:var(--head);font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.35;font-weight:500}
.mini-panels{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.5rem;border:2px solid var(--ink);background:var(--paper)}
.mini-panels div{padding:1.4rem;border-left:2px solid var(--ink)}
.mini-panels div:first-child{border-left:0}
.mini-panels h3{font-size:1.05rem;margin-bottom:.5rem}
.mini-panels p{font-size:.94rem;color:var(--ink2);margin:0}

/* services */
.services{background:var(--paper);border-block:2px solid var(--ink)}
.svc-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.svc{display:grid;grid-template-columns:80px 1.4fr 1fr;gap:2rem;align-items:center;padding:2rem .5rem;border-bottom:1px solid var(--line);transition:background .2s,padding-left .25s}
.svc:hover{background:var(--bg);padding-left:1.5rem}
.ico{width:64px;height:64px}
.svc-main p{margin:.5rem 0 0;color:var(--ink2);max-width:62ch}
.svc-pts{list-style:none;margin:0;padding:0 0 0 1.5rem;border-left:3px solid var(--signal)}
.svc-pts li{padding:.2rem 0;font-weight:500;font-size:.96rem}

/* why */
.why{background:var(--green);color:#fff}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem)}
.why-head p{margin:1.2rem 0 2rem;color:#d9efe9;max-width:44ch}
.why .btn{color:var(--ink)}
.why-list{list-style:none;margin:0;padding:0;counter-reset:w}
.why-list li{padding:1.4rem 0 1.4rem 4rem;border-top:1px solid rgba(255,255,255,.35);position:relative}
.why-list li:last-child{border-bottom:1px solid rgba(255,255,255,.35)}
.why-list li::before{counter-increment:w;content:counter(w);position:absolute;left:0;top:1.35rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;background:var(--signal);color:var(--ink);font-family:var(--head);font-weight:700}
.why-list p{margin:.35rem 0 0;color:#d9efe9}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps li{padding:0 1.5rem 0 0;position:relative}
.steps li::before{content:"";position:absolute;top:21px;left:46px;right:0;height:2px;background:var(--ink)}
.steps li:last-child::before{display:none}
.steps span{position:relative;display:grid;place-items:center;width:44px;height:44px;background:var(--ink);color:var(--signal);font-family:var(--head);font-weight:700;margin-bottom:1.2rem}
.steps p{color:var(--ink2);margin:.4rem 0 0}

/* contact */
.contact{background:var(--ink);color:#e9eef2}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.contact-info p{color:#b9c9d6;max-width:46ch;margin-top:1rem}
address{font-style:normal;margin:2rem 0;padding:1.4rem;border-left:4px solid var(--signal);background:rgba(255,255,255,.05);line-height:1.8}
.mail{display:grid;gap:.1rem;margin:1rem 0 0}
.mail span{font-size:.85rem;color:#8fb4cf}
.mail a{color:var(--signal);font-weight:600;font-size:1.15rem}
.form{background:var(--paper);color:var(--ink);padding:clamp(1.5rem,3vw,2.5rem);border:2px solid var(--signal)}
.field{margin-bottom:1.2rem}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;font:inherit;padding:.8rem .9rem;border:2px solid var(--ink2);background:#fff;color:var(--ink);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--signal);outline-offset:0}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#b3261e}
.err{display:block;min-height:1.2rem;color:#b3261e;font-size:.88rem;margin-top:.25rem}
.form-status{margin:1rem 0 0;font-weight:600;color:var(--green)}

/* footer */
.footer{background:var(--paper);border-top:2px solid var(--ink);padding-top:3rem;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-grid p{color:var(--ink2);margin:.4rem 0 0}
.foot-grid nav a{display:block;text-decoration:none;margin-bottom:.2rem}
.foot-grid a:hover{text-decoration:underline}
.copy{margin-top:2.5rem;padding:1.2rem 0;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}

/* reveal (set by JS only) */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.js .reveal.in{opacity:1;transform:none}

/* responsive */
@media (max-width:1000px){
  .hero-grid,.about-grid,.why-grid,.contact-grid,.sec-head{grid-template-columns:1fr}
  .about-head{position:static}
  .hero-art{max-width:520px}
  .svc{grid-template-columns:64px 1fr}
  .svc-pts{grid-column:2;padding-left:1rem}
  .steps{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .steps li:nth-child(2)::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);border-bottom:2px solid var(--ink);padding:.5rem 1.5rem 1.5rem;display:none}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:.8rem 0;width:100%;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:1rem}
  .facts{grid-template-columns:1fr;gap:1rem}
  .strip-grid{grid-template-columns:1fr}
  .strip p{border-left:0;border-top:1px solid var(--ink2);padding:1.2rem 0}
  .strip p:first-child{border-top:0}
  .mini-panels{grid-template-columns:1fr}
  .mini-panels div{border-left:0;border-top:2px solid var(--ink)}
  .mini-panels div:first-child{border-top:0}
  .svc{grid-template-columns:1fr;gap:1rem}
  .svc-pts{grid-column:auto}
  .steps{grid-template-columns:1fr}
  .steps li::before{display:none}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wire{animation:none;stroke-dashoffset:0}
  .js .reveal{opacity:1;transform:none;transition:none}
}