:root { --svart:#000000; --gronn:#007A3D; --gronn-mork:#00602F; --gronn-lys:#E8F5ED; --gra:#F0F0F0; --gra-tekst:#707070; --font:"Inter",sans-serif; --maks:1216px; --luft:clamp(16px,7.8vw,112px); }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; font-family:var(--font); font-size:18px; line-height:1.6; letter-spacing:-0.01em; color:var(--svart); background:#fff; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
main { flex:1; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.wrap { width:100%; max-width:calc(var(--maks) + 2 * var(--luft)); margin-inline:auto; padding-inline:var(--luft); }
.section-heading { margin:0 0 24px; font-size:18px; font-weight:500; color:var(--gronn); }
.section-title { margin:0 0 40px; font-size:38px; line-height:1.2; font-weight:600; letter-spacing:-0.02em; color:var(--gronn); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.skip { position:absolute; left:16px; top:-60px; padding:8px 16px; background:var(--gronn); color:#fff; z-index:10; }
.skip:focus { top:8px; }
:focus-visible { outline:3px solid var(--gronn); outline-offset:3px; }
.card-green :focus-visible, .promise :focus-visible { outline-color:#fff; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:12px 24px; border:1px solid var(--gronn); border-radius:100px; background:var(--gronn); color:#fff; font:inherit; font-weight:500; cursor:pointer; }
.btn:hover { background:var(--gronn-mork); border-color:var(--gronn-mork); }
hr { border:0; border-top:1px solid var(--svart); margin:0 0 48px; }
.note { margin:32px 0 0; font-size:14px; color:var(--gra-tekst); }

/* Header */
.masthead { width:100%; max-width:914px; margin:64px auto 0; padding-inline:16px; display:flex; flex-direction:column; align-items:center; gap:56px; }
.masthead.compact { margin-top:40px; gap:32px; }
.menu { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 32px; }
.menu-link[aria-current] { text-decoration:underline; text-underline-offset:6px; }
.menu-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:0; padding:0; color:inherit; cursor:pointer; }
.masthead-logo { width:100%; }
.compact .masthead-logo { width:360px; }

/* Hero (forsiden) */
.hero { position:relative; margin-top:56px; }
.hero img { width:100%; aspect-ratio:1216/684; object-fit:cover; }
.subheadline { margin:64px auto 0; max-width:calc(840px + 2 * var(--luft)); font-size:clamp(24px,3vw,32px); font-weight:400; line-height:1.2; letter-spacing:-0.01em; color:var(--gronn); }

/* Sideoverskrift (undersider) */
.page-head { margin-top:72px; }
.page-head h1 { margin:0; font-size:clamp(40px,6vw,64px); line-height:1.05; font-weight:600; letter-spacing:-0.03em; }
.lead { margin:20px 0 0; max-width:840px; font-size:clamp(20px,2.4vw,28px); line-height:1.3; color:var(--gronn); }

/* Produkter, karusell (forsiden) */
.shop { margin-top:112px; }
.section-top { display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:24px; }
.section-top .section-heading { margin:0; }
.more-link { font-weight:500; white-space:nowrap; }
.more-link:hover { text-decoration:underline; text-underline-offset:4px; }
.carousel { display:flex; align-items:flex-start; gap:32px; overflow-x:auto; padding:0 var(--luft) 16px; padding-left:max(var(--luft), calc((100% - var(--maks)) / 2)); scroll-padding-left:max(var(--luft), calc((100% - var(--maks)) / 2)); scroll-snap-type:x proximity; }
.carousel:focus-visible { outline-offset:-3px; }
.item { flex:none; scroll-snap-align:start; }
.item > a { display:block; }
.item > a:hover strong { text-decoration:underline; text-underline-offset:4px; }
.item.wide { width:min(486px,80vw); }
.item.narrow { width:min(333px,65vw); }
.item img { width:100%; object-fit:cover; background:var(--gra); }
.item.wide img { aspect-ratio:486/292; }
.item.narrow img { aspect-ratio:333/444; }
.item-info { display:flex; justify-content:space-between; gap:24px; margin-top:16px; }
.item-info strong { font-weight:500; }
.item-info span { white-space:nowrap; }

/* Kort (forsiden) */
.articles { margin-top:112px; }
.card { padding:clamp(24px,5vw,64px); display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.card h3 { margin:0; font-size:clamp(32px,4vw,48px); line-height:1.2; font-weight:600; letter-spacing:-0.02em; }
.card p { margin:0 0 40px; }
.card-meta { display:flex; justify-content:space-between; gap:24px; }
.card-meta a { font-weight:500; }
.card-green { background:var(--gronn); color:#fff; }
.card-green .card-top { display:flex; gap:48px; }
.card-green .card-top > * { flex:1; }
.card-green p { margin:0; }
.card-light { background:var(--gronn-lys); }
.card-grey { background:var(--gra); }
.card-light h3, .card-grey h3 { color:var(--gronn); }
.row { display:grid; grid-template-columns:425fr 740fr; gap:48px; margin-top:48px; }

/* Produktsiden */
.products { margin-top:80px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:56px 32px; margin:0; padding:0; list-style:none; }
.product a { display:block; }
.product img { width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--gra); }
.product h3 { margin:16px 0 0; font-size:18px; line-height:1.4; font-weight:500; }
.product a:hover h3 { text-decoration:underline; text-underline-offset:4px; }
.price { display:block; margin-top:2px; }
.product.sold img { opacity:.5; }
.product.sold .price { color:var(--gra-tekst); }
.product-more { align-self:start; aspect-ratio:3/4; display:flex; flex-direction:column; gap:16px; padding:clamp(24px,3vw,40px); background:var(--gronn-lys); }
.product-more h3 { margin:0; font-size:clamp(24px,2.4vw,32px); line-height:1.2; font-weight:600; letter-spacing:-0.02em; color:var(--gronn); }
.product-more p { margin:0; }
.product-more .btn { align-self:flex-start; margin-top:auto; }
.facts { margin-top:112px; }
.facts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:0; padding:0; list-style:none; }
.facts-grid li { padding-top:24px; border-top:1px solid var(--svart); }
.facts-grid h3 { margin:0 0 8px; font-size:22px; line-height:1.3; font-weight:600; letter-spacing:-0.02em; }
.facts-grid p { margin:0; }
.cta { margin-top:112px; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:clamp(32px,5vw,64px); background:var(--gronn-lys); }
.cta h2 { margin:0; font-size:clamp(28px,3.4vw,40px); line-height:1.2; font-weight:600; letter-spacing:-0.02em; color:var(--gronn); }
.cta p { margin:8px 0 0; }
.cta .btn { flex:none; }

/* Om oss */
.split { margin-top:96px; }
.split-body { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.split-body .section-title { margin:0; }
.intro { margin:0; font-size:20px; line-height:1.5; }
.process { margin-top:112px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin:0; padding:0; list-style:none; counter-reset:steg; }
.steps li { position:relative; counter-increment:steg; }
.steps li::before { content:counter(steg); display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:24px; border-radius:50%; background:var(--gronn); color:#fff; font-weight:600; }
.steps li:not(:last-child)::after { content:""; position:absolute; top:24px; left:64px; right:-16px; border-top:1px solid var(--gronn); }
.steps h3 { margin:0 0 8px; font-size:22px; line-height:1.3; font-weight:600; letter-spacing:-0.02em; }
.steps p { margin:0; }
.promise { margin-top:112px; }
.promise-inner { display:grid; grid-template-columns:1fr auto; align-items:end; gap:48px; padding:clamp(32px,5vw,64px); background:var(--gronn); color:#fff; }
.promise h2 { margin:0; font-size:clamp(32px,4vw,48px); line-height:1.2; font-weight:600; letter-spacing:-0.02em; }
.promise p { margin:16px 0 32px; }
.promise a { font-weight:500; }
.promise a:hover { text-decoration:underline; text-underline-offset:4px; }
.numbers { display:flex; gap:56px; margin:0; padding:0; list-style:none; }
.numbers li { display:flex; flex-direction:column; }
.numbers strong { font-size:clamp(72px,9vw,128px); line-height:1; font-weight:600; letter-spacing:-0.04em; }

/* Kontakt */
.contact-layout { display:grid; grid-template-columns:3fr 2fr; align-items:start; gap:64px; margin-top:80px; }
.contact-list { margin:0; padding:0; list-style:none; border-bottom:1px solid var(--svart); }
.contact-list a { display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:24px; padding:24px 0; border-top:1px solid var(--svart); }
.contact-label { grid-column:1; font-size:16px; font-style:italic; }
.contact-value { grid-column:1; font-size:clamp(24px,3vw,36px); line-height:1.3; font-weight:500; letter-spacing:-0.02em; overflow-wrap:anywhere; }
.contact-arrow { grid-column:2; grid-row:1 / 3; font-size:28px; transition:transform .15s; }
.contact-list a:hover .contact-value, .contact-list a:hover .contact-arrow { color:var(--gronn); }
.contact-list a:hover .contact-arrow { transform:translateX(4px); }
.contact-help { padding:clamp(24px,3vw,40px); background:var(--gra); }
.contact-help h2 { margin:0; font-size:24px; line-height:1.3; font-weight:600; letter-spacing:-0.02em; color:var(--gronn); }
.contact-help h3 { margin:24px 0 4px; font-size:18px; font-weight:600; }
.contact-help p { margin:0; }

/* Footer */
.footer { margin-top:112px; padding-bottom:120px; }
.footer-body { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:48px; }
.footer-info img { width:232px; }
.footer-follow { text-align:center; }
.footer-follow h2 { margin:0; font-size:18px; font-weight:500; color:var(--gronn); }
.social { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:16px 0 0; padding:0; list-style:none; }
.social a { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--gronn); color:#fff; font-size:13px; font-weight:600; letter-spacing:0; }
.social a:hover { background:var(--svart); }
.social svg { width:20px; height:20px; }
.footer-links { justify-self:end; display:grid; grid-template-rows:auto auto; grid-auto-flow:column; gap:16px 48px; white-space:nowrap; }
.footer-links a:hover, .footer-links a[aria-current] { text-decoration:underline; text-underline-offset:6px; }

@media (prefers-reduced-motion:reduce) {
  .contact-arrow { transition:none; }
}

/* Nettbrett */
@media (max-width:1000px) {
  .steps { grid-template-columns:repeat(2,1fr); row-gap:48px; }
  .steps li::after { display:none; }
  .contact-layout { grid-template-columns:1fr; gap:48px; }
}

/* Mobil (375px-design) */
@media (max-width:800px) {
  :root { --luft:24px; }
  body { font-size:16px; }
  hr { margin-bottom:32px; }
  .masthead { max-width:none; margin-top:0; padding:0; gap:0; align-items:stretch; }
  .masthead.compact { margin-top:0; gap:0; }
  .menu { justify-content:flex-start; align-items:center; gap:0; padding:12px 12px 8px; }
  .menu-toggle { display:inline-flex; }
  .menu-link { display:none; width:100%; padding:12px; }
  .menu.open .menu-link { display:block; }
  .masthead-logo { padding:0 24px; }
  .compact .masthead-logo { width:264px; }
  .hero { margin-top:40px; }
  .hero img { aspect-ratio:1/1; }
  .subheadline { margin-top:16px; max-width:none; font-size:20px; }
  .page-head { margin-top:32px; }
  .page-head h1 { font-size:40px; }
  .lead { margin-top:12px; font-size:20px; }
  .section-title { margin-bottom:24px; font-size:28px; }
  .shop, .articles { margin-top:56px; }
  .section-heading { font-size:16px; margin-bottom:16px; }
  .section-top { margin-bottom:16px; }
  .carousel { gap:24px; padding-bottom:8px; }
  .item.wide { width:min(350px,85vw); }
  .item.narrow { width:min(240px,65vw); }
  .articles { display:flex; flex-direction:column; gap:16px; }
  .card { padding:32px 24px; }
  .card h3 { font-size:38px; }
  .card p { margin-bottom:32px; font-size:16px; line-height:24px; }
  .card-green { gap:32px; }
  .card-green .card-top { flex-direction:column; gap:24px; }
  .row { display:flex; flex-direction:column; gap:16px; margin-top:0; }
  .products, .split, .contact-layout { margin-top:48px; }
  .facts, .cta, .process, .promise { margin-top:64px; }
  .product-grid { grid-template-columns:repeat(2,1fr); gap:32px 16px; }
  .product h3 { font-size:16px; }
  .product-more { grid-column:1 / -1; aspect-ratio:auto; padding:32px 24px; }
  .facts-grid { grid-template-columns:1fr; gap:24px; }
  .facts-grid h3, .steps h3 { font-size:20px; }
  .cta-inner { flex-direction:column; align-items:flex-start; gap:24px; padding:32px 24px; }
  .split-body { grid-template-columns:1fr; gap:16px; }
  .intro { font-size:18px; }
  .steps { grid-template-columns:1fr; row-gap:32px; }
  .steps li { display:grid; grid-template-columns:48px 1fr; column-gap:20px; align-items:start; }
  .steps li::before { grid-row:1 / 3; margin:0; }
  .promise-inner { grid-template-columns:1fr; gap:32px; padding:32px 24px; }
  .numbers { gap:40px; }
  .contact-arrow { font-size:24px; }
  .contact-help { padding:32px 24px; }
  .footer { margin-top:56px; padding-bottom:64px; }
  .footer-body { grid-template-columns:1fr; justify-items:center; gap:40px; text-align:center; }
  .footer-info img { width:200px; }
  .footer-links { justify-self:center; grid-template-columns:repeat(2,auto); gap:16px 48px; }
}