/* Lima Produkter AB: limaprodukter.se
   Färger och typografi enligt Lima minimanual 22.10 (Jesper Holm Designstudio). */

@font-face{
  font-family:'Switzer';
  src:url('../fonts/Switzer-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root{
  --ground:#ffffff;
  --surface:#f2f8f4;
  --ink:#101813;
  --muted:#55645b;
  --green:#009641;
  --green-deep:#00753a;
  --green-tint:#e3f3ea;
  --yellow:#fff041;
  --line:#dbe6de;
  --shape-wash:#009641;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#0e1411;--surface:#151d17;--ink:#eef4ef;--muted:#9db0a4;
  --green:#1fae5c;--green-deep:#4cc580;--green-tint:#14271b;
  --yellow:#fff041;--line:#263229;--shape-wash:#1fae5c;
}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 1.0625rem/1.65 'Switzer',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
h1,h2,h3{font-weight:500;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:var(--green-deep)}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.eyebrow{font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep)}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;
  padding:.7rem 1.2rem;z-index:100;font-weight:500;text-decoration:none}
.skip:focus{left:0}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:2rem;height:4.25rem;position:relative}
.nav .logo{height:1.55rem;width:auto;display:block;color:var(--ink)}
.nav nav{margin-left:auto;display:flex;gap:1.75rem;align-items:center}
.nav nav a{text-decoration:none;color:var(--ink);font-size:.95rem}
.nav nav a:hover{color:var(--green-deep)}
.nav .cta{background:var(--green);color:#fff;padding:.55rem 1.1rem;border-radius:999px;font-weight:500}
.nav .cta:hover{opacity:.85}
.menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);
  border-radius:10px;padding:.5rem .65rem;cursor:pointer;color:var(--ink)}
.menu-btn svg{display:block;width:1.3rem;height:1.3rem}
@media(max-width:640px){
  .menu-btn{display:block}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--ground);
    border-bottom:1px solid var(--line);padding:.5rem 0 1rem}
  .nav nav.open{display:flex}
  .nav nav a{padding:.8rem clamp(1.25rem,4vw,2.5rem);font-size:1.05rem}
  .nav nav .cta{margin:.6rem clamp(1.25rem,4vw,2.5rem) 0;text-align:center;border-radius:12px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero .shape-bg{position:absolute;right:-12%;top:-30%;width:52%;min-width:340px;
  color:var(--shape-wash);opacity:.07;pointer-events:none}
@media(max-width:640px){.hero .shape-bg{top:1.25rem}}
.hero .in{position:relative;padding-top:clamp(3.5rem,9vw,7rem);padding-bottom:clamp(3rem,7vw,5.5rem)}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.8rem);max-width:15em}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .lead{margin-top:1.6rem;font-size:clamp(1.1rem,1.8vw,1.3rem);color:var(--muted);max-width:32em}
.hero .eyebrow{display:block;margin-bottom:1.3rem}
.actions{display:flex;gap:.9rem;margin-top:2.4rem;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:500;padding:.8rem 1.5rem;border-radius:999px}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{opacity:.85}
.btn-ghost{color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--green)}
.hero .ticker{position:relative;display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;margin-top:clamp(2.5rem,6vw,4.5rem);
  padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.hero .ticker b{color:var(--ink);font-weight:500}

/* ---------- sections ---------- */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.sec-head{max-width:38em;margin-bottom:clamp(1.75rem,4vw,3rem)}
.sec-head .eyebrow{display:block;margin-bottom:.8rem}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.sec-head p{margin-top:1rem;color:var(--muted);font-size:1.1rem}

/* produkt */
.prod{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.prod>*{min-width:0}
@media(max-width:860px){.prod{grid-template-columns:minmax(0,1fr)}}
.product-difference{margin-bottom:1.4rem;padding-left:1rem;border-left:3px solid var(--yellow)}
.product-difference .difference-label{color:var(--green-deep)}
.product-difference>p:last-child{margin-top:.45rem;color:var(--muted);font-size:1rem;max-width:38em}
.plist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.plist li{display:grid;grid-template-columns:2.1rem 1fr;gap:1rem;padding:1.35rem 0;border-bottom:1px solid var(--line)}
.plist .icon{width:1.7rem;height:1.7rem;color:var(--green);margin-top:.15rem}
.plist h3{font-size:1.1rem;margin-bottom:.3rem}
.plist p{color:var(--muted);font-size:.98rem}
figure{margin:0}
.product-photo{position:sticky;top:5.5rem;border-radius:16px;overflow:hidden;background:var(--green-tint)}
.product-photo img{display:block;width:100%;height:auto;aspect-ratio:1060/642;object-fit:cover}
.product-photo figcaption,.video-card figcaption,.founder-photo figcaption{
  padding:.8rem 1rem;font-size:.8rem;color:var(--muted);background:var(--surface)}
@media(max-width:860px){
  .product-photo{position:static;width:min(100%,340px);margin-inline:auto}
}

/* EU-krav och konstruktionsfördel */
.standards{background:#006f38;color:#fff}
.standards-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2.5rem,7vw,6.5rem);align-items:start}
.standards-grid>*{min-width:0}
.standards .eyebrow{color:#b9efcf}
.standards-intro h2{font-size:clamp(2rem,4vw,3.2rem);margin-top:.8rem;max-width:12em}
.standards-intro>p{margin-top:1.25rem;color:#d9eee2;max-width:35em;font-size:1.08rem}
.regulation-points{display:grid;gap:0;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:clamp(1.4rem,3.5vw,2.3rem)}
.regulation-points>div{display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:1rem;
  padding-top:1rem;border-top:1px solid rgba(255,255,255,.22)}
.regulation-points>div:first-child{padding-top:0;border-top:0}
.regulation-points>div+div{margin-top:1.25rem}
.regulation-number{grid-row:1/3;color:var(--yellow);font-size:.78rem;font-weight:650;
  letter-spacing:.08em;padding-top:.15rem}
.regulation-points h3{font-size:1rem;font-weight:550;letter-spacing:0}
.regulation-points>div>p:last-child{margin-top:.3rem;color:#d9eee2;font-size:.9rem;line-height:1.55;overflow-wrap:anywhere}
.standards-link{display:inline-block;margin-top:1.6rem;color:#fff;font-size:.86rem;font-weight:500;
  text-underline-offset:.25em;text-decoration-thickness:1px}
.standards-link:hover{color:var(--yellow)}
.difference-label{color:var(--yellow);font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
@media(max-width:820px){
  .standards-grid{grid-template-columns:minmax(0,1fr)}
}

/* gult statement-band (ur manualens designexempel) */
.statement{background:var(--yellow);color:#131a15;padding:clamp(3.5rem,8vw,6rem) 0}
.statement h2{font-size:clamp(1.9rem,4.6vw,3.4rem);max-width:17em}
.statement h2 em{font-style:normal;color:#00753a}
.statement .attr{margin-top:1.5rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#4a4a10;font-weight:500}

/* berättelse / film */
.story{background:var(--surface);border-bottom:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
  gap:clamp(2rem,7vw,6rem);align-items:center}
.story-copy h2{font-size:clamp(1.8rem,3.8vw,3rem);margin-top:.8rem;max-width:13em}
.story-copy>p{margin-top:1.2rem;color:var(--muted);max-width:34em;font-size:1.08rem}
.video-card{border-radius:16px;overflow:hidden;background:#090c0a;box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 13%,transparent)}
.video-card video{display:block;width:100%;height:auto;aspect-ratio:4/5;background:#000}
@media(max-width:760px){
  .story-grid{grid-template-columns:1fr}
  .video-card{width:min(100%,320px);margin:0 auto}
}

/* om oss */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.about-media{display:grid;gap:1.5rem}
.founder-photo{border-radius:16px;overflow:hidden;background:var(--surface)}
.founder-photo img{display:block;width:100%;height:auto;max-height:36rem;object-fit:cover;object-position:center 28%}
.about .facts{display:grid;border-top:1px solid var(--line);margin:0}
.about .fact{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.about .fact dt{color:var(--muted);margin:0}
.about .fact dd{margin:0;font-weight:500;text-align:right}
.about h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:1.2rem}
.about .body p{color:var(--muted);margin-bottom:1rem;max-width:36em}
@media(max-width:820px){
  .about{grid-template-columns:1fr}
  .founder-photo{width:min(100%,320px);margin-inline:auto}
  .founder-photo img{aspect-ratio:4/5;max-height:none}
}

/* kontakt */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
@media(max-width:820px){.contact .grid{grid-template-columns:1fr}}
.contact h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.contact .sub{margin-top:1rem;color:var(--muted)}
.chan{border-top:1px solid var(--line);display:grid}
.chan a,.chan .row{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);flex-wrap:wrap}
.chan .k{color:var(--muted)}
.chan .v{font-weight:500;text-align:right}
.chan a:hover .v{color:var(--green-deep)}

/* footer */
footer{background:#0c110e;color:#e8efe9;padding:3rem 0 2.5rem}
footer .top{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
footer .logo{height:1.5rem;width:auto;color:#fff}
footer .tag{font-size:.85rem;letter-spacing:.13em;text-transform:uppercase;color:#8fa697}
footer .legal{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #23302a;
  font-size:.88rem;color:#8fa697;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}

@media (prefers-reduced-motion:no-preference){
  .hero .in>*{animation:rise .55s ease both}
  .hero .in>*:nth-child(2){animation-delay:.06s}
  .hero .in>*:nth-child(3){animation-delay:.12s}
  .hero .in>*:nth-child(4){animation-delay:.18s}
  .hero .in>*:nth-child(5){animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}