/* Tema: Signal – helröd, stor grotesk, svart/vitt, affischkänsla */
@font-face{font-family:"Space Grotesk";src:url(../fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{--red:#d4232b;--red-dark:#a9161d;--ink:#0b0b0b;--ink-2:#2b2b2b;--ink-3:#6b6b6b;--paper:#ffffff;--paper-2:#f1f1f1;--line:#0b0b0b;--radius:0;--font:"Space Grotesk",-apple-system,sans-serif;--max:1360px}
body{font-size:18px}
h1,h2,h3{letter-spacing:-.04em;font-weight:700}
.top{background:var(--red);border-bottom:0;backdrop-filter:none}
.logo img{filter:brightness(0) invert(1);height:30px}
.nav a{color:#fff;font-weight:500;border-radius:0;text-transform:uppercase;font-size:14px;letter-spacing:.04em}
.nav a:hover{background:#000;color:#fff}
.menu-btn{color:#fff}
@media (max-width:760px){.nav{background:var(--red)}}
.eyebrow{color:var(--ink);font-weight:700;letter-spacing:.06em}

.hero{background:var(--red);color:#fff}
.hero .bg{display:none}
.hero .wrap{padding-top:72px;padding-bottom:0}
.hero .eyebrow{color:#000;background:#fff;display:inline-block;padding:4px 10px}
.hero h1{font-size:clamp(64px,13.5vw,210px);line-height:.86;margin:28px 0 48px;max-width:none;letter-spacing:-.055em;text-transform:uppercase}
.hero .lead{color:#fff;font-size:20px;max-width:none;grid-template-columns:1fr 1fr;gap:40px;font-weight:400}
.stats{border-top:2px solid #000;margin-top:72px;padding:0;gap:0;background:#000}
.stats>div{padding:28px 24px 32px;border-right:1px solid #333}
.stats>div:last-child{border-right:0}
.stats b{font-size:clamp(56px,8vw,120px);letter-spacing:-.05em;color:var(--red)}
.stats span{color:#fff;text-transform:uppercase;font-size:14px;letter-spacing:.06em}
@media (max-width:560px){.stats>div{border-bottom:1px solid #333}}

.clients{background:#000;color:#fff;border:0;overflow:hidden;padding:18px 0}
.clients .wrap{flex-wrap:nowrap}
.clients-label{color:var(--red)}
.clients ul{flex-wrap:nowrap;white-space:nowrap;animation:tick 30s linear infinite}
.clients li{color:#fff;font-size:22px;text-transform:uppercase;letter-spacing:-.01em}
.clients li::after{content:"✕";color:var(--red);margin-left:28px;font-size:16px}
@keyframes tick{to{transform:translateX(-50%)}}
.clients li.dup{display:list-item}
@media (prefers-reduced-motion:reduce){.clients ul{animation:none;flex-wrap:wrap}}

section{padding:96px 0}
.sec-head h2{font-size:clamp(48px,8vw,120px);line-height:.9;text-transform:uppercase;letter-spacing:-.05em}
.sec-head{border-bottom:2px solid #000;padding-bottom:24px}
.service-grid{gap:0;border-left:2px solid #000}
.service{border:0;border-right:2px solid #000;border-bottom:2px solid #000;padding:24px}
.service:hover{background:var(--red);color:#fff}
.service:hover p,.service:hover .service-num{color:#fff}
.service-num{font-size:48px;letter-spacing:-.04em;color:var(--red);line-height:1}
.service h3{font-size:26px;text-transform:uppercase}

.works{gap:0;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.works{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.works{grid-template-columns:1fr}}
.work{border-radius:0;aspect-ratio:1}
.work img{filter:grayscale(1) contrast(1.1)}
.work::after{background:var(--red);mix-blend-mode:multiply;opacity:0;transition:opacity .3s}
.work:hover::after{opacity:1}
.work:hover img{transform:none}
.work h3{font-size:30px;text-transform:uppercase;letter-spacing:-.03em;line-height:1}
.work-meta{bottom:24px;left:24px}

section.alt{background:#000;color:#fff}
section.alt .eyebrow{color:var(--red)}
section.alt .sec-head{border-color:#fff}
section.alt .sec-head p{color:#bbb}
.card{background:#000;border:2px solid #fff;border-radius:0;color:#fff}
.card:hover{background:var(--red);color:#fff;transform:none;box-shadow:none}
.card p,.card time{color:#ccc}
.card:hover p,.card:hover time{color:#fff}
.card .img{background-color:#fff}
.card h3{text-transform:uppercase;letter-spacing:-.02em}
.btn{border-radius:0;border-width:2px;text-transform:uppercase;letter-spacing:.04em;font-size:14px}
section.alt .btn{background:#000;color:#fff;border-color:#fff}
section.alt .btn:hover{background:#fff;color:#000}

.contact{background:var(--red)}
.contact h2{font-size:clamp(64px,12vw,190px);text-transform:uppercase;line-height:.85;letter-spacing:-.055em}
.contact .mail{font-size:clamp(28px,4vw,52px);border-bottom:4px solid #000;letter-spacing:-.03em}
.contact .symbol{border-radius:0;box-shadow:none;background:#fff;transform:rotate(-6deg)}
footer{background:#000;color:#fff}

.page-head h1{text-transform:uppercase;letter-spacing:-.05em;font-size:clamp(44px,8vw,110px);line-height:.9}
.paper{border-radius:0;border:2px solid #000;box-shadow:12px 12px 0 var(--red)}
.kal-list a{font-size:22px}
.clients-label{display:none}
.work h3{display:inline;background:#000;color:#fff;padding:2px 8px;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.35}
.work-client{display:table;background:var(--red);color:#fff;padding:2px 8px;margin-bottom:6px;opacity:1}
@media (max-width:760px){.hero .lead{grid-template-columns:1fr}}

/* --- Signal v2 --- */
.stats-title{background:#000;color:#fff;opacity:1;padding:18px 24px 0;letter-spacing:.1em}
.stats{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.stats{grid-template-columns:1fr 1fr}}
.hero h1 .punct{color:#000}
.hero .lead p{max-width:52ch}
.top{transition:box-shadow .2s}
.nav a.active{color:#000;background:#fff}

/* Undersidor */
.page-head{padding-top:88px;padding-bottom:40px}
.page-head .eyebrow{display:inline-block;background:var(--red);color:#fff;padding:4px 10px}
.page-head .back{color:var(--ink);text-transform:uppercase;font-size:14px;letter-spacing:.06em;display:block;margin-bottom:28px}
.page-head .back:hover{color:var(--red)}
.page-head .ingress{font-size:22px;color:var(--ink-2);max-width:760px}
.case-cover{border-radius:0;filter:grayscale(1) contrast(1.1);aspect-ratio:21/8}
.case-logo{max-height:56px;margin-bottom:32px}
.article{font-size:19px;line-height:1.65}
.article h2{text-transform:uppercase;letter-spacing:-.03em;font-size:32px;margin-top:56px}
.article p:first-of-type{font-size:22px;line-height:1.5}
.article .cover{border-radius:0;background:#f1f1f1}
.next-case{background:#000;padding:72px 0}
.next-case strong{text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(32px,6vw,80px)}
.next-case:hover{background:var(--red)}
body[data-page="nyheter"] .cards{gap:24px}
body[data-page="nyheter"] .card{border-color:#000;color:#000;background:#fff}
body[data-page="nyheter"] .card p{color:#444}
body[data-page="nyheter"] .card:hover{background:var(--red);color:#fff}
body[data-page="nyheter"] .card:hover p{color:#fff}
.kal-list{border-top:2px solid #000}
.kal-list li{border-bottom:2px solid #000}
.kal-list a:hover{background:var(--red);color:#fff;padding-left:16px}
.kal-list a{transition:padding .2s}
.badge{border-radius:0;background:#000}
.contact-extra{font-size:18px!important;opacity:.85}
/* VOX-symbolen som vit text med genomskinlig bakgrund */
.contact .symbol{content:url(../../media/symbol-white.png);background:none;box-shadow:none;border-radius:0;transform:rotate(-4deg);width:min(380px,90%);opacity:.95}