/* EL Ledarna — shared stylesheet (base reset, hover, responsive, form).
   Per-element look stays in inline styles for fidelity; this file adds
   interaction states and responsive behaviour via utility classes. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#F6F4F1}
::selection{background:#D24A2A;color:#fff}
img{max-width:100%}
a{transition:color .15s ease,background .15s ease,border-color .15s ease}
:focus-visible{outline:2px solid #D24A2A;outline-offset:2px}
[id]{scroll-margin-top:90px}

/* ---- hover / interaction ---- */
.btn-primary:hover{background:#B83C1E !important}
.btn-ghost-light:hover{background:rgba(255,255,255,.16) !important}
.cta-ghost:hover{background:rgba(255,255,255,.12) !important}
.svc-card{transition:border-color .15s ease,transform .18s ease,box-shadow .2s ease}
.svc-card:hover{border-color:#D24A2A !important;transform:translateY(-3px);box-shadow:0 14px 32px rgba(35,34,32,.10)}
.card-link:hover{text-decoration:underline}
.nav-links a:hover{color:#D24A2A !important}
.footer-grid a:hover{color:#D24A2A !important}
.list-row{transition:background .15s ease}
a[aria-current="page"]{color:#D24A2A !important;font-weight:600}

/* ---- nav hamburger (no-JS, checkbox toggle) ---- */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:none;cursor:pointer;width:42px;height:42px;border:1px solid #E4E0DA;border-radius:6px;align-items:center;justify-content:center;background:#fff}
.nav-burger-ic{position:relative;width:18px;height:2px;background:#232220;border-radius:2px}
.nav-burger-ic::before,.nav-burger-ic::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#232220;border-radius:2px}
.nav-burger-ic::before{top:-6px}
.nav-burger-ic::after{top:6px}
.nav-mobile{display:none}
.nav-mobile a{display:block;padding:14px 32px;font-size:16px;font-weight:500;color:#232220;text-decoration:none;border-top:1px solid #ECE8E2}
.nav-mobile a:first-child{border-top:none}
.nav-mobile a:hover{background:#EFEDE9}

/* ---- fluid headings ---- */
.hero-h1{font-size:clamp(34px,6.4vw,62px) !important}
.page-h1{font-size:clamp(32px,5.4vw,54px) !important}
.h2{font-size:clamp(27px,4.4vw,38px) !important}
.h2-lg{font-size:clamp(30px,5.2vw,44px) !important}

/* ---- form fields (Kontakt) ---- */
.elf{width:100%;font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:#232220;background:#fff;border:1px solid #D8D3CB;border-radius:4px;padding:13px 14px;outline:none}
.elf:focus{border-color:#D24A2A;box-shadow:0 0 0 3px rgba(210,74,42,.12)}
.elf::placeholder{color:#a9a399}

/* ---- responsive ---- */
@media(max-width:900px){
  .nav-links{display:none !important}
  .nav-phone{display:none !important}
  .nav-burger{display:flex !important}
  #navtoggle:checked ~ .nav-mobile{display:block !important}
  .nav-bar{padding-left:20px !important;padding-right:20px !important}
}
@media(max-width:1024px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr) !important}
  .grid-services{grid-template-columns:repeat(2,1fr) !important}
  .grid-5{grid-template-columns:repeat(3,1fr) !important}
  .footer-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:860px){
  .split-grid{grid-template-columns:1fr !important}
  .vd-grid{grid-template-columns:1fr !important}
  .cta-grid{grid-template-columns:1fr !important}
  .form-grid{grid-template-columns:1fr !important}
}
@media(max-width:760px){
  .wrap{padding-left:20px !important;padding-right:20px !important}
  .grid-2,.grid-3,.grid-4,.grid-5,.grid-services,.footer-grid{grid-template-columns:1fr !important}
  .ref-logos{grid-template-columns:repeat(2,1fr) !important}
  .vd-portrait{min-height:240px !important}
  .hero{min-height:520px !important}
  .hero-inner{max-width:none !important}
  .vd-text{padding:36px 0 44px !important}
  .list-row{grid-template-columns:1fr !important;gap:6px !important}
}