/*
Theme Name: Marmor & Granit – Nero Showroom
Theme URI: https://www.marmoroggranit.dk
Author: Marmor & Granit
Description: Mørkt showroom-tema udviklet til marmoroggranit.dk. Koncept 2 "Nero Showroom" – pladelager-hero, gallerirækker og varm travertin-accent. Indeholder demo-indhold til test på en frisk installation.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mog-nero
*/

/* =========================================================
   1. Variabler & grundlag
========================================================= */
:root{
  --nero:#141312;
  --kul:#1E1C1A;
  --elfenben:#EFEAE2;
  --roeg:#8F8983;
  --travertin:#C8B091;
  --linje:rgba(239,234,226,.14);
  --display:'Italiana', serif;
  --body:'Outfit', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);font-weight:300;
  background:var(--nero);color:var(--elfenben);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:.02em}
h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.08}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.15}
h3{font-size:1.35rem}
.eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--travertin);margin-bottom:16px;
}
.lead{color:var(--roeg);max-width:58ch}
.center{text-align:center}
.center .lead{margin-inline:auto}

.btn{
  display:inline-block;padding:15px 32px;border-radius:0;
  font-weight:500;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;font-family:var(--body);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-primary{background:var(--travertin);color:#191713}
.btn-primary:hover{background:#DBC5A6;color:#191713}
.btn-ghost{border-color:var(--linje);color:var(--elfenben)}
.btn-ghost:hover{border-color:var(--travertin);color:var(--travertin)}
:focus-visible{outline:2px solid var(--travertin);outline-offset:3px}

/* Tilgængelighed / WordPress-standard */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--travertin);
  color:#191713;padding:12px 20px;font-weight:500;
}
.skip-link:focus{left:12px;top:12px}

/* Admin-bar + sticky header */
.admin-bar header.site{top:32px}
@media (max-width:782px){ .admin-bar header.site{top:46px} }

/* =========================================================
   2. Topbar + header
========================================================= */
.topbar{border-bottom:1px solid var(--linje);font-size:.76rem;letter-spacing:.06em;color:var(--roeg)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding:9px 24px}
.topbar a:hover{color:var(--travertin)}
header.site{position:sticky;top:0;z-index:50;background:rgba(20,19,18,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linje)}
.nav{display:flex;align-items:center;gap:34px;padding:20px 24px;max-width:1180px;margin:0 auto}
.wordmark{font-family:var(--display);font-size:1.3rem;letter-spacing:.22em;
  text-transform:uppercase;white-space:nowrap;line-height:1.2}
.wordmark .amp{color:var(--travertin)}
.custom-logo{max-height:44px;width:auto}
.menu-wrap{margin-left:auto}
ul.menu{display:flex;gap:30px;list-style:none}
ul.menu a{font-size:.8rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--roeg);transition:color .2s ease}
ul.menu a:hover,
ul.menu .current-menu-item > a,
ul.menu .current_page_item > a{color:var(--elfenben)}
ul.menu ul.sub-menu{ /* simpel dropdown */
  display:none;position:absolute;list-style:none;background:var(--kul);
  border:1px solid var(--linje);padding:10px 0;min-width:200px;margin-top:12px;
}
ul.menu li{position:relative}
ul.menu li:hover > ul.sub-menu,
ul.menu li:focus-within > ul.sub-menu{display:block}
ul.menu ul.sub-menu a{display:block;padding:9px 18px}
.nav > .btn{margin-left:6px;padding:11px 22px;font-size:.72rem}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--linje);
  padding:10px 12px;cursor:pointer}
.burger span{display:block;width:20px;height:1px;background:var(--elfenben);margin:5px 0}
.mobile-panel{display:none;border-top:1px solid var(--linje);background:var(--nero)}
.mobile-panel.open{display:block}
.mobile-panel ul.menu{display:block}
.mobile-panel ul.menu a{display:block;padding:15px 24px;border-bottom:1px solid var(--linje);
  letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;color:var(--roeg)}
.mobile-panel ul.sub-menu{display:block;position:static;border:none;background:none;padding:0}
.mobile-panel ul.sub-menu a{padding-left:44px}
.mobile-panel .mobil-cta{display:block;padding:15px 24px;letter-spacing:.14em;
  text-transform:uppercase;font-size:.82rem;color:var(--travertin);font-weight:500}

/* =========================================================
   3. Forside: hero / pladelager
========================================================= */
.hero{position:relative;overflow:hidden;padding:clamp(64px,9vw,110px) 0 0;text-align:center}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 45% at 50% -5%,rgba(200,176,145,.16),transparent 70%);
}
.hero h1{max-width:16ch;margin:0 auto}
.hero .lead{margin:22px auto 36px}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(48px,7vw,84px)}
.rack{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,40px);
  perspective:1300px;padding:0 24px 8px}
.slab{position:relative;width:clamp(130px,17vw,200px);height:clamp(270px,36vw,430px);
  transform:rotateY(-14deg) rotateX(1.5deg);transform-origin:bottom center;
  border:1px solid rgba(239,234,226,.12);overflow:hidden;
  box-shadow:26px 34px 70px rgba(0,0,0,.6);filter:brightness(.82);
  transition:transform .4s ease,filter .4s ease,box-shadow .4s ease}
.slab:hover{transform:rotateY(0) translateY(-12px);filter:brightness(1.06);
  box-shadow:0 44px 90px rgba(0,0,0,.65)}
.slab .tex{position:absolute;inset:0;width:100%;height:100%}
.slab-label{position:absolute;left:0;right:0;bottom:0;padding:36px 16px 16px;text-align:left;
  background:linear-gradient(to top,rgba(10,9,8,.85),rgba(10,9,8,0))}
.slab-label strong{display:block;font-family:var(--display);font-size:1.15rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:400}
.slab-label span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--roeg)}
.rack-note{margin:20px 0 0;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--roeg)}
.hero-base{height:1px;background:var(--linje);margin-top:clamp(40px,6vw,64px)}

/* Teksturer generelt (SVG-pladsholdere og uploadede fotos deler klassen .tex) */
.tex-wrap{position:relative;overflow:hidden}
.tex-wrap .tex{position:absolute;inset:0;width:100%;height:100%}
img.tex{object-fit:cover}

/* =========================================================
   4. Forside: USP
========================================================= */
.usp{border-bottom:1px solid var(--linje)}
.usp .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.usp-item{padding:26px 18px;text-align:center;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--roeg)}
.usp-item + .usp-item{border-left:1px solid var(--linje)}
.usp-item b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;
  letter-spacing:.06em;color:var(--elfenben);text-transform:none;margin-bottom:4px}
.usp-item b i{font-style:normal;color:var(--travertin)}

.section{padding:clamp(70px,10vw,120px) 0}
.section-head{margin-bottom:clamp(40px,5vw,64px)}

/* =========================================================
   5. Forside: materialer (gallerirækker)
========================================================= */
.mat-row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding:clamp(36px,5vw,56px) 0;border-top:1px solid var(--linje)}
.mat-row:last-of-type{border-bottom:1px solid var(--linje)}
.mat-row:nth-of-type(even) .mat-visual{order:2}
.mat-visual{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--linje)}
.mat-visual .tex{position:absolute;inset:0;width:100%;height:100%;transition:transform .6s ease}
.mat-row:hover .mat-visual .tex{transform:scale(1.04)}
.mat-tag{position:absolute;left:18px;bottom:16px;padding:8px 14px;
  background:rgba(10,9,8,.72);border-left:2px solid var(--travertin);
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--roeg)}
.mat-text .num{font-family:var(--display);color:var(--travertin);font-size:1rem;
  letter-spacing:.3em;margin-bottom:10px}
.mat-text h3{margin-bottom:12px;letter-spacing:.06em;text-transform:uppercase}
.mat-text p{color:var(--roeg);max-width:46ch}
.mat-link{display:inline-block;margin-top:18px;font-size:.74rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--travertin);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.mat-link:hover{border-color:var(--travertin)}

.anvend{padding:26px 24px;text-align:center;font-family:var(--display);
  font-size:clamp(.9rem,1.8vw,1.15rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--roeg);border-bottom:1px solid var(--linje)}
.anvend b{color:var(--travertin);font-weight:400;padding:0 .4em}

/* =========================================================
   6. Forside: proces
========================================================= */
.proces{background:var(--kul);border-bottom:1px solid var(--linje)}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,4vw,48px)}
.step-num{font-family:var(--display);font-size:2.6rem;color:var(--travertin);line-height:1}
.step h3{margin:14px 0 8px;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase}
.step p{font-size:.92rem;color:var(--roeg)}
.proces-cta{margin-top:56px;text-align:center}

/* =========================================================
   7. Forside: referencer
========================================================= */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ref-card{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--linje);display:block}
.ref-card::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0,rgba(200,176,145,.18),transparent 70%);
  opacity:0;transition:opacity .35s ease;pointer-events:none}
.ref-card:hover::after{opacity:1}
.ref-card .tex,.ref-card img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .55s ease}
.ref-card:hover .tex,.ref-card:hover img{transform:scale(1.05)}
.ref-tag{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;z-index:1;
  background:linear-gradient(to top,rgba(10,9,8,.88),rgba(10,9,8,0))}
.ref-tag strong{display:block;font-family:var(--display);font-size:1.1rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.ref-tag span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--roeg)}

/* =========================================================
   8. Forside: om + citat
========================================================= */
.om-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.om-grid p{color:var(--roeg);margin-top:18px}
.team-line{margin-top:28px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--travertin)}
.team-line span{color:var(--roeg)}
.quote{border-left:1px solid var(--travertin);padding-left:clamp(24px,3vw,44px)}
.quote blockquote{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.4;letter-spacing:.02em;border:none;padding:0;margin:0}
.quote figcaption{margin-top:20px;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--roeg)}
.quote figcaption b{color:var(--travertin);font-weight:500}

/* =========================================================
   9. FAQ
========================================================= */
.faq{background:var(--kul);border-top:1px solid var(--linje);border-bottom:1px solid var(--linje)}
.faq-list{max-width:780px;margin:0 auto;border-top:1px solid var(--linje)}
.faq-item{border-bottom:1px solid var(--linje)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 4px;font-family:var(--body);font-size:1.02rem;font-weight:400;
  color:var(--elfenben);letter-spacing:.02em}
.faq-q .pil{font-family:var(--display);color:var(--travertin);font-size:1.4rem;
  transition:transform .25s ease;line-height:1}
.faq-item.open .pil{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;color:var(--roeg);font-size:.94rem}
.faq-a-inner p{padding:0 4px 24px;max-width:64ch}

/* =========================================================
   10. Kontakt-sektion
========================================================= */
.kontakt-sektion{text-align:center;position:relative;overflow:hidden}
.kontakt-sektion::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(200,176,145,.12),transparent 70%)}
.kontakt-sektion .tel{display:block;font-family:var(--display);
  font-size:clamp(2.2rem,6vw,4rem);letter-spacing:.08em;margin:26px 0 8px;
  color:var(--elfenben);transition:color .2s ease}
.kontakt-sektion .tel:hover{color:var(--travertin)}
.kontakt-sektion .mail{color:var(--roeg);letter-spacing:.06em}
.kontakt-sektion .mail:hover{color:var(--travertin)}
.kontakt-sektion .btn{margin-top:36px}

/* =========================================================
   11. Undersider: hero + indhold (.prose)
========================================================= */
.page-hero{padding:clamp(56px,8vw,88px) 0 clamp(36px,5vw,56px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% -10%,rgba(200,176,145,.12),transparent 70%)}
.page-hero h1{max-width:20ch}
.page-hero .lead{margin-top:16px}
.page-hero-linje{height:1px;background:var(--linje)}
.entry-hero-img{width:100%;aspect-ratio:21/9;object-fit:cover;border:1px solid var(--linje);
  margin-bottom:clamp(36px,5vw,56px)}
.site-main{padding-bottom:clamp(70px,10vw,120px)}
.narrow{max-width:780px;margin:0 auto}

.prose{color:var(--elfenben)}
.prose > * + *{margin-top:1.2em}
.prose h2,.prose h3,.prose h4{margin-top:1.8em;letter-spacing:.04em}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.prose h3{font-size:1.3rem}
.prose p{color:var(--roeg)}
.prose strong{color:var(--elfenben);font-weight:500}
.prose a{color:var(--travertin);border-bottom:1px solid rgba(200,176,145,.4)}
.prose a:hover{border-color:var(--travertin)}
.prose ul,.prose ol{padding-left:1.3em;color:var(--roeg)}
.prose li{margin:.45em 0}
.prose li::marker{color:var(--travertin)}
.prose blockquote{border-left:1px solid var(--travertin);padding:.2em 0 .2em 1.4em;
  font-family:var(--display);font-size:1.25em;line-height:1.5;color:var(--elfenben)}
.prose blockquote cite{display:block;margin-top:.8em;font-family:var(--body);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--roeg);font-style:normal}
.prose img{border:1px solid var(--linje)}
.prose figure figcaption{margin-top:10px;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--roeg)}
.prose hr{border:none;border-top:1px solid var(--linje);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--linje);padding:10px 14px;text-align:left}
.prose th{font-weight:500;color:var(--elfenben);background:var(--kul)}
.prose td{color:var(--roeg)}
.prose code{background:var(--kul);border:1px solid var(--linje);padding:2px 7px;font-size:.85em}
.prose .wp-block-button__link{display:inline-block;padding:15px 32px;border-radius:0;
  background:var(--travertin);color:#191713;font-weight:500;font-size:.82rem;
  letter-spacing:.18em;text-transform:uppercase;border:none}
.prose .wp-block-button__link:hover{background:#DBC5A6}
.prose .wp-block-columns{gap:32px}
.prose .alignleft{float:left;margin:0 24px 16px 0;max-width:50%}
.prose .alignright{float:right;margin:0 0 16px 24px;max-width:50%}
.prose .aligncenter{margin-left:auto;margin-right:auto}
.prose .wp-block-gallery{gap:14px}

/* Formularer (søgning, kontaktformular-plugins m.m.) */
.prose input[type="text"],.prose input[type="email"],.prose input[type="tel"],
.prose input[type="url"],.prose input[type="number"],.prose textarea,.prose select,
.search-form input[type="search"]{
  width:100%;background:var(--kul);border:1px solid var(--linje);color:var(--elfenben);
  padding:13px 16px;font-family:var(--body);font-size:.95rem;border-radius:0;
}
.prose textarea{min-height:150px}
.prose input:focus,.prose textarea:focus,.search-form input:focus{
  outline:none;border-color:var(--travertin)}
.prose input[type="submit"],.prose button[type="submit"]{
  background:var(--travertin);color:#191713;border:none;padding:14px 30px;cursor:pointer;
  font-weight:500;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
.search-form{display:flex;gap:10px;max-width:480px}
.search-form input[type="search"]{flex:1}

/* =========================================================
   12. Arkiver, blogkort, paginering
========================================================= */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{border:1px solid var(--linje);background:transparent;display:flex;
  flex-direction:column;transition:border-color .25s ease}
.post-card:hover{border-color:var(--travertin)}
.post-card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;
  border-bottom:1px solid var(--linje)}
.post-card .thumb img,.post-card .thumb .tex{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.post-card .card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card .card-meta{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--travertin)}
.post-card h3{font-size:1.25rem;letter-spacing:.04em;line-height:1.3}
.post-card h3 a:hover{color:var(--travertin)}
.post-card .card-excerpt{font-size:.9rem;color:var(--roeg);flex:1}

.pagination{margin-top:clamp(40px,6vw,64px)}
.pagination .nav-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pagination .page-numbers{display:inline-block;min-width:44px;text-align:center;
  padding:11px 14px;border:1px solid var(--linje);font-size:.82rem;letter-spacing:.1em;
  color:var(--roeg)}
.pagination .page-numbers.current{border-color:var(--travertin);color:var(--travertin)}
.pagination a.page-numbers:hover{border-color:var(--travertin);color:var(--elfenben)}

.post-nav{display:flex;justify-content:space-between;gap:20px;
  margin-top:clamp(40px,6vw,60px);padding-top:28px;border-top:1px solid var(--linje)}
.post-nav a{color:var(--roeg);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.post-nav a:hover{color:var(--travertin)}

/* 404 */
.fejl404{text-align:center;padding:clamp(80px,12vw,140px) 24px}
.fejl404 .kode{font-family:var(--display);font-size:clamp(5rem,16vw,10rem);line-height:1;
  color:var(--travertin)}
.fejl404 h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:10px 0 14px}
.fejl404 .search-form{margin:32px auto 0}

/* =========================================================
   13. WooCommerce (basis-styling, aktiveres kun hvis plugin findes)
========================================================= */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  list-style:none;margin:0;padding:0}
.woocommerce ul.products li.product{border:1px solid var(--linje);padding:0 0 20px;
  text-align:left;transition:border-color .25s ease}
.woocommerce ul.products li.product:hover{border-color:var(--travertin)}
.woocommerce ul.products li.product img{width:100%;aspect-ratio:1/1;object-fit:cover;
  border-bottom:1px solid var(--linje);margin-bottom:16px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display);font-size:1.15rem;letter-spacing:.06em;padding:0 18px}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{color:var(--travertin);font-size:.95rem;padding:0 18px}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button{
  background:var(--travertin);color:#191713;border-radius:0;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;margin:10px 18px 0}
.woocommerce .button:hover{background:#DBC5A6;color:#191713}
.woocommerce span.onsale{background:var(--travertin);color:#191713;border-radius:0}
.woocommerce .woocommerce-breadcrumb{color:var(--roeg);font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase}
.woocommerce .woocommerce-breadcrumb a{color:var(--travertin)}
.woocommerce div.product .product_title{font-family:var(--display)}

/* =========================================================
   14. Footer
========================================================= */
footer.site-footer{border-top:1px solid var(--linje);font-size:.86rem;color:var(--roeg)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:60px 0 46px}
.site-footer h4{font-family:var(--display);font-weight:400;color:var(--elfenben);
  font-size:.95rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px}
.site-footer a:hover{color:var(--travertin)}
.foot-brand p{margin-top:14px;max-width:34ch}
.foot-bottom{border-top:1px solid var(--linje);padding:20px 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.74rem;
  letter-spacing:.06em;color:rgba(143,137,131,.7)}

/* =========================================================
   15. Animation
========================================================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .slab,.ref-card .tex,.ref-card img,.mat-visual .tex,.faq-a{transition:none}
}

/* =========================================================
   16. Responsivt: tablet (<=980px) og mobil (<=620px)
========================================================= */
@media (max-width: 980px){
  .menu-wrap,.nav > .btn{display:none}
  .burger{display:block}
  .rack{flex-wrap:wrap;perspective:none}
  .slab{transform:none;filter:brightness(.95);width:calc(50% - 10px);height:300px}
  .slab:hover{transform:translateY(-6px)}
  .usp .wrap{grid-template-columns:repeat(2,1fr)}
  .usp-item:nth-child(3){border-left:none}
  .usp-item:nth-child(n+3){border-top:1px solid var(--linje)}
  .mat-row{grid-template-columns:1fr}
  .mat-row:nth-of-type(even) .mat-visual{order:0}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .ref-grid{grid-template-columns:1fr 1fr}
  .ref-grid .ref-card:nth-child(3){display:none}
  .om-grid{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr 1fr}
  .woocommerce ul.products{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 620px){
  .topbar .cvr{display:none}
  .slab{width:100%;height:240px}
  .step-grid,.ref-grid,.post-grid{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:1fr}
  .ref-grid .ref-card:nth-child(3){display:block}
  .prose .alignleft,.prose .alignright{float:none;margin:0 0 16px;max-width:100%}
  .foot-grid{grid-template-columns:1fr}
}