:root{--ink:#373737;--slate:#4D5C61;--slate-deep:#3a464a;--slate-900:#283033;--slate-purple:#505263;--sage:#C0CCCA;--sage-soft:#dbe3e1;--paper:#FFFFF2;--paper-2:#f4f1e2;--line:rgba(55,55,55,.13);--wrap:1240px;--ease:cubic-bezier(.22,.61,.36,1);--check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M5.6 8.2L1.9 4.5.5 5.9l5.1 5.1L14.6 2 13.2.6z' fill='%23000'/%3E%3C/svg%3E");--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12'%3E%3Cpath d='M11 0l6 6-6 6-1.4-1.4L13.2 7H0V5h13.2L9.6 1.4z' fill='%23000'/%3E%3C/svg%3E")}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:16px;font-weight:500;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Rubrikvikter enligt live: h1 lätt, h2 700, h3 600. Ingen negativ letter-spacing. */
h1,h2,h3{letter-spacing:normal;color:var(--ink);text-wrap:balance}
h1{font-weight:400;font-size:clamp(40px,5.6vw,70px);line-height:1.1}
h2{font-weight:700;font-size:clamp(26px,3vw,35px);line-height:1.4}
h3{font-weight:600;font-size:26px;line-height:1.3}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);opacity:.7;display:inline-block;margin-bottom:18px}
.eyebrow.light{color:var(--sage);opacity:1}
.lead{font-size:16px;font-weight:500;line-height:1.7;opacity:.92;max-width:62ch}
.h-md{font-size:clamp(26px,3vw,35px);font-weight:700}
/* Piller med högerpil – live har border-radius 40px och padding 12px 24px. */
.btn{display:inline-flex;align-items:center;gap:14px;font-weight:400;font-size:15px;padding:12px 24px;border-radius:40px;transition:.25s var(--ease);cursor:pointer;border:1px solid transparent;line-height:1.3;white-space:nowrap}
.btn::after{content:'';width:17px;height:12px;flex:none;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .25s var(--ease)}
.btn:hover::after{transform:translateX(3px)}
.btn.no-arrow::after{display:none}
.btn-primary{background:var(--slate);color:var(--paper)} .btn-primary:hover{background:var(--slate-900)}
.btn-white{background:var(--paper);color:var(--slate)} .btn-white:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--slate);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--slate)}
.btn-wout{background:transparent;color:var(--paper);border:1px solid rgba(255,255,255,.45)} .btn-wout:hover{border-color:#fff}
.topbar{background:var(--slate-900);color:var(--sage);font-size:13px;font-weight:500;padding:9px 32px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.topbar a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:.3s var(--ease)}
header.sc{background:var(--paper);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{height:30px}
.nl{display:flex;align-items:center;gap:30px}
.nl a:not(.btn){font-size:15px;font-weight:400;color:var(--ink);padding:4px 0;border-bottom:2px solid transparent}
.nl a:not(.btn):hover{color:var(--slate)} .nl a.on{color:var(--slate);border-bottom-color:var(--sage)}
.lang{font-size:13px;font-weight:600;opacity:.6}
.burger{display:none;background:none;border:0;font-size:25px;color:var(--slate);cursor:pointer}
/* hero */
.hero{position:relative;height:min(90vh,820px);min-height:560px;display:flex;align-items:flex-end;color:var(--paper);overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,48,51,.1),rgba(40,48,51,.3) 45%,rgba(40,48,51,.82))}
.hero-in{position:relative;z-index:2;padding-bottom:76px}
.hero h1{color:var(--paper);max-width:15ch}
.hero p{font-size:17px;color:rgba(255,255,255,.92);max-width:48ch;margin:22px 0 30px}
.btnrow{display:flex;gap:13px;flex-wrap:wrap}
/* stats – lyft över hero */
.stats{position:relative;margin-top:-52px;z-index:5}
.stats .wrap{background:var(--slate);color:var(--paper);border-radius:4px;box-shadow:0 34px 70px -34px rgba(40,48,51,.6);display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:36px 44px}
.st .n{font-size:clamp(22px,2.5vw,32px);font-weight:600;line-height:1.15}
.st .l{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-top:9px}
.st+.st{border-left:1px solid rgba(255,255,255,.15);padding-left:22px}
.st.live a{display:block} .st.live .n{color:var(--paper)} .st.live:hover .l{color:#fff}
/* sektioner */
.sec{padding:104px 0} .sec.tight{padding:78px 0}
.sec-head{max-width:66ch;margin-bottom:50px}
.sec-head h2{font-size:clamp(28px,3.4vw,35px)}
.sec-head p{margin-top:16px;font-size:16px;opacity:.9}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
/* LEDIGA LOKALER */
.lediga-sec{background:var(--paper-2)}
.listings{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.listing{background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px 28px;transition:.25s var(--ease);cursor:pointer;box-shadow:0 10px 30px -24px rgba(40,48,51,.4)}
.listing:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(40,48,51,.45)}
.lg-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);opacity:.6;margin-bottom:12px}
.listing h3{font-size:21px;margin-bottom:14px}
.lg-meta{display:flex;gap:18px;font-size:14px;opacity:.7;margin-bottom:16px}
.lg-meta span{font-weight:600;color:var(--slate)}
.lg-go{font-size:14px;font-weight:600;color:var(--slate)}
.lg-note{font-size:13px;opacity:.55;margin-top:22px}
/* LOC-CARDS – exakt kortstil: murverk, full färg, Region/Ort stor + namn + linje */
.loc-cards{column-count:3;column-gap:24px}
.loc-card{break-inside:avoid;margin:0 0 24px;display:block;position:relative;border-radius:14px;overflow:hidden;box-shadow:0 16px 40px -30px rgba(40,48,51,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.loc-card:hover{transform:translateY(-5px);box-shadow:0 30px 54px -30px rgba(40,48,51,.5)}
.lc-img{width:100%;display:block;transition:transform .7s var(--ease)}
.loc-card:hover .lc-img{transform:scale(1.04)}
.lc-lb{position:absolute;left:0;right:0;bottom:0;padding:26px 28px 24px;color:#fff;background:linear-gradient(180deg,transparent 42%,rgba(38,46,49,.62));z-index:2}
.lc-region{display:block;font-size:clamp(22px,2.1vw,30px);font-weight:500;letter-spacing:normal;line-height:1.15;color:#fff}
.lc-name{display:block;font-size:15px;font-weight:500;color:rgba(255,255,255,.92);margin-top:5px}
.lc-rule{display:block;height:1px;background:rgba(255,255,255,.55);margin-top:16px}
.lc-soon{width:100%;height:330px;background:linear-gradient(135deg,var(--slate),var(--slate-deep) 55%,var(--slate-purple))}
.loc-card.nophoto .lc-lb{background:linear-gradient(180deg,transparent,rgba(38,46,49,.35))}
.lc-badge{position:absolute;top:16px;right:16px;z-index:3;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);padding:6px 11px;border-radius:2px}
.loc-card[hidden]{display:none}
/* regionfilter */
.rfilter{display:inline-flex;gap:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:5px}
.rf{border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--slate);padding:9px 18px;border-radius:2px;cursor:pointer;transition:.2s}
.rf.on{background:var(--slate);color:var(--paper)}
/* FEATURE SPLIT (djup via stora växlande bildblock) */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.feature.rev{direction:rtl} .feature.rev>*{direction:ltr}
.feature-img{width:100%;border-radius:4px;box-shadow:0 40px 80px -44px rgba(40,48,51,.5)}
.feature-text h2{font-size:clamp(26px,3vw,35px);margin-bottom:16px}
.feature-text p{font-size:17px;opacity:.85}
.case{background:var(--slate-900)} .case .feature-text h2{color:var(--paper)}
/* STEG */
.steps-sec{background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
.step{padding-top:26px;border-top:2px solid var(--sage)}
.step b{font-size:15px;font-weight:800;color:var(--slate);display:block;margin-bottom:14px}
.step h3{font-size:21px;margin-bottom:8px} .step p{font-size:15px;opacity:.8}
/* intro-split */
.intro-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.intro-split h2{font-size:clamp(26px,3vw,35px)}
/* green */
.green{background:radial-gradient(120% 120% at 18% 0%,#33403f,var(--slate-900) 60%);color:var(--paper)}
.green h2,.green .h-md{color:var(--paper)} .green .sec-head p{color:rgba(255,255,255,.8)}
.gg{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.gi{border-top:1px solid rgba(255,255,255,.18);padding-top:22px}
.gi .n{font-size:38px;font-weight:800;color:var(--sage)} .gi h3{color:var(--paper);font-size:20px;margin:14px 0 8px} .gi p{font-size:15px;color:rgba(255,255,255,.72)}
/* marquee */
.marq{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mtrack{display:flex;align-items:center;gap:70px;width:max-content;animation:mv 48s linear infinite;padding:8px 0}
.marq:hover .mtrack{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.mtrack .lw{flex:0 0 auto} .mtrack img{max-height:36px;max-width:130px;width:auto;opacity:.68;transition:.3s} .mtrack .lw:hover img{opacity:1}
/* workinn */
.wi{background:var(--sage-soft)} .wi .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:54px 32px;flex-wrap:wrap}
.wi h3{font-size:clamp(23px,3vw,32px)} .wi p{opacity:.8;margin-top:8px;max-width:44ch}
/* kontakt */
.contact-sec{background:var(--slate-900)}
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:56px;background:var(--paper);border-radius:6px;padding:52px;box-shadow:0 50px 90px -50px rgba(0,0,0,.5)}
.contact-sec .contact-card h2{font-size:clamp(26px,3vw,35px)}
.persons{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.person{display:flex;gap:16px;align-items:center}
.p-mark{width:54px;height:54px;border-radius:50%;background:var(--sage-soft);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.p-mark img{width:30px;opacity:.55}
.p-name{font-weight:700;color:var(--slate);font-size:17px} .p-role{font-size:13px;opacity:.66;margin-bottom:4px}
.p-link{display:block;font-size:14px;font-weight:600;color:var(--slate)} .p-link:hover{text-decoration:underline}
.form{background:#fff;border:1px solid var(--line);border-radius:4px;padding:30px;position:relative}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form-lead{font-size:15px;opacity:.8;margin-bottom:18px}
.form-note{font-size:12.5px;opacity:.6;margin-top:14px;line-height:1.5}
.form-note a{text-decoration:underline}
.fld{margin-bottom:15px} .fld label{display:block;font-size:13px;font-weight:600;color:var(--slate);margin-bottom:6px}
.fld input,.fld textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:2px;font-family:inherit;font-size:15px;background:var(--paper)}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--slate);outline-offset:1px;border-color:transparent}
/* subpage */
.phero{position:relative;height:min(62vh,560px);min-height:400px;display:flex;align-items:flex-end;color:var(--paper);overflow:hidden}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero.fp-nohero{background:radial-gradient(120% 120% at 20% 0%,var(--slate-deep),var(--slate-900))}
.phero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,48,51,.12),rgba(40,48,51,.72))}
.phero-in{position:relative;z-index:2;padding-bottom:48px}
.phero h1{color:var(--paper);font-size:clamp(36px,6vw,64px)}
.crumb{display:inline-block;color:var(--sage);font-size:14px;font-weight:600;margin-bottom:16px}
.facts{background:var(--slate);color:var(--paper)} .facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:34px 32px}
.fact .fn{font-size:clamp(21px,2.2vw,32px);font-weight:600;line-height:1.2} .fact .fl{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-top:8px}
.fact+.fact{border-left:1px solid rgba(255,255,255,.14);padding-left:22px}
.feature-sec .feature img{aspect-ratio:auto}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .gal img{aspect-ratio:16/10;object-fit:cover;border-radius:4px;width:100%}
.tenants{border-top:1px solid var(--line)}
.trow{display:flex;flex-wrap:wrap;gap:26px 52px;align-items:center;margin-top:28px} .trow img{max-height:36px;max-width:128px;width:auto;opacity:.7;transition:.3s} .trow img:hover{opacity:1}
.contact-person{background:var(--paper-2)}
.cp{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.cp-mark{width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .cp-mark img{width:42px;opacity:.5}
.cp-role{opacity:.7;margin-bottom:10px}
.cp-links{display:flex;gap:22px;flex-wrap:wrap} .cp-links a{font-weight:700;color:var(--slate)} .cp-links a:hover{text-decoration:underline}
.related .loc-cards{column-count:3;column-gap:24px}
.cta{background:var(--sage-soft)} .cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:56px 32px;flex-wrap:wrap}
/* footer */
footer{background:var(--slate-900);color:rgba(255,255,255,.7);padding:70px 0 30px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.12)}
.fg img{height:32px;margin-bottom:18px}
footer h4{color:var(--paper);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
footer li{list-style:none;margin-bottom:10px;font-size:15px} footer a:hover{color:#fff}
.fb{display:flex;justify-content:space-between;padding-top:24px;font-size:13px;flex-wrap:wrap;gap:10px}
/* float cta */
.float-cta{position:fixed;right:24px;bottom:24px;z-index:70;background:var(--slate);color:var(--paper);font-weight:600;font-size:15px;padding:15px 24px;border-radius:3px;box-shadow:0 16px 36px -14px rgba(40,48,51,.6);transition:.25s var(--ease)}
.float-cta:hover{background:var(--slate-900);transform:translateY(-2px)}
/* team */
.team-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:13px;margin-top:30px}
.tm{aspect-ratio:4/5;border-radius:3px;overflow:hidden} .tm img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .tm:hover img{transform:scale(1.05)}
.team-hero{border-radius:4px;overflow:hidden;box-shadow:0 40px 80px -44px rgba(40,48,51,.55);margin-top:40px} .team-hero img{width:100%}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
/* reveal (djup via rörelse) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.page[hidden]{display:none}
@media(max-width:960px){
 .nl{display:none} .burger{display:block}
 .nl.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--paper);padding:20px 32px 28px;gap:16px;border-bottom:1px solid var(--line)}
 .loc-cards{column-count:2} .gg,.listings,.related .loc-cards{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr}
 .feature,.intro-split,.contact-card,.about-grid{grid-template-columns:1fr;gap:32px} .feature.rev{direction:ltr}
 .stats .wrap,.facts .wrap{grid-template-columns:1fr 1fr;gap:26px 22px} .st+.st,.fact+.fact{border-left:0;padding-left:0}
 .fg{grid-template-columns:1fr 1fr} .team-grid{grid-template-columns:repeat(4,1fr)} .gal{grid-template-columns:1fr}
 .contact-card{padding:34px}
}
@media(max-width:560px){.wrap{padding:0 20px} .sec{padding:62px 0} .loc-cards{column-count:1} .gg,.listings,.team-grid,.related .loc-cards{grid-template-columns:1fr} .team-grid{grid-template-columns:repeat(3,1fr)} .float-cta{right:16px;bottom:16px;padding:13px 20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.rv{opacity:1;transform:none}}
/* replica-tillägg */
.hero-vac{margin-top:40px;display:flex;flex-direction:column;gap:4px}
.hv-label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.hv-num{font-size:clamp(44px,6vw,80px);font-weight:600;color:var(--paper);line-height:1}
.intro-block .lead{opacity:.9}
.wi-list{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.wi-list li{position:relative;padding-left:26px;font-size:16px;opacity:.88}
.wi-list li::before{content:"—";position:absolute;left:0;color:var(--slate);font-weight:800}
.hero h1{line-height:1.02}

/* ===================================================================
   Tillägg 2026-08 – lediga lokaler, SEO-landningssidor, faktaboxar
   =================================================================== */
.wrap.narrow{max-width:820px}

/* --- FAQ ---------------------------------------------------------- */
.faq{border-top:1px solid var(--line);padding:24px 0}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq h3{font-size:19px;margin-bottom:10px}
.faq p{font-size:16px;opacity:.85;max-width:70ch}

/* --- Lediga lokaler: filter --------------------------------------- */
.vac-filter{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:4px;padding:22px 24px;margin-bottom:28px}
.vac-filter label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);opacity:.75}
.vac-filter select{font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:11px 14px;min-width:180px;cursor:pointer}
.vac-filter select:focus{outline:2px solid var(--sage);outline-offset:1px}
.vac-count{margin-left:auto;font-size:14px;opacity:.7;padding-bottom:12px}
.vac-count strong{font-size:22px;font-weight:800;color:var(--slate);margin-right:5px}

/* --- Lediga lokaler: lista ---------------------------------------- */
.vac-list{display:grid;gap:14px}
.vac{display:flex;gap:26px;justify-content:space-between;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px 28px;transition:.25s var(--ease);box-shadow:0 10px 30px -24px rgba(40,48,51,.4)}
.vac:hover{transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(40,48,51,.45);border-color:var(--sage)}
.vac[hidden]{display:none}
.vac h3{font-size:20px;margin-bottom:10px}
.vac-txt{font-size:15px;opacity:.78;max-width:62ch}
.vac-meta{text-align:right;flex-shrink:0;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.vac-area{font-size:26px;font-weight:600;color:var(--slate);line-height:1}
.vac-pris{font-size:14px;font-weight:600;opacity:.7}

/* --- Faktabox på fastighetssidor (utökad) -------------------------- */
.fact-note{font-size:13px;opacity:.55;margin-top:14px}
.usp{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:8px}
.usp li{list-style:none;border-top:2px solid var(--sage);padding-top:16px}
.usp h3{font-size:17px;margin-bottom:8px}
.usp p{font-size:15px;opacity:.8}

@media(max-width:820px){
  .vac{flex-direction:column;gap:16px}
  .vac-meta{flex-direction:row;align-items:center;gap:16px;text-align:left}
  .vac-count{margin-left:0;padding-bottom:0}
  .vac-filter select{min-width:0;width:100%}
  .vac-filter label{width:100%}
}

/* Rättningar 2026-08 */
.phero .crumb{display:block;width:fit-content;margin-bottom:18px}
.phero .crumb:hover{color:#fff}
.phero.fp-nohero{height:min(46vh,420px);min-height:300px}
.phero.fp-nohero .phero-in{padding-bottom:44px}

/* Hyresgästportal – mörkt piller längst till höger i navigationen, som live. */
.btn-portal{background:var(--slate);color:var(--paper)}
.btn-portal:hover{background:var(--slate-900)}
header.sc .nl a:not(.btn){color:var(--ink)}
/* Ljus navigation så länge headern ligger genomskinlig ovanpå en mörk hero. */
body.hero-top header:not(.sc) .nl a:not(.btn){color:var(--paper)}
body.hero-top header:not(.sc) .burger{color:var(--paper)}

.logo-link{display:block;position:relative;line-height:0}
.logo-light{position:absolute;inset:0;opacity:0;transition:opacity .3s var(--ease)}
body.hero-top header:not(.sc) .logo-light{opacity:1}
body.hero-top header:not(.sc) .logo-dark{opacity:0}
.logo-dark{transition:opacity .3s var(--ease)}

/* =====================================================================
   KLON AV LIVE-LAYOUTEN
   Alla värden nedan är uppmätta direkt på hantverkslokaler.se 24 aug 2026
   vid 1259 px visningsyta. Blocket ligger sist så att det vinner över
   den tidigare, egna designen utan att den behöver rivas ut.
   ===================================================================== */

/* Behållare: live saknade maxbredd, men på riktigt breda skärmar drogs
   innehållet ut till kanterna. 1400 px ändrar inget på vanliga skärmar
   och centrerar allt på stora. */
.wrap{max-width:1400px;margin:0 auto;padding:0 30px}
.wrap.narrow{max-width:820px;margin:0 auto}

/* Header: en solid krämvit list, inte ett genomskinligt lager över heron. */
header{position:sticky;top:0;background:var(--paper);border-bottom:0}
header.sc{background:var(--paper);border-bottom:0}
body.hero-top header:not(.sc) .nl a:not(.btn){color:var(--ink)}
body.hero-top header:not(.sc) .logo-light{opacity:0}
body.hero-top header:not(.sc) .logo-dark{opacity:1}
/* Menyknappen glömdes när heron slutade vara genomskinlig: den var
   krämvit mot krämvit topbar, alltså osynlig på startsidan i mobil. */
body.hero-top header:not(.sc) .burger{color:var(--slate)}

/* Hero: bild i botten, rubrik nedtill till vänster, 100 px luft under. */
.hero{height:859px;min-height:0;background:#F1F1F1;padding:24px 24px 100px;align-items:flex-end}
.hero>img{transform:none}
.hero-ov{background:linear-gradient(180deg,rgba(30,36,38,.15),rgba(30,36,38,.45))}
.hero .hero-in{padding:0 0 0 55px;max-width:none;width:100%}
.hero h1{max-width:none}
.hero .btnrow{margin-top:24px}

/* Sektionsluft enligt live. */
.sec{padding:100px 0}
.sec.tight{padding:60px 0 80px}
.sec.fastigheter{padding:40px 0 100px}
.sec.workinn{padding:80px 0 200px}

/* Räknarraden under heron: två lika halvor, ingen mellanrumsspalt. */
.hv-rad{display:flex;flex-wrap:wrap}
.hv-rad>*{flex:1 1 50%;min-width:280px}
.hv-label{font-size:16px;font-weight:500;letter-spacing:normal;text-transform:uppercase;color:var(--ink);opacity:.85}
.hv-num{font-size:clamp(48px,6.4vw,80px);font-weight:600;color:var(--ink);line-height:1.1;margin-top:10px}
.hv-text p{font-size:16px;line-height:1.7;max-width:52ch}
.hv-text .btn{margin-top:26px}

/* Fastighetskorten: rutnät med tre spalter, radhöjd 285 och 20 px mellanrum.
   De sju korten på startsidan har varsin plats, precis som live. */
.loc-cards{column-count:auto;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:285px;gap:20px}
.loc-card{margin:0;border-radius:12px;height:100%}
.lc-img{width:100%;height:100%;object-fit:cover}
.lc-soon{height:100%}
.loc-cards.start .loc-card:nth-child(1){grid-column:1;grid-row:1/span 2}
.loc-cards.start .loc-card:nth-child(2){grid-column:2;grid-row:1}
.loc-cards.start .loc-card:nth-child(3){grid-column:2;grid-row:2}
.loc-cards.start .loc-card:nth-child(4){grid-column:3;grid-row:1/span 2}
.loc-cards.start .loc-card:nth-child(5){grid-column:1/span 2;grid-row:3/span 2}
.loc-cards.start .loc-card:nth-child(6){grid-column:3;grid-row:3}
.loc-cards.start .loc-card:nth-child(7){grid-column:3;grid-row:4}

/* Bild och text sida vid sida, 585 + 30 + 585. */
.feature{display:flex;gap:30px;align-items:stretch}
.feature>*{flex:1 1 0;min-width:0}
.feature-img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.feature-text{display:flex;flex-direction:column;justify-content:center}
.feature.rev{flex-direction:row-reverse}

/* Mörk kontaktsektion. */
.kontakt-mork{background:#373737;color:var(--paper);padding:80px 0}
.kontakt-mork h2{color:var(--paper);text-align:center;margin-bottom:40px}
.kontakt-mork .form{background:transparent;border:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;align-items:start}
.kontakt-mork .fld{margin:0}
.kontakt-mork .fld label{color:var(--paper);opacity:.75}
.kontakt-mork .fld input,.kontakt-mork .fld textarea{background:#fff;border:0;border-radius:8px;padding:14px 18px}
.kontakt-mork .fld-lang{grid-column:2;grid-row:1/span 4}
.kontakt-mork .fld-lang textarea{height:100%;min-height:230px}
.kontakt-mork .btn{grid-column:1;justify-self:start;background:var(--paper);color:var(--ink)}
.kontakt-mork .form-note{grid-column:1/-1;color:var(--paper);opacity:.5}

/* Sidfot: text till vänster, länkspalter högerställda till höger. */
footer{background:var(--paper);color:var(--ink);padding:120px 24px 80px}
footer .wrap{display:flex;gap:30px;padding:0 6px}
footer .fg{display:contents}
.f-vanster{flex:0 0 800px;max-width:800px}
.f-hoger{flex:1 1 auto;text-align:right}
footer h4{font-size:16px;font-weight:700;margin-bottom:6px}
footer ul{list-style:none;margin-bottom:26px}
footer li{font-size:16px;line-height:1.9}
footer a:hover{text-decoration:underline}
.f-social{display:flex;gap:16px;margin-top:26px}
.f-social svg{width:26px;height:26px;fill:var(--ink)}
.f-fine{font-size:12px;opacity:.6;margin-top:20px;line-height:1.6}
.f-logo{width:215px;margin-bottom:24px}

@media(max-width:900px){
  .hero{height:auto;min-height:70vh;padding:24px 0 60px}
  .hero .hero-in{padding-left:0}
  .loc-cards{grid-template-columns:1fr;grid-auto-rows:260px}
  .loc-cards.start .loc-card{grid-column:1!important;grid-row:auto!important}
  .feature{flex-direction:column}
  .feature.rev{flex-direction:column}
  .kontakt-mork .form{grid-template-columns:1fr}
  .kontakt-mork .fld-lang{grid-column:1;grid-row:auto}
  footer .wrap{flex-direction:column}
  .f-vanster{flex:1 1 auto;max-width:none}
  .f-hoger{text-align:left}
}

/* Work Inn-listan har bockar på live, inte tankstreck. */
.wi-list li::before{content:"";width:15px;height:11px;top:7px;background:var(--slate);
  -webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}

/* Kortetiketten: fastighetsnamnet stort överst, orten mindre under. */
.lc-name{display:block;font-size:clamp(21px,2vw,29px);font-weight:500;line-height:1.15;color:#fff;margin:0}
.lc-region{display:block;font-size:15px;font-weight:400;color:rgba(255,255,255,.85);margin-top:4px}

/* Om oss: smal rubrik till vänster, bred text till höger – 376 + 776 som live. */
.split-2{display:flex;gap:30px;align-items:flex-start}
.split-2>h2{flex:0 0 376px;max-width:376px;margin:0}
.split-txt{flex:1 1 auto}
.split-txt p+p{margin-top:22px}
h2.mitt{text-align:center;margin-bottom:44px}

/* Hyresgästernas loggor. */
.logorad{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 44px}
.logorad img{max-height:56px;max-width:150px;width:auto;opacity:.62;transition:opacity .25s var(--ease)}
.logorad img:hover{opacity:1}

@media(max-width:900px){
  .split-2{flex-direction:column}
  .split-2>h2{flex:1 1 auto;max-width:none}
  .logorad{gap:22px 30px}
  .logorad img{max-height:42px;max-width:110px}
}

/* Lokalguidens inbäddade lista. */
.lg-embed{width:100%}
.lg-embed iframe{display:block;width:100%;border:0}
#lokalguiden-container{width:100%}

/* ---------------------------------------------------------------------------
   Rullgardinen under Våra fastigheter. Uppmätt på live 25 aug 2026:
   full bredd, krämvit botten, 40 px luft upptill och nedtill, etiketten till
   vänster och orterna i fem spalter fyllda uppifrån och ner, tre per spalt.
   Länkarna är 14 px vikt 600 med en tunn svart linje under, utom sista posten
   i varje spalt.
   --------------------------------------------------------------------------- */
.nl-drop{position:static}
.drop{position:absolute;left:0;right:0;top:100%;background:var(--paper);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s;z-index:70}
.nl-drop:hover .drop,.nl-drop:focus-within .drop{opacity:1;visibility:visible}
.drop-in{display:flex;align-items:center;justify-content:flex-end;gap:100px;
  padding:40px 78px 40px 30px}
.drop-titel{font-size:24px;font-weight:400;color:var(--ink);white-space:nowrap}
.drop-grid{list-style:none;display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(3,auto);column-gap:39px;row-gap:15px}
/* Specificiteten måste slå .nl a:not(.btn) ovan, därför .nl-drop framför. */
.nl-drop .drop-grid a{display:block;font-size:14px;font-weight:600;color:var(--ink);
  min-width:120px;padding:0 0 10px;border-bottom:1px solid #000;transition:opacity .2s}
.nl-drop .drop-grid a:hover{opacity:.55;color:var(--ink)}
.nl-drop .drop-grid li:nth-child(3n) a{border-bottom:0}

@media(max-width:1100px){
  .drop-in{gap:40px;padding:30px 30px}
  .drop-titel{display:none}
}
@media(max-width:900px){
  .drop{position:static;opacity:1;visibility:visible;display:none}
  .nl-drop.open .drop{display:block}
  .drop-in{padding:14px 0}
  .drop-grid{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr 1fr}
  .drop-grid li:nth-child(3n) a{border-bottom:1px solid #000}
}

/* Heron på startsidan: live har inget mörkt överlägg alls, bara fotot i
   background-size cover. Vår gradient la en grå hinna över hela bilden och
   drog ner färgerna. Kvar är bara en svag skugga i nederkanten så att
   rubriken håller kontrast mot vattnet. */
body.hero-top .hero .hero-ov{
  background:linear-gradient(180deg,rgba(20,26,28,0) 45%,rgba(20,26,28,.28) 100%)}

/* Loggan i headern: tvåfärgad symbol, 80 x 42 px, och headerns sidmarginal
   är 72 px på live, inte 30 som resten av sajten. */
.logo{height:42px;width:auto}
header .wrap.nav{padding:0 72px}
@media(max-width:900px){ header .wrap.nav{padding:0 20px} .logo{height:34px} }

/* =====================================================================
   PIXELJUSTERING MOT LIVE
   Uppmätt på hantverkslokaler.se 25 aug 2026, 1199 px visningsyta,
   med getComputedStyle och getBoundingClientRect på varje element.
   Varje värde nedan är avläst, inte gissat.
   ===================================================================== */

/* Live renderar all text med antialiasing i stället för subpixel. Utan den
   här raden blir bokstäverna märkbart tjockare hos oss – det var det som
   syntes vid jämförelsen. Body-graden är 15 px på live, inte 16. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-size:15px}

/* Heron är inte 859 px hög. Den är visningsytan minus headerns 70 px, så
   den följer skärmen: 693 px vid 763 px fönsterhöjd. Inget mörkt lager
   ligger över fotot – live har bara bilden rakt av. */
.hero{height:calc(100vh - 70px);min-height:520px}
.hero>img{object-fit:cover;object-position:50% 50%}
.hero .hero-ov{background:none}
body.hero-top .hero .hero-ov{background:none}

/* Innehållet sitter 5 % in från hero-boxens kant (57,55 px vid 1151 px),
   inte 55 px. Rubrikblocket är 500 px brett med 40 px ner till knappen. */
.hero .hero-in{padding:0;margin:0 5%;width:auto;max-width:none}
.hero h1{font-size:70px;line-height:77px;font-weight:400;width:500px;max-width:100%;margin:0 0 40px}
.hero .btnrow{margin-top:0}

/* Räknaren: 80 px vikt 600 med radhöjd 104. Vår clamp gav 76,7/84,4. */
.hv-num{font-size:80px;line-height:104px;margin-top:6px}

/* Kortetiketten. Live: stor rad 26 px/600 med radhöjd 36,4, liten rad
   15 px/600 med radhöjd 19,5, båda helvita. Textblocket är 30 px in från
   kortets kanter, sitter 28 px från underkanten och har en 2 px krämvit
   linje under sig. Mörkret bakom texten är en egen gradient på de nedersta
   150 px av kortet – inte en hinna över hela bilden. */
.lc-lb{left:30px;right:30px;bottom:28px;padding:0 0 16px;background:none;
  border-bottom:2px solid #FFFFF2}
.lc-name{font-size:26px;font-weight:600;line-height:36.4px;color:#fff;margin:0}
.lc-region{font-size:15px;font-weight:600;line-height:19.5px;color:#fff;margin-top:6px}
.lc-rule{display:none}
.loc-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75));pointer-events:none;z-index:1}
.loc-card.nophoto .lc-lb{background:none}

@media(max-width:900px){
  .hero{height:auto;min-height:70vh}
  .hero .hero-in{margin:0}
  .hero h1{font-size:clamp(34px,9vw,52px);line-height:1.1;max-width:none}
  .hv-num{font-size:clamp(44px,11vw,80px);line-height:1.2}
  .lc-name{font-size:22px;line-height:30px}
}

/* =====================================================================
   Typsnittet ligger nu på vår egen server i stället för hos Google.
   Skälet är tre: samma filer varje gång (Googles variabla fil har andra
   bokstavsbredder än de statiska snitten live använder), inget anrop till
   tredje part att samtyckesreglera, och en render mindre att vänta på.
   Filerna kommer från @fontsource/plus-jakarta-sans 5.3.0.
   ===================================================================== */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pjs-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/pjs-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/pjs-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/pjs-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/pjs-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/pjs-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/pjs-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/pjs-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Knappen. Live: 16 px text (inte 15), radhöjd 20,8, luft 12/24, radie 40
   och en Font Awesome-pil som ligger i en 40 px bred ruta med 8 px mellanrum.
   Det ger exakt 157 px bred Kontakt-knapp och 45 px höjd. */
.btn{font-size:16px;line-height:20.8px;gap:8px;padding:12px 24px}
.btn::after{width:40px;height:20px;background:currentColor;
  -webkit-mask:var(--pil) center/20px 20px no-repeat;mask:var(--pil) center/20px 20px no-repeat}
:root{--pil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E")}
/* Live-knappen har ingen ram, så de 2 px kanten la på höjden. Spöknappen
   ritar sin linje inåt i stället, då blir alla knappar 45 px höga. */
.btn{border:0}
.btn-ghost{border:0;box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--slate)}
.btn-wout{border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.btn-wout:hover{box-shadow:inset 0 0 0 1px #fff}

/* =====================================================================
   OM OSS
   Gruppbilden låg tidigare som full-bleed hero med cover-beskärning, och
   eftersom ansiktena sitter i övre tredjedelen kapades huvudena. Nu ligger
   bilden i egen ram med hela sitt bildformat – ingenting beskärs alls.
   Rubriken och knapparna har flyttat upp i ett eget textblock på krämvitt,
   vilket också ger knappen luft i stället för att klistra den mot kanten.
   ===================================================================== */
.sida-topp{padding:120px 0 64px;background:var(--paper)}
.topp-in{max-width:none}
.sida-topp h1{font-size:clamp(34px,4.4vw,56px);line-height:1.12;font-weight:400;
  max-width:20ch;margin:0 0 26px;text-wrap:balance}
.sida-topp .lead{max-width:58ch;margin-bottom:38px}
.sida-topp .btnrow{gap:13px}

.sec-bild{padding:0 0 20px}
.bildram{margin:0}
.bildram img{display:block;width:100%;height:auto;border-radius:12px}
.bildram figcaption{margin-top:14px;font-size:13px;opacity:.55}

/* Siffrorna. Fyra kolumner med hårfin avdelare, inte fyra rutor. */
.siffror{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.siffra{padding:6px 30px;border-left:1px solid var(--line)}
.siffra:first-child{padding-left:0;border-left:0}
.s-tal{font-size:clamp(34px,3.6vw,46px);font-weight:600;line-height:1.05;
  color:var(--ink);font-variant-numeric:tabular-nums}
.s-enhet{font-size:20px;font-weight:500;margin-left:6px;opacity:.6}
.s-etikett{display:block;margin-top:12px;font-size:14px;line-height:1.5;opacity:.62;max-width:22ch}

.sek-rubrik{margin-bottom:44px}
.sek-rubrik h2{margin-bottom:12px}
.sek-txt{font-size:16px;line-height:1.7;opacity:.7;max-width:56ch}

/* Medarbetare. Porträtt när filen finns, annars monogram. */
.medarb{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 30px}
.m-foto{display:block;width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover;
  background:var(--sage-soft);margin-bottom:18px}
.m-mono{display:flex;align-items:center;justify-content:center;font-size:30px;
  font-weight:600;color:var(--slate);opacity:.5;letter-spacing:.04em}
.m-namn{font-size:19px;font-weight:600;line-height:1.3}
.m-roll{font-size:14px;opacity:.62;margin:4px 0 12px}
.m-kontakt{display:flex;flex-direction:column;gap:3px}
.m-lank{font-size:14px;font-weight:500;color:var(--slate);word-break:break-word}
.m-lank:hover{text-decoration:underline}

/* Hyresgästloggorna: svarta, i en rad som rullar av sig själv. Samma grepp
   som på jonseredsfabriker.se. Listan skrivs två gånger och spåret flyttas
   exakt en halva, så varvet går ihop utan hopp. Stannar när musen är över
   och när besökaren bett om mindre rörelse. */
.loggsektion{overflow:hidden}
.loggmarkis{position:relative;width:100%;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
  mask:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent)}
.loggspar{display:flex;align-items:center;gap:80px;width:max-content;
  transition:transform .8s cubic-bezier(.45,0,.2,1);will-change:transform}
.loggspar img{height:34px;width:auto;max-width:132px;object-fit:contain;flex:none;
  filter:grayscale(1);opacity:.8;transition:opacity .25s var(--ease)}
.loggspar img:hover{filter:none;opacity:1}
/* Halva spåret = ena uppsättningen loggor plus ett mellanrum. När den
   flyttats exakt så långt ser nästa varv identiskt ut och skarven syns inte. */
@keyframes loggrull{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 40px))}}
@media(prefers-reduced-motion:reduce){
  .loggspar{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:30px 56px}
  .loggmarkis{-webkit-mask:none;mask:none}
}

@media(max-width:980px){
  .medarb{grid-template-columns:repeat(2,1fr);gap:38px 24px}
  .siffror{grid-template-columns:repeat(2,1fr);gap:36px 0}
  .siffra:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:600px){
  .sida-topp{padding:64px 0 44px}
  .siffror{grid-template-columns:1fr;gap:28px}
  .siffra{padding:0;border-left:0}
  .medarb{grid-template-columns:1fr 1fr;gap:30px 18px}
  .loggspar img{height:34px;max-width:120px}
}

/* =====================================================================
   FASTIGHETSSIDAN — ny mall
   Utgångspunkten är startsidans hero, som fungerar. Samma höjd, samma
   placering av texten nedtill till vänster, samma typgrader. Resten av
   sidan bygger på tre saker: gott om luft, en asymmetrisk bildkomposition
   i stället för lika stora rutor, och en mörk sektion som bryter av.
   ===================================================================== */
.fp-hero{position:relative;height:calc(100vh - 70px);min-height:520px;
  display:flex;align-items:flex-end;overflow:hidden;background:#F1F1F1;
  padding:24px 24px 100px;color:var(--paper)}
.fp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp-hero.fp-nobild{background:radial-gradient(120% 120% at 20% 0%,var(--slate-deep),var(--slate-900))}
.fp-skugga{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,24,26,.34) 0%,rgba(18,24,26,0) 32%,rgba(18,24,26,.62) 100%)}
.fp-hero-in{position:relative;z-index:2;margin:0 5%;padding:0;width:auto;max-width:none}
.fp-brod{display:inline-block;font-size:13px;font-weight:500;color:rgba(255,255,255,.72);
  padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.35);margin-bottom:30px}
.fp-brod::before{content:"← "}
.fp-brod:hover{color:#fff;border-bottom-color:#fff}
.fp-ort{display:block;font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:16px}
.fp-hero h1{font-size:clamp(40px,5.4vw,70px);line-height:1.06;font-weight:400;
  color:var(--paper);margin:0;max-width:16ch;text-wrap:balance}
.fp-kicker{margin-top:22px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.88);max-width:44ch}

/* Faktaraden ligger på krämvitt med hårfina avdelare i stället för en mörk
   platta. Talen får bära, etiketterna håller sig små. */
.fp-fakta{background:var(--paper);border-bottom:1px solid var(--line)}
.fp-fakta-in{display:grid;grid-template-columns:repeat(4,1fr);padding-top:52px;padding-bottom:52px}
.fp-f{padding:0 34px;border-left:1px solid var(--line)}
.fp-f:first-child{padding-left:0;border-left:0}
.fp-f-tal{display:block;font-size:clamp(24px,2.3vw,30px);font-weight:500;line-height:1.2;color:var(--ink)}
.fp-f-etikett{display:block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;opacity:.5}

.fp-intro{padding:110px 0 70px}
.fp-intro-in{display:grid;grid-template-columns:1fr 1fr;gap:30px 80px;align-items:start}
.fp-intro-v h2{font-size:clamp(28px,3vw,40px);line-height:1.18;font-weight:400;
  margin:0;max-width:16ch;text-wrap:balance}
.fp-intro-h p{font-size:16px;line-height:1.75;max-width:58ch}
.fp-intro-h p+p{margin-top:20px}

.fp-gal{display:grid;grid-template-columns:1.62fr 1fr;gap:20px;align-items:stretch}
.fp-gal figure{margin:0;overflow:hidden;border-radius:12px}
.fp-gal img{display:block;width:100%;height:100%;object-fit:cover}
.fp-gal-stor{min-height:520px}
.fp-gal-kol{display:grid;grid-template-rows:1fr 1fr;gap:20px}

.fp-projekt{background:var(--slate-900);color:var(--paper);padding:110px 0;margin-top:100px}
.fp-projekt-in{display:grid;grid-template-columns:1fr 1fr;gap:30px 80px;align-items:center}
.fp-projekt-txt h2{color:var(--paper);font-size:clamp(26px,2.6vw,36px);line-height:1.2;
  font-weight:400;margin:0 0 20px;max-width:18ch}
.fp-projekt-txt p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.75;max-width:52ch}
.fp-projekt-bild{width:100%;height:100%;min-height:420px;object-fit:cover;border-radius:12px}

/* Länkarna vidare: samma modul på varje fastighet, men bara med de kort
   platsen faktiskt har. Jonsered får två, Katrinedalsgatan inget. */
.fp-aven{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.fp-kort{display:block;border-radius:12px;overflow:hidden;background:var(--paper-2);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.fp-kort:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(40,48,51,.5)}
.fp-kort img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.fp-kort-txt{padding:28px 30px 32px}
.fp-kort-etikett{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);opacity:.62;margin-bottom:12px}
.fp-kort-txt h3{font-size:22px;font-weight:500;line-height:1.25;margin:0 0 10px;color:var(--ink)}
.fp-kort-txt h3::after{content:" ↗";font-size:16px;opacity:.45}
.fp-kort-txt p{font-size:15px;line-height:1.65;opacity:.75;max-width:44ch}

.fp-loggor{display:flex;flex-wrap:wrap;align-items:center;gap:34px 56px}
.fp-logg{display:flex;align-items:center;justify-content:center;height:46px;
  max-width:160px;flex:0 0 auto}
.fp-logg img{max-height:46px;max-width:160px;width:auto;opacity:.8;
  transition:opacity .25s var(--ease)}
.fp-logg img:hover{opacity:1}

.fp-kontakt{padding-bottom:120px}
.fp-kontakt-in{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:center;
  max-width:840px}
.fp-k-foto{width:200px;height:200px;border-radius:12px;object-fit:cover;background:var(--sage-soft)}
.fp-k-roll{font-size:15px;opacity:.65;margin:2px 0 16px}
.fp-k-lankar{display:flex;flex-direction:column;gap:4px}
.fp-k-lankar a{font-size:15px;font-weight:500;color:var(--slate)}
.fp-k-lankar a:hover{text-decoration:underline}

@media(max-width:980px){
  .fp-fakta-in{grid-template-columns:1fr 1fr;gap:34px 0}
  .fp-f:nth-child(3){padding-left:0;border-left:0}
  .fp-intro-in,.fp-projekt-in{grid-template-columns:1fr;gap:26px}
  .fp-gal{grid-template-columns:1fr}
  .fp-gal-stor{min-height:300px}
  .fp-gal-kol{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .fp-projekt-bild{min-height:260px}
  .fp-kontakt-in{grid-template-columns:1fr;gap:26px}
}
@media(max-width:600px){
  .fp-hero{height:auto;min-height:70vh;padding:24px 0 60px}
  .fp-hero-in{margin:0 24px}
  .fp-hero h1{font-size:clamp(32px,9vw,46px);max-width:none}
  .fp-fakta-in{grid-template-columns:1fr;gap:26px}
  .fp-f{padding:0;border-left:0}
  .fp-intro{padding:64px 0 44px}
  .fp-projekt{padding:64px 0;margin-top:56px}
  .fp-gal-kol{grid-template-columns:1fr}
  .fp-loggor{gap:26px 34px}
  .fp-logg,.fp-logg img{height:34px;max-height:34px;max-width:118px}
}
/* Lediga lokaler och kontaktrutan låg centrerade medan resten av
   fastighetssidan är vänsterställd. Samma kant hela vägen ner. */
.fp-fakta ~ .sec .wrap.narrow{max-width:820px;margin-left:0;margin-right:auto}
.fp-fakta ~ .sec .wrap.narrow .sec-head h2,
.fp-fakta ~ .sec .wrap.narrow .lead{text-align:left}
.fp-kontakt-in{margin-left:0;margin-right:auto}

/* Fastighetens eget märke i heron. Höjden sätts per logotyp i build.mjs —
   ett brett ordmärke och ett kvadratiskt märke ser bara lika stora ut om de
   är olika höga. Rubriken finns kvar i koden men syns inte, så Google och
   skärmläsare får den ändå. */
.dold{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fp-logo{display:block;width:auto;max-width:min(520px,72vw);margin:0}
@media(max-width:600px){.fp-logo{max-height:64px;max-width:80vw}}

/* =====================================================================
   FASTIGHETSSIDAN — klon av hantverkslokaler.se
   Varje värde nedan är avläst med getComputedStyle på er sajt, inte satt
   på känsla. Innehållsbredderna är 1200 px i heron och 1176 px i övriga
   sektioner, båda centrerade, precis som live.
   ===================================================================== */
.fwrap{width:min(1200px,calc(100% - 48px));margin:0 auto}

.fhero{position:relative;min-height:60vh;display:flex;align-items:flex-end;
  overflow:hidden;background:#F1F1F1;padding:24px 24px 100px;color:var(--paper)}
.fhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fhero-ov{position:absolute;inset:0;background:#000;opacity:.3}
.fhero-in{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto}
.fhero h1{font-size:70px;font-weight:600;line-height:98px;color:var(--paper);
  margin:0;letter-spacing:normal}
.fhero .btnrow{margin-top:30px}

/* Blågrått välkomstband: 80 px luft upptill, 40 nedtill, spalt 376 + 24 + 776. */
.fvalk{background:var(--slate);color:#fff;padding:80px 0 64px}
.fvalk-in{display:grid;grid-template-columns:376px minmax(0,1fr);gap:24px}
.fvalk h2{font-size:35px;font-weight:700;line-height:49px;color:#fff;margin:0}
.fvalk p{font-size:16px;font-weight:600;line-height:27.2px;color:#fff;margin:0}
.f-marke{display:block;width:auto;max-width:340px;margin:0 0 26px}

/* Faktasektionen: samma blågrå botten, karusell 774 px, lista 386 px. */
/* Luft mellan välkomstbandet och karusellen, annars ligger fotot dikt an
   mot heron och de två bilderna smälter ihop. */
.ffakta{background:var(--slate);color:#fff;padding:12px 0 136px}
.ffakta-in{display:grid;grid-template-columns:minmax(0,1fr) 362px;gap:64px}
.ffakta-bild{position:relative}
.fkar{position:relative;overflow:hidden;width:100%;height:600px;border-radius:2px}
.fkar-spar{display:flex;height:100%;transition:transform .55s var(--ease)}
.fkar-bild{flex:0 0 100%;margin:0;height:100%}
.fkar-bild img{display:block;width:100%;height:100%;object-fit:cover}
.fkar-kn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.9);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.fkar-kn:hover{background:#fff}
.fkar-kn::before{content:"";width:11px;height:11px;border-top:2px solid var(--ink);
  border-right:2px solid var(--ink)}
.fkar-bak{left:12px} .fkar-bak::before{transform:rotate(-135deg);margin-left:3px}
.fkar-fram{right:12px} .fkar-fram::before{transform:rotate(45deg);margin-right:3px}

.ffakta-lista{margin:0;align-self:start}
.ffakta-lista dt{font-size:15px;font-weight:500;line-height:25.5px;
  text-transform:uppercase;color:#FFFFFE;margin:0}
.ffakta-lista dd{font-size:32px;font-weight:600;line-height:54.4px;
  color:#FFFFFE;margin:0 0 24px}
.ffakta-lista dd a{color:inherit}
.ffakta-lista dd a:hover{text-decoration:underline}

/* Krämsektionen: bred rubrik, texten i två spalter under. */
.fkram{background:var(--paper);padding:120px 0 20px}
.fkram h2{font-size:35px;font-weight:700;line-height:49px;color:var(--ink);
  margin:0 0 44px;max-width:1176px}
.fkram-txt{column-count:2;column-gap:60px}
.fkram-txt p{font-size:16px;line-height:27.2px;margin:0 0 20px;
  break-inside:avoid-column}

@media(max-width:1240px){
  .fvalk-in{grid-template-columns:32% 1fr}
}
@media(max-width:900px){
  .fhero{padding:24px 24px 60px;min-height:56vh}
  .fhero h1{font-size:clamp(32px,8vw,48px);line-height:1.14}
  .fvalk-in,.ffakta-in{grid-template-columns:1fr;gap:26px}
  .fkar{height:52vw;min-height:240px}
  .fkram{padding:64px 0 12px}
  .fkram-txt{column-count:1}
  .ffakta-lista dd{font-size:26px;line-height:40px;margin-bottom:18px}
}

/* Fastighetens märke bär rubriken i heron och är satt i rubrikens storlek. */
.fhero-marke{display:block;width:auto;height:auto;max-width:min(620px,78vw);margin:0}
.fp-kort-logo{display:block;width:auto;max-width:200px;margin:0 0 12px}

/* Fast uppmaning nere till höger. Syns först när heron passerats och
   försvinner vid kontaktsektionen, så den aldrig ligger över en knapp. */
.snabbknapp{position:fixed;right:24px;bottom:24px;z-index:80;
  background:var(--slate-900);color:var(--paper);font-size:15px;font-weight:500;
  padding:15px 26px;border-radius:40px;box-shadow:0 18px 40px -18px rgba(20,26,28,.7);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s}
.snabbknapp.syns{opacity:1;transform:none;pointer-events:auto}
.snabbknapp:hover{background:var(--slate)}
@media(prefers-reduced-motion:reduce){.snabbknapp{transition:none}}
@media(max-width:600px){.snabbknapp{right:14px;bottom:14px;padding:13px 20px;font-size:14px}}

/* =====================================================================
   NYCKELTALSBANDET
   Sajten var krämvit hela vägen ner, och det är därför den känns platt.
   Det här bandet ligger i husets djupaste ton och bryter av mellan heron
   och fastighetskorten. Ingen ny färg, inget nytt typsnitt — bara ett
   underlag till som ögat kan vila mot.
   ===================================================================== */
.nyckeltal{background:var(--slate-900);color:var(--paper);padding:74px 0}
.nt-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.nt{padding:0 34px;border-left:1px solid rgba(255,255,242,.16)}
.nt:first-child{padding-left:0;border-left:0}
.nt-tal{font-size:clamp(30px,3vw,42px);font-weight:600;line-height:1.1;
  color:var(--paper);font-variant-numeric:tabular-nums}
.nt-enhet{font-size:19px;font-weight:500;margin-left:6px;opacity:.6}
.nt-etikett{display:block;margin-top:14px;font-size:14px;line-height:1.5;
  opacity:.6;max-width:20ch}
@media(max-width:900px){
  .nt-in{grid-template-columns:1fr 1fr;gap:36px 0}
  .nt:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:560px){
  .nyckeltal{padding:52px 0}
  .nt-in{grid-template-columns:1fr;gap:28px}
  .nt{padding:0;border-left:0}
}
/* Porträtten är svartvita studiobilder på vit botten. Bakgrunden är utbytt
   mot sidans krämvita, så de står direkt på ytan utan synlig fyrkant. */
.m-foto,.fp-k-foto{background:var(--paper)}

/* Logotypen på länkkorten fick fast höjd och en maxbredd samtidigt, vilket
   klippte breda ordmärken. Nu styr höjden och bredden anpassar sig fritt. */
.fp-kort-logo{max-width:none;width:auto;object-fit:contain}

/* =====================================================================
   OM OSS OCH KONTAKT — klon av hantverkslokaler.se
   Uppmätt med getComputedStyle på er sajt. Innehållsbredd 1200 px i heron
   och 1176 i sektionerna, spalterna 376 + 24 + 776.
   ===================================================================== */
/* Fotot är en egen beskärning (team_hero.jpg) som slutar ovanför hunden och
   knäna. Eftersom bildens proportion nu ligger nära heron blir beskärningen
   nästan noll — samma utsnitt oavsett skärmbredd. */
.ohero{position:relative;min-height:64vh;display:flex;align-items:flex-end;
  overflow:hidden;background:#F1F1F1;padding:24px 24px 100px;color:var(--paper)}
/* Fotot är toppställt, precis som på live. Det är avgörande: på en bred skärm
   blir beskärningen stor, och varje procent nedåt äter av utrymmet ovanför
   huvudena. Med 0 % ligger hela bildens egen headroom kvar. */
.ohero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 0%}
.ohero-ov{position:absolute;inset:0;background:#000;opacity:.3}
.ohero-in{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto}
.ohero h1{font-size:70px;font-weight:400;line-height:77px;color:var(--paper);margin:0}
.ohero .btnrow{margin-top:30px}

.otext{background:var(--paper);padding:80px 0 60px}
.otext-in{display:grid;grid-template-columns:376px minmax(0,1fr);gap:24px;align-items:start}
.otext h2{font-size:35px;font-weight:700;line-height:49px;color:var(--ink);margin:0}
.otext-h p{font-size:16px;line-height:27.2px;color:var(--ink)}
.otext-h p+p{margin-top:22px}

.ohyres{background:var(--paper);padding:24px 0 120px}
.ohyres h2{font-size:35px;font-weight:700;line-height:49px;margin-bottom:44px}

/* Kontakt: mörk formulärsektion, därefter medarbetarna på blågrått. */
.kmork{background:var(--ink);color:var(--paper);padding:120px 0}
.kmork h2{font-size:35px;font-weight:700;line-height:49px;color:var(--paper);
  text-align:center;margin-bottom:44px}
.kmork .form{background:transparent;border:0;padding:0;max-width:820px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:20px 30px;align-items:start}
.kmork .fld{margin:0}
.kmork .fld label{color:var(--paper);opacity:.75}
.kmork .fld input,.kmork .fld textarea{background:#fff;border:0;border-radius:8px;padding:14px 18px}
.kmork .fld-lang{grid-column:2;grid-row:1/span 4}
.kmork .fld-lang textarea{height:100%;min-height:230px}
.kmork .btn{grid-column:1/-1;justify-self:center;background:var(--paper);color:var(--ink)}
.kmork .form-note{grid-column:1/-1;color:var(--paper);opacity:.5;text-align:center}

.kmedarb{background:var(--slate);color:#fff;padding:80px 0 100px}
.kmedarb h2{font-size:35px;font-weight:700;line-height:49px;color:#fff;margin-bottom:44px}
.kmedarb .medarb{grid-template-columns:repeat(3,1fr);gap:52px 32px}
.kmedarb .m-namn,.kmedarb .m-roll,.kmedarb .m-lank{color:#fff}
.kmedarb .m-roll{opacity:.72}
.kmedarb .m-lank{opacity:.9}
.kmedarb .m-foto{border-radius:4px}

@media(max-width:900px){
  .ohero{padding:24px 0 60px}
  .ohero-in{padding:0 24px}
  .ohero h1{font-size:clamp(32px,8vw,48px);line-height:1.14}
  .otext-in{grid-template-columns:1fr;gap:26px}
  .otext h2{font-size:clamp(26px,5vw,35px);line-height:1.25}
  .kmork{padding:64px 0}
  .kmork .form{grid-template-columns:1fr}
  .kmork .fld-lang{grid-column:1;grid-row:auto}
  .kmedarb{padding:56px 0 72px}
  .kmedarb .medarb{grid-template-columns:1fr 1fr;gap:34px 20px}
}

/* Work Inn-märket på startsidan: ligger som avsändare ovanför rubriken,
   i samma svart som vår egen logotyp så det inte bryter det grafiska språket. */
.wi-marke{display:block;height:58px;width:auto;align-self:flex-start;flex:0 0 auto;margin:0 0 22px}
@media(max-width:780px){.wi-marke{height:46px;margin-bottom:18px}}

/* ── Översiktshero (Våra fastigheter) ───────────────────────────────
   Rubriken satt för nära underkanten och såg avklippt ut. Heron är nu
   högre, texten har rejält andrum under sig och skuggan ligger som en
   mjuk gradient i botten istället för ett grått lock över hela bilden. */
.phero.phero-stor{height:min(74vh,680px);min-height:520px}
.phero.phero-stor .phero-ov{background:linear-gradient(180deg,rgba(40,48,51,.06) 0%,rgba(40,48,51,.10) 42%,rgba(40,48,51,.62) 82%,rgba(40,48,51,.78) 100%)}
.phero.phero-stor .phero-in{padding-bottom:88px}
.phero.phero-stor .eyebrow{margin-bottom:22px;opacity:.82}
.phero.phero-stor h1{font-size:clamp(38px,5.2vw,68px);line-height:1.06;font-weight:400;letter-spacing:-.01em;max-width:16ch;text-wrap:balance}
.phero-ing{margin:22px 0 0;max-width:52ch;font-size:17px;line-height:1.62;color:var(--paper);opacity:.84}
@media(max-width:780px){
  .phero.phero-stor{height:auto;min-height:0;padding-top:120px}
  .phero.phero-stor .phero-in{padding-bottom:56px}
  .phero-ing{font-size:16px;margin-top:16px}
}

/* Filterraden: mindre knappigt, mer som en tydlig navigering. */
.sec.fastlista{padding-top:64px}
.rfilter{gap:2px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px}
.rf{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:11px 22px;border-radius:999px;color:var(--slate)}
.rf:hover{color:var(--ink)}
.rf.on{background:var(--ink);color:var(--paper)}
.rfilter+*{margin-top:44px}

/* Måtten är tagna från hantverkslokaler.se vid 1698 px bredd:
   heron, krämsektionen och relaterat ligger i en 1200-spalt, medan det
   blågrå bandet (välkomst + fakta) ligger i en smalare 1176-spalt. */
.fvalk .fwrap,.ffakta .fwrap{width:min(1176px,calc(100% - 48px))}
.fkram h2{max-width:none}

/* ── Intagsformuläret ──────────────────────────────────────────────
   Ett formulär för hela sajten med två ingångar. Knappen som personen
   kom ifrån avgör vad som är förvalt: "boka visning" på en fastighets-
   sida, "få förslag" på start- och lediga lokaler-sidan. */
.intag-in{max-width:820px;margin:0 auto}
.intag-ing{font-size:17px;line-height:1.62;opacity:.78;max-width:60ch;margin:0 0 34px}
.kmork .intag-ing,.kontakt-mork .intag-ing{color:var(--paper);text-align:center;margin:-18px auto 38px}

.form.intag{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;align-items:start;max-width:820px;margin:0 auto}
.form.intag .fld{margin:0;min-width:0}
.form.intag .fld-lang,.form.intag .fld-val,.form.intag .intag-skicka,.form.intag .form-note{grid-column:1/-1;grid-row:auto}
.form.intag .fld-lang textarea{height:auto;min-height:0}
.form.intag label em{font-style:normal;font-weight:400;opacity:.6;text-transform:none;letter-spacing:0}

/* Valet överst: två tydliga alternativ, inte en rullista. */
.fld-val{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld-val legend{padding:0;font-size:13px;font-weight:600;margin-bottom:10px;opacity:.75}
.val{display:flex;align-items:center;gap:11px;padding:16px 18px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;font-size:15px;font-weight:500;line-height:1.35;background:var(--paper);transition:.18s}
.val input{appearance:none;-webkit-appearance:none;width:19px;height:19px;flex:0 0 auto;border:1.5px solid #9aa5a8;
  border-radius:50%;margin:0;position:relative;transition:.18s}
.val input:checked{border-color:var(--slate-900);border-width:6px}
.val:has(input:checked){border-color:var(--slate-900);box-shadow:inset 0 0 0 1px var(--slate-900)}
.val input:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* Kvadratmeter som eget fält – två små siffror är lättare att svara på
   än ett spann man måste välja i. Frivilligt, med en väg ut. */
.fld-rubrik{display:block;font-size:13px;font-weight:600;margin-bottom:10px;opacity:.75}
.yta-rad{display:flex;gap:14px;flex-wrap:wrap}
.yta-in{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;opacity:.85}
.yta-in input{width:120px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:15px;background:var(--paper)}
.yta-in input:disabled{opacity:.4}
.yta-enhet{opacity:.6}
.kryss{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;cursor:pointer}
.kryss input{width:18px;height:18px;accent-color:var(--slate-900);margin:0}

/* Mörk botten: samma formulär, ljusa fält. */
.kmork .form.intag,.kontakt-mork .form.intag{background:transparent;border:0;padding:0}
.kmork .val,.kontakt-mork .val{background:rgba(255,255,242,.05);border-color:rgba(255,255,242,.26);color:var(--paper)}
.kmork .val:has(input:checked),.kontakt-mork .val:has(input:checked){background:rgba(255,255,242,.13);border-color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)}
.kmork .val input,.kontakt-mork .val input{border-color:rgba(255,255,242,.5)}
.kmork .val input:checked,.kontakt-mork .val input:checked{border-color:var(--paper);border-width:6px}
.kmork .fld-val legend,.kontakt-mork .fld-val legend,
.kmork .fld-rubrik,.kontakt-mork .fld-rubrik,
.kmork .yta-in,.kontakt-mork .yta-in,
.kmork .kryss,.kontakt-mork .kryss{color:var(--paper)}
.kmork .yta-in input,.kontakt-mork .yta-in input{background:#fff;border:0;color:var(--ink)}
.kmork .intag-skicka,.kontakt-mork .intag-skicka{justify-self:center;margin-top:8px}
.fp-intag{padding:110px 0 120px}

@media(max-width:760px){
  .form.intag,.fld-val{grid-template-columns:1fr}
  .yta-in input{width:100px}
  .fp-intag{padding:72px 0 80px}
}

/* Justeringar efter genomgång: ytafältet ska andas, kryssrutan ska
   inte klibba ihop med texten, och etiketten i heron behöver kontrast. */
.fld-yta{padding:4px 0 2px}
.yta-rad{gap:20px;align-items:flex-end}
.yta-in{flex-direction:column;align-items:flex-start;gap:6px;position:relative}
.yta-in>span:first-child{font-size:13px;font-weight:600;opacity:.75}
.yta-in input{width:150px;padding:13px 52px 13px 14px}
.yta-enhet{position:absolute;right:14px;bottom:14px;font-size:14px;opacity:.55;pointer-events:none}
.kmork .yta-enhet,.kontakt-mork .yta-enhet{color:var(--ink);opacity:.5}
.kryss{margin-top:18px;gap:12px}
.kryss input{width:18px;height:18px;flex:0 0 auto;appearance:auto;-webkit-appearance:checkbox}
.form.intag .fld-yta{margin:6px 0}

.phero.phero-stor .phero-ov{background:linear-gradient(180deg,rgba(40,48,51,.10) 0%,rgba(40,48,51,.14) 38%,rgba(40,48,51,.46) 66%,rgba(40,48,51,.74) 88%,rgba(40,48,51,.82) 100%)}
.phero.phero-stor .eyebrow{opacity:1;color:var(--paper);text-shadow:0 1px 14px rgba(40,48,51,.55)}

/* .fld label{display:block} slog ut flex-layouten i ytafältet – label-taggen
   ligger ju inne i .fld. Därför denna precisering. */
.fld .yta-in{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0;position:relative}
.fld .kryss{display:inline-flex;flex-direction:row;align-items:center;gap:12px;margin:18px 0 0;
  font-size:14px;font-weight:500;text-transform:none;letter-spacing:0}
.fld .yta-in>span:first-child{font-size:13px;font-weight:600;margin:0}
.kmork .fld .yta-in>span:first-child,.kontakt-mork .fld .yta-in>span:first-child,
.kmork .fld .kryss,.kontakt-mork .fld .kryss{color:var(--paper);opacity:.85}
.kmork .fld .yta-in input,.kontakt-mork .fld .yta-in input{width:164px;padding:14px 54px 14px 18px}

/* "Fler fastigheter i …" har samma tyngd som på nuvarande sajt: 60/84, 700. */
.sec.related{padding:80px 0 100px}
.sec.related .sek-rubrik{margin-bottom:60px}
.sec.related .sek-rubrik h2{font-size:clamp(34px,4vw,60px);line-height:1.4;font-weight:700;margin:0}

/* Annonserna per fastighet är nu klickbara och går till Lokalguiden, där
   objektet alltid är aktuellt. Två kolumner så listan inte blir en remsa. */
.vac-list{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
a.vac{text-decoration:none;color:inherit;flex-direction:column;gap:18px;justify-content:space-between;height:100%}
a.vac h3{font-size:19px;line-height:1.34;font-weight:600;margin:8px 0 6px;text-wrap:balance}
a.vac .vac-txt{font-size:14px;opacity:.7;margin:0}
a.vac .vac-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;
  border-top:1px solid var(--line);padding-top:16px;margin:0}
a.vac .vac-area{font-size:24px;font-weight:700;color:var(--slate);letter-spacing:-.01em}
a.vac .vac-lank{font-size:13px;font-weight:600;color:var(--slate);opacity:.72}
a.vac:hover .vac-lank{opacity:1;text-decoration:underline}
.fp-lediga{background:var(--paper-2)}

/* Landningssidorna: fastigheten presenteras med foto, egen logotyp och
   fakta i stället för ett ensamt litet kort. */
.phero.phero-seo{height:min(56vh,520px);min-height:380px}
.phero.phero-seo .phero-ov{background:linear-gradient(180deg,rgba(40,48,51,.20) 0%,rgba(40,48,51,.28) 45%,rgba(40,48,51,.70) 100%)}
.phero.phero-seo .phero-in{padding-bottom:64px}
.seo-fast{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-bottom:72px}
.seo-fast:last-child{margin-bottom:0}
.seo-fast-bild{display:block;border-radius:4px;overflow:hidden;box-shadow:0 40px 80px -46px rgba(40,48,51,.5)}
.seo-fast-bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;transition:transform .6s var(--ease)}
.seo-fast-bild:hover img{transform:scale(1.04)}
.seo-marke{height:44px;width:auto;max-width:280px;object-fit:contain;margin:0 0 20px;display:block}
.seo-fast-txt h2{font-size:clamp(26px,3vw,35px);line-height:1.4;font-weight:700;margin:0 0 18px}
.seo-fast-txt p{font-size:16px;line-height:1.7;opacity:.85;margin:0 0 24px;max-width:52ch}
.seo-fakta{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin:0 0 30px}
.seo-fakta dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin:0 0 4px}
.seo-fakta dd{font-size:19px;font-weight:600;margin:0;line-height:1.35}
@media(max-width:880px){
  .seo-fast{grid-template-columns:1fr;gap:28px;margin-bottom:56px}
  .seo-fakta{grid-template-columns:1fr 1fr;gap:14px 20px}
}

/* Logotyperna i länkkorten ärvde .fp-kort img (16:9 + cover) och blev
   avklippta. En logotyp ska aldrig beskäras — den får sin egen regel med
   högre specificitet. */
.fp-kort .fp-kort-logo{aspect-ratio:auto;object-fit:contain;width:auto;max-width:230px;
  height:auto;margin:0 0 14px}
.fp-kort .fp-kort-logo[style]{width:auto}
a.vac .vac-meta{flex-direction:row;align-items:baseline;text-align:left}
/* Kontaktsidan saknade h1 — rubriken är sidans egen, inte ett avsnitt. */
.kmork h1{font-size:35px;font-weight:700;line-height:49px;color:var(--paper);text-align:center;margin:0 0 18px}
@media(max-width:780px){.kmork h1{font-size:28px;line-height:38px}}

/* ── Mobil ────────────────────────────────────────────────────────
   Heron mättes mot live vid 1199 px och fick en fast bredd på 500 px.
   På en telefon blev den bredare än skärmen och rubriken klipptes.
   Här släpper vi bredden och skalar typen efter skärmen i stället. */
@media(max-width:600px){
  /* Stående skärm beskär bilden på bredden. Centrerat hamnar vi mitt i
     vattnet — vi flyttar utsnittet mot fabriken i högerkant. */
  .hero>img{object-position:74% 50%}
  .hero .hero-in{margin:0 24px;width:auto;max-width:100%}
  .hero h1{width:auto;max-width:100%;font-size:clamp(34px,10.5vw,48px);line-height:1.06;margin:0 0 28px}
  .hero{height:calc(100svh - 70px);min-height:460px}
  .hv-num{font-size:clamp(44px,13vw,62px);line-height:1.14}
  /* Etiketter i versaler tål 11 px på en skärm, men inte i handen. */
  .lg-tag,.fp-kort-etikett,.eyebrow{font-size:12px}
}
/* Fastighetsmärket satt med fast höjd och kapad bredd — då trycktes
   bokstäverna ihop i mobil. Höjden är nu ett tak och proportionerna fria. */
.seo-marke{height:auto}
@media(max-width:600px){
  .fhero-marke{max-width:100%}
  .fhero-in{padding:0}
}

/* ── Kontaktsidan ────────────────────────────────────────────────
   Medarbetarna ligger på Om oss och behövde inte upprepas här. I
   stället de tre uppgifter någon faktiskt letar efter på en kontaktsida. */
.ksnabb{background:var(--paper);padding:96px 0 110px}
.ksnabb-in{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.ksnabb .eyebrow{display:block;margin-bottom:14px;opacity:.65}
.ksnabb-stor{display:block;font-size:clamp(21px,2vw,26px);font-weight:600;line-height:1.3;
  color:var(--ink);letter-spacing:-.01em;word-break:break-word}
a.ksnabb-stor:hover{color:var(--slate)}
.ksnabb p{font-size:15px;line-height:1.6;opacity:.7;margin:10px 0 0;max-width:32ch}
@media(max-width:820px){.ksnabb{padding:64px 0 72px}.ksnabb-in{grid-template-columns:1fr;gap:34px}}

/* ── Översiktsheron ─────────────────────────────────────────────
   Texten låg för nära underkanten: nedstaplarna i "Göteborg" hamnade
   i skarven mot den krämvita ytan. Mer luft under, och en mörkare
   fot på gradienten så typen alltid har botten att stå på. */
.phero.phero-stor .phero-in{padding-bottom:120px}
.phero.phero-stor .phero-ov{background:linear-gradient(180deg,
  rgba(40,48,51,.10) 0%,rgba(40,48,51,.16) 34%,rgba(40,48,51,.52) 64%,
  rgba(40,48,51,.80) 88%,rgba(40,48,51,.88) 100%)}
@media(max-width:780px){.phero.phero-stor .phero-in{padding-bottom:64px}}

/* ── "Även på den här platsen" ──────────────────────────────────
   Med bara ett kort sträckte auto-fit ut det över hela bredden och
   Work Inn blev enormt. Korten håller nu samma storlek oavsett antal. */
.fp-aven{grid-template-columns:repeat(2,minmax(0,1fr))}
.fp-aven .fp-kort{max-width:100%}
@media(max-width:820px){.fp-aven{grid-template-columns:1fr}}
/* Undersidorna följer nu samma 1200-spalt som fastighetssidorna. */
.fwrap.smal{width:min(820px,calc(100% - 48px));margin:0 auto}
.phero .fwrap.phero-in{width:min(1200px,calc(100% - 48px))}

/* ── Kakrutan ─────────────────────────────────────────────────────
   Liten, nere till vänster, i sajtens eget språk. Ingen helskärmsspärr:
   det första en möjlig hyresgäst möter ska vara fastigheterna. */
.kakruta{position:fixed;left:24px;bottom:24px;z-index:120;max-width:400px;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:24px 26px 22px;box-shadow:0 30px 60px -28px rgba(40,48,51,.55);
  opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.kakruta.syns{opacity:1;transform:none}
.kakruta p{font-size:14px;line-height:1.6;margin:0 0 18px;opacity:.85}
.kakruta a{text-decoration:underline}
.kakruta-kn{display:flex;gap:10px;flex-wrap:wrap}
.kakruta .btn{font-size:14px;padding:10px 18px}
.kakruta .btn::after{display:none}
@media(max-width:560px){
  .kakruta{left:12px;right:12px;bottom:12px;max-width:none;padding:20px}
  .kakruta-kn .btn{flex:1 1 auto;justify-content:center}
}
/* Spärren där annonslistan skulle ha legat. */
.lg-sparr{border:1px dashed var(--line);border-radius:6px;padding:36px 32px;background:var(--paper-2);text-align:center}
.lg-sparr p{font-size:15px;line-height:1.65;margin:0 auto 20px;max-width:52ch;opacity:.85}
.lg-sparr .btnrow{justify-content:center}
/* Ett ensamt kort får ligga liggande över hela bredden i stället för att
   stå halvt tomt bredvid ingenting. */
.fp-aven.fp-aven-ensam{grid-template-columns:1fr}
.fp-aven-ensam .fp-kort{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
.fp-aven-ensam .fp-kort>img{height:100%;aspect-ratio:auto;min-height:300px}
.fp-aven-ensam .fp-kort-txt{padding:44px 48px;align-self:center}
.fp-aven-ensam .fp-kort-txt p{max-width:46ch}
@media(max-width:820px){
  .fp-aven-ensam .fp-kort{grid-template-columns:1fr}
  .fp-aven-ensam .fp-kort>img{aspect-ratio:16/9;min-height:0;height:auto}
  .fp-aven-ensam .fp-kort-txt{padding:28px 30px 32px}
}