/* ==========================================================================
   UNIVAS Facility Services — designsystem
   ========================================================================== */
:root{
  --navy:#0E2340;
  --navy-deep:#091A31;
  --navy-soft:#1B3557;
  --navy-line:rgba(255,255,255,.14);

  --cream:#EFE6D6;
  --cream-dark:#E4D8C2;
  --sand:#F6F2EA;
  --paper:#FCFBF8;
  --white:#fff;

  --ink:#15202E;
  --muted:#5C6879;
  --muted-2:#8A94A2;
  --line:#E4DFD5;
  --line-2:#D6CFC1;
  --gold:#C6A96B;

  --ok:#1F7A55;
  --err:#B3452C;

  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px;
  --sh-sm:0 1px 2px rgba(14,35,64,.05), 0 4px 14px rgba(14,35,64,.05);
  --sh-md:0 2px 6px rgba(14,35,64,.06), 0 18px 44px rgba(14,35,64,.09);
  --sh-lg:0 30px 80px rgba(9,26,49,.16);

  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap:1240px;
  --nav-h:86px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:var(--navy); color:var(--cream)}
[hidden]{display:none !important}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px}
.wrap-narrow{max-width:880px; margin:0 auto; padding:0 32px}

/* ---------- typografi ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; color:var(--ink); margin:0; letter-spacing:.004em}
h1{font-size:clamp(40px,5.4vw,68px); line-height:1.08}
h2{font-size:clamp(30px,3.6vw,46px); line-height:1.15}
h3{font-size:clamp(20px,1.6vw,25px); line-height:1.28}
h4{font-size:19px; line-height:1.35}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.eyebrow{
  display:block; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2);
}
.eyebrow-gold{color:var(--gold)}
.lead{font-size:17.5px; line-height:1.72; color:var(--muted)}
.muted{color:var(--muted)}
.rule{width:52px; height:1px; background:var(--line-2); border:0; margin:22px auto}
.center{text-align:center}

/* ---------- knapper ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px; justify-content:center;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:15px 27px; border-radius:2px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg{flex:none; transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-cream{background:var(--cream); color:var(--navy); border-color:var(--cream)}
.btn-cream:hover{background:var(--cream-dark); border-color:var(--cream-dark)}
.btn-navy{background:var(--navy); color:var(--cream); border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-soft); border-color:var(--navy-soft)}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--navy); background:var(--navy); color:var(--cream)}
.btn-outline-light{background:transparent; color:var(--cream); border-color:rgba(239,230,214,.45)}
.btn-outline-light:hover{background:var(--cream); color:var(--navy); border-color:var(--cream)}
.btn-lg{padding:18px 34px; font-size:12.5px}
.btn-sm{padding:11px 18px; font-size:11px; letter-spacing:.11em}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.link-arrow{
  display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
  letter-spacing:.03em; color:var(--navy);
}
.link-arrow svg{transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- header ---------- */
.topbar{
  position:sticky; top:0; z-index:60; background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .wrap{display:flex; align-items:center; gap:34px; height:var(--nav-h)}
.brand{display:flex; align-items:center; flex:none; margin-right:auto}
.brand img{height:52px; width:auto}
.mainnav{display:flex; align-items:center; gap:32px}
.mainnav a{
  position:relative; font-size:11.5px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(239,230,214,.82); padding:6px 0;
  transition:color .2s var(--ease);
}
.mainnav a:hover{color:var(--cream)}
.mainnav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--cream); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.mainnav a:hover::after, .mainnav a[aria-current="page"]::after{transform:scaleX(1)}
.mainnav a[aria-current="page"]{color:var(--cream)}
.nav-cta-mobile{display:none}
.nav-side{display:flex; align-items:center; gap:14px; flex:none}

.cart-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:2px; border:1px solid rgba(239,230,214,.28);
  background:transparent; color:var(--cream); cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.cart-btn:hover{border-color:var(--cream); background:rgba(239,230,214,.08)}
.cart-count{
  position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px;
  border-radius:19px; background:var(--gold); color:var(--navy-deep);
  font-size:10.5px; font-weight:700; line-height:19px; text-align:center;
}
.cart-count[hidden]{display:none}

.burger{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(239,230,214,.28); border-radius:2px;
  color:var(--cream); cursor:pointer;
}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(76vh,660px); display:flex; align-items:center; background:var(--navy-deep); overflow:hidden}
.hero-img{position:absolute; inset:0}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:center 32%}
.hero-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(9,26,49,.94) 0%, rgba(9,26,49,.80) 34%, rgba(9,26,49,.30) 62%, rgba(9,26,49,.12) 100%);
}
.hero .wrap{position:relative; z-index:2; padding-top:96px; padding-bottom:96px}
.hero-copy{max-width:620px; color:var(--cream)}
.hero-copy h1{color:var(--cream); font-weight:400}
.hero-copy p{margin:26px 0 34px; font-size:17px; line-height:1.72; color:rgba(239,230,214,.84); max-width:520px}

/* mindre sidetop-hero */
.pagehead{background:var(--sand); border-bottom:1px solid var(--line)}
.pagehead-grid{display:grid; grid-template-columns:1fr 1.05fr; align-items:stretch; gap:0}
.pagehead-copy{padding:96px 64px 96px 0; display:flex; flex-direction:column; justify-content:center}
.pagehead-copy .eyebrow{margin-bottom:20px}
.pagehead-copy p{margin-top:22px; max-width:460px}
.pagehead-media{position:relative; min-height:380px; margin-right:calc((100vw - var(--wrap))/-2)}
.pagehead-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ---------- sektioner ---------- */
.sec{padding:104px 0}
.sec-sm{padding:74px 0}
.sec-sand{background:var(--sand)}
.sec-paper{background:var(--paper)}
.sec-white{background:var(--white)}
.sec-head{max-width:660px; margin:0 auto 56px; text-align:center}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head p{margin-top:18px; color:var(--muted)}

/* ---------- ydelses-kort ---------- */
.cards{display:grid; gap:26px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}

.svc{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xs);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.svc:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--line-2)}
.svc-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--sand)}
.svc-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.svc:hover .svc-media img{transform:scale(1.05)}
.svc-badge{
  position:absolute; left:20px; top:-23px; width:46px; height:46px; border-radius:50%;
  background:var(--navy); color:var(--cream); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(9,26,49,.28);
}
.svc-body{position:relative; padding:38px 24px 26px; display:flex; flex-direction:column; flex:1}
.svc-body h3{margin-bottom:10px}
.svc-body p{font-size:14.5px; line-height:1.65; color:var(--muted); margin-bottom:20px}
.svc-body .link-arrow{margin-top:auto}

/* ---------- navy båndsektion ---------- */
.band{position:relative; background:var(--navy); color:var(--cream); overflow:hidden}
.band-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr auto; gap:56px; align-items:center; padding:78px 0}
.band h2{color:var(--cream); font-weight:400; border-left:1px solid rgba(239,230,214,.35); padding-left:28px}
.band p{color:rgba(239,230,214,.78); font-size:15.5px; line-height:1.75; margin-bottom:26px}
.band-logo img{width:190px; opacity:.95}
.band-leaf{position:absolute; left:34%; top:-30px; width:280px; opacity:.05; z-index:1; pointer-events:none}

.band-center{text-align:center; padding:86px 0}
.band-center h2{color:var(--cream); font-weight:400; border:0; padding:0; max-width:640px; margin:0 auto 28px}
.band-center p{max-width:520px; margin:0 auto 30px}

/* ---------- shop-teaser ---------- */
.split{display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:64px}
.split-copy .eyebrow{margin-bottom:18px}
.split-copy p{margin:20px 0 32px; color:var(--muted); max-width:420px}
.split-media img{width:100%; border-radius:var(--r-xs)}

/* ---------- trust-bar ---------- */
.trust{background:var(--sand); border-top:1px solid var(--line)}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:44px; padding:46px 0}
.trust-item{display:flex; gap:16px; align-items:flex-start}
.trust-item .ic{flex:none; color:var(--navy); margin-top:2px}
.trust-item strong{display:block; font-size:13.5px; font-weight:600; letter-spacing:.01em; margin-bottom:4px}
.trust-item span{font-size:13px; line-height:1.6; color:var(--muted)}
.trust-navy{background:var(--navy); border-top:0}
.trust-navy .trust-item .ic{color:var(--cream)}
.trust-navy .trust-item strong{color:var(--cream)}
.trust-navy .trust-item span{color:rgba(239,230,214,.7)}

/* ---------- værdi-kort ---------- */
.values{background:var(--white); border:1px solid var(--line); padding:52px 48px}
.values h3{text-align:center; margin-bottom:44px}
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center}
.value .ic{color:var(--navy); margin:0 auto 18px; display:flex; justify-content:center}
.value strong{display:block; font-family:var(--serif); font-size:20px; font-weight:600; margin-bottom:9px}
.value p{font-size:13.5px; line-height:1.65; color:var(--muted)}

/* ---------- shop ---------- */
.cats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xs); overflow:hidden;
}
.cat{
  display:flex; flex-direction:column; align-items:center; gap:13px; padding:30px 16px;
  border-right:1px solid var(--line); font-size:13px; font-weight:500; color:var(--ink);
  text-align:center; transition:background .25s var(--ease), color .25s var(--ease);
}
.cat:last-child{border-right:0}
.cat .ic{color:var(--navy); transition:transform .3s var(--ease)}
.cat:hover{background:var(--sand)}
.cat:hover .ic{transform:translateY(-3px)}
.cat.is-active{background:var(--navy); color:var(--cream)}
.cat.is-active .ic{color:var(--cream)}

.shop-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px}
.shop-head h2{font-size:clamp(26px,2.6vw,34px)}

.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.prod{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-xs);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.prod:hover{transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--line-2)}
.prod-media{position:relative; aspect-ratio:1; background:var(--sand); overflow:hidden}
.prod-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.prod:hover .prod-media img{transform:scale(1.045)}
.prod-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.prod-body h3{font-size:19px; margin-bottom:5px}
.prod-variant{font-size:13px; color:var(--muted); margin-bottom:16px}
.prod-price{font-size:19px; font-weight:600; font-family:var(--sans); letter-spacing:-.01em; margin:auto 0 16px}
.prod-price small{display:block; font-size:11.5px; font-weight:400; color:var(--muted-2); letter-spacing:.02em; margin-top:2px}

/* produktside */
.crumbs{font-size:12.5px; color:var(--muted); padding:26px 0}
.crumbs a:hover{color:var(--navy); text-decoration:underline}
.crumbs span{margin:0 8px; color:var(--line-2)}
.pdp{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; padding-bottom:80px}
.pdp-gallery .pdp-main{position:relative; background:var(--sand); border:1px solid var(--line); aspect-ratio:1; overflow:hidden}
.pdp-gallery .pdp-main img{width:100%; height:100%; object-fit:cover}
.pdp-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px}
.pdp-thumbs a{display:block; background:var(--sand); border:1px solid var(--line); aspect-ratio:1; overflow:hidden; transition:border-color .2s var(--ease)}
.pdp-thumbs a:hover{border-color:var(--navy)}

.pdp-thumbs img{width:100%; height:100%; object-fit:cover}
.pdp-info h1{font-size:clamp(30px,3vw,40px); margin-bottom:8px}
.pdp-sub{font-size:14.5px; color:var(--muted); margin-bottom:24px}
.pdp-info>p{color:var(--muted); font-size:15px}
.checklist{list-style:none; margin:24px 0 30px; padding:0; display:grid; gap:11px}
.checklist li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink)}
.checklist svg{flex:none; color:var(--navy); margin-top:3px}
.pdp-price{font-size:28px; font-weight:600; letter-spacing:-.015em}
.pdp-price small{display:block; font-size:12px; font-weight:400; color:var(--muted-2); margin-top:3px; letter-spacing:.02em}
.pdp-buy{display:flex; gap:14px; align-items:center; margin:26px 0 0}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:2px; height:48px}
.qty button{width:42px; height:100%; background:transparent; border:0; cursor:pointer; color:var(--muted); font-size:17px}
.qty button:hover{color:var(--navy)}
.qty input{width:44px; height:100%; border:0; text-align:center; font-size:15px; font-weight:600; background:transparent; -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.tabs{border-top:1px solid var(--line); padding-top:0}
.tabbar{display:flex; gap:36px; border-bottom:1px solid var(--line)}
.tabbar button{
  background:transparent; border:0; padding:20px 0; cursor:pointer;
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tabbar button.is-active{color:var(--navy); border-bottom-color:var(--navy)}
.tabpanel{padding:34px 0; max-width:760px; color:var(--muted); font-size:15px}
.tabpanel[hidden]{display:none}
.spec{width:100%; border-collapse:collapse; font-size:14.5px}
.spec th,.spec td{text-align:left; padding:12px 0; border-bottom:1px solid var(--line)}
.spec th{width:210px; font-weight:600; color:var(--ink)}
.spec td{color:var(--muted)}

/* ---------- kurv ---------- */
.cart-layout{display:grid; grid-template-columns:1.6fr .9fr; gap:52px; align-items:start; padding-bottom:90px}
.cart-row{display:grid; grid-template-columns:96px 1fr auto auto; gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line)}
.cart-row:first-child{border-top:1px solid var(--line)}
.cart-thumb{width:96px; aspect-ratio:1; background:var(--sand); border:1px solid var(--line); overflow:hidden}
.cart-thumb img{width:100%; height:100%; object-fit:cover}
.cart-name{font-family:var(--serif); font-size:20px}
.cart-meta{font-size:13px; color:var(--muted); margin-top:3px}
.cart-remove{background:transparent; border:0; color:var(--muted-2); cursor:pointer; font-size:12.5px; text-decoration:underline; padding:0; margin-top:8px}
.cart-remove:hover{color:var(--err)}
.cart-line-total{font-weight:600; font-size:16px; white-space:nowrap}
.summary{background:var(--sand); border:1px solid var(--line); padding:32px}
.summary h3{margin-bottom:22px}
.summary-line{display:flex; justify-content:space-between; font-size:14.5px; padding:9px 0; color:var(--muted)}
.summary-total{display:flex; justify-content:space-between; font-size:19px; font-weight:600; color:var(--ink); border-top:1px solid var(--line-2); margin-top:12px; padding-top:18px}
.cart-empty{text-align:center; padding:80px 0 100px}
.cart-empty p{color:var(--muted); margin:16px 0 28px}

/* ---------- formularer ---------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.input,.textarea,select.input{
  width:100%; padding:14px 16px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line-2); border-radius:2px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:focus,.textarea:focus{outline:0; border-color:var(--navy); box-shadow:0 0 0 3px rgba(14,35,64,.08)}
.textarea{min-height:130px; resize:vertical}
.form-card{background:var(--white); border:1px solid var(--line); padding:36px; scroll-margin-top:calc(var(--nav-h) + 24px)}
.form-note{font-size:12.5px; color:var(--muted-2); margin-top:14px; line-height:1.6}
.formmsg{
  margin-top:18px; padding:14px 16px; border-radius:2px; font-size:14px;
  background:rgba(31,122,85,.08); border:1px solid rgba(31,122,85,.28); color:var(--ok);
}
.formmsg[hidden]{display:none}

/* ---------- kontakt ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start}
.contact-list{list-style:none; margin:34px 0 0; padding:0; display:grid; gap:26px}
.contact-list li{display:flex; gap:18px; align-items:flex-start}
.contact-list .ic{
  flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; color:var(--navy);
}
.contact-list strong{display:block; font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); margin-bottom:4px}
.contact-list span,.contact-list a{font-size:15.5px; color:var(--ink); line-height:1.55}
.contact-list a:hover{color:var(--navy); text-decoration:underline}

.mapwrap{position:relative; height:380px; background:var(--sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden}
.mapwrap iframe{width:100%; height:100%; border:0; filter:grayscale(.35) contrast(.95)}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.gallery img{aspect-ratio:4/3; object-fit:cover; width:100%; border-radius:var(--r-xs)}

/* ---------- karriere ---------- */
.career-hero{position:relative; background:var(--navy-deep); color:var(--cream); overflow:hidden}
.career-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0}
.career-copy{padding:104px 60px 104px 0}
.career-copy h1{color:var(--cream); font-weight:400}
.career-copy p{color:rgba(239,230,214,.8); margin:24px 0 34px; max-width:420px}
.career-media{position:relative; min-height:460px; margin-right:calc((100vw - var(--wrap))/-2)}
.career-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

.job{
  display:flex; align-items:center; justify-content:space-between; gap:26px;
  padding:26px 30px; background:var(--white); border:1px solid var(--line);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.job + .job{margin-top:14px}
.job:hover{border-color:var(--line-2); box-shadow:var(--sh-sm)}
.job h4{margin-bottom:5px}
.job .job-meta{font-size:13.5px; color:var(--muted)}

/* ---------- FAQ / accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none; cursor:pointer; padding:24px 40px 24px 0; position:relative;
  font-family:var(--serif); font-size:21px; font-weight:600;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:''; position:absolute; right:8px; top:34px; width:11px; height:11px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc .acc-body{padding:0 40px 26px 0; color:var(--muted); font-size:15px}

/* ---------- prosa (jura-sider) ---------- */
.prose{max-width:760px}
.prose h2{font-size:27px; margin:44px 0 14px}
.prose h3{font-size:20px; margin:30px 0 10px}
.prose p,.prose li{color:var(--muted); font-size:15.5px; line-height:1.75}
.prose ul{padding-left:20px; margin:0 0 16px}
.prose li{margin-bottom:7px}
.prose a{color:var(--navy); text-decoration:underline}

/* ---------- footer ---------- */
.footer{background:var(--navy); color:rgba(239,230,214,.72); padding:76px 0 0; font-size:14px}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; padding-bottom:56px}
.footer-brand img{width:170px; margin-bottom:24px}
.footer-brand p{font-size:14px; line-height:1.75; max-width:330px; color:rgba(239,230,214,.66)}
.footer h5{
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--cream); margin:0 0 20px;
}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:11px}
.footer a{transition:color .2s var(--ease)}
.footer a:hover{color:var(--cream)}
.footer-contact{margin-top:26px; display:grid; gap:9px; font-size:14px}
.footer-contact a{color:var(--cream)}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:1px solid var(--navy-line); padding:24px 0 30px; font-size:12.5px;
  color:rgba(239,230,214,.5);
}
.footer-bottom nav{display:flex; gap:24px}

/* ---------- hero: svartid ---------- */
.hero-note{display:flex; align-items:center; gap:10px; margin-top:22px; font-size:13.5px; letter-spacing:.02em; color:rgba(239,230,214,.8)}
.hero-note svg{flex:none; color:var(--gold)}

/* ---------- udsolgt ---------- */
.prod-badge{
  position:absolute; left:14px; top:14px; z-index:2; padding:6px 11px; border-radius:2px;
  background:var(--navy); color:var(--cream); font-size:10.5px; font-weight:600; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase;
}
.is-soldout .prod-media img{filter:grayscale(.4); opacity:.82}
.is-soldout .prod-price{color:var(--muted)}
.btn-outline[disabled]:hover{background:transparent; color:var(--navy); border-color:var(--line-2)}
.pdp-soldout,.notice{
  background:var(--sand); border:1px solid var(--line-2); border-left:3px solid var(--navy);
  font-size:14.5px; color:var(--muted);
}
.pdp-soldout{display:flex; flex-direction:column; gap:4px; margin-top:26px; padding:18px 22px}
.pdp-soldout strong{color:var(--ink); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.notice{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:30px; padding:16px 22px}
.notice strong{color:var(--ink); font-weight:600}
.pdp-soldout a,.notice a{color:var(--navy); font-weight:600; text-decoration:underline}

/* ---------- ydelse: andet ---------- */
.svc-other{background:var(--navy); border-color:var(--navy)}
.svc-other:hover{border-color:var(--navy-soft)}
.svc-other .svc-body{padding:44px 32px 34px; justify-content:center}
.svc-other-ic{
  width:54px; height:54px; border-radius:50%; border:1px solid rgba(239,230,214,.35);
  display:flex; align-items:center; justify-content:center; color:var(--cream); margin-bottom:26px;
}
.svc-other .eyebrow{color:var(--gold); margin-bottom:12px}
.svc-other .svc-body h3{color:var(--cream); font-weight:400; font-size:clamp(24px,2vw,30px); margin-bottom:16px}
.svc-other .svc-body p{color:rgba(239,230,214,.78)}
.svc-other .link-arrow{color:var(--cream)}

/* ---------- anmeldelser ---------- */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.review{margin:0; background:var(--white); border:1px solid var(--line); padding:34px 30px 28px; display:flex; flex-direction:column}
.review-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px}
.review-quote{display:flex; color:var(--cream-dark)}
.review-stars{display:flex; gap:3px; color:var(--gold)}
.review blockquote{margin:0 0 26px; font-family:var(--serif); font-size:20px; line-height:1.5; color:var(--ink)}
.review figcaption{margin-top:auto; padding-top:20px; border-top:1px solid var(--line)}
.review figcaption strong{display:block; font-size:14px; font-weight:600; color:var(--ink)}
.review figcaption span{display:block; margin-top:2px; font-size:13px; color:var(--muted)}
.reviews-empty{max-width:560px; margin:0 auto; text-align:center}
.reviews-empty .ic{
  width:68px; height:68px; margin:0 auto 26px; border-radius:50%; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; color:var(--navy);
}
.reviews-empty p{color:var(--muted); margin:16px 0 30px}

/* ---------- toast ---------- */
.toast{
  position:fixed; right:24px; bottom:24px; z-index:120; max-width:330px;
  background:var(--navy); color:var(--cream); padding:16px 20px; border-radius:2px;
  box-shadow:var(--sh-lg); font-size:14px; display:flex; gap:12px; align-items:center;
  transform:translateY(14px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-on{opacity:1; transform:none}
.toast svg{flex:none; color:var(--gold)}

/* ---------- animation ---------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ==========================================================================
   Responsivt
   ========================================================================== */
/* hovedmenuen har 7 punkter og skifter derfor til burgermenu før de øvrige layoutskift */
@media (max-width:1180px){
  .mainnav{
    display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; padding:10px 32px 24px;
    background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mainnav.is-open{display:flex}
  .mainnav a{padding:14px 0; font-size:12.5px; border-bottom:1px solid rgba(255,255,255,.07)}
  .mainnav a::after{display:none}
  .burger{display:inline-flex}
}
@media (max-width:1080px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr); gap:34px}
  .trust-grid{grid-template-columns:repeat(2,1fr); gap:30px}
  .band-inner{grid-template-columns:1fr 1fr; gap:40px}
  .band-logo{display:none}
  .cats{grid-template-columns:repeat(3,1fr)}
  .cat:nth-child(3){border-right:0}
}
@media (max-width:900px){
  :root{--nav-h:72px}
  .mainnav .nav-cta-mobile{display:flex; margin-top:18px; border-bottom:0; justify-content:center}
  .brand img{height:42px}
  .nav-side>.btn{display:none}

  .pagehead-grid,.career-grid,.split,.pdp,.contact-grid,.cart-layout{grid-template-columns:1fr}
  .pagehead-copy,.career-copy{padding:64px 0 44px}
  .pagehead-media,.career-media{min-height:300px; margin-right:0; position:relative}
  .pagehead-media img,.career-media img{position:relative}
  .split{gap:36px}
  .band-inner{grid-template-columns:1fr; gap:26px; padding:60px 0}
  .cart-layout{gap:34px}
  .sec{padding:72px 0}
  .values{padding:38px 24px}
  .contact-grid{gap:44px}
}
@media (max-width:640px){
  .wrap,.wrap-narrow{padding:0 20px}
  .cards-4,.cards-3,.cards-2,.pgrid,.gallery,.reviews{grid-template-columns:1fr}
  .values-grid,.trust-grid{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat{border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
  .cat:nth-child(2n){border-right:0}
  .shop-head{flex-direction:column; align-items:flex-start}
  .footer-grid{grid-template-columns:1fr; gap:34px}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:14px}
  .cart-row{grid-template-columns:72px 1fr; gap:14px}
  .cart-thumb{width:72px}
  .cart-line-total{grid-column:2}
  .hero .wrap{padding-top:70px; padding-bottom:70px}
  .pdp-buy{flex-wrap:wrap}
  .pdp-buy .btn{flex:1}
  .tabbar{gap:20px; overflow-x:auto}
  .job{flex-direction:column; align-items:flex-start; gap:16px}
}