@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2'); }
/* SH Ritningar: stil. Bygger på dagens sajt (mörk, Manrope + Inter, ljusgrå knappar, 10 px hörn).
   Tre layoutvarianter styrs av <html data-layout="a|b|c">. Väljer ni en behåller vi bara den. */
:root {
  --bg: #111; --bg2: #161616; --bg3: #1f1f1f; --line: #333;
  --text: #fafafa; --muted: #b8b8b8; --btn: #dcdcdc; --btn-t: #000;
  --r: 10px; --wrap: 1240px; --narrow: 820px; --gut: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --head: 'Manrope', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif;
  --hh: 84px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.7 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 5.2vw, 68px); }
h2 { font-size: clamp(28px, 3.6vw, 46px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
p { margin: 0 0 1em; }
ul { padding: 0; margin: 0; list-style: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: calc(var(--narrow) + var(--gut) * 2); }
.center { text-align: center; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 14px; z-index: 999; border-radius: 6px; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Knappar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; background: var(--btn); color: var(--btn-t); font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 16px 26px; border-radius: var(--r); border: 1px solid var(--btn); cursor: pointer; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.ghost { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, .45); }
.btn.ghost:hover { background: #fff; color: #000; }
.btn.dark { background: #111; color: #fff; border-color: #111; }
.btn.dark:hover { background: #000; }
.more { text-decoration: none; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 3px; transition: border-color .2s, gap .2s; display: inline-flex; gap: .4em; }
.more:hover { border-color: #fff; gap: .8em; }

/* ---------- Teman (som på originalsajten) ---------- */
.sec { padding: clamp(64px, 9vw, 130px) 0; position: relative; }
.t-dark { background: var(--bg); }
.t-black { background: #000; }
.t-light { background: #e9e9e9; color: #111; }
.t-white { background: #fff; color: #111; }
.t-light .muted, .t-white .muted { color: #555; }
.t-light a, .t-white a { color: inherit; }
.sec-head { margin-bottom: clamp(28px, 4vw, 56px); }
.sec-head h2 { margin: 0; }
.eyebrow { font: 500 12px/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.eyebrow a { text-decoration: none; }
.hero .eyebrow, .banner .eyebrow { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.lead { font-size: clamp(18px, 1.6vw, 22px); color: #e6e9eb; line-height: 1.6; }

/* ---------- Rubrik ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .35s, box-shadow .35s, backdrop-filter .35s; background: linear-gradient(#000a, #0000); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: var(--hh); transition: height .35s var(--ease); max-width: 1500px; }
.site-header.scrolled { background: rgba(22, 22, 22, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.site-header.scrolled .wrap { height: 64px; }
.logo img { height: 46px; width: auto; transition: height .35s var(--ease); }
.site-header.scrolled .logo img { height: 38px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a, .dd-btn { color: var(--text); text-decoration: none; font: 500 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 12px 12px; background: none; border: 0; cursor: pointer; position: relative; }
.nav > a:not(.btn)::after, .dd-btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav > a:hover::after, .nav > a[aria-current]::after, .dd-btn:hover::after, .dd.current .dd-btn::after { transform: scaleX(1); }
.nav-cta { display: none !important; }
.dd { position: relative; }
.dd-menu { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s var(--ease); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.dd:hover .dd-menu, .dd.open .dd-menu, .dd:focus-within .dd-menu { opacity: 1; visibility: visible; transform: none; }
.dd-menu a { display: block; padding: 12px 14px; border-radius: 6px; }
.dd-menu a:hover { background: var(--bg3); }
.head-right { display: flex; align-items: center; gap: 18px; }
.head-right .btn { padding: 13px 20px; }
.social { display: flex; gap: 6px; }
.social a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; opacity: .8; transition: opacity .2s, background .2s, transform .2s; }
.social a:hover { opacity: 1; background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left; opacity: .85; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.menu-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: .3s var(--ease); }
.menu-toggle span:nth-child(1) { top: 15px; } .menu-toggle span:nth-child(2) { top: 21px; } .menu-toggle span:nth-child(3) { top: 27px; }
.menu-toggle[aria-expanded=true] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded=true] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1060px) {
  .head-right { display: none; }
  .menu-toggle { display: block; }
  .nav { position: fixed; inset: 0; background: rgba(15, 15, 15, .98); flex-direction: column; justify-content: center; align-items: stretch; gap: 0; padding: 90px 28px 40px; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .35s var(--ease); overflow: auto; }
  .nav.open { opacity: 1; visibility: visible; transform: none; }
  .nav a, .dd-btn { font: 400 26px/1.2 var(--head); letter-spacing: 0; text-transform: none; padding: 14px 4px; text-align: left; width: 100%; border-bottom: 1px solid var(--line); }
  .nav > a::after, .dd-btn::after { display: none; }
  .dd-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 0 14px; display: none; }
  .dd.open .dd-menu { display: block; }
  .dd:hover .dd-menu { display: none; } .dd.open:hover .dd-menu { display: block; }
  .dd-menu a { font-size: 20px; border: 0; padding: 10px 4px; }
  .nav-cta { display: inline-flex !important; margin-top: 22px; width: auto !important; font: 500 12px/1 var(--body) !important; letter-spacing: .12em !important; text-transform: uppercase !important; justify-content: center; border: 1px solid var(--btn) !important; padding: 17px 26px !important; }
  .menu-open { overflow: hidden; }
  .menu-open .site-header { background: none; backdrop-filter: none; }
  .menu-toggle { z-index: 2; }
  .logo { z-index: 2; }
}

/* ---------- Hero (startsida) ---------- */
.hero { position: relative; min-height: min(100svh, 940px); display: flex; align-items: flex-end; overflow: hidden; background: #000; isolation: isolate; }
.hero-bg, .hero-slides, .banner-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg { animation: kb 26s ease-in-out infinite alternate; }
.hero-bg img, .banner-bg img, .hero-slides img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img, .banner-bg img { transform: translate3d(0, var(--py, 0px), 0) scale(1.06); will-change: transform; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.09) translate(-1%, -1%); } }
.hero-slides { display: none; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .78) 100%); }
.hero-in { padding-top: 160px; padding-bottom: clamp(70px, 10vw, 130px); }
.hero h1 { max-width: 15ch; font-size: clamp(38px, 6.4vw, 92px); letter-spacing: -.02em; text-wrap: balance; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.scroll-cue { position: absolute; right: var(--gut); bottom: 34px; width: 28px; height: 46px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 20px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* Banner för undersidor */
.banner { position: relative; min-height: clamp(340px, 52vh, 560px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: #000; }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .75)); }
.banner-in { padding-top: 140px; padding-bottom: clamp(36px, 6vw, 70px); }
.banner h1 { margin: 0; }
.banner .lead { margin-top: 14px; max-width: 60ch; }
main > .sec:first-child, main > .intro:first-child { padding-top: calc(var(--hh) + clamp(48px, 7vw, 100px)); }

/* ---------- Tjänster ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.svc { position: relative; border-radius: var(--r); overflow: hidden; background: var(--bg2); display: flex; flex-direction: column; }
.svc-media, .proj-media, .card-media, .step-media, .member-media, .split-media, .vision-media { display: block; overflow: hidden; }
.svc-media { aspect-ratio: 16 / 10; }
.svc-media img, .proj-media img, .card-media img, .step-media img, .member-media img, .split-media img, .vision-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.svc:hover .svc-media img, .proj:hover .proj-media img, .card:hover .card-media img, .tile:hover img, .g-item:hover img { transform: scale(1.06); }
.svc-body { padding: clamp(22px, 3vw, 40px); flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.svc-body ul { margin: 0 0 26px; width: 100%; }
.svc-body li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--line); color: #dfe3e6; }
.svc-body li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 10px; height: 1px; background: #fff; }
.svc-body .btn { margin-top: auto; }
@media (max-width: 800px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Projekt (layout A: rutnät) ---------- */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.proj { position: relative; display: flex; flex-direction: column; }
.proj-media { aspect-ratio: 4 / 3; border-radius: var(--r); }
.proj-body { padding: 18px 2px 0; display: flex; flex-direction: column; flex: 1; }
.proj-n { display: none; font: 300 13px var(--head); letter-spacing: .2em; color: var(--muted); margin-bottom: 8px; }
.proj h3 { font-size: 22px; margin: 0 0 6px; }
.proj h3 a { text-decoration: none; }
.proj h3 a::after { content: ""; position: absolute; inset: 0; }
.proj p { color: var(--muted); font-size: 15px; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj .more { align-self: flex-start; margin-top: auto; }
.t-light .proj p, .t-white .proj p { color: #555; }
@media (max-width: 1000px) { .projects { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .projects { grid-template-columns: 1fr; } }
.car-arrows { display: none; }

/* ---------- Kontakt ---------- */
.contact { background: var(--bg2); overflow: hidden; }
.contact-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; position: relative; z-index: 1; }
.contact-list { margin: 28px 0; border-top: 1px solid var(--line); }
.contact-list li { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.contact-list span { color: var(--muted); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-art { position: absolute; inset: 0; opacity: .12; z-index: 0; pointer-events: none; }
.contact-art img { width: 100%; height: 100%; object-fit: cover; }
.form { display: grid; gap: 6px; }
.form label { font-size: 14px; color: #dfe3e6; margin-top: 10px; display: block; }
.form small { color: var(--muted); font-size: 12px; }
.form input:not([type=checkbox]), .form textarea, .form select { width: 100%; background: #1f1f1f; border: 1px solid #3a3a3a; color: #fff; border-radius: var(--r); padding: 15px 16px; font: 400 16px var(--body); margin-top: 6px; transition: border-color .2s, background .2s; }
.form input[type=file] { padding: 12px; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 0; border-color: #fff; background: #262626; }
.form .chk { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 16px; }
.form .chk input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #dcdcdc; }
.form .fine { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.form .btn { margin-top: 18px; justify-self: start; }
.form-msg { min-height: 1.4em; font-size: 15px; margin-top: 8px; }
.form-msg.ok { color: #9be3b0; } .form-msg.err { color: #ffb4a8; }
.form-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px, 4vw, 44px); margin: 34px 0; }
@media (max-width: 900px) { .contact-in { grid-template-columns: 1fr; } }

/* ---------- Samarbetspartners ---------- */
.partners { padding: clamp(50px, 6vw, 84px) 0; overflow: hidden; }
.partners .sec-head { margin-bottom: 30px; }
.partners h2 { font-size: clamp(20px, 2vw, 26px); text-align: center; text-transform: uppercase; letter-spacing: .16em; font-family: var(--body); font-weight: 500; }
.marquee { display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, #0000, #000 10%, #000 90%, #0000); mask: linear-gradient(90deg, #0000, #000 10%, #000 90%, #0000); }
.marquee-track { display: flex; flex: none; align-items: center; gap: clamp(40px, 6vw, 84px); padding-right: clamp(40px, 6vw, 84px); animation: mq 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee li { flex: none; }
.marquee img { height: 58px; width: auto; max-width: 160px; object-fit: contain; transition: transform .3s var(--ease); }
.marquee img:hover { transform: scale(1.08); }
@keyframes mq { to { transform: translateX(-100%); } }

/* ---------- Omdömen ---------- */
.reviews h2 { text-align: center; }
.quotes { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-bottom: 44px; }
.quotes blockquote { flex: 1 1 260px; max-width: 380px; }
.quotes blockquote { margin: 0; padding: 28px 26px; background: #fff; border-radius: 14px; position: relative; }
.quotes blockquote::before { content: "”"; position: absolute; top: 4px; right: 20px; font: 400 80px/1 var(--head); color: #0000001a; }
.quotes p { margin: 0; font-size: 16px; line-height: 1.7; }

/* ---------- Vision ---------- */
.vision-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.vision-media { border-radius: var(--r); aspect-ratio: 4 / 5; }
.vision-text > div { margin: 0 0 22px; padding-left: 18px; border-left: 1px solid var(--line); }
.vision-text h3 { font-size: 20px; margin-bottom: 6px; }
.vision-text p { color: #dfe3e6; margin: 0; }
@media (max-width: 900px) { .vision-in { grid-template-columns: 1fr; } .vision-media { aspect-ratio: 16 / 10; } }

/* ---------- Instagram ---------- */
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 30px; }
.ig-grid a { aspect-ratio: 1; overflow: hidden; border-radius: 8px; display: block; position: relative; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ig-grid a:hover img { transform: scale(1.08); }
.insta .center .btn { margin: 4px 4px; }
@media (max-width: 700px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Undersidor ---------- */
.narrow h2, .narrow h3 { margin-top: 1.4em; }
.narrow > :first-child { margin-top: 0; }
.prose-sec p, .intro p { color: #dfe3e6; }
.intro .lead { color: #fff; }
.gallery { columns: 2; column-gap: 12px; }
.g-item { display: block; overflow: hidden; border-radius: 8px; background: var(--bg3); cursor: zoom-in; break-inside: avoid; margin: 0 0 12px; }
.g-item img { width: 100%; height: auto; transition: transform 1s var(--ease); }
@media (max-width: 640px) { .gallery { columns: 1; } }
.videos { display: grid; gap: 20px; }
.video-card { margin: 0; }
.video-card video { width: 100%; border-radius: var(--r); background: #000; }

.cards { gap: 22px; }
.card { background: var(--bg2); border-radius: var(--r); overflow: hidden; transition: transform .4s var(--ease); }
.card:hover { transform: translateY(-4px); }
.card-media { aspect-ratio: 16 / 11; }
.card-body { padding: 22px 22px 8px; } .card-body h3 { font-size: 21px; } .card-body p { color: var(--muted); font-size: 15px; }

.steps { counter-reset: s; display: grid; gap: clamp(28px, 5vw, 70px); }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.step:nth-child(even) .step-media { order: 2; }
.step-media { border-radius: var(--r); aspect-ratio: 4 / 3; }
.step-n { display: block; font: 300 clamp(40px, 5vw, 64px)/1 var(--head); color: rgba(255, 255, 255, .28); margin-bottom: 10px; }
.step-body h3 { font-size: clamp(24px, 2.6vw, 34px); }
.step-body p { color: #dfe3e6; }
@media (max-width: 800px) { .step { grid-template-columns: 1fr; } .step:nth-child(even) .step-media { order: 0; } }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; border-radius: var(--r); display: block; text-decoration: none; background: var(--bg3); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .8)); }
.tile-t { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; font: 500 18px/1.25 var(--head); }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.split-media { border-radius: var(--r); aspect-ratio: 4 / 5; }
.split-text p { color: #dfe3e6; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split-media { aspect-ratio: 16 / 10; } }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; max-width: 900px; margin-inline: auto; }
.member { margin: 0; }
.member-media { border-radius: var(--r); aspect-ratio: 4 / 5; }
.member figcaption { padding-top: 14px; display: flex; flex-direction: column; }
.member figcaption span { color: var(--muted); font-size: 14px; }

.faq { display: grid; gap: 0; margin-bottom: 40px; }
.faq-h { font-size: clamp(20px, 2vw, 26px); margin: 1.6em 0 .8em; color: var(--muted); font-family: var(--body); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 400 clamp(18px, 1.7vw, 22px)/1.35 var(--head); position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 300; transition: transform .3s var(--ease); }
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ans { padding: 0 0 22px; color: #dfe3e6; max-width: 70ch; }
.ans p { margin: 0; }

/* ---------- Sidfot ---------- */
.site-footer { background: #0f0f0f; padding: 70px 0 30px; border-top: 1px solid var(--line); font-size: 15px; }
.cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.site-footer h3 { font: 500 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { text-decoration: none; } .site-footer li a:hover { text-decoration: underline; }
.site-footer .logo { display: block; margin-bottom: 16px; }
.site-footer .social { margin-top: 14px; margin-left: -6px; }
.legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; color: var(--muted); font-size: 13px; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }

/* ---------- Bildvisare & cookie ---------- */
.lb { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .94); display: grid; place-items: center; }
.lb[hidden] { display: none; }
.lb img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 6px; will-change: transform; touch-action: none; }
.lb button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; cursor: pointer; width: 60px; height: 60px; opacity: .8; }
.lb button:hover { opacity: 1; }
.lb-x { top: 10px; right: 10px; } .lb-p { left: 8px; top: 50%; margin-top: -30px; } .lb-n { right: 8px; top: 50%; margin-top: -30px; }
.lb-open { overflow: hidden; }
@keyframes fade { from { opacity: 0; transform: scale(.98); } }
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 2147482000; max-width: 420px; background: #161616; color: #fafafa; border: 1px solid #333; border-radius: 14px; padding: 18px; font-size: 14px; line-height: 1.5; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.cookie p { margin: 0 0 12px; } .cookie div { display: flex; gap: 8px; flex-wrap: wrap; } .cookie .btn { padding: 12px 16px; }
@media (max-width: 600px) { .cookie { right: 16px; bottom: 90px; } }

/* ---------- Animationer ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js .hero [data-reveal], html.js .banner [data-reveal] { animation: rise 1.1s var(--ease) both; animation-delay: var(--d, 0ms); opacity: 1; transform: none; transition: none; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}
@media print { .site-header, .cookie, .lb { display: none; } body { background: #fff; color: #000; } }

/* =========================================================
   LAYOUT B: redaktionell (stora bilder, växlande rader, mycket luft)
   ========================================================= */
[data-layout=b] h1, [data-layout=b] h2 { font-weight: 300; letter-spacing: -.025em; }
[data-layout=b] .hero { min-height: min(92svh, 860px); align-items: center; }
[data-layout=b] .hero-in { padding-bottom: 60px; }
[data-layout=b] .hero h1 { max-width: 18ch; }
[data-layout=b] .hero-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .1) 70%); }
[data-layout=b] .svc-grid { grid-template-columns: 1fr; }
[data-layout=b] .svc { flex-direction: row; background: none; border-radius: 0; align-items: center; gap: clamp(24px, 5vw, 70px); }
[data-layout=b] .svc:nth-child(even) { flex-direction: row-reverse; }
[data-layout=b] .svc-media { flex: 1.25; border-radius: var(--r); aspect-ratio: 16 / 10; }
[data-layout=b] .svc-body { flex: 1; padding: 0; }
[data-layout=b] .projects { grid-template-columns: 1fr; gap: clamp(50px, 8vw, 110px); counter-reset: n; }
[data-layout=b] .proj { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
[data-layout=b] .proj:nth-child(even) { grid-template-columns: 1fr 1.4fr; }
[data-layout=b] .proj:nth-child(even) .proj-media { order: 2; }
[data-layout=b] .proj-media { aspect-ratio: 16 / 10; }
[data-layout=b] .proj-body { padding: 0; flex: none; }
[data-layout=b] .proj-n { display: block; font-size: 14px; }
[data-layout=b] .proj h3 { font: 300 clamp(28px, 3.4vw, 46px)/1.1 var(--head); margin-bottom: 14px; }
[data-layout=b] .proj p { font-size: 17px; -webkit-line-clamp: 4; }
[data-layout=b] .proj .more { margin-top: 10px; }
@media (max-width: 800px) {
  [data-layout=b] .svc, [data-layout=b] .svc:nth-child(even) { flex-direction: column; align-items: stretch; }
  [data-layout=b] .proj, [data-layout=b] .proj:nth-child(even) { grid-template-columns: 1fr; gap: 16px; }
  [data-layout=b] .proj:nth-child(even) .proj-media { order: 0; }
}
[data-layout=b] .btn { border-radius: 999px; }
[data-layout=b] .sec-head h2 { font-size: clamp(34px, 5vw, 70px); }

/* =========================================================
   LAYOUT C: immersiv (bildspel i toppen, glasrubrik, projekt i karusell)
   ========================================================= */
[data-layout=c] .site-header:not(.scrolled) { background: none; }
[data-layout=c] .hero { min-height: 100svh; align-items: center; text-align: center; }
[data-layout=c] .hero-in { padding-bottom: 80px; display: flex; flex-direction: column; align-items: center; }
[data-layout=c] .hero h1 { max-width: 16ch; margin-inline: auto; }
[data-layout=c] .hero-cta { justify-content: center; }
[data-layout=c] .hero-bg { animation: none; }
[data-layout=c] .hero-bg img { display: none; }
[data-layout=c] .hero-slides { display: block; z-index: -2; }
[data-layout=c] .hero-slides img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1.6s ease, transform 8s linear; }
[data-layout=c] .hero-slides img.on { opacity: 1; transform: scale(1.14); }
html:not(.js) [data-layout=c] .hero-slides img:first-child, [data-layout=c] .hero-slides img:first-child { opacity: 1; }
[data-layout=c] .hero-shade { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35), rgba(0, 0, 0, .7)); }
[data-layout=c] .scroll-cue { right: 50%; margin-right: -14px; }
[data-layout=c] .proj-sec .wrap { position: relative; }
[data-layout=c] .projects { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 6px var(--gut) 24px; margin: 0 calc(var(--gut) * -1); scrollbar-width: thin; scrollbar-color: #555 transparent; }
[data-layout=c] .proj { flex: 0 0 min(78vw, 440px); scroll-snap-align: start; }
[data-layout=c] .proj-media { aspect-ratio: 4 / 5; }
[data-layout=c] .car-arrows { display: flex; gap: 10px; position: absolute; top: 0; right: var(--gut); }
[data-layout=c] .car-arrows button { width: 48px; height: 48px; border-radius: 50%; background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff; font-size: 20px; cursor: pointer; transition: .25s; }
[data-layout=c] .car-arrows button:hover { background: #fff; color: #000; }
[data-layout=c] .sec-head { padding-right: 130px; }
[data-layout=c] .banner { min-height: clamp(380px, 60vh, 640px); }
[data-layout=c] .gallery { columns: 3; }
@media (max-width: 900px) { [data-layout=c] .gallery { columns: 2; } }
@media (max-width: 640px) { [data-layout=c] .gallery { columns: 1; } }

/* Sista kortet i rutnätet får ta hela raden så det inte hänger ensamt */
.projects:not(:has(.proj:nth-child(3n+2))) .proj:last-child { grid-column: auto; }
[data-layout=a] .projects .proj:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr; gap: clamp(18px, 3vw, 40px); align-items: center; }
[data-layout=a] .projects .proj:last-child:nth-child(3n+1) .proj-media { aspect-ratio: 16 / 8; }
[data-layout=a] .projects .proj:last-child:nth-child(3n+1) .proj-body { padding: 0; flex: none; }
@media (max-width: 1000px) { [data-layout=a] .projects .proj:last-child:nth-child(3n+1) { grid-column: auto; display: flex; } [data-layout=a] .projects .proj:last-child:nth-child(3n+1) .proj-media { aspect-ratio: 4 / 3; } }
.cards { display: flex; flex-wrap: wrap; justify-content: center; }
.cards .card { flex: 1 1 260px; max-width: 380px; }
.contact-art { display: none; }
.marquee li { display: flex; align-items: center; }

/* =========================================================
   v2 – A: utvecklad version av dagens sajt (mörk, silver)
   ========================================================= */
.strip { background: #141414; border-block: 1px solid var(--line); }
.strip ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px clamp(24px, 5vw, 70px); padding: 18px var(--gut); font: 500 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #cfd5d9; }
.strip li { display: flex; align-items: center; gap: 10px; }
.strip li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc, #dcdcdc); }
:root { --acc: #dcdcdc; }
.sec-head h2 { position: relative; padding-bottom: 18px; }
.sec-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 2px; background: var(--acc); transition: width .8s var(--ease); }
.sec-head:hover h2::after { width: 110px; }
.reviews .sec-head h2::after, .partners .sec-head h2::after { left: 50%; margin-left: -28px; }
.partners h2::after { display: none; }
.proj-media { position: relative; }
.proj-media::after { content: "→"; position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 18px; opacity: 0; transform: translate(-8px, 8px) scale(.8); transition: .4s var(--ease); }
.proj:hover .proj-media::after { opacity: 1; transform: none; }
.svc { transition: transform .5s var(--ease), box-shadow .5s; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 15% 105%, rgba(220, 220, 220, .16), transparent 60%); }
.hero-in .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.hero-in .eyebrow::before { content: ""; width: 34px; height: 1px; background: #fff; }

/* =========================================================
   v2 – B: ljus, varm och redaktionell (sand + terrakotta)
   ========================================================= */
[data-layout=b] { --bg: #f4efe8; --bg2: #ece5db; --bg3: #e2d9cc; --line: #d8cdbd; --text: #1f1b17; --muted: #6d6459; --btn: #1f1b17; --btn-t: #fff; --acc: #b5532b; }
[data-layout=b] body { background: var(--bg); color: var(--text); }
[data-layout=b] .t-dark, [data-layout=b] .contact, [data-layout=b] .site-footer { color: var(--text); }
[data-layout=b] .t-dark { background: var(--bg); }
[data-layout=b] .services.t-dark, [data-layout=b] .insta.t-dark { background: var(--bg2); }
[data-layout=b] .contact { background: #1f1b17; color: #f4efe8; }
[data-layout=b] .contact .form label, [data-layout=b] .contact .contact-list a { color: #f4efe8; }
[data-layout=b] .contact .contact-list span, [data-layout=b] .contact .fine, [data-layout=b] .contact .form small, [data-layout=b] .contact .chk { color: #b9ad9d; }
[data-layout=b] .t-light { background: var(--bg2); color: var(--text); }
[data-layout=b] .t-white { background: #fff; }
[data-layout=b] .lead, [data-layout=b] .intro .lead { color: #2b2620; }
[data-layout=b] .svc-body li, [data-layout=b] .prose-sec p, [data-layout=b] .intro p, [data-layout=b] .step-body p, [data-layout=b] .split-text p, [data-layout=b] .ans, [data-layout=b] .vision-text p { color: #3b352e; }
[data-layout=b] .svc-body li::before { background: var(--acc); }
[data-layout=b] .eyebrow, [data-layout=b] .muted, [data-layout=b] .proj p, [data-layout=b] .card-body p, [data-layout=b] .member figcaption span { color: var(--muted); }
[data-layout=b] .more { color: var(--text); border-color: rgba(31, 27, 23, .35); }
[data-layout=b] .more:hover { border-color: var(--acc); color: var(--acc); }
[data-layout=b] .btn:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
[data-layout=b] .btn.ghost { color: var(--text); border-color: rgba(31, 27, 23, .4); }
[data-layout=b] .btn.ghost:hover { background: var(--text); color: #fff; }
[data-layout=b] .contact .btn.ghost { color: #f4efe8; border-color: rgba(244, 239, 232, .4); }
[data-layout=b] .contact .btn.ghost:hover { background: #f4efe8; color: #1f1b17; }
[data-layout=b] .contact .btn { background: #f4efe8; color: #1f1b17; border-color: #f4efe8; }
[data-layout=b] .hero, [data-layout=b] .banner { color: #fff; }
[data-layout=b] .hero .btn:not(.ghost) { background: #fff; color: #1f1b17; border-color: #fff; }
[data-layout=b] .hero .btn.ghost, [data-layout=b] .banner .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
[data-layout=b] .hero .btn.ghost:hover { background: #fff; color: #1f1b17; }
[data-layout=b] .hero .btn:not(.ghost):hover { background: var(--acc); border-color: var(--acc); color: #fff; }
[data-layout=b] .svc { background: #fff; box-shadow: 0 1px 0 var(--line); }
[data-layout=b] .svc-body li { border-color: var(--line); }
[data-layout=b] .svc-body { background: none; }
[data-layout=b] .site-header { background: linear-gradient(#0008, #0000); color: #fff; }
[data-layout=b] .site-header.scrolled { background: rgba(244, 239, 232, .92); color: var(--text); box-shadow: 0 1px 0 var(--line); }
[data-layout=b] .site-header.scrolled .nav a, [data-layout=b] .site-header.scrolled .dd-btn { color: var(--text); }
[data-layout=b] .site-header.scrolled .logo img { filter: invert(1); }
[data-layout=b] .site-header.scrolled .social a { color: var(--text); }
[data-layout=b] .site-header.scrolled .btn { background: var(--text); color: #fff; }
[data-layout=b] .site-header.scrolled .menu-toggle span { background: var(--text); }
[data-layout=b] .progress { background: var(--acc); }
[data-layout=b] .dd-menu { background: #fff; border-color: var(--line); }
[data-layout=b] .dd-menu a { color: var(--text) !important; } [data-layout=b] .dd-menu a:hover { background: var(--bg2); }
[data-layout=b] .strip { background: var(--bg3); border-color: var(--line); }
[data-layout=b] .strip ul { color: #3b352e; }
[data-layout=b] .quotes blockquote { background: #fff; box-shadow: 0 1px 0 var(--line); }
[data-layout=b] .card, [data-layout=b] .form-card { background: #fff; border-color: var(--line); }
[data-layout=b] .form input:not([type=checkbox]), [data-layout=b] .form textarea, [data-layout=b] .form select { background: #fff; border-color: var(--line); color: var(--text); }
[data-layout=b] .contact .form input:not([type=checkbox]), [data-layout=b] .contact .form textarea { background: #2b2620; border-color: #453d34; color: #fff; }
[data-layout=b] .form-card label { color: var(--text); }
[data-layout=b] .g-item, [data-layout=b] .tile { background: var(--bg3); }
[data-layout=b] .step-n { color: var(--acc); }
[data-layout=b] details { border-color: var(--line); }
[data-layout=b] .vision-text > div { border-color: var(--acc); }
[data-layout=b] .site-footer { background: #1f1b17; color: #f4efe8; }
[data-layout=b] .proj-n { color: var(--acc); }
[data-layout=b] .proj-media::after { background: var(--acc); color: #fff; }
[data-layout=b] .sec-head h2::after { background: var(--acc); }
[data-layout=b] .hero-in .eyebrow::before { background: #fff; }
[data-layout=b] .marquee img { mix-blend-mode: multiply; }
[data-layout=b] .site-footer a, [data-layout=b] .site-footer h3 { color: inherit; }
[data-layout=b] .site-footer .muted { color: #b9ad9d; }
[data-layout=b] .site-footer h3 { color: #b9ad9d; }
[data-layout=b] .cookie { background: #fff; color: var(--text); border-color: var(--line); }
[data-layout=b] .cookie .btn.ghost { color: var(--text); }
[data-layout=b] .faq-h { color: var(--acc); }
@media (max-width: 1060px) { [data-layout=b] .nav { background: rgba(244, 239, 232, .98); } [data-layout=b] .nav a, [data-layout=b] .dd-btn { color: var(--text); border-color: var(--line); } [data-layout=b] .menu-open .site-header .logo img { filter: invert(1); } [data-layout=b] .menu-open .menu-toggle span { background: var(--text); } }

/* =========================================================
   v2 – C: mörk + neon, mycket rörelse
   ========================================================= */
[data-layout=c] { --bg: #0d0d0d; --bg2: #161616; --bg3: #1f1f1f; --line: #333; --acc: #e4e4e4; --btn: #e4e4e4; --btn-t: #000; }
[data-layout=c] body { background: var(--bg); }
[data-layout=c] .t-dark { background: var(--bg); }
[data-layout=c] .contact { background: var(--bg2); }
[data-layout=c] .t-light { background: #141414; color: var(--text); }
[data-layout=c] .t-white { background: #0f0f0f; color: var(--text); }
[data-layout=c] .quotes blockquote { background: #1a1a1a; color: var(--text); border: 1px solid var(--line); }
[data-layout=c] .quotes blockquote::before { color: var(--acc); opacity: .35; }
[data-layout=c] .partners { background: #fff; color: #111; }
[data-layout=c] .btn:hover { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 12px 40px rgba(255, 255, 255, .25); }
[data-layout=c] .btn.dark { background: var(--acc); color: #000; border-color: var(--acc); }
[data-layout=c] .more { border-color: rgba(255, 255, 255, .5); } [data-layout=c] .more:hover { border-color: var(--acc); color: var(--acc); }
[data-layout=c] .progress { background: linear-gradient(90deg, var(--acc), #8f8f8f); height: 3px; }
[data-layout=c] .strip { background: #0f0f0f; }
[data-layout=c] .strip li::before { box-shadow: 0 0 12px var(--acc); }
[data-layout=c] .site-header.scrolled { background: rgba(13, 13, 13, .8); }
[data-layout=c] .svc, [data-layout=c] .card, [data-layout=c] .form-card { background: var(--bg2); border: 1px solid var(--line); }
[data-layout=c] .svc-body li::before { background: var(--acc); }
[data-layout=c] .proj-n, [data-layout=c] .step-n { color: var(--acc); }
[data-layout=c] .sec-head h2::after { background: linear-gradient(90deg, var(--acc), #8f8f8f); width: 90px; }
[data-layout=c] .hero h1 { background: linear-gradient(180deg, #fff 30%, #b7c2d0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-layout=c] .hero::before { background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 60%), rgba(255, 255, 255, .16), transparent 60%); z-index: 0; mix-blend-mode: screen; transition: background .15s; }
[data-layout=c] .hero-shade { z-index: -1; }
[data-layout=c] .hero-in { position: relative; z-index: 1; }
[data-layout=c] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
[data-layout=c] .word > span { display: inline-block; transform: translateY(110%) rotate(4deg); animation: wordup 1s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 200ms); }
@keyframes wordup { to { transform: none; } }
.bigtext { overflow: hidden; background: #000; border-block: 1px solid var(--line); padding: 26px 0; display: none; }
[data-layout=c] .bigtext { display: block; }
.bigtext .track { display: flex; width: max-content; animation: mq 32s linear infinite; }
.bigtext span { font: 300 clamp(40px, 7vw, 96px)/1 var(--head); letter-spacing: -.02em; padding-right: .6em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); }
.bigtext span:nth-child(even) { color: var(--acc); -webkit-text-stroke: 0; }
[data-layout=c] .bigtext .track { animation-name: mqc; }
@keyframes mqc { to { transform: translateX(-50%); } }
[data-layout=c] .tilt { transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
[data-layout=c] .proj-media, [data-layout=c] .svc-media { position: relative; }
[data-layout=c] [data-parallax] { will-change: transform; }
[data-layout=c] .proj-media img, [data-layout=c] .svc-media img { height: 118%; transform: translate3d(0, var(--py2, 0px), 0); transition: none; }
[data-layout=c] .proj:hover .proj-media img, [data-layout=c] .svc:hover .svc-media img { transform: translate3d(0, var(--py2, 0px), 0) scale(1.05); transition: transform .8s var(--ease); }
html.js [data-layout=c] .proj-media, html.js [data-layout=c] .svc-media, html.js [data-layout=c] .g-item { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
html.js [data-layout=c] .in .proj-media, html.js [data-layout=c] .in .svc-media, html.js [data-layout=c] .in.g-item { clip-path: inset(0); }
.cursor, .cursor-dot { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2147483000; opacity: 0; transition: opacity .3s; }
.cursor { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid var(--acc); border-radius: 50%; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, opacity .3s; mix-blend-mode: difference; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--acc); border-radius: 50%; }
.cursor.hov { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(255, 255, 255, .15); }
.cursor.on, .cursor-dot.on { opacity: 1; }
@media (hover: none) { .cursor, .cursor-dot { display: none; } }
[data-layout=c] .marquee img { filter: none; }
[data-layout=c] .glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%); filter: blur(30px); pointer-events: none; animation: float 14s ease-in-out infinite alternate; z-index: 0; }
@keyframes float { to { transform: translate(120px, -80px) scale(1.2); } }
[data-layout=c] .sec { overflow: clip; }
[data-layout=c] .contact-in, [data-layout=c] .wrap { position: relative; z-index: 1; }
@media (max-width: 800px) { [data-layout=c] .glow { display: none; } }
[data-layout=c] .hero h1 { background: none; -webkit-text-fill-color: #fff; color: #fff; }
[data-layout=b] .hero .eyebrow, [data-layout=b] .banner .eyebrow { color: #fff; }
[data-layout=b] .svc { padding: clamp(14px, 2vw, 26px); border-radius: 14px; }
[data-layout=b] .svc-body { padding: clamp(6px, 1vw, 14px) clamp(6px, 2vw, 28px); }
@media (max-width: 800px) { [data-layout=b] .svc { padding: 0; } [data-layout=b] .svc-body { padding: 22px; } }

/* =========================================================
   STARTSIDA – tre förslag (data-home="1|2|3")
   ========================================================= */
.h-card { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--bg3); text-decoration: none; min-height: 240px; isolation: isolate; }
.h-card-m { position: absolute; inset: 0; z-index: -1; }
.h-card-m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.h-card:hover .h-card-m img { transform: scale(1.07); }
.h-card-b { position: absolute; inset: auto 0 0 0; padding: 60px 22px 20px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .88)); }
.h-card b { font: 400 clamp(19px, 1.7vw, 24px)/1.2 var(--head); }
.h-card em { font-style: normal; font-size: 14px; color: #cfd5d9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-card-n { font: 400 12px var(--body); letter-spacing: .2em; color: var(--acc); }
.h-more { margin-top: 18px; } .h-more[hidden] { display: none; }
.h-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; }
.h-grid .h-card { aspect-ratio: 4 / 3; }
.h-port .center, .center .btn { margin-top: 26px; }
@media (max-width: 1000px) { .h-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .h-grid { grid-template-columns: 1fr; } }
.h-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); counter-reset: x; }
.h-step { position: relative; }
.h-step-m { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; margin-bottom: 20px; }
.h-step-m img { width: 100%; height: 100%; object-fit: cover; }
.h-n { display: block; font: 300 clamp(44px, 5vw, 72px)/1 var(--head); color: var(--acc); opacity: .9; margin-bottom: 8px; }
.h-step p { color: #cfd5d9; }
@media (max-width: 900px) { .h-steps { grid-template-columns: 1fr; } }
.h-qs { display: grid; margin: 20px 0 26px; }
.h-q { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); pointer-events: none; }
.h-q.on { opacity: 1; transform: none; pointer-events: auto; }
.h-q p { font: 300 clamp(22px, 3vw, 38px)/1.35 var(--head); margin: 0; }
.h-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 26px; }
.h-dots button { width: 34px; height: 3px; border: 0; background: #ffffff40; cursor: pointer; padding: 0; transition: background .3s; }
.h-dots button.on { background: var(--acc); }
.h-vcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-bottom: 30px; }
.h-vcols > div { padding-top: 18px; border-top: 1px solid var(--line); }
.h-vcols p { color: #cfd5d9; }
@media (max-width: 900px) { .h-vcols { grid-template-columns: 1fr; } }
.h-cta { text-align: center; padding: clamp(80px, 11vw, 150px) 0; background: radial-gradient(700px 300px at 50% 0, rgba(255, 255, 255, .08), transparent 70%), #000; }
.h-cta h2 { font-size: clamp(34px, 6vw, 84px); }
.h-cta .hero-cta { justify-content: center; }
.h-cta .lead { max-width: 52ch; margin-inline: auto; }

/* ---------- Förslag 1: cinematisk ---------- */
.h1-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #000; isolation: isolate; }
.h1-slides { position: absolute; inset: 0; z-index: -2; }
.h1-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.h1-slide.on { opacity: 1; }
.h1-slide img { width: 100%; height: 100%; object-fit: cover; }

.h1-hero .hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .05) 32%, rgba(0, 0, 0, .82)); }
.h1-in { padding-top: 150px; padding-bottom: 36px; }
.h1-hero h1 { font-size: clamp(40px, 7vw, 104px); max-width: 14ch; letter-spacing: -.03em; text-wrap: balance; }
.h1-hero .lead { max-width: 52ch; color: #e6e9eb; }
.h1-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); margin-top: 26px; }
.h1-caps { display: flex; gap: 14px; align-items: center; font-size: 14px; min-width: 0; }
.h1-caps > span { color: #ffffffa0; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.h1-cap { display: none; text-decoration: none; border-bottom: 1px solid #fff8; } .h1-cap.on { display: inline; }
.h1-dots { display: flex; gap: 8px; } .h1-dots button { width: 34px; height: 3px; border: 0; background: #ffffff55; cursor: pointer; padding: 0; } .h1-dots button.on { background: #fff; }
.h1-panel { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; margin-bottom: clamp(50px, 8vw, 110px); }
.h1-panel:nth-of-type(even) { grid-template-columns: 1fr 1.35fr; } .h1-panel:nth-of-type(even) .h1-panel-m { order: 2; }
.h1-panel-m { display: block; aspect-ratio: 16 / 11; border-radius: var(--r); overflow: hidden; background: #fff; }
.h1-panel-m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .h1-panel-m:hover img { transform: scale(1.05); }
.h1-panel-b h3 { font-size: clamp(30px, 3.6vw, 52px); margin: 10px 0 20px; }
.h1-panel-b ul { margin-bottom: 26px; } .h1-panel-b li { padding: 11px 0 11px 24px; border-bottom: 1px solid var(--line); position: relative; color: #dfe3e6; }
.h1-panel-b li::before { content: ""; position: absolute; left: 0; top: 1.4em; width: 10px; height: 1px; background: #fff; }
@media (max-width: 900px) { .h1-panel, .h1-panel:nth-of-type(even) { grid-template-columns: 1fr; } .h1-panel:nth-of-type(even) .h1-panel-m { order: 0; } .h1-foot { flex-direction: column; align-items: flex-start; } }
.h1-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 270px; gap: 16px; }
.h1-b0 { grid-column: span 7; grid-row: span 2; } .h1-b1, .h1-b2 { grid-column: span 5; } .h1-b3, .h1-b4, .h1-b5 { grid-column: span 4; } .h1-b6 { grid-column: span 12; }
.h1-b0 b { font-size: clamp(26px, 3vw, 40px); }
@media (max-width: 900px) { .h1-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; } .h1-b0 { grid-column: span 2; grid-row: span 1; } .h1-b1, .h1-b2, .h1-b3, .h1-b4, .h1-b5 { grid-column: span 1; } .h1-b6 { grid-column: span 2; } }
@media (max-width: 560px) { .h1-bento { grid-template-columns: 1fr; } .h1-b0, .h1-b1, .h1-b2, .h1-b3, .h1-b4, .h1-b5, .h1-b6 { grid-column: span 1; } }

/* ---------- Förslag 2: split + bento, varm sand ---------- */
[data-home="2"] { --acc: #e4e4e4; --btn: #e4e4e4; --btn-t: #000; }
[data-home="2"] .btn:hover { background: #fff; }
.h2-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #0d0d0d; padding: 110px 0 60px; isolation: isolate; }
.h2-glow { position: absolute; width: 70vw; height: 70vw; right: -20vw; top: -25vw; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 62%); z-index: -1; animation: float 16s ease-in-out infinite alternate; }
.h2-in { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.h2-hero h1 { font-size: clamp(38px, 5.6vw, 84px); letter-spacing: -.03em; text-wrap: balance; }
.h2-hero .lead { max-width: 46ch; }
.h2-facts { display: flex; gap: clamp(20px, 4vw, 48px); margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.h2-facts b { display: block; font: 300 clamp(28px, 3vw, 40px)/1 var(--head); color: var(--acc); } .h2-facts span { font-size: 13px; color: var(--muted); }
.h2-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; height: min(78vh, 760px); overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.h2-col { overflow: hidden; }
.h2-track { display: flex; flex-direction: column; gap: 14px; animation: colup 46s linear infinite; }
.h2-col:nth-child(2) .h2-track { animation-duration: 58s; } .h2-col.rev .h2-track { animation-direction: reverse; }
@keyframes colup { to { transform: translateY(calc(-50% - 7px)); } }
.h2-tile { aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; flex: none; } .h2-tile img { width: 100%; height: 100%; object-fit: cover; }
.h2-hero .hero-cta { margin-top: 30px; }
@media (max-width: 900px) { .h2-in { grid-template-columns: 1fr; } .h2-cols { height: 320px; grid-template-columns: repeat(4, 1fr); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .h2-col:nth-child(4) { display: block; } }
.h2-partners { padding: 34px 0; background: #111; border-block: 1px solid var(--line); } .h2-partners .sec-head { display: none; }
.h2-partners .marquee li { background: #fff; border-radius: 10px; padding: 10px 18px; height: 78px; }
.h2-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.h2-door { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ease), border-color .3s; }
.h2-door:hover { transform: translateY(-6px); border-color: var(--acc); }
.h2-door-m { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #fff; } .h2-door-m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .h2-door:hover img { transform: scale(1.05); }
.h2-door-b { padding: clamp(22px, 3vw, 40px); } .h2-door-b h3 { font-size: clamp(28px, 3vw, 42px); } .h2-door-b ul { margin: 14px 0 24px; } .h2-door-b li { padding: 8px 0 8px 22px; position: relative; color: #dfe3e6; border-bottom: 1px solid var(--line); } .h2-door-b li::before { content: "+"; position: absolute; left: 0; color: var(--acc); }
@media (max-width: 800px) { .h2-doors { grid-template-columns: 1fr; } }
.h2-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 250px; gap: 14px; }
.h2-s-a { grid-column: span 6; grid-row: span 2; } .h2-s-b, .h2-s-c, .h2-s-d, .h2-s-e { grid-column: span 3; } .h2-s-f, .h2-s-g, .h2-s-h { grid-column: span 4; } .h2-s-i { grid-column: span 12; }
.h2-s-a b { font-size: clamp(26px, 3vw, 40px); } .h2-s-b em, .h2-s-c em, .h2-s-d em, .h2-s-e em { display: none; }
@media (max-width: 900px) { .h2-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; } .h2-s-a, .h2-s-i { grid-column: span 2; grid-row: span 1; } .h2-s-b, .h2-s-c, .h2-s-d, .h2-s-e, .h2-s-f, .h2-s-g, .h2-s-h { grid-column: span 1; } }
@media (max-width: 520px) { .h2-bento { grid-template-columns: 1fr; } .h2-bento > * { grid-column: span 1 !important; } }
.h2-steps { display: grid; }
.h2-step { display: grid; grid-template-columns: 120px 1fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(24px, 4vw, 48px) 0; border-top: 1px solid var(--line); }
.h2-step:last-child { border-bottom: 1px solid var(--line); } .h2-step h3 { font-size: clamp(24px, 2.6vw, 36px); } .h2-step p { color: #cfd5d9; max-width: 46ch; }
.h2-step-m { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; } .h2-step-m img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) { .h2-step { grid-template-columns: 1fr; gap: 12px; } }
[data-home="2"] .quotes { justify-content: center; }

/* ---------- Förslag 3: scroll-berättelse, neon ---------- */
.h3-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: #000; isolation: isolate; }
.h3-bg { position: absolute; inset: 0; z-index: -2; animation: kb 26s ease-in-out infinite alternate; } .h3-bg img { width: 100%; height: 100%; object-fit: cover; }
.h3-hero .hero-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 30% 60%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .82)); }
.h3-in { padding-top: 130px; padding-bottom: 90px; position: relative; z-index: 1; }
.h3-h1 { font-size: clamp(44px, 9vw, 150px); line-height: .98; letter-spacing: -.04em; margin: 0 0 34px; }
.h3-l { display: block; }
.h3-rot { display: block; position: relative; height: 1.05em; overflow: hidden; color: var(--acc); }
.h3-rot span { position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform .8s var(--ease), opacity .5s; }
.h3-rot span.on { transform: none; opacity: 1; }
.h3-svcs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.h3-svc-c { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.h3-svc-m { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; } .h3-svc-m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .h3-svc-c:hover img { transform: scale(1.06); }
.h3-svc-b { padding: clamp(22px, 3vw, 40px); } .h3-svc-b h3 { font-size: clamp(28px, 3vw, 44px); margin: 8px 0 14px; } .h3-svc-b ul { margin-bottom: 24px; } .h3-svc-b li { padding: 9px 0 9px 24px; position: relative; border-bottom: 1px solid var(--line); color: #dfe3e6; } .h3-svc-b li::before { content: ""; position: absolute; left: 0; top: 1.3em; width: 10px; height: 1px; background: var(--acc); }
@media (max-width: 800px) { .h3-svcs { grid-template-columns: 1fr; } }
.h3-stacks { display: block; }
.h3-stack { position: sticky; top: calc(86px + var(--i) * 16px); display: block; height: min(72vh, 620px); margin-bottom: 26px; border-radius: 22px; overflow: hidden; text-decoration: none; background: #000; box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); border: 1px solid var(--line); }
.h3-stack-m { position: absolute; inset: 0; } .h3-stack-m img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .h3-stack:hover .h3-stack-m img { transform: scale(1.05); }
.h3-stack-b { position: absolute; inset: auto 0 0 0; padding: clamp(60px, 9vw, 120px) clamp(22px, 4vw, 56px) clamp(22px, 3vw, 40px); background: linear-gradient(transparent, rgba(0, 0, 0, .9)); display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.h3-stack-b b { font: 300 clamp(30px, 5vw, 68px)/1.05 var(--head); letter-spacing: -.02em; } .h3-stack-b em { font-style: normal; color: #cfd5d9; max-width: 60ch; } .h3-stack-b .more { align-self: flex-start; margin-top: 8px; }
@media (max-width: 700px) { .h3-stack { height: 62vh; top: calc(72px + var(--i) * 10px); } }
.h3-steps .h-step { border-top: 1px solid var(--acc); padding-top: 22px; }
[data-layout=c] .h-card-m img { height: 100%; }
.h-steps { list-style: none; }
.h3-in .hero-cta { justify-content: flex-start; }
.h3-stack-b { max-width: none; padding-right: 30%; }
@media (max-width: 800px) { .h3-stack-b { padding-right: 22px; } }
.h1-hero .eyebrow, .h3-hero .eyebrow, .h2-hero .eyebrow { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.h1-hero .hero-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1) 65%), linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .05) 32%, rgba(0, 0, 0, .82)); }
.h1-hero h1, .h3-h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.h4-facts { margin-top: 30px; }
.h4-hero .h1-in { padding-bottom: 10px; }
.h4-hero .h2-facts { border-top: 1px solid rgba(255, 255, 255, .22); }
.h4-hero .h2-facts b { color: #fff; }
.h4-hero .h2-facts span { color: #d5d5d5; }
.h4-hero h1 { max-width: 16ch; }
.h4-hero .h1-foot { margin-top: 10px; }
.h-reviews-grid .quotes blockquote { background: #1a1a1a; color: #f4f4f4; border: 1px solid var(--line); box-shadow: none; }
.h-reviews-grid .quotes blockquote::before { color: #fff; opacity: .25; }
.h-reviews-grid .sec-head { text-align: center; }

/* förslag 4: portfolio som bläddringsbar rad */
.h4-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.h4-arrows { display: flex; gap: 10px; }
.h4-arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #444; background: transparent; color: #fafafa; font-size: 20px; cursor: pointer; transition: background .2s, color .2s; }
.h4-arrows button:hover { background: #dcdcdc; color: #000; }
.h4-arrows button:focus-visible, .h4-rail:focus-visible { outline: 2px solid #fafafa; outline-offset: 3px; }
.h4-rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) 18px; scrollbar-width: thin; scrollbar-color: #555 transparent; scroll-padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); }
.h4-rail .h-card.h4-c { flex: 0 0 min(80vw, 440px); aspect-ratio: 4 / 5; scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .h4-rail { scroll-behavior: auto; } }

.quotes blockquote footer, .h-q footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #ffffff1f; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.rv-stars { color: #e4e4e4; letter-spacing: 2px; font-size: 13px; }
.h-q footer { justify-content: center; border: 0; }
.quotes:not(.x) blockquote footer { border-top-color: #ffffff1f; }
[data-layout=a]:not([data-home]) .quotes blockquote footer { border-top-color: #0000001f; }
.quotes blockquote { display: flex; flex-direction: column; }
.quotes blockquote p { margin-bottom: 22px; }
.quotes blockquote footer { margin-top: auto; }
.h-reviews-grid .quotes { max-width: 1020px; margin-inline: auto; }
.h1-caps[hidden] { display: none; } .h1-foot { justify-content: flex-end; }

/* kontakt/offert */
.ko-head { max-width: 760px; margin-bottom: 40px; } .ko-head .lead { color: var(--muted, #b8b8b8); }
.ko-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: start; }
.ko-side h2, .ko .form-card h2 { font: 400 clamp(22px, 2vw, 28px)/1.2 var(--head); margin: 0 0 16px; }
.ko-side .contact-list b { font-weight: 400; }
.ko-price { margin-top: 28px; padding: 24px; border: 1px solid #333; border-radius: var(--r); background: #161616; }
.ko-price p { color: #b8b8b8; margin: 0 0 18px; }
.ko .form-card { margin: 0; }
@media (max-width: 880px) { .ko-grid { grid-template-columns: 1fr; } }

.h4-partners { padding: 38px 0 40px; }
.h4-partners .sec-head { display: block; margin-bottom: 22px; }
.h4-partners h2 { font-size: 13px; color: #b8b8b8; }
.h2-door-b { flex: 1; display: flex; flex-direction: column; }
.h2-door-b ul { margin-bottom: 28px; }
.h2-door-b .hero-cta { margin-top: auto; }

.h-tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 11px; border-radius: 99px; background: #000000a8; backdrop-filter: blur(6px); color: #f4f4f4; font: 500 10.5px var(--body); letter-spacing: .12em; text-transform: uppercase; }
.h-tag-b { background: #f4f4f4; color: #000; }
/* förslag 4: lugnare banner */
.h4-hero h1 { font-size: clamp(34px, 4.6vw, 68px); max-width: 20ch; line-height: 1.08; font-weight: 300; }
.h4-hero .hero-shade { background: linear-gradient(90deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .12)), linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .85)); }
.h4-hero .h1-in { padding-top: 130px; }
.h4-hero .h4-facts { margin-top: 26px; padding-top: 18px; gap: clamp(22px, 4vw, 52px); }
.h4-hero .h2-facts b { font-size: clamp(17px, 1.6vw, 22px); font-weight: 400; letter-spacing: 0; }
.h4-hero .h2-facts span { font-size: 12.5px; }
.h4-hero .hero-cta { margin-top: 26px; }
.h4-hero .eyebrow { margin-bottom: 16px; }

.h4-hero h1 { max-width: none; font-size: inherit; }
.h4-l1 { display: block; font: 300 clamp(40px, 5.6vw, 84px)/1.04 var(--head); letter-spacing: -.035em; }
.h4-l2 { display: block; margin-top: 18px; font: 300 clamp(18px, 1.9vw, 28px)/1.3 var(--head); letter-spacing: -.01em; color: #dadada; }
.h4-hero .h2-facts b { display: flex; align-items: center; gap: 8px; }
.h4-hero .pin { flex: none; opacity: .9; }
/* förslag 4: tätare rytm */
[data-home="4"] .sec { padding: clamp(40px, 5vw, 76px) 0; }
[data-home="4"] .sec-head { margin-bottom: clamp(22px, 3vw, 36px); }
[data-home="4"] .h2-partners, [data-home="4"] .h4-partners { padding: 26px 0 28px; }
[data-home="4"] .contact-list { margin: 20px 0 0; }
[data-home="4"] .contact-form textarea { min-height: 110px; }
[data-home="4"] .h4-rail { padding-bottom: 6px; }
[data-home="4"] .h-reviews-grid .quotes { gap: 14px; }

/* förbättrat kontaktformulär */
.chips-set { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.chips-set legend { font-size: 14px; color: #dfe3e6; padding: 0; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form .chip { margin: 0; position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100% !important; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: block; padding: 10px 18px; border: 1px solid #444; border-radius: 99px; font-size: 14px; color: #dfe3e6; transition: background .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: #888; }
.chip input:checked + span { background: #f4f4f4; color: #000; border-color: #f4f4f4; }
.chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .row2 label { margin-top: 10px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; gap: 0; } }
.contact-form .form .btn { justify-self: stretch; text-align: center; }
.form-sub { text-align: center; margin-top: 4px !important; }
.form .chip { font-size: 14px; }

.contact-photo{margin-top:34px;border-radius:10px;overflow:hidden;aspect-ratio:21/9}.contact-photo img{width:100%;height:100%;object-fit:cover;display:block}

.h4-proof{background:var(--bg);padding:0 0 clamp(26px,3vw,40px)}
.h4-proof ul{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid var(--line);text-align:center}
.h4-proof li b{display:block;font:600 clamp(17px,1.6vw,21px) var(--head);color:var(--text)}
.h4-proof li span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.h4-proof .stars{color:#e8e8e8;letter-spacing:.08em;margin-right:6px}
.h4-proof a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.h4-proof ul{grid-template-columns:1fr;gap:16px}}
.h4-proof li b .stars{display:inline;margin:0 8px 0 0;font-size:inherit;color:#e8e8e8}

/* hero C: text nere till vänster + faktaband i full bredd */
.h4-hero{justify-content:flex-end}
.h4-hero .h1-in{padding-top:130px;padding-bottom:30px}
.h4-hero .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,0) 62%),linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 45%,rgba(0,0,0,.8))}
.h4-hero .h4-l1{font-size:clamp(44px,6.6vw,100px);max-width:11ch;line-height:1.02}
.h4-hero .h4-l2{max-width:30ch}
.h4-hero .eyebrow{letter-spacing:.2em;font-size:12px}
.h4-hero .h1-foot{border:0;margin:0;padding:0 0 14px;justify-content:flex-end}
.h4-hero .h1-slide img{animation:h4kb 18s ease-in-out infinite alternate}
@keyframes h4kb{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.h4-hero .h1-slide img{animation:none}}
.h4-band{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.h4-band>div{padding:18px clamp(18px,4vw,40px);font:400 13.5px var(--body);color:#d6d6d6}
.h4-band>div+div{border-left:1px solid rgba(255,255,255,.14)}
.h4-band b{display:flex;align-items:center;gap:8px;color:#fff;font:400 clamp(16px,1.5vw,20px) var(--head);margin-bottom:2px}
.h4-band .pin{flex:none;opacity:.9}
@media(max-width:700px){.h4-band{grid-template-columns:1fr}.h4-band>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}.h4-band>div{padding:12px 18px}.h4-hero .h1-in{padding-top:110px}}

/* hero: tunn centrerad rad (som förslag A) */
.h4-band{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(14px,3vw,38px);padding:20px 24px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid rgba(255,255,255,.2);font:400 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#e6e6e6;grid-template-columns:none}
.h4-band i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.55)}
@media(max-width:700px){.h4-band{gap:10px 16px;padding:16px 18px;font-size:11.5px;letter-spacing:.1em}.h4-band i{display:none}}
@media(max-width:700px){.h4-band{padding-bottom:78px;justify-content:flex-start}}
.h4-band{border-top:0}

/* hero A centrerad + faktaband från C */
.h4-hero .hero-shade{background:radial-gradient(ellipse at center,rgba(0,0,0,.42),rgba(0,0,0,.62) 75%),linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 30%,rgba(0,0,0,.7))}
.h4-hero .h1-in{margin-top:auto;margin-bottom:auto;padding-top:120px;padding-bottom:40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.h4-hero .h4-l1{max-width:none;font-size:clamp(42px,6.2vw,92px)}
.h4-hero .h4-l2{max-width:none;margin-top:16px}
.h4-hero .hero-cta{justify-content:center}
.h4-hero .h1-foot{display:none}
.h4-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0;justify-content:stretch;border-top:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-transform:none;letter-spacing:0;font:400 13.5px var(--body);color:#d6d6d6}
.h4-band>div{padding:18px clamp(18px,4vw,40px);text-align:left}
.h4-band>div+div{border-left:1px solid rgba(255,255,255,.14)}
.h4-band b{display:block;color:#fff;font:400 clamp(16px,1.5vw,20px) var(--head);margin-bottom:2px}
@media(max-width:700px){.h4-band{grid-template-columns:1fr;padding:0}.h4-band>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}.h4-band>div{padding:12px 18px}.h4-hero .h1-in{padding-top:100px}}
.h4-band b{display:flex;align-items:center;gap:8px}.h4-band .pin{flex:none;opacity:.9}

/* mindre "AI-känsla" på startsidan */
[data-home="4"] .sec-head .eyebrow,[data-home="4"] .h-card-n{display:none}
[data-home="4"] .h4-hero .eyebrow{text-transform:none;letter-spacing:.01em;font-size:16px;font-weight:400;color:#ececec}
[data-home="4"] .btn{text-transform:none;letter-spacing:0;font:500 15px/1 var(--body);padding:16px 24px}
[data-home="4"] .nav a,[data-home="4"] .dd-btn{text-transform:none;letter-spacing:0;font:400 15px/1 var(--body)}
[data-home="4"] .nav-cta{text-transform:none;letter-spacing:0}
[data-home="4"] .contact-list span{text-transform:none;letter-spacing:0;font-size:15px}
[data-home="4"] .partners h2{text-transform:none;letter-spacing:0;font:400 16px var(--body);color:var(--muted)}
[data-home="4"] .site-footer h3{text-transform:none;letter-spacing:0;font-size:15px}
[data-home="4"] .h-tag{text-transform:none;letter-spacing:0;font:500 12.5px var(--body);backdrop-filter:none;background:#000c}
[data-home="4"] .h2-door-b li{padding-left:0}
[data-home="4"] .h2-door-b li::before{display:none}
[data-home="4"] .h4-band{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,14,14,.82)}
[data-home="4"] .h4-hero .h1-slide img{animation-duration:30s}
[data-home="4"] .sec-head h2::after,[data-home="4"] h2::after{display:none!important}

[data-home="4"] .ko-head{max-width:640px}
[data-home="4"] .ko-head h1{font:300 clamp(36px,4.4vw,60px)/1.05 var(--head);letter-spacing:-.02em;margin:0 0 14px}
[data-home="4"] .ko-head .lead{font-size:18px;color:var(--muted)}
[data-home="4"] .ko-side .contact-list b{font-weight:400}
.ko-loc{display:inline-flex;align-items:center;gap:8px}
[data-home="4"] .ko-side .contact-photo{margin-top:26px}
[data-home="4"] .ko .form-card h2{font:400 clamp(22px,2vw,28px)/1.2 var(--head)}

[data-home="4"] .ko-side{position:sticky;top:96px;align-self:start}
.form input[type=file]{padding:10px 12px;font:400 14px var(--body);color:var(--muted)}
.form input[type=file]::file-selector-button{margin-right:12px;padding:9px 14px;border:0;border-radius:8px;background:#dcdcdc;color:#000;font:500 14px var(--body);cursor:pointer}


[data-home="4"] .ko-top{padding-bottom:10px}
[data-home="4"] .ko-top .hero-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.kq-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,70px);align-items:start}
.kq-faq details{border-top:1px solid var(--line)}
.kq-faq details:last-of-type{border-bottom:1px solid var(--line)}
.kq-faq .more-q{margin-top:18px}
.kq-faq .more-q a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.kq-side h3,.price-card h3{font:400 clamp(20px,1.8vw,24px)/1.25 var(--head);margin:0 0 14px}
.price-card{margin-top:26px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.price-card p{color:var(--muted);margin:0 0 18px}
.price-card .btn svg{flex:none}
@media(max-width:880px){.kq-grid{grid-template-columns:1fr}}
.ko-o .form-card h2{display:none}
[data-home="4"] .ko-q{padding-top:clamp(26px,3vw,44px)}

/* kontakt: snabbkontakt, steg */
[data-home="4"] .ko-top{padding-bottom:0}
[data-home="4"] .ko-head{margin-bottom:34px}
.ko-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ko-quick .qc{display:flex;flex-direction:column;gap:2px;padding:20px 20px 18px;border:1px solid var(--line,#2a2a2a);border-radius:14px;background:#161616;color:inherit;text-decoration:none;transition:border-color .2s,background .2s}
.ko-quick a.qc:hover{border-color:#6a6a6a;background:#1c1c1c}
.ko-quick .qc svg{margin-bottom:12px;color:#e8e8e8}
.ko-quick .qc-l{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ko-quick .qc b{font:400 20px/1.2 var(--head);margin-top:4px}
.ko-quick .qc-v{font-size:15px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.ko-quick .qc-loc{border-style:dashed}
.ko-steps{list-style:none;margin:0 0 26px;padding:0;counter-reset:s}
.ko-steps li{counter-increment:s;position:relative;padding:0 0 18px 46px;display:flex;flex-direction:column;gap:2px}
.ko-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border:1px solid #555;border-radius:50%;display:grid;place-items:center;font-size:14px;color:#ddd}
.ko-steps li::after{content:"";position:absolute;left:15px;top:36px;bottom:6px;width:1px;background:#333}
.ko-steps li:last-child::after{display:none}
.ko-steps b{font-weight:500;font-size:17px}
.ko-steps span{color:var(--muted);font-size:15.5px}
[data-home="4"] .ko-side h2{display:block!important;font:300 clamp(30px,3vw,42px)/1.1 var(--head);margin:0 0 26px;letter-spacing:-.01em}
[data-home="4"] .ko-o{padding-top:56px}
.ko-o .form-card h2{display:block!important;font:400 22px/1.2 var(--head);margin:0 0 18px}
.kq-side p{color:var(--muted);margin:0 0 16px}
@media(max-width:980px){.ko-quick{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ko-quick{grid-template-columns:1fr}.ko-quick .qc{padding:16px}.ko-quick .qc svg{margin-bottom:6px}}

/* bygglovsritningar */
.bl-hero{padding-bottom:30px}
.bl-hero-in{max-width:760px}
.bl-hero h1{font:300 clamp(40px,5.2vw,72px)/1.02 var(--head);letter-spacing:-.02em;margin:0 0 22px}
.bl-hero .lead{font-size:clamp(18px,1.6vw,21px);color:#e4e4e4;margin:0 0 14px}
.bl-sub{color:var(--muted);font-size:17px;margin:0 0 6px;max-width:640px}
.bl-hero .hero-cta,.bl-end .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.bl-hero .hero-cta .btn svg{margin-right:8px;vertical-align:-3px}
.bl-docs .sec-head .muted{margin:10px 0 0}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.bl-card{display:flex;flex-direction:column;background:#161616;border:1px solid #262626;border-radius:14px;overflow:hidden;padding-bottom:22px}
.bl-media{aspect-ratio:4/3;background:#222;overflow:hidden}
.bl-media img{width:100%;height:100%;object-fit:cover;display:block}
.bl-card h3{font:400 21px/1.2 var(--head);margin:20px 22px 8px}
.bl-card p{margin:0 22px;color:var(--muted);font-size:15.5px;line-height:1.55}
.bl-cta{justify-content:center;align-items:flex-start;border-style:dashed;background:transparent;padding:26px 0}
.bl-cta .btn{margin:20px 22px 0}
.bl-cta h3{margin-top:0}
.bl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.bl-steps li{border-top:1px solid #3a3a3a;padding-top:22px}
.bl-steps .n{display:block;font:300 15px var(--head);color:var(--muted);margin-bottom:14px}
.bl-steps b{display:block;font:400 22px/1.2 var(--head);margin-bottom:10px}
.bl-steps p{color:var(--muted);margin:0;font-size:16px;line-height:1.6}
.bl-end-in{border:1px solid #2c2c2c;border-radius:18px;background:#161616;padding:clamp(30px,5vw,60px);max-width:900px}
.bl-end h2{font:300 clamp(28px,3.4vw,44px)/1.1 var(--head);margin:0 0 12px}
.bl-end p{color:var(--muted);max-width:560px;margin:0}
@media(max-width:1000px){.bl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.bl-grid{grid-template-columns:1fr}.bl-steps{grid-template-columns:1fr}}

/* 3d-visualiseringar */
.vz-hero{padding-bottom:30px}
.vz-hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.vz-hero h1{font:300 clamp(40px,5vw,70px)/1.02 var(--head);letter-spacing:-.02em;margin:0 0 22px}
.vz-hero .lead{font-size:clamp(17px,1.5vw,20px);color:#e4e4e4;margin:0 0 14px}
.vz-hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.vz-hero .hero-cta svg{margin-right:8px;vertical-align:-4px}
.vz-hero-m{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#1a1a1a}
.vz-hero-m img{width:100%;height:100%;object-fit:cover;display:block}
.vz-types .sec-head .muted,.vz-show .sec-head .muted{margin:10px 0 0}
.vz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.vz-tile{display:flex;flex-direction:column;border:1px solid #262626;border-radius:14px;overflow:hidden;background:#161616;color:inherit;text-decoration:none;transition:border-color .2s,transform .3s}
.vz-tile:hover{border-color:#5a5a5a;transform:translateY(-3px)}
.vz-m{aspect-ratio:4/5;overflow:hidden;background:#222}
.vz-m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.vz-tile:hover .vz-m img{transform:scale(1.04)}
.vz-b{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.vz-b h3{font:400 19px/1.2 var(--head);margin:0}
.vz-b p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;flex:1}
.vz-b .more{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:10px;color:#e6e6e6}
.vz-gal{columns:3;column-gap:clamp(14px,1.6vw,22px)}
.vz-g{display:block;margin:0 0 clamp(14px,1.6vw,22px);border-radius:12px;overflow:hidden;break-inside:avoid;background:#1a1a1a}
.vz-g img{width:100%;height:auto;display:block;transition:transform .6s}
.vz-g:hover img{transform:scale(1.03)}
.vz-steps{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.vz-grid{grid-template-columns:repeat(2,1fr)}.vz-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.vz-hero-in{grid-template-columns:1fr}.vz-gal{columns:2}}
@media(max-width:560px){.vz-grid{grid-template-columns:1fr}.vz-steps{grid-template-columns:1fr}.vz-gal{columns:1}}

/* bygglov utveckling */
.bl-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.bl-hero-m{position:relative;padding-bottom:34px}
.bl-hero-ph{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#1a1a1a}
.bl-hero-ph img{width:100%;height:100%;object-fit:cover;display:block}
.bl-hero-plan{position:absolute;left:-28px;bottom:0;width:min(44%,260px);border-radius:10px;overflow:hidden;border:4px solid #151515;box-shadow:0 14px 40px rgba(0,0,0,.5);background:#fff}
.bl-hero-plan img{display:block;width:100%;height:auto}
.bl-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2e2e2e;margin-top:46px}
.bl-facts div{padding:22px 24px 4px 0;color:var(--muted);font-size:15px;line-height:1.5}
.bl-facts b{display:block;font:400 22px/1.2 var(--head);color:#f1f1f1;margin-bottom:4px}
.bl-who-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.bl-who-g div{border-left:1px solid #3a3a3a;padding-left:22px}
.bl-who-g b{display:block;font:400 22px/1.2 var(--head);margin-bottom:8px}
.bl-who-g p{margin:0;color:var(--muted);line-height:1.6}
.bl-prep-g{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.bl-prep .lead{color:var(--muted)}
.bl-check{list-style:none;margin:22px 0 0;padding:0}
.bl-check li{position:relative;padding:14px 0 14px 34px;border-top:1px solid #2a2a2a;font-size:17px}
.bl-check li:last-child{border-bottom:1px solid #2a2a2a}
.bl-check li::before{content:"";position:absolute;left:4px;top:19px;width:14px;height:8px;border-left:2px solid #ddd;border-bottom:2px solid #ddd;transform:rotate(-45deg)}
.bl-person{background:#161616;border:1px solid #2a2a2a;border-radius:16px;padding:30px}
.bl-tag{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bl-person h3{font:300 40px/1.1 var(--head);margin:10px 0 12px}
.bl-person p{color:var(--muted);margin:0 0 18px;line-height:1.6}
.bl-person .bl-mail{margin:0}
.bl-chips{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bl-chips span{border:1px solid #3a3a3a;border-radius:999px;padding:10px 18px;font-size:15.5px}
.bl-chips a{margin-left:8px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.bl-hero-grid,.bl-prep-g{grid-template-columns:1fr}.bl-hero-plan{left:10px}.bl-facts,.bl-who-g{grid-template-columns:1fr}.bl-facts div{padding-bottom:14px}}

/* bygglovsprojekt */
.pj-back{margin:0 0 26px;font-size:14px}.pj-back a{text-decoration:none;color:var(--muted)}.pj-back a:hover{color:#fff}
.pj-top{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.pj-hero h1{font:300 clamp(36px,4.6vw,64px)/1.04 var(--head);letter-spacing:-.02em;margin:0 0 22px}
.pj-hero .lead{font-size:clamp(17px,1.5vw,20px);color:#e4e4e4;margin:0 0 14px}
.pj-p{color:var(--muted);line-height:1.65;margin:0 0 12px;max-width:640px}
.pj-facts{margin:0;border-top:1px solid #333;font-size:15px}
.pj-facts div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #2a2a2a}
.pj-facts dt{color:var(--muted)}.pj-facts dd{margin:0;text-align:right}
.pj-heroimg{margin-top:clamp(30px,4vw,54px);border-radius:16px;overflow:hidden;background:#1a1a1a}
.pj-heroimg img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover}
.pj-sec .sec-head .muted{margin:10px 0 0}
.pj-gal{gap:clamp(14px,1.6vw,22px)}
.pj-vis{columns:2;column-gap:clamp(14px,1.6vw,22px)}
.pj-dr{display:grid;grid-template-columns:repeat(2,1fr)}
.pj-g{display:block;border-radius:12px;overflow:hidden;background:#1a1a1a}
.pj-vis .pj-g{margin-bottom:clamp(14px,1.6vw,22px);break-inside:avoid}
.pj-g img{display:block;width:100%;height:auto;transition:transform .6s}.pj-g:hover img{transform:scale(1.03)}
.pj-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.pj-card{color:inherit;text-decoration:none;display:block}
.pj-cm{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#1a1a1a;margin-bottom:14px}
.pj-cm img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.pj-card:hover .pj-cm img{transform:scale(1.04)}
.pj-card h3{font:400 20px/1.2 var(--head);margin:0 0 8px}
.pj-card .more{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:900px){.pj-top{grid-template-columns:1fr}.pj-cards{grid-template-columns:1fr}.pj-dr{grid-template-columns:1fr}}
@media(max-width:560px){.pj-vis{columns:1}}

.pj-dr .pj-g.wide{grid-column:1/-1}
.pj-extra{display:grid;grid-template-columns:repeat(3,1fr);columns:auto}
.pj-extra .pj-g{margin:0;aspect-ratio:4/3}
.pj-extra .pj-g img{width:100%;height:100%;object-fit:cover}
.pj-sec-x h2{font-size:clamp(22px,2.2vw,30px)}
@media(max-width:900px){.pj-extra{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pj-extra{grid-template-columns:1fr}}

@media(min-width:1001px){
.bl-proj7 .projects .proj:first-child{grid-column:span 2}
.bl-proj7 .projects .proj:first-child .proj-media{aspect-ratio:8/3.02}
}

.proj-cta{border:1px dashed #3d3d3d;border-radius:14px;justify-content:center}
.proj-cta-in{padding:28px}
.proj-cta h3{font:400 24px/1.2 var(--head);margin:0 0 10px}
.proj-cta p{color:var(--muted);margin:0 0 20px;display:block;-webkit-line-clamp:unset;font-size:16px}
[data-home="4"] .h-tag,[data-home="4"] .h-tag-b{color:#fff}
[data-home="4"] .h-tag-b{background:#000c;box-shadow:inset 0 0 0 1px #ffffff55}
/* citattecknet ska inte krocka med texten */
.h-reviews-grid .quotes blockquote{padding-top:34px}
.h-reviews-grid .quotes blockquote p{padding-right:34px}
.h-reviews-grid .quotes blockquote::before{top:2px;right:18px;font-size:64px;opacity:.18}
.h2-partners .marquee li{width:224px;justify-content:center;padding:10px 16px;box-sizing:border-box}

.ap-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px)}
.ap-step{display:flex;gap:clamp(16px,2vw,26px);border:1px solid #2c2c2c;border-radius:16px;background:#161616;padding:clamp(22px,3vw,34px)}
.ap-n{flex:none;font:200 clamp(40px,5vw,60px)/1 var(--head);color:#5a5a5a;letter-spacing:-.02em;min-width:1.6em}
.ap-body h3{font:400 clamp(20px,2vw,24px)/1.2 var(--head);margin:0 0 10px;color:#fff}
.ap-body p{color:var(--muted);margin:0 0 14px;font-size:16px;line-height:1.6}
.ap-tag{display:inline-block;font-size:13px;color:#fff;border:1px solid #ffffff44;border-radius:999px;padding:4px 12px}
.ap-hero .bl-hero-m{min-height:0}
.ap-two-g p .btn{margin-top:6px}
@media(max-width:800px){.ap-list{grid-template-columns:1fr}.ap-step{flex-direction:column;gap:8px}}

.ap-story-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.ap-story figure{margin:0}
.ap-fig{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#fff}
.ap-fig img{width:100%;height:100%;object-fit:cover;display:block}
.ap-story figure:first-child .ap-fig img{object-fit:contain;padding:12px}
.ap-story figcaption{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.5}
.ap-story figcaption b{display:block;color:#fff;font:400 18px var(--head);margin-bottom:4px}
@media(max-width:800px){.ap-story-g{grid-template-columns:1fr}.ap-fig{aspect-ratio:4/3}}

.om-pg{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,30px)}
.om-p{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);border:1px solid #2c2c2c;border-radius:18px;background:#161616;overflow:hidden}
.om-ph{aspect-ratio:3/4;overflow:hidden}.om-ph img{width:100%;height:100%;object-fit:cover;display:block}
.om-pt{padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;justify-content:center}
.om-pt h3{font:400 clamp(22px,2.2vw,28px)/1.15 var(--head);margin:12px 0 10px;color:#fff}
.om-pt p{color:var(--muted);margin:0 0 16px;font-size:16px;line-height:1.6}
.om-story-g{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center}
.om-story p{color:var(--muted);line-height:1.7}.om-story p.lead{color:#fff}
.om-story-img{border-radius:16px;overflow:hidden;aspect-ratio:4/5}.om-story-img img{width:100%;height:100%;object-fit:cover;display:block}
.om-why-g{grid-template-columns:repeat(4,1fr)}
.om-work-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);margin-bottom:28px}.om-work-g figure{margin:0}
.om-work .ap-fig{aspect-ratio:4/3}.om-work figure:last-child .ap-fig img{object-fit:contain;padding:8px}
@media(max-width:1000px){.om-why-g{grid-template-columns:repeat(2,1fr)}.om-pg{grid-template-columns:1fr}}
@media(max-width:800px){.om-story-g,.om-work-g{grid-template-columns:1fr}.om-p{grid-template-columns:1fr}.om-ph{aspect-ratio:1/1}.om-why-g{grid-template-columns:1fr}}

.om-when{border-top:1px solid #2c2c2c;padding-top:12px;font-size:15px!important}.om-when b{display:block;color:#fff;font-weight:500;margin-bottom:2px}
.om-reviews .quotes{margin-top:8px}
.om-partners{padding-block:clamp(40px,6vw,72px)}

.area-in{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;border:1px solid #2c2c2c;border-radius:18px;background:#161616;padding:clamp(26px,4vw,54px)}
.area-in h2{font:300 clamp(26px,3vw,40px)/1.15 var(--head);margin:6px 0 14px}
.area-in .lead{color:var(--muted);margin:0;max-width:560px}
.area-chips{display:flex;flex-wrap:wrap;gap:10px}
.area-chips span{border:1px solid #ffffff3a;border-radius:999px;padding:8px 16px;font-size:15px;color:#fff}
.area-chips .area-all{border-style:dashed;color:var(--muted)}
@media(max-width:850px){.area-in{grid-template-columns:1fr}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fq-hero{padding-bottom:clamp(20px,3vw,40px)}
.fq-hero h1{font:300 clamp(40px,6vw,76px)/1.05 var(--head);margin:6px 0 16px}
.fq-hero .lead{max-width:640px;color:var(--muted)}
.fq-search{display:block;max-width:560px;margin-top:26px}
.fq-search input{width:100%;box-sizing:border-box;background:#161616;border:1px solid #333;border-radius:999px;color:#fff;padding:15px 22px;font:400 16px var(--body,inherit)}
.fq-search input:focus{outline:2px solid #fff;outline-offset:2px}
.fq-grid{display:grid;grid-template-columns:230px 1fr;gap:clamp(24px,5vw,72px);align-items:start}
.fq-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:4px}
.fq-nav a{color:var(--muted);text-decoration:none;padding:10px 14px;border-left:2px solid #2c2c2c;font-size:16px}
.fq-nav a:hover{color:#fff;border-color:#fff}
.fq-grp{margin-bottom:clamp(30px,4vw,56px);scroll-margin-top:100px}
.fq-grp h2{font:300 clamp(24px,2.6vw,34px)/1.15 var(--head);margin:0 0 16px}
.fq-none{color:var(--muted)}
@media(max-width:850px){.fq-grid{grid-template-columns:1fr}.fq-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}.fq-nav a{border:1px solid #333;border-radius:999px;padding:8px 14px}}
.vs-hero .pj-back{margin:0 0 18px}.vs-hero .pj-back a{color:var(--muted);text-decoration:none;font-size:15px}
.vs-hero .bl-hero-ph a{display:block;height:100%}
.vs-vid video{width:100%;border-radius:16px;display:block;background:#000}
.vs-text .lead{max-width:820px;color:#fff}
.vs-gets-g{grid-template-columns:repeat(3,1fr)}
.vs-for{margin:28px 0 0;color:var(--muted);border-top:1px solid #2c2c2c;padding-top:18px}.vs-for b{color:#fff;font-weight:500}
.vs-videos .videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.vs-videos video{width:100%;border-radius:14px;background:#000;display:block}.vs-videos figure{margin:0}
.vs-other-g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,22px)}
.vs-o{display:block;text-decoration:none;color:#fff}
.vs-om{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#1b1b1b}.vs-om img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.vs-o:hover .vs-om img{transform:scale(1.05)}.vs-o span{display:block;margin-top:10px;font:400 17px var(--head)}
@media(max-width:900px){.vs-gets-g{grid-template-columns:1fr}.vs-other-g{grid-template-columns:repeat(2,1fr)}}
.pg-hero h1{font:300 clamp(40px,6vw,76px)/1.05 var(--head);margin:6px 0 16px}.pg-hero .lead{max-width:680px;color:var(--muted)}
.pg-filter{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pg-filter button{background:none;border:1px solid #444;color:#fff;border-radius:999px;padding:10px 18px;font:400 15px var(--body,inherit);cursor:pointer}
.pg-filter button.on{background:#fff;color:#000;border-color:#fff}
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.pg-card{display:block;text-decoration:none;color:#fff;border:1px solid #2c2c2c;border-radius:16px;overflow:hidden;background:#161616;transition:border-color .25s,transform .25s}
.pg-card:hover{border-color:#777;transform:translateY(-3px)}.pg-card[hidden]{display:none}
.pg-m{aspect-ratio:4/3;overflow:hidden;background:#222}.pg-m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.pg-card:hover .pg-m img{transform:scale(1.04)}
.pg-b{padding:18px 20px 22px}.pg-b h3{font:400 21px/1.2 var(--head);margin:8px 0 4px}.pg-b p{margin:0;color:var(--muted);font-size:15px}
.pg-tag{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#bbb}
@media(max-width:1000px){.pg-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.pg-grid{grid-template-columns:1fr}}

.cmp{width:100%}
.cmp-stage{position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:#111;touch-action:pan-y;user-select:none}
.cmp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cmp-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;box-shadow:0 0 12px #0008}
.cmp-knob{position:absolute;top:50%;left:50%;width:48px;height:48px;border-radius:50%;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);box-shadow:0 4px 18px #0009}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.cmp-range:focus-visible + *{outline:none}
.cmp:focus-within .cmp-knob{outline:3px solid #fff;outline-offset:3px}
.cmp-lab{position:absolute;bottom:14px;background:#000b;color:#fff;font-size:13px;padding:6px 12px;border-radius:999px;pointer-events:none;letter-spacing:.02em}
.cmp-lab-b{left:14px}.cmp-lab-a{right:14px}
.cmp-hint{margin:12px 2px 0;color:var(--muted);font-size:14px;text-align:center}
.cmp.used .cmp-hint{opacity:.6}

.vs-hero-wide .bl-hero-grid{display:block}
.vs-hero-wide .bl-hero-in{max-width:820px}
.vs-hero-wide{padding-bottom:0}
.vs-cmp-sec{padding-top:clamp(20px,3vw,40px)}
.vs-cmp-big .cmp-stage{aspect-ratio:3/2;border-radius:20px}
.vs-cmp-big .cmp-knob{width:64px;height:64px}
.vs-cmp-big .cmp-lab{font-size:15px;padding:8px 16px;bottom:20px}
.vs-cmp-big .cmp-lab-b{left:20px}.vs-cmp-big .cmp-lab-a{right:20px}
.vs-cmp-big .cmp-hint{font-size:15px;margin-top:16px}
@media(max-width:700px){.vs-cmp-big .cmp-stage{aspect-ratio:4/3}.vs-cmp-big .cmp-knob{width:52px;height:52px}}
.vs-nom{display:flex;align-items:center;justify-content:center}.vs-nom::after{content:"\25B6";color:#ffffff88;font-size:30px}

.tv-tabs{display:flex;gap:10px;margin-bottom:16px}
.tv-tabs button{background:none;border:1px solid #444;color:#fff;border-radius:999px;padding:11px 24px;font:400 16px var(--body,inherit);cursor:pointer}
.tv-tabs button.on{background:#fff;color:#000;border-color:#fff}
.tv-stage{position:relative;border-radius:20px;overflow:hidden;background:#111;aspect-ratio:3/2}
.tv-pane{position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none}
.tv-pane.on{opacity:1;pointer-events:auto}
.tv-pane a{display:block;height:100%;cursor:zoom-in}
.tv-pane img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.tv-stage{aspect-ratio:4/3}}

/* ---- Bostadsväljare (interaktiv) ---- */
.bv-top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-bottom:14px}
.bv-top .tv-tabs{margin:0}
.bv-legend{display:flex;gap:18px;font-size:14px;color:#bbb}
.bv-legend i,.bv-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.s-L{--c:#4ade80}.s-R{--c:#fbbf24}.s-S{--c:#f87171}
.bv-legend i,.bv-dot{background:var(--c)}
.bv-filter{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-bottom:16px;font-size:14px;color:#bbb}
.bv-chips{display:flex;gap:8px;flex-wrap:wrap}
.bv-chips button{background:none;border:1px solid #444;color:#fff;border-radius:999px;padding:7px 15px;font:400 14px var(--body,inherit);cursor:pointer}
.bv-chips button.on{background:#fff;color:#000;border-color:#fff}
.bv-filter label{display:flex;align-items:center;gap:8px}
.bv-filter select{background:#111;color:#fff;border:1px solid #444;border-radius:8px;padding:7px 10px;font:inherit}
.bv-count{margin-left:auto;color:#999}
.bv-stage{position:relative;border-radius:20px;overflow:hidden;background:#111;aspect-ratio:3/2}
.bv-pane{position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none}
.bv-pane.on{opacity:1;pointer-events:auto}
.bv-pane img{width:100%;height:100%;object-fit:fill;display:block}
.bv-pane svg{position:absolute;inset:0;width:100%;height:100%}
.bv-h{fill:var(--c);fill-opacity:.12;stroke:var(--c);stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity .2s,opacity .2s;outline:none}
.bv-h.hi,.bv-h:focus-visible{fill-opacity:.38;stroke-opacity:1;stroke-width:2}
.bv-h.sel{fill-opacity:.42;stroke:#fff;stroke-opacity:1;stroke-width:2.4}
.bv-h.dim{opacity:.12;pointer-events:none}
.bv-arr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:22px;cursor:pointer;z-index:3}
.bv-arr.l{left:12px}.bv-arr.r{right:12px}
.bv-tip{position:absolute;z-index:4;pointer-events:none;background:rgba(15,15,15,.92);color:#fff;border-radius:12px;padding:14px 16px;min-width:190px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.bv-tip b,.bv-card b{font-size:18px;margin-right:10px}
.bv-st{display:inline-block;font-size:13px;padding:3px 10px;border-radius:999px;background:var(--c);color:#111;font-weight:600}
.bv-tip dl,.bv-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0;font-size:14px}
.bv-tip dt,.bv-card dt{color:#aaa}.bv-tip dd,.bv-card dd{margin:0}
.bv-card{margin-top:16px;padding:20px 22px;border:1px solid #333;border-radius:16px;background:#141414}
.bv-card dl{grid-template-columns:repeat(4,auto);justify-content:start;gap:4px 28px}
.bv-card dl dt{grid-row:1}.bv-card dl dd{grid-row:2;font-size:17px}
.bv-card dl dt:nth-of-type(1),.bv-card dl dd:nth-of-type(1){grid-column:1}
.bv-card dl dt:nth-of-type(2),.bv-card dl dd:nth-of-type(2){grid-column:2}
.bv-card dl dt:nth-of-type(3),.bv-card dl dd:nth-of-type(3){grid-column:3}
.bv-card dl dt:nth-of-type(4),.bv-card dl dd:nth-of-type(4){grid-column:4}
.bv-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.bv-tw{margin-top:22px;overflow-x:auto;border:1px solid #2a2a2a;border-radius:16px}
.bv-t{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.bv-t th{background:#000;text-align:left;padding:13px 16px;font-weight:600;color:#fff}
.bv-t td{padding:12px 16px;border-top:1px solid #222}
.bv-t tbody tr{cursor:pointer;transition:background .15s}
.bv-t tbody tr.hi{background:#1c1c1c}.bv-t tbody tr.sel{background:#262626}
.bv-t tbody tr[hidden]{display:none}
.bv-demo{margin-top:12px;font-size:13px;color:#888}
@media(max-width:700px){.bv-stage{aspect-ratio:3/2}.bv-card dl{grid-template-columns:repeat(2,auto)}.bv-card dl dt,.bv-card dl dd{grid-column:auto!important;grid-row:auto!important}.bv-card dl{grid-template-columns:auto 1fr}.bv-count{margin-left:0}.bv-arr{width:38px;height:38px}}

/* ---- Bostadsväljare: lägenhetshus, två kolumner ---- */
.bv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:start}
.bv-left{position:sticky;top:90px}
.bv-stage{width:100%;max-height:86vh;margin:0 auto}
.bv-top{margin-bottom:12px}
.bv-legend{margin-bottom:14px}
.bv-card{margin:0 0 16px;min-height:150px}
.bv-card .muted{color:#888;margin:0}
.bv-card dl{grid-template-columns:repeat(5,auto)}
.bv-card dl dt:nth-of-type(5),.bv-card dl dd:nth-of-type(5){grid-column:5}
.bv-tw{margin-top:0;max-height:430px;overflow:auto}
.bv-t{min-width:520px}
.bv-t thead th{position:sticky;top:0;z-index:1}
.bv-demo{grid-column:1/-1;margin:0}
@media(max-width:900px){.bv{grid-template-columns:1fr}.bv-left{position:static}.bv-stage{max-height:none}.bv-card dl{grid-template-columns:auto 1fr}.bv-card dl dt,.bv-card dl dd{grid-column:auto!important;grid-row:auto!important}}
.bv{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bv-t td,.bv-t th{white-space:nowrap;padding:11px 12px}
.bv-t{min-width:600px;font-size:14.5px}
@media(min-width:901px){.bv{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px}.bv-stage{max-height:none}.bv-tw{overflow-x:auto}}
/* ---- Bostadsväljare: stor bild överst, resten under ---- */
@media(min-width:901px){
.bv{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"top legend" "stage stage" "filter filter" "card tw" "demo demo";gap:18px 32px;align-items:start}
.bv-right{display:contents}
.bv-left{display:contents}
.bv-top{grid-area:top;margin:0;align-self:center}
.bv-legend{grid-area:legend;margin:0;justify-self:end;align-self:center}
.bv-stage{grid-area:stage;aspect-ratio:1.4/1!important;max-height:none;border-radius:22px}
.bv-pane{inset:auto;left:0;right:0;top:-44.8%;height:186.7%}
.bv-filter{grid-area:filter}
.bv-card{grid-area:card;margin:0;min-height:0}
.bv-tw{grid-area:tw;max-height:460px}
.bv-demo{grid-area:demo}
.bv-arr{width:52px;height:52px;font-size:24px}
.bv-t{min-width:0;width:100%}
}
.bv-nobtn{cursor:default;pointer-events:none}
/* ---- Visualiseringar: kategorikort ---- */
.vz-grid{grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,20px)}
.vz-tile{position:relative;grid-column:span 4;min-height:340px;border:0;border-radius:20px;background:#161616;isolation:isolate}
.vz-tile:nth-child(1){grid-column:span 7;min-height:460px}
.vz-tile:nth-child(2){grid-column:span 5;min-height:460px}
.vz-m{position:absolute;inset:0;aspect-ratio:auto;z-index:-2}
.vz-m img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.vz-tile:hover .vz-m img{transform:scale(1.07)}
.vz-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.78) 100%);transition:opacity .4s}
.vz-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none;transition:box-shadow .3s}
.vz-tile:hover{transform:none}
.vz-tile:hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.vz-n{position:absolute;top:18px;left:20px;font:400 13px var(--body,inherit);letter-spacing:.14em;color:rgba(255,255,255,.8)}
.vz-b{margin-top:auto;padding:clamp(20px,2.2vw,30px);gap:8px;flex:none;position:relative}
.vz-b h3{font:400 clamp(22px,2.1vw,30px)/1.15 var(--head)}
.vz-tile:nth-child(-n+2) .vz-b h3{font-size:clamp(26px,2.6vw,38px)}
.vz-b p{color:rgba(255,255,255,.82);font-size:15px;max-width:44ch;flex:none}
.vz-b .more{margin-top:8px;display:inline-flex;align-items:center;gap:8px;color:#fff}
.vz-b .more span{display:inline-block;transition:transform .3s}
.vz-tile:hover .vz-b .more span{transform:translateX(5px)}
@media(max-width:1000px){.vz-tile,.vz-tile:nth-child(1),.vz-tile:nth-child(2){grid-column:span 6;min-height:320px}}
@media(max-width:600px){.vz-tile,.vz-tile:nth-child(1),.vz-tile:nth-child(2){grid-column:1/-1;min-height:300px}}
/* ---- Visualiseringar: helbildshero, "allt under ett tak", varför ---- */
.vz-hero2{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;background:#111}
.vz-bg{position:absolute;inset:0;z-index:-2}
.vz-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
.vz-hero2::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 35%,rgba(10,10,10,.92) 100%),linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 60%)}
.vz-h2-in{padding-top:140px;padding-bottom:clamp(40px,6vw,80px)}
.vz-h2-in h1{font-size:clamp(44px,7vw,96px);line-height:1.02;margin:.15em 0 .3em;max-width:14ch}
.vz-h2-in .lead{max-width:58ch;color:rgba(255,255,255,.88)}
.vz-all{padding-top:clamp(56px,7vw,100px)}
.vz-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.vz-3>div{border-top:1px solid #333;padding-top:22px}
.vz-3 .n{display:block;font-size:13px;letter-spacing:.14em;color:#8a8a8a;margin-bottom:14px}
.vz-3 h3{font:400 clamp(21px,2vw,27px)/1.2 var(--head);margin:0 0 10px}
.vz-3 p{margin:0;color:var(--muted);line-height:1.6}
.vz-why-in{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,5vw,80px);align-items:start;border-top:1px solid #333;padding-top:clamp(28px,4vw,56px)}
.vz-why-in h2{margin:0}
.vz-why-in p{margin:0 0 1em;color:#d4d4d4;font-size:clamp(16px,1.3vw,19px);line-height:1.7}
@media(max-width:800px){.vz-3,.vz-why-in{grid-template-columns:1fr}.vz-hero2{min-height:560px}}
/* ---- Solstudie ---- */
.sun-stage{position:relative;border-radius:22px;overflow:hidden;background:#111;aspect-ratio:2000/1332}
.sun-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sun-time{position:absolute;left:clamp(16px,2.4vw,32px);bottom:clamp(14px,2vw,28px);display:flex;flex-direction:column;gap:2px;text-shadow:0 2px 18px rgba(0,0,0,.6);z-index:2}
.sun-time b{font:300 clamp(44px,7vw,96px)/1 var(--head);letter-spacing:-.01em}
.sun-time span{font-size:clamp(12px,1.1vw,15px);letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.sun-play{position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);width:58px;height:58px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;z-index:2;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s}
.sun-play:hover{background:rgba(0,0,0,.75)}
.play .sun-play svg path{d:path("M6 4h4v16H6zM14 4h4v16h-4z")}
.sun-ctl{margin-top:22px}
.sun-ctl input{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,#ffb27a,#fff3c4 30%,#fff 55%,#ffc27a 85%,#ff8a5a);outline:none;cursor:pointer}
.sun-ctl input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.sun-ctl input::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.sun-ticks{display:flex;justify-content:space-between;margin-top:10px}
.sun-ticks button{background:none;border:0;color:#8a8a8a;font:inherit;font-size:13px;letter-spacing:.1em;cursor:pointer;padding:4px 6px}
.sun-ticks button.on,.sun-ticks button:hover{color:#fff}
.sun-note{margin:14px 0 0;color:#888;font-size:13px}
@media(max-width:700px){.sun-stage{aspect-ratio:4/3}.sun-play{width:48px;height:48px}}
/* ---- Visualiseringar: kategorikort ---- */
.vz-grid{grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,20px)}
.vz-tile{position:relative;grid-column:span 4;min-height:340px;border:0;border-radius:20px;background:#161616;isolation:isolate}
.vz-tile:nth-child(1){grid-column:span 7;min-height:460px}
.vz-tile:nth-child(2){grid-column:span 5;min-height:460px}
.vz-m{position:absolute;inset:0;aspect-ratio:auto;z-index:-2}
.vz-m img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.vz-tile:hover .vz-m img{transform:scale(1.07)}
.vz-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.78) 100%);transition:opacity .4s}
.vz-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none;transition:box-shadow .3s}
.vz-tile:hover{transform:none}
.vz-tile:hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.vz-n{position:absolute;top:18px;left:20px;font:400 13px var(--body,inherit);letter-spacing:.14em;color:rgba(255,255,255,.8)}
.vz-b{margin-top:auto;padding:clamp(20px,2.2vw,30px);gap:8px;flex:none;position:relative}
.vz-b h3{font:400 clamp(22px,2.1vw,30px)/1.15 var(--head)}
.vz-tile:nth-child(-n+2) .vz-b h3{font-size:clamp(26px,2.6vw,38px)}
.vz-b p{color:rgba(255,255,255,.82);font-size:15px;max-width:44ch;flex:none}
.vz-b .more{margin-top:8px;display:inline-flex;align-items:center;gap:8px;color:#fff}
.vz-b .more span{display:inline-block;transition:transform .3s}
.vz-tile:hover .vz-b .more span{transform:translateX(5px)}
@media(max-width:1000px){.vz-tile,.vz-tile:nth-child(1),.vz-tile:nth-child(2){grid-column:span 6;min-height:320px}}
@media(max-width:600px){.vz-tile,.vz-tile:nth-child(1),.vz-tile:nth-child(2){grid-column:1/-1;min-height:300px}}
/* ---- Visualiseringar: helbildshero, "allt under ett tak", varför ---- */
.vz-hero2{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden;background:#111}
.vz-bg{position:absolute;inset:0;z-index:-2}
.vz-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
.vz-hero2::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 35%,rgba(10,10,10,.92) 100%),linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 60%)}
.vz-h2-in{padding-top:140px;padding-bottom:clamp(40px,6vw,80px)}
.vz-h2-in h1{font-size:clamp(44px,7vw,96px);line-height:1.02;margin:.15em 0 .3em;max-width:14ch}
.vz-h2-in .lead{max-width:58ch;color:rgba(255,255,255,.88)}
.vz-all{padding-top:clamp(56px,7vw,100px)}
.vz-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.vz-3>div{border-top:1px solid #333;padding-top:22px}
.vz-3 .n{display:block;font-size:13px;letter-spacing:.14em;color:#8a8a8a;margin-bottom:14px}
.vz-3 h3{font:400 clamp(21px,2vw,27px)/1.2 var(--head);margin:0 0 10px}
.vz-3 p{margin:0;color:var(--muted);line-height:1.6}
.vz-why-in{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,5vw,80px);align-items:start;border-top:1px solid #333;padding-top:clamp(28px,4vw,56px)}
.vz-why-in h2{margin:0}
.vz-why-in p{margin:0 0 1em;color:#d4d4d4;font-size:clamp(16px,1.3vw,19px);line-height:1.7}
@media(max-width:800px){.vz-3,.vz-why-in{grid-template-columns:1fr}.vz-hero2{min-height:560px}}
/* ---- Ljusreglage (solstudie) ---- */
.sun-stage{position:relative;border-radius:22px;overflow:hidden;background:#111;aspect-ratio:1923/1160}
.sun-stage img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .15s linear}
.sun-glow,.sun-tint,.sun-vig{position:absolute;inset:0;pointer-events:none}
.sun-glow{mix-blend-mode:screen}
.sun-tint{mix-blend-mode:soft-light;opacity:0}
.sun-vig{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 100%);opacity:.12}
.sun-time{position:absolute;left:clamp(16px,2.4vw,32px);bottom:clamp(14px,2vw,28px);display:flex;flex-direction:column;gap:2px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.sun-time b{font:300 clamp(40px,6vw,84px)/1 var(--head);letter-spacing:-.01em}
.sun-time span{font-size:clamp(13px,1.2vw,16px);letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.sun-ctl{display:flex;align-items:center;gap:16px;margin-top:20px;color:#b5b5b5;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.sun-ctl input{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,#ff9a6a,#ffe9a8 35%,#fff 50%,#ffc07a 75%,#ff7a5a 90%,#4a54a8);outline:none;cursor:pointer}
.sun-ctl input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.sun-ctl input::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.sun-note{margin:14px 0 0;color:#888;font-size:13px}
@media(max-width:700px){.sun-ctl span{display:none}.sun-stage{aspect-ratio:4/3}}
/* ---- Videosida ---- */
.vid-sec{padding-top:clamp(24px,3vw,48px)}
.vid-f{margin:0;position:relative}
.vid-f video{width:100%;display:block;border-radius:20px;background:#111}
.vid-f figcaption{margin-top:12px;color:#aaa;font-size:14px;letter-spacing:.04em}
.vid-big .vid-f video{aspect-ratio:1642/1080;object-fit:cover}
.vid-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(18px,2.4vw,32px)}
.vid-row .vid-f video{aspect-ratio:3/4;object-fit:cover}
@media(max-width:800px){.vid-row{grid-template-columns:1fr 1fr}.vid-row .vid-f:nth-child(3){grid-column:1/-1;max-width:50%}}

/* partners v2 */
.h4p2{padding:56px 0 60px!important;background:linear-gradient(180deg,#0e0e0e,#131517)}
.h4p2 .sec-head{text-align:center;margin-bottom:30px!important}
.h4p-eye{display:inline-block;font:600 11px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.h4p2 h2{font:600 clamp(24px,2.6vw,34px) var(--head,var(--body))!important;color:#fff!important;letter-spacing:-.01em!important;text-transform:none!important}
.h4p-sub{margin:10px auto 0;max-width:640px;color:#9aa3a9;font-size:15px}
.h4p2 .marquee{margin-top:14px}
.h4p2 .marquee-track{gap:14px!important;padding-right:14px!important;animation-duration:60s}
.h4p2 .marquee.rev .marquee-track{animation-direction:reverse;animation-duration:70s}
.h4p2 .marquee li{width:216px!important;height:84px!important;padding:12px 20px!important;border-radius:14px!important;background:#e9edef!important;border:1px solid rgba(255,255,255,.06);box-sizing:border-box;justify-content:center;transition:background .3s,transform .3s}
.h4p2 .marquee li img{filter:grayscale(1) contrast(1.05);opacity:.78;mix-blend-mode:multiply;transition:filter .3s,opacity .3s;max-height:48px;max-width:100%;object-fit:contain}
.h4p2 .marquee li:hover{background:#fff!important;transform:translateY(-3px)}
.h4p2 .marquee li:hover img{filter:none;opacity:1;transform:none}
@media(max-width:700px){.h4p2 .marquee li{width:150px!important;height:64px!important;padding:8px 12px!important}}
@media(prefers-reduced-motion:reduce){.h4p2 .marquee-track{animation:none}}

/* partners v3 */
.h4p3{padding:70px 0;background:#0e0e0e}
.h4p3-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(30px,5vw,70px);align-items:center}
.h4p3 h2{font:600 clamp(26px,3vw,38px) var(--head,var(--body));color:#fff;letter-spacing:-.01em;margin:0 0 12px}
.h4p3-txt p{color:#9aa3a9;font-size:16px;margin:0 0 26px}
.h4p3-st{display:flex;gap:26px;border-top:1px solid rgba(255,255,255,.1);padding-top:20px}
.h4p3-st b{display:block;font:600 26px var(--head,var(--body));color:#fff}
.h4p3-st span{font-size:13px;color:#8d969c}
.h4p3-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}
.h4p3-grid li{background:#121416;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:16px 18px;transition:background .3s}
.h4p3-grid li:hover{background:#1a1d20}
.h4p3-grid img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.7;transition:opacity .3s}
.h4p3-grid li:hover img{opacity:1}
@media(max-width:900px){.h4p3-in{grid-template-columns:1fr}.h4p3-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.h4p3-grid{grid-template-columns:repeat(2,1fr)}}
.h4p3-in{grid-template-columns:1fr!important;gap:36px!important}
.h4p3-txt{display:grid;grid-template-columns:1.3fr 1fr;gap:20px 60px;align-items:end}
.h4p3-txt .h4p-eye,.h4p3-txt h2,.h4p3-txt p{grid-column:1}
.h4p3-st{grid-column:2;grid-row:1/4;border-top:0;padding:0;justify-content:flex-end}
.h4p3-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.h4p3-grid li{aspect-ratio:16/10;min-width:0}
.h4p3-grid img{opacity:.85}
.h4p3-grid li.more{font:500 14px var(--body);color:#8d969c;letter-spacing:.04em}
@media(max-width:900px){.h4p3-txt{grid-template-columns:1fr}.h4p3-st{grid-column:1;grid-row:auto;justify-content:flex-start}.h4p3-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:520px){.h4p3-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.h4p3-grid li{padding:18px 30px!important}
.h4p3-grid img{max-height:36px!important}

/* partners v4 */
.h4p4{padding:72px 0 80px;background:radial-gradient(60% 80% at 50% 0,#171b1f,#0e0e0e 70%)}
.h4p4-head{text-align:center;max-width:720px;margin:0 auto 40px}
.h4p4 h2{font:600 clamp(26px,3.2vw,42px)/1.15 var(--head,var(--body));color:#fff;margin:0 0 12px;letter-spacing:-.015em}
.h4p4 h2 em{font-style:normal;color:var(--accent)}
.h4p4-head p{color:#9aa3a9;margin:0;font-size:16px}
.h4p4-cloud{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.h4p4-cloud li{height:62px;padding:0 26px;border-radius:999px;background:#f4f6f7;display:flex;align-items:center;box-shadow:0 8px 24px -12px #000;transition:transform .3s,box-shadow .3s}
.h4p4-cloud li:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 16px 30px -12px #000}
.h4p4-cloud li:nth-child(3n+1){transform:translateY(6px)}
.h4p4-cloud li:nth-child(3n+1):hover{transform:translateY(2px)}
.h4p4-cloud img{height:auto;width:auto;max-height:34px;max-width:150px;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:600px){.h4p4-cloud li{height:52px;padding:0 18px}.h4p4-cloud img{max-height:26px;max-width:110px}}
.h4p4-head{max-width:860px!important}.h4p4 h2{text-wrap:balance}
.h4p2 .marquee li img{filter:none!important;opacity:1!important;mix-blend-mode:normal!important}
.h4p2 .marquee.sm li{width:164px!important;height:60px!important;padding:8px 14px!important;border-radius:12px!important}
.h4p2 .marquee.sm li img{max-height:34px}
.h4p2 .marquee.sm .marquee-track{animation-duration:55s}
.h4p2 .marquee:not(.sm) li{width:236px!important;height:92px!important}
.h4p2 .marquee:not(.sm) li img{max-height:56px}
.h4p2 .marquee li{background:#fff!important}.h4p2 .marquee li:hover{background:#fff!important}
.h4p2 .marquee li,.h4p2 .marquee li:hover{background:transparent!important;border:0!important;box-shadow:none!important}
.h4p2 .marquee li img{filter:none!important;opacity:.92!important}
.h4p2 .marquee li:hover img{opacity:1!important;transform:scale(1.06)}
.h4p2 .marquee li img{max-height:none!important;max-width:none!important}
.h4p2 .marquee li{width:auto!important;padding:0 28px!important}
.h4p2 .marquee .marquee-track{gap:20px!important}
.h4p2 .marquee-track{animation-duration:80s!important}
.h4p2 .marquee.rev .marquee-track{animation-duration:95s!important}
.h4p2 .marquee li{padding:0 34px!important;height:92px!important}
.h4p2 .marquee.sm li{height:68px!important}
.h4p2{background:#eef1f3!important;color:#111!important}
.h4p2 h2{color:#111827!important}
.h4p2 .h4p-eye{color:#4f7a93}
.h4p2 .h4p-sub{color:#5d6770}
.h4p2 .marquee li img{opacity:1!important}
[data-home="4"] .h4p2 h2,[data-home="4"] .partners.h4p2 h2{color:#111827!important;font-weight:600!important;font-size:clamp(26px,2.8vw,36px)!important}
.h4p2 .marquee-track{gap:0!important;padding-right:0!important}
.h4p2 .marquee li{width:310px!important;height:104px!important;padding:0!important;justify-content:center!important;align-items:center!important}
.h4p2 .marquee.sm li{width:260px!important;height:84px!important}
.h4p2 .marquee{margin-top:6px!important}
@media(max-width:700px){.h4p2 .marquee li{width:220px!important;height:80px!important}.h4p2 .marquee.sm li{width:190px!important;height:68px!important}.h4p2 .marquee li img{transform:scale(.72)}}
.h4p2 .marquee:not(.sm) li{width:320px!important;height:108px!important}
.h4p2 .marquee li img{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s;image-rendering:auto}
.h4p2 .marquee li:hover img{transform:scale(1.1)!important;filter:drop-shadow(0 8px 14px rgba(17,24,39,.22))!important}
.h4p2 .marquee .marquee-track{animation-duration:110s!important}
.h4p2 .marquee li,.h4p2 .marquee:not(.sm) li{width:auto!important;height:110px!important;padding:0 46px!important}
.h4p2{padding:56px 0 48px!important}
@media(max-width:700px){.h4p2 .marquee li,.h4p2 .marquee:not(.sm) li{height:80px!important;padding:0 28px!important}.h4p2 .marquee li img{transform:scale(.7)}}
.h4p2 .marquee li,.h4p2 .marquee:not(.sm) li{padding:0 36px!important}
.h4p2{padding:30px 0 22px!important}
.h4p2 .h4p-eye,.h4p2 .h4p-sub{display:none!important}
.h4p2 .sec-head{margin-bottom:6px!important}
[data-home="4"] .h4p2 h2,[data-home="4"] .partners.h4p2 h2{font-size:clamp(20px,2vw,26px)!important}
.h4p2 .marquee,.h4p2 .marquee{margin-top:0!important}
.h4p2 .marquee li,.h4p2 .marquee:not(.sm) li{height:84px!important}
.h4p2 .marquee li img{transform:scale(.88)}
.h4p2 .marquee li:hover img{transform:scale(.98)!important}
/* partners v5: ljus, enfärgad grå rad */
.h4p5{background:#ece9e6!important;padding:34px 0 30px!important}
[data-home="4"] .h4p5 h2,[data-home="4"] .partners.h4p5 h2{font:500 15px var(--body)!important;color:#111!important;letter-spacing:0!important;text-transform:none!important;text-align:center}
.h4p5 .marquee li,.h4p5 .marquee:not(.sm) li{height:76px!important;padding:0 40px!important;width:auto!important}
.h4p5 .marquee li img{transform:none!important;opacity:.95!important;filter:none!important}
.h4p5 .marquee li:hover img{transform:none!important;filter:none!important;opacity:1!important}
.h4p5 .marquee .marquee-track{animation-duration:90s!important}
@media(max-width:700px){.h4p5 .marquee li img{transform:scale(.75)!important}}
.h4p5 .marquee .marquee-track{animation-duration:45s!important}
.h4p5 .marquee li,.h4p5 .marquee:not(.sm) li{padding:0 22px!important}
/* partners v5b: svart sektion, rubrik i vitt, ljust band bara runt loggorna */
.h4p5{background:#0e0e0e!important;padding:34px 0 0!important}
[data-home="4"] .h4p5 h2,[data-home="4"] .partners.h4p5 h2{color:#fff!important;font:500 15px var(--body)!important;margin:0 0 20px!important}
.h4p5 .sec-head{margin-bottom:0!important}
.h4p5 .marquee{background:#ece9e6;padding:14px 0}
.h4p5 .marquee{-webkit-mask:none!important;mask:none!important;position:relative}
.h4p5 .marquee::before,.h4p5 .marquee::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.h4p5 .marquee::before{left:0;background:linear-gradient(90deg,#ece9e6,#ece9e600)}
.h4p5 .marquee::after{right:0;background:linear-gradient(270deg,#ece9e6,#ece9e600)}
/* test: vita loggor på svart */
.h4p5.w{padding:34px 0 30px!important}
.h4p5.w .marquee{background:transparent!important;padding:0}
.h4p5.w .marquee::before{background:linear-gradient(90deg,#0e0e0e,#0e0e0e00)}
.h4p5.w .marquee::after{background:linear-gradient(270deg,#0e0e0e,#0e0e0e00)}
.h4p5.w .marquee li img{filter:brightness(0) invert(1)!important;opacity:.85!important}
.h4p5.w .marquee li:hover img{opacity:1!important}
.h4p5.w .marquee li img{opacity:1!important}
/* portfolio: tjockare, vita rubriker */
.h1-port .h-card-b b,[data-home="4"] .h1-port .h-card-b b{color:#fff!important;font-weight:700!important;letter-spacing:-.005em}
[data-home="4"] .h1-port .sec-head h2,.h1-port .h4-head h2{color:#fff!important;font-weight:600!important}
/* arbetsprocess v2 */
.ap-hero2{padding:clamp(70px,9vw,120px) 0 10px}
.ap-hero2 h1{font-size:clamp(40px,6vw,76px);margin:6px 0 14px;font-weight:600;letter-spacing:-.02em}
.ap-hero2 .lead{max-width:560px;color:var(--muted);font-size:clamp(16px,1.5vw,19px)}
.ap-flow{padding-top:clamp(40px,5vw,70px)}
.ap-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;counter-reset:s}
.ap-row::before{content:"";position:absolute;left:10%;right:10%;top:27px;height:2px;background:linear-gradient(90deg,#3a3a3a,var(--accent) 50%,#3a3a3a)}
.ap-st{position:relative;text-align:center;padding:0 clamp(8px,1.2vw,18px)}
.ap-dot{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 20px;border-radius:50%;background:#0e0e0e;border:2px solid var(--accent);color:#fff;font:600 20px var(--head)}
.ap-st h3{margin:0 0 8px;font:600 clamp(18px,1.6vw,22px) var(--head);color:#fff}
.ap-st p{margin:0 0 14px;color:#b8b8b8;font-size:15px;line-height:1.5}
.ap-meta{display:inline-block;padding:5px 12px;border-radius:999px;background:#1a1a1a;border:1px solid #2e2e2e;color:var(--accent);font-size:12px;letter-spacing:.02em}
.ap-cta{justify-content:center;margin-top:clamp(40px,5vw,64px)}
@media(max-width:900px){
 .ap-row{grid-template-columns:1fr;gap:26px}
 .ap-row::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,#3a3a3a,var(--accent) 50%,#3a3a3a)}
 .ap-st{text-align:left;display:grid;grid-template-columns:56px 1fr;column-gap:18px;padding:0}
 .ap-dot{grid-row:1/4;margin:0}
 .ap-st h3,.ap-st p,.ap-meta{grid-column:2}
 .ap-meta{justify-self:start}
}
.ap-hero2{padding:clamp(60px,6vw,84px) 0 0!important;min-height:0!important}
.ap-flow{padding-top:clamp(30px,3.5vw,50px)!important}
@media(min-width:901px){.ap-st{display:flex;flex-direction:column;align-items:center}.ap-meta{margin-top:auto}.ap-st p{margin-bottom:16px}}

/* bygglov v2 */
.bl-x-g{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.bl-x-m{position:relative;display:grid;grid-template-columns:1fr;gap:14px}
.bl-x-m img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;display:block;border:1px solid #2a2a2a;background:#fff}
.bl-x-m img:first-child{object-fit:contain;padding:4px}
.bl-x-t h2{margin:6px 0 14px}
.bl-x-t .lead{color:#b8b8b8;margin:0 0 22px}
@media(min-width:901px){.ap-row.ap-4{grid-template-columns:repeat(4,1fr)}.ap-row.ap-4::before{left:12.5%;right:12.5%}}
.bl-how .sec-head{margin-bottom:clamp(28px,4vw,48px)}
@media(max-width:900px){.bl-x-g{grid-template-columns:1fr}}

/* viz-galleri v2 */
.pj-vis .pj-more{display:none}
.pj-vis.all .pj-more{display:block}
.pj-morebtn{margin-top:clamp(24px,3vw,40px)}
.pj-vis{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.pj-vis .pj-g{margin:0;display:block;overflow:hidden;border-radius:10px}
.pj-vis .pj-g img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease}
.pj-vis .pj-g:hover img{transform:scale(1.04)}
.pj-vis.all .pj-more{display:block}
@media(max-width:900px){.pj-vis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pj-vis{grid-template-columns:1fr}}
.pj-vis .pj-g.pj-more{display:none}
.pj-vis.all .pj-g.pj-more{display:block}

/* solstudie v2 */
.sol-use-g{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.sol-use-g>div{padding:6px clamp(16px,2vw,28px);border-left:1px solid #2c2c2c}
.sol-use-g>div:first-child{border-left:0;padding-left:0}
.sol-use-g b{display:block;font:500 clamp(18px,1.5vw,21px) var(--head);color:#fff;margin-bottom:8px}
.sol-use-g p{margin:0;color:#b8b8b8;font-size:15px;line-height:1.55}
.sol-use .sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sol-use .sec-head .muted{max-width:60ch}
.sol-how .sec-head{margin-bottom:clamp(28px,4vw,48px)}
@media(max-width:900px){.sol-use-g{grid-template-columns:1fr 1fr;row-gap:28px}.sol-use-g>div:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:560px){.sol-use-g{grid-template-columns:1fr}.sol-use-g>div{border-left:0;padding-left:0}}
.sol-cta{padding-top:0}
.h4p5 .marquee li,.h4p5 .marquee:not(.sm) li{height:92px!important}

/* projektsidor v2 */
.pj-hero2{padding-bottom:clamp(30px,4vw,56px)}
.pj-hero2 h1{font:300 clamp(40px,5.4vw,76px)/1.02 var(--head);letter-spacing:-.025em;margin:0 0 20px}
.pj-h2img{position:relative;border-radius:18px;overflow:hidden;background:#1a1a1a;margin-top:clamp(14px,2vw,24px)}
.pj-h2img>a{display:block}
.pj-h2img img{display:block;width:100%;height:clamp(380px,62vh,720px);object-fit:cover}
.pj-h2shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000 38%,#000c 100%);pointer-events:none}
.pj-h2in{position:absolute;left:clamp(20px,3.5vw,48px);right:clamp(20px,3.5vw,48px);bottom:clamp(20px,3vw,40px);pointer-events:none}
.pj-h2in h1{margin:0;text-shadow:0 2px 24px #0008}
.pj-h2in .eyebrow{margin:0 0 12px;color:#fff}
.pj-h2body{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(28px,4vw,52px)}
.pj-h2txt .lead{font-size:clamp(18px,1.6vw,21px);color:#ececec;margin:0 0 14px}
.pj-h2txt .pj-p{color:#b8b8b8;margin:0 0 12px}
.pj-facts2{margin:0;display:grid;gap:12px}
.pj-facts2>div{background:#161616;border:1px solid #262626;border-radius:12px;padding:16px 20px}
.pj-facts2 dt{font:500 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#8d949a;margin-bottom:6px}
.pj-facts2 dd{margin:0;font:400 clamp(17px,1.5vw,20px) var(--head);color:#fff}
@media(max-width:900px){.pj-h2body{grid-template-columns:1fr}}
.pj-vis{grid-auto-rows:clamp(190px,21vw,300px);grid-auto-flow:dense}
.pj-vis .pj-g img{aspect-ratio:auto!important;height:100%}
@media(max-width:900px){.pj-vis .pj-g:nth-child(n){grid-column:auto!important}.pj-vis .pj-g:nth-child(5n+1){grid-column:1/-1!important}}
@media(max-width:560px){.pj-vis{grid-auto-rows:clamp(200px,60vw,320px)}.pj-vis .pj-g:nth-child(n){grid-column:auto!important}}

/* kontakt: bild fyller sidan ner till knappen */
@media(min-width:881px){
.ko-grid{align-items:stretch}
[data-home="4"] .ko-side{position:static;display:flex;flex-direction:column;align-self:stretch}
.ko-side .ko-photo{flex:1 1 0;aspect-ratio:auto;min-height:0;margin:26px 0 143px;position:relative}.ko-side .ko-photo img{position:absolute;inset:0;object-position:50% 55%}
.ko-side .ko-photo img{height:100%}
}
@media(max-width:880px){.ko-side .ko-photo{aspect-ratio:16/9}}
/* kontakt-sektion: bilden fyller ner till knappen */
@media(min-width:881px){
.contact-in{align-items:stretch!important}
.contact-in .contact-text{display:flex;flex-direction:column}
.contact-in .contact-text .contact-photo{flex:1 1 0;min-height:0;aspect-ratio:auto;position:relative;margin-bottom:54px}
.contact-in .contact-text .contact-photo img{position:absolute;inset:0;object-position:50% 55%}
}

/* projektgalleri v3: stora bilder, layout efter antal */
@media(min-width:701px){
.pj-sec .pj-vis{grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;grid-auto-flow:row;gap:clamp(12px,1.3vw,20px)}
.pj-sec .pj-vis .pj-g{grid-column:span 3}
.pj-sec .pj-vis .pj-g img{height:auto!important;aspect-ratio:4/3!important;width:100%}
.pj-sec .pj-vis .pj-g:nth-child(3n+1){grid-column:span 6}
.pj-sec .pj-vis .pj-g:nth-child(3n+1) img{aspect-ratio:16/8!important}
.pj-sec .pj-vis .pj-g:last-child:nth-child(3n+2){grid-column:span 6}
.pj-sec .pj-vis .pj-g:last-child:nth-child(3n+2) img{aspect-ratio:16/8!important}
/* 1 bild */
.pj-sec .pj-vis .pj-g:only-child img{aspect-ratio:16/9!important}
/* 2 bilder */
.pj-sec .pj-vis .pj-g:first-child:nth-last-child(2),.pj-sec .pj-vis .pj-g:first-child:nth-last-child(2)~.pj-g{grid-column:span 3}
.pj-sec .pj-vis .pj-g:first-child:nth-last-child(2) img,.pj-sec .pj-vis .pj-g:first-child:nth-last-child(2)~.pj-g img{aspect-ratio:4/3!important}
/* 4 bilder = 2x2 */
.pj-sec .pj-vis .pj-g:first-child:nth-last-child(4),.pj-sec .pj-vis .pj-g:first-child:nth-last-child(4)~.pj-g{grid-column:span 3}
.pj-sec .pj-vis .pj-g:first-child:nth-last-child(4) img,.pj-sec .pj-vis .pj-g:first-child:nth-last-child(4)~.pj-g img{aspect-ratio:4/3!important}
/* 5 bilder = 2 + 3 */
.pj-sec .pj-vis .pj-g:first-child:nth-last-child(5),.pj-sec .pj-vis .pj-g:first-child:nth-last-child(5)+.pj-g{grid-column:span 3}
.pj-sec .pj-vis .pj-g:first-child:nth-last-child(5)~.pj-g:nth-child(n+3){grid-column:span 2}
.pj-sec .pj-vis .pj-g:first-child:nth-last-child(5)~.pj-g:nth-child(n+3) img{aspect-ratio:1/1!important}
.pj-sec .pj-vis .pj-g:first-child:nth-last-child(5) img,.pj-sec .pj-vis .pj-g:first-child:nth-last-child(5)+.pj-g img{aspect-ratio:4/3!important}
}
@media(max-width:700px){
.pj-sec .pj-vis{grid-template-columns:1fr;grid-auto-rows:auto}
.pj-sec .pj-vis .pj-g:nth-child(n){grid-column:auto!important}
.pj-sec .pj-vis .pj-g img{height:auto!important;aspect-ratio:4/3!important}
}
main:has(.pj-vis) .wrap{max-width:min(1480px,100% - 48px)}

/* viz-tjänster v3: stora lika bilder, 3 per rad */
@media(min-width:1001px){
.vz-grid{grid-template-columns:repeat(6,1fr)}
.vz-tile,.vz-tile:nth-child(1),.vz-tile:nth-child(2){grid-column:span 2;min-height:0;aspect-ratio:1/1.05}
.vz-tile:nth-child(n+7){grid-column:span 3;aspect-ratio:3/2}
.vz-tile:nth-child(-n+2) .vz-b h3{font-size:clamp(22px,2.1vw,30px)}
}
.vz-types .wrap{max-width:min(1480px,100% - 48px)}

/* footer v2 */
.site-footer{padding:clamp(56px,6vw,84px) 0 28px}
.site-footer .cols.f4{grid-template-columns:1.5fr .8fr .8fr 1.3fr;gap:clamp(28px,4vw,64px);padding-bottom:clamp(36px,4vw,56px)}
.site-footer .f-brand p{max-width:34ch;margin:0 0 4px;line-height:1.6}
.site-footer h3{font:500 12.5px/1 var(--body)!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#8d949a!important;margin:6px 0 20px}
.site-footer li{margin-bottom:12px;line-height:1.35}
.site-footer li a{color:#e8e8e8}
.site-footer li a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-footer .f-contact li{display:flex;flex-direction:column;gap:3px}
.site-footer .f-contact li span{font-size:12.5px;color:#8d949a}
.site-footer .f-contact li{color:#e8e8e8}
.site-footer .social{margin-top:22px;display:flex;gap:6px}
.site-footer .legal{padding-top:24px}
@media(max-width:900px){.site-footer .cols.f4{grid-template-columns:1fr 1fr}.site-footer .f-brand{grid-column:1/-1}}
@media(max-width:520px){.site-footer .cols.f4{grid-template-columns:1fr}}

/* ===== accent: sand (ta bort detta block för att gå tillbaka till svartvitt) ===== */
:root{--accent:#B8955A;--accent-hover:#C9A96F;--accent-ink:#111}
.btn:not(.ghost):not(.x),.nav-cta{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
.btn:not(.ghost):not(.x):hover,.nav-cta:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important}
.btn.ghost:hover{border-color:var(--accent)!important;color:var(--accent)!important}
.chip input:checked+span{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
.form input:focus,.form textarea:focus,.form select:focus{outline-color:var(--accent)!important;border-color:var(--accent)!important}
.site-footer li a:hover,.more-q a:hover,.site-footer .legal a:hover{color:var(--accent)!important}
.pg-filter button.on{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important}

/* om oss v2 */
.om-hero .bl-facts b{font:300 clamp(30px,3.2vw,44px)/1.1 var(--head);display:block;margin-bottom:6px}
.om-hero .bl-hero-m img{border-radius:22px}
.om-people .wrap{max-width:min(1280px,100% - 48px)}
.om-pg{gap:clamp(18px,2.6vw,36px)}
.om-p{display:flex;flex-direction:column;border-radius:24px;background:#141414;border-color:#262626;transition:border-color .3s,transform .4s}
.om-p:hover{border-color:#4a4a4a;transform:translateY(-3px)}
.om-ph{aspect-ratio:4/4.4;position:relative}
.om-ph::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,#141414)}
.om-ph img{object-position:50% 20%;filter:grayscale(1) contrast(1.03);transition:filter .5s,transform .8s}
.om-p:hover .om-ph img{filter:grayscale(.2);transform:scale(1.03)}
.om-pt{padding:0 clamp(22px,2.6vw,36px) clamp(24px,2.6vw,34px);margin-top:-18px;position:relative;z-index:1;justify-content:flex-start}
.om-pt h3{font:300 clamp(28px,2.8vw,38px)/1.1 var(--head)}
.om-pt .bl-tag{color:var(--accent,#B8955A)}
.om-when{border-top:1px solid #2a2a2a;padding-top:14px}
.om-when b{display:block;color:#fff;font-weight:500;margin-bottom:2px}
.om-story-g{gap:clamp(32px,6vw,96px)}
.om-story-img{border-radius:24px}
.om-quote{margin:26px 0 28px;padding:4px 0 4px 22px;border-left:2px solid var(--accent,#B8955A);font:300 clamp(22px,2.2vw,30px)/1.3 var(--head);color:#fff;letter-spacing:-.01em}
.om-why-g{gap:clamp(12px,1.4vw,20px);counter-reset:w}
.om-why-g>div{counter-increment:w;background:#141414;border:1px solid #262626;border-radius:18px;padding:26px 24px 28px;transition:border-color .3s}
.om-why-g>div:hover{border-color:#4a4a4a}
.om-why-g>div::before{content:counter(w,decimal-leading-zero);display:block;font:400 13px var(--body);letter-spacing:.14em;color:var(--accent,#B8955A);margin-bottom:22px}
.om-why-g>div b{display:block;font:400 clamp(20px,1.8vw,24px)/1.2 var(--head);margin-bottom:10px;color:#fff}
.om-work-g .ap-fig{border-radius:18px;overflow:hidden}
@media(max-width:800px){.om-ph{aspect-ratio:4/4.6}}

/* ---- arbetsprocess v2 ---- */
.ap2-hero{padding-top:clamp(120px,14vw,170px)}
.ap2-hero-g{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.ap2-hero h1{margin:.2em 0 .3em}
.ap2-hero-img{border-radius:20px;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.08)}
.ap2-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.ap2-facts{margin-top:clamp(36px,5vw,64px)}
.ap2-flow .sec-head{margin-bottom:34px}
.ap2-list{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:18px}
.ap2-list:before{content:"";position:absolute;left:35px;top:30px;bottom:30px;width:1px;background:linear-gradient(var(--accent),rgba(255,255,255,.08))}
.ap2-st{position:relative;display:grid;grid-template-columns:72px 1fr 1.25fr;gap:clamp(16px,3vw,40px);align-items:start;background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,30px) clamp(20px,2.4vw,30px) 0}
.ap2-n{width:56px;height:56px;margin-left:8px;border-radius:50%;background:#0f0f0f;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font:500 15px var(--head);letter-spacing:.04em;position:relative;z-index:1;margin-top:2px}
.ap2-main h3{font:400 clamp(24px,2.4vw,32px)/1.15 var(--head);margin:0 0 8px;letter-spacing:-.01em}
.ap2-main p{margin:0 0 14px;color:#b8b8b8;line-height:1.55}
.ap2-do{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ap2-do>div{background:#0f0f0f;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.5;color:#cfcfcf}
.ap2-l{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.ap2-st .ap-meta{display:inline-block}
@media(max-width:900px){
 .ap2-hero-g{grid-template-columns:1fr}
 .ap2-st{grid-template-columns:56px 1fr;padding:20px 16px 20px 0}
 .ap2-n{width:44px;height:44px;margin-left:10px}
 .ap2-list:before{left:31px}
 .ap2-do{grid-column:1/-1;margin-left:16px;grid-template-columns:1fr}
}

/* ---- bygglov polish ---- */
.bl-more-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bl-more-g>*{display:flex;flex-direction:column;gap:6px;background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px 22px 20px;color:inherit;text-decoration:none}
.bl-more-g b{font:400 19px/1.25 var(--head);color:#fff}
.bl-more-g p{margin:0;color:#b8b8b8;font-size:15px;line-height:1.5}
.bl-more-g a{border-color:var(--accent)}
.bl-more-g a span{margin-top:auto;padding-top:10px;color:var(--accent);font-size:14px}
@media(max-width:1000px){.bl-more-g{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bl-more-g{grid-template-columns:1fr}}
.bl-drawhero .bl-hero-ph{background:#fff;border:1px solid rgba(255,255,255,.1)}
.bl-drawhero .bl-hero-ph img{object-fit:contain;padding:10px}
.bl-simon{padding-top:0}
.bl-simon-in{display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,3vw,36px);align-items:center;background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:clamp(18px,2.4vw,28px)}
.bl-simon-ph{aspect-ratio:1;border-radius:50%;overflow:hidden;filter:grayscale(1)}
.bl-simon-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.bl-simon-t .bl-tag{color:var(--accent)}
.bl-simon-t h2{font:400 clamp(28px,3vw,38px)/1.1 var(--head);margin:6px 0 8px}
.bl-simon-t p{margin:0 0 16px;color:#b8b8b8;max-width:620px;line-height:1.55}
.bl-prep-1{grid-template-columns:1fr!important;max-width:760px}
@media(max-width:600px){.bl-simon-in{grid-template-columns:96px 1fr;align-items:start}.bl-simon-t p{font-size:15px}}
.bl-x-m img:first-child{object-fit:cover;padding:0;background:#161616}
.bl-hero-who{display:flex;align-items:center;gap:14px;margin:22px 0 16px}
.bl-hw-ph{width:56px;height:56px;border-radius:50%;overflow:hidden;filter:grayscale(1);flex:none;border:2px solid var(--accent)}
.bl-hw-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.bl-hw-t{display:flex;flex-direction:column;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.bl-hw-t b{font:400 20px/1.2 var(--head);text-transform:none;letter-spacing:0;color:#fff}
.vz-hero2::before{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.3) 40%,rgba(10,10,10,.95) 100%),linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 65%,rgba(0,0,0,0) 100%)}
.vz-hero2 .lead,.vz-hero2 .bl-hw-t{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.vz-hero2 .bl-hw-t{color:#d8b87c}
.bl-vzhero .bl-hero-ph{background:#1a1a1a}
.bl-vzhero .bl-hero-ph img{object-fit:cover;padding:0}
.bl-vzhero .bl-hero-plan{background:#161616}
.bl-x-m img[alt="Fasadritning"]{object-fit:contain!important;padding:8px!important;background:#fff!important}
.vz-bl-hero h1{font-size:clamp(34px,4.7vw,68px);white-space:nowrap}
@media(max-width:520px){.vz-bl-hero h1{font-size:clamp(28px,9vw,40px)}}
.bl-prep-1{max-width:none!important}
.bl-prep-1 .bl-check{max-width:640px}

/* ---- mobil: robusthet ---- */
h1,h2,h3{overflow-wrap:break-word}
.tv-tabs{flex-wrap:wrap}
@media(max-width:520px){
 .tv-tabs button{padding:9px 16px;font-size:15px}
 .pj-hero h1,.pj-h h1,main h1{font-size:clamp(28px,9.2vw,44px);hyphens:auto;-webkit-hyphens:auto}
 .pj-facts dd{text-align:right}
}
@media(max-width:880px){
 .ko-grid .form-card{order:-1}
 .ko-side .ko-photo{display:none}
 .ko-side{margin-top:6px}
}
@media(max-width:520px){
 .ko-quick{grid-template-columns:1fr 1fr!important;gap:10px}
 .ko-quick .qc{padding:14px}
 .ko-quick .qc b{font-size:17px}
 .ko-quick .qc-v{font-size:13px}
 .ko-quick .qc svg{display:none}
}
@media(max-width:700px){main:has(.pj-vis) .wrap{max-width:100%}}
.vs-m360-g{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,5vw,72px);align-items:center}
.vs-m360-t h2{font:400 clamp(30px,3.4vw,46px)/1.1 var(--head);margin:0 0 14px}
.vs-m360-t .lead{color:#b8b8b8;margin:0 0 22px}
.vs-m360 .vid-f{max-width:380px;width:100%}
@media(max-width:800px){.vs-m360-g{grid-template-columns:1fr}.vs-m360 .vid-f{max-width:340px}}
.vs-m360-2{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:clamp(20px,3vw,40px);margin:32px 0 28px}
.vs-m360-2 .vid-f{max-width:none}
.vs-m360-t{max-width:620px}
@media(max-width:800px){.vs-m360-2{grid-template-columns:1fr;gap:24px}.vs-m360-2 .vid-f{max-width:340px}}
.vs-m360-2 .vid-f video{aspect-ratio:3/4;object-fit:cover}
/* guider */
.gd-hero{padding-top:clamp(110px,14vw,170px);padding-bottom:20px}
.gd-hero h1{font:400 clamp(36px,5vw,60px)/1.08 var(--head);margin:0 0 18px}
.gd-hero .lead{color:#c9c9c9;max-width:60ch}
.gd-meta{color:#8e8e8e;font-size:14px;margin-top:18px}
.gd-sec{padding-top:30px}
.gd-body{max-width:700px;font-size:18px;line-height:1.7;color:#d2d2d2}
.gd-body h2{font:400 clamp(24px,2.6vw,32px)/1.2 var(--head);color:#fff;margin:2.2em 0 .5em}
.gd-body h2:first-child{margin-top:0}
.gd-body p{margin:0 0 1.1em}
.gd-body ul,.gd-body ol{margin:0 0 1.3em;padding-left:1.3em}
.gd-body li{margin:.45em 0}
.gd-body li::marker{color:var(--accent)}
.gd-body b{color:#fff;font-weight:600}
.gd-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.gd-note{border-left:3px solid var(--accent);background:#161616;border-radius:0 12px 12px 0;padding:16px 20px;margin:1.4em 0;font-size:16px;line-height:1.6}
.gd-src{font-size:14px;color:#8e8e8e;border-top:1px solid #2a2a2a;padding-top:18px;margin-top:2.2em}
.gd-more{padding-top:10px}
.gd-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gd-cards3{grid-template-columns:repeat(3,1fr)}
.gd-card{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid #2c2c2c;border-radius:16px;background:#161616;text-decoration:none;color:#fff;transition:border-color .2s,transform .2s}
.gd-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.gd-card b{font:500 19px/1.3 var(--head)}
.gd-card span{color:#a8a8a8;font-size:15px;line-height:1.5}
.fq-guides{padding-top:40px;padding-bottom:20px}
@media(max-width:800px){.gd-cards,.gd-cards3{grid-template-columns:1fr}.gd-body{font-size:17px}}
.gd-body ul{list-style:disc}.gd-body ol{list-style:decimal}
.bl-end-wide{max-width:1120px}
@media(min-width:1000px){.bl-end-wide .hero-cta{flex-wrap:nowrap}.bl-end-wide .hero-cta .btn{white-space:nowrap}}
.ko-quick .qc-loc svg{width:20px;height:20px}
@media(min-width:881px){.ko-side .ko-photo{margin-bottom:34px}}
.price-card .pc-tag{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.f-brand .f-orter{margin-top:10px;font-size:13.5px;line-height:1.55}
/* mobil: större tryckytor och läsbar liten text */
@media(max-width:700px){
.site-footer li a,.site-footer .f-contact a{display:inline-block;padding:11px 0}
.site-footer .f-contact li{margin-bottom:2px}
.site-footer .social a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.site-footer .legal{gap:6px}
.site-footer .legal a{display:inline-block;padding:12px 4px}
.cookie p a{display:inline-block;padding:10px 4px}
.cookie .btn,.cookie button{min-height:46px}
.proj .more,.more-q a,.pj-back a,.contact-list a{display:inline-block;padding:12px 0}
.proj-body h3 a{display:inline-block;padding:6px 0}
.fine a{display:inline-block;padding:10px 2px}
.eyebrow,.pg-tag,.ap-meta,.h-tag,.qc-l,.bl-tag,.fine,.pc-tag,.form small,.btn.nav-cta,.tack .btn{font-size:13px}
.bv-t button,.bv-arr,.bv-f button,select{min-height:44px}
.btn{min-height:46px}
}
@media(max-width:700px){
.site-footer .f-contact span,.site-footer .legal,.site-footer .legal a,.form-sub,.qc-l,.h-tag,.nav .btn.nav-cta,.nav a.btn{font-size:13px!important}
[class*="bv"] button,[class*="bv"] select{min-height:44px}
}
@media(max-width:700px){.sun-ticks button{padding:13px 8px}}
/* nyckeltal: jämnare och lugnare */
.bl-facts{border-top:0;gap:clamp(18px,3vw,40px);margin-top:50px}
.bl-facts>div{border-left:2px solid var(--accent);padding:2px 0 2px 20px}
.bl-facts b{margin-bottom:6px}
@media(max-width:900px){.bl-facts{gap:18px}.bl-facts>div{padding-bottom:2px}}
/* galleri: bilderna visas hela, utan beskärning (murverk-layout) */
.pj-gal.pj-vis,.pj-sec .pj-vis{display:block!important;columns:2;column-gap:clamp(12px,1.4vw,20px)}
.vs-gal:not(.pj-sec) .pj-gal.pj-vis{columns:3}
.pj-gal.pj-vis .pj-g{display:block;break-inside:avoid;grid-column:auto!important;margin:0 0 clamp(12px,1.4vw,20px)!important;aspect-ratio:auto!important}
.pj-gal.pj-vis .pj-g.pj-more{display:none}
.pj-gal.pj-vis.all .pj-g.pj-more{display:block}
.pj-gal.pj-vis .pj-g img,.pj-sec .pj-vis .pj-g img,.pj-extra .pj-g img{width:100%;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}
.pj-gal.pj-extra .pj-g{aspect-ratio:auto}
.pj-dr .pj-g img{height:auto;object-fit:contain}
@media(max-width:900px){.vs-gal:not(.pj-sec) .pj-gal.pj-vis{columns:2}}
@media(max-width:560px){.pj-gal.pj-vis,.pj-sec .pj-vis{columns:1}}
html body .pj-sec .pj-vis .pj-g:nth-child(n):nth-child(n):nth-child(n):nth-child(n) img,html body .pj-gal .pj-g:nth-child(n):nth-child(n):nth-child(n):nth-child(n) img{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important}
/* större logga */
.logo img{height:54px}
.site-header.scrolled .logo img{height:44px}
@media(min-width:1061px){:root{--hh:92px}.logo img{height:60px}.site-header.scrolled .logo img{height:46px}}
@media(max-width:700px){.logo img{height:46px}.site-header.scrolled .logo img{height:40px}}

/* ===== Animationer: FAQ glider, knappar ===== */
html { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .38s cubic-bezier(.2, .7, .2, 1), opacity .3s, content-visibility .38s allow-discrete; }
details[open]::details-content { block-size: auto; opacity: 1; }
.btn::after { content: "→"; display: inline-block; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(-8px); transition: max-width .3s var(--ease), opacity .25s, transform .3s var(--ease); }
.btn:hover::after, .btn:focus-visible::after { max-width: 1.4em; opacity: 1; transform: none; }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn:not(.ghost):not(.dark):hover { box-shadow: 0 12px 30px rgba(184, 149, 90, .32); }
@media (prefers-reduced-motion: reduce) { .btn::after { transition: none; } }

/* Runda profilbilder: guldglöd i accentfärgen (gråskalan ligger på bilden så att glöden behåller sin färg) */
.bl-simon-ph, .bl-hw-ph { filter: none; box-shadow: 0 0 0 2px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 54px color-mix(in srgb, var(--accent) 28%, transparent); }
.bl-simon-ph img, .bl-hw-ph img { filter: grayscale(1); }
.bl-hw-ph { border: 0; box-shadow: 0 0 0 2px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 44px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Arbetsprocess: linjen ritas och stegen tänds i tur och ordning */
html.js .ap-row::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.5s cubic-bezier(.4, 0, .2, 1); }
html.js .ap-row.in::before { transform: none; }
html.js .ap-st .ap-dot { transform: scale(.72); transition: transform .6s var(--ease) var(--d, 0ms), box-shadow .8s var(--d, 0ms), background .4s var(--d, 0ms); }
html.js .ap-st.lit .ap-dot { transform: none; box-shadow: 0 0 0 6px rgba(184, 149, 90, .12), 0 0 24px rgba(184, 149, 90, .38); }
@media (max-width: 900px) {
  html.js .ap-row::before { transform: scaleY(0); transform-origin: center top; }
  html.js .ap-row.in::before { transform: none; }
}

.lb-c{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:.85rem;letter-spacing:.12em;pointer-events:none}
.lb-x,.lb-p,.lb-n{transition:opacity .2s,color .2s,transform .2s}.lb-x:hover{color:var(--accent);transform:rotate(90deg)}.lb-p:hover,.lb-n:hover{color:var(--accent)}

/* 2: mjuk bildinladdning */
@media (prefers-reduced-motion:no-preference){
html.js img.imgfade{opacity:0}
html.js img.imgfade.ld{opacity:1;animation:imgIn .8s cubic-bezier(.2,.8,.2,1)}
@keyframes imgIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
}
/* 3: mobilmenyn glider in */
@media (max-width:1060px) and (prefers-reduced-motion:no-preference){
.nav > *{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.nav.open > *{opacity:1;transform:none}
.nav.open > *:nth-child(1){transition-delay:.08s}.nav.open > *:nth-child(2){transition-delay:.14s}.nav.open > *:nth-child(3){transition-delay:.2s}.nav.open > *:nth-child(4){transition-delay:.26s}.nav.open > *:nth-child(5){transition-delay:.32s}.nav.open > *:nth-child(6){transition-delay:.38s}.nav.open > *:nth-child(n+7){transition-delay:.44s}
}
/* 4: projektkort, guldlinje under titeln */
.proj h3 a,.card-body h3 a{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;padding-bottom:4px;transition:background-size .55s var(--ease),color .3s}
.proj:hover h3 a,.card:hover h3 a{background-size:100% 2px}
.proj-media img,.card-media img{transition-duration:1.6s}

.pg-card h3{display:block;width:fit-content;max-width:100%;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;padding-bottom:4px;transition:background-size .55s var(--ease)}
.pg-card:hover h3{background-size:100% 2px}
.pg-m img{transition:transform 1.4s var(--ease)}

/* ---- Bostadsväljare: hela bilden syns (stående bild till vänster, lista till höger) ---- */
.bv-stage{aspect-ratio:2500/3348!important;max-height:none!important;border-radius:20px}
.bv-pane{inset:0!important;top:0!important;left:0!important;right:0!important;height:100%!important}
.bv-pane img{object-fit:contain}
@media(min-width:901px){
.bv{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"stage top" "stage legend" "stage filter" "stage card" "stage tw" "demo demo";grid-template-rows:auto auto auto auto 1fr auto;align-items:start}
.bv-stage{align-self:start;position:sticky;top:90px}
.bv-legend{justify-self:start}
.bv-tw{max-height:520px}
.bv-t td,.bv-t th{padding:10px 9px}
}
@media(max-width:900px){.bv{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important}.bv-left{position:static}.bv-stage{position:relative;max-width:520px;margin:0 auto}.bv-tw{overflow-x:auto}}

/* 5: menyn ligger på samma linje som innehållet */
.site-header .wrap { max-width: var(--wrap); }
body:has(.pj-vis) .site-header .wrap { max-width: min(1480px, 100% - 48px); }
@media (max-width: 700px) { body:has(.pj-vis) .site-header .wrap { max-width: var(--wrap); } }

/* 6: bostadsväljare, anteckningen hamnar under bilden; projektkaruselln börjar vid vänsterkanten */
.bv-demo{position:relative;z-index:2;margin-top:48px;grid-area:demo}
[data-home="4"] .h4-rail{padding-left:var(--gut);scroll-padding-inline:var(--gut)}

/* 7: alla undersidor lika breda som projektsidorna (startsidan orörd) */
body:not(:has(.h4-rail)) .wrap:not(.narrow),
body:not(:has(.h4-rail)) .site-header .wrap { max-width: min(1480px, 100% - 48px); }
@media (max-width: 700px) { body:not(:has(.h4-rail)) .wrap:not(.narrow), body:not(:has(.h4-rail)) .site-header .wrap { max-width: 100%; } }
@media(min-width:901px){.bv-demo{grid-area:auto;grid-column:2;grid-row:6;margin-top:16px}}

/* 8: menyn i full bredd (logga i vänsterhörnet, knappar till höger); undersidor i full bredd; fakta-rutor centrerade */
body:not(#x) .site-header .wrap { max-width: none; padding-inline: var(--gut); }
body:not(#x):not(:has(.h4-rail)) .wrap:not(.narrow) { max-width: none; }
.h4-band > div { text-align: center; }
.h4-band b { justify-content: center; }

/* 9: mer luft under menyn på Arbetsprocess; innehållet max 1500px (menyn fortsatt i full bredd) */
.ap-hero2 { padding-top: clamp(130px, 10vw, 170px) !important; }
body:not(#x):not(:has(.h4-rail)) .wrap:not(.narrow) { max-width: 1500px; }
body:not(#x):not(:has(.h4-rail)) .site-header .wrap { max-width: none; }

/* 10: bostadsväljaren på mobil: en kolumn i logisk ordning, bilden syns */
@media (max-width: 900px) {
  .bv { display: flex !important; flex-direction: column; gap: 14px; grid-template-areas: none !important; }
  .bv > *, .bv-left > * { grid-area: auto !important; }
  .bv-top { order: 1; justify-self: auto; }
  .bv-left { display: contents; }
  .bv-stage { order: 2; position: relative !important; top: auto !important; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 2500/3348 !important; }
  .bv-legend { order: 3; justify-self: auto; flex-wrap: wrap; }
  .bv-filter { order: 4; }
  .bv-card { order: 5; margin: 0; }
  .bv-tw { order: 6; max-height: 420px; overflow: auto; -webkit-overflow-scrolling: touch; }
  .bv-demo { order: 7; margin-top: 4px !important; grid-column: auto !important; grid-row: auto !important; }
  .bv-t td, .bv-t th { padding: 10px 8px; white-space: nowrap; font-size: 14px; }
  .bv-arr { width: 40px; height: 40px; }
}
@media (max-width: 900px) {
  .bv-right { display: contents; }
  .bv > *, .bv-left > *, .bv-right > * { min-width: 0; max-width: 100%; }
  .bv-tw { width: 100%; }
}

/* 11: mobilanpassning: kompaktare cookie-ruta, större tryckytor */
@media (max-width: 600px) {
  .cookie { left: 10px; right: 10px; bottom: 74px; max-width: none; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; border-radius: 14px; }
  .cookie p { margin: 0 0 10px; line-height: 1.45; }
  .cookie div { flex-wrap: nowrap; }
  .cookie .btn, .cookie button { flex: 1; min-height: 44px; padding: 10px 12px; font-size: 14px; }
  .social a, .head-right a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  main a.chip, main .chips a, .byg-links a { min-height: 40px; display: inline-flex; align-items: center; }
}