/* ==========================================================================
   drömkontoret.se — Östra Hamngatan 52, Göteborg
   Avsändare: Yellon. Profil: Akzidenz-Grotesk, svart/vitt, bilddrivet.
   ========================================================================== */

:root {
  --ink:        #1a1818;   /* Yellons logotypsvart */
  --ink-soft:   #3a3735;
  --muted:      #6f6a64;
  --paper:      #faf8f5;
  --paper-2:    #f1ede7;
  --line:       #e0dbd3;
  --line-soft:  #ebe6df;

  /* Accenter hämtade ur lokalens egna färger */
  --blue:       #3f5561;   /* mötesrummets dammiga blå */
  --clay:       #8a5c3f;   /* golvens varma brunton */
  --sand:       #d8ccbc;

  --maxw:       1320px;
  --gut:        clamp(20px, 5vw, 72px);

  /* Akzidenz-Grotesk Next Pro från Adobe Fonts-kittet. OBS: kittets
     basfamilj "akzidenz-grotesk-next" har bara vikt 200 och 800 — normal
     och fet (400/700) ligger i -pro-familjen, därav valet. 600 i koden
     avrundas till 700 av webbläsarens viktmatchning. */
  --f-display: "akzidenz-grotesk-next-pro", "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --f-body:    "akzidenz-grotesk-next-pro", "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

body {
  font-family: var(--f-body);
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(16px, 1.02vw, 18px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Layout ---------- */
/* Markerad text i sidans egen palett — svart/vitt som inverteras på mörk
   botten. En detalj ingen pekar på men alla känner. */
::selection { background: var(--ink); color: var(--paper); }
.sec--dark ::selection, .foot ::selection, .lb ::selection { background: var(--paper); color: var(--ink); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 900px; }
section { position: relative; }
/* Ankarlänkar ska inte hamna under den fasta headern */
section[id], div[id] { scroll-margin-top: 92px; }
#top { scroll-margin-top: 0; }

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Typografi ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }

.display {
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h2 { font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.04; text-wrap: balance; }
.h3 { font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: 1.15; letter-spacing: -0.015em; }

.lead {
  font-size: clamp(1.1rem, 1.55vw, 1.45rem);
  line-height: 1.48;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--rule { display: flex; align-items: center; gap: 1rem; }
.eyebrow--rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.muted { color: var(--muted); }
.prose p + p { margin-top: 1.1em; }

/* ---------- Knappar ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; gap: .7em;
  padding: 1.05em 1.7em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
.btn--light-ghost { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: rgba(250,248,245,.42); }
.btn--light-ghost:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
.btn .arw { transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 1px;
}

/* ---------- Header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding-block: 1.15rem;
  /* Oskärpa plus en mycket svag ton, båda glidande med scrollen (JS sätter
     --head-blur och --head-veil). Tonen behövs för att sidans egen text
     smetas ut bakom balken när den passerar: utan den tappar headertexten
     kontrast mot sitt eget spöke. Den följer tonläget — ljus bakom svart
     text, mörk bakom vit — se .on-dark nedan. */
  --head-blur: 0px;
  --head-veil: 0;
  backdrop-filter: blur(var(--head-blur));
  -webkit-backdrop-filter: blur(var(--head-blur));
  background-color: rgb(250 248 245 / calc(var(--head-veil) * .30));
  transition: box-shadow .35s var(--ease), padding .35s var(--ease),
              color .35s var(--ease), background-color .35s var(--ease);
}
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-head.is-stuck {
  box-shadow: 0 1px 0 rgba(26,24,24,.12);
  padding-block: .8rem;
}
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.brand svg { height: 20px; width: auto; display: block; }
.brand__sep { width: 1px; height: 20px; background: currentColor; opacity: .28; }
.brand__tag { font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.site-head__nav { display: flex; align-items: center; gap: 2rem; }
.site-head__nav a.navlink {
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding-block: .3em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--ease);
}
.site-head__nav a.navlink:hover { background-size: 100% 1px; }
.site-head .btn { padding: .78em 1.25em; font-size: .72rem; }
@media (max-width: 860px) { .site-head__nav a.navlink { display: none; } }
@media (max-width: 560px) {
  .brand__tag { font-size: .7rem; letter-spacing: .14em; }
  .site-head .btn { padding: .7em 1em; font-size: .66rem; letter-spacing: .08em; }
}

/* Ljust läge när något mörkt ligger bakom balken — heron eller en mörk
   sektion. Utan bakgrundsfärg är det enda som ger läsbarhet, eftersom en
   fast textfärg annars försvinner mot antingen ljus eller mörk bakgrund.
   Skuggan finns för att hjältens stora vita rubrik passerar bakom balken:
   oskärpan smetar ut den men tar inte bort ljusheten. */
.site-head.on-dark {
  color: var(--paper);
  /* Mörk ton i stället för ljus — här är det hjältens vita rubrik bakom
     balken som är problemet, alltså för mycket ljus, inte för lite. */
  background-color: rgb(18 16 15 / calc(var(--head-veil) * .38));
  text-shadow: 0 1px 10px rgba(18,16,15,.4);
}
.site-head.on-dark .btn--ghost { --btn-fg: var(--paper); --btn-bd: rgba(250,248,245,.5); }
.site-head.on-dark .btn--ghost:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); text-shadow: none; }
.site-head.on-dark .brand svg path { fill: currentColor; }
.site-head.on-dark { box-shadow: none; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--paper); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.94) saturate(.96); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(18,16,15,.84) 0%, rgba(18,16,15,.66) 32%, rgba(18,16,15,.28) 60%, rgba(18,16,15,.06) 84%),
    linear-gradient(180deg, rgba(18,16,15,.55) 0%, rgba(18,16,15,.08) 30%, rgba(18,16,15,.22) 60%, rgba(18,16,15,.74) 100%);
}
@media (max-width: 780px) {
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(18,16,15,.66) 0%, rgba(18,16,15,.34) 34%, rgba(18,16,15,.70) 66%, rgba(18,16,15,.92) 100%);
  }
}
.hero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(3rem, 8vh, 6rem) clamp(2.4rem, 5vh, 3.6rem); }
.hero .eyebrow { color: rgba(250,248,245,.82); }
.hero .display { margin-block: 1.1rem 1.4rem; max-width: 16ch; }
.hero .display em { font-style: normal; display: block; color: rgba(250,248,245,.74); }
.hero__lead { max-width: 46ch; color: rgba(250,248,245,.93); }
/* Knappen och discoreglaget delar rad och linjerar i underkant —
   reglaget ligger i flödet, inte absolut, så linjen håller i alla bredder. */
.hero__cta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin-top: 2.2rem; }

@media (max-width: 560px) {
  .hero { min-height: 92svh; }
  .hero__in { padding-block: 2rem 2rem; }
  .hero .display { font-size: clamp(2.3rem, 11.5vw, 3.2rem); margin-block: .8rem 1rem; max-width: none; }
  .hero__lead { font-size: 1rem; line-height: 1.5; }
  .hero__cta { gap: .6rem; margin-top: 1.6rem; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; padding: .95em 1rem; font-size: .72rem; }
  .hero .eyebrow { font-size: .62rem; letter-spacing: .12em; }
}


/* ---------- Faktarad ---------- */
.facts { border-block: 1px solid var(--line); background: var(--paper); }
.facts__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.facts__item { padding: 2.1rem 1.4rem 2.1rem 0; border-right: 1px solid var(--line-soft); }
.facts__item:last-child { border-right: 0; }
.facts__item:not(:first-child) { padding-left: 1.4rem; }
.facts__k { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts__v { font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: .5rem; }
.facts__v small { display: block; font-size: .74rem; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: .3rem; line-height: 1.4; }
@media (max-width: 1080px) { .facts__grid { grid-template-columns: repeat(3, 1fr); }
  .facts__item:nth-child(3n) { border-right: 0; }
  .facts__item:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 600px) { .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .facts__item { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 1.5rem 1rem 1.5rem 0; }
  .facts__item:nth-child(2n) { border-right: 0; }
  .facts__item:nth-child(2n+1) { padding-left: 0; }
  .facts__item:nth-child(2n) { padding-left: 1rem; }
  .facts__item:nth-last-child(-n+2) { border-bottom: 0; } }

/* ---------- Sektionsramverk ---------- */
.sec { padding-block: clamp(4.5rem, 11vh, 9rem); }
.sec--tight { padding-block: clamp(3.2rem, 7vh, 5.5rem); }
.sec--dark { background: var(--ink); color: var(--paper); }
.sec--dark .muted, .sec--dark .eyebrow { color: rgba(250,248,245,.58); }
.sec--dark .eyebrow--rule::after { background: rgba(250,248,245,.22); }
.sec--dark .lead { color: rgba(250,248,245,.86); }
.sec--paper2 { background: var(--paper-2); }

.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
@media (max-width: 900px) { .sec__head { grid-template-columns: 1fr; align-items: start; } }
.sec__head .eyebrow { margin-bottom: 1.1rem; }

/* ---------- Intro / text+bild ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4.5rem); align-items: center; }
.split--wide-media { grid-template-columns: 1fr 1.25fr; }
@media (max-width: 900px) { .split, .split--wide-media { grid-template-columns: 1fr; } }
.split__media img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/3; }

figure.fig figcaption,
.cap {
  margin-top: .85rem; font-size: .76rem; line-height: 1.5; color: var(--muted);
  display: flex; gap: .7rem;
}
.cap b { font-weight: 700; color: var(--ink); white-space: nowrap; }
.sec--dark .cap b { color: var(--paper); }

/* ---------- Bildytor och rumskort ---------- */

.shot { display: block; position: relative; width: 100%; padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in; overflow: hidden; }
.shot img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); }

.shot:hover img { transform: scale(1.032); }

/* Bilder som anländer efter första målningen tonas in i stället för att
   poppa. JS sätter is-vantar bara på bilder som inte redan är kompletta. */
img.is-vantar { opacity: 0; }
img.is-laddad { opacity: 1; transition: opacity .45s var(--ease); }

/* ---------- Ingår-lista ---------- */
.incl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.sec--dark .incl { border-color: rgba(250,248,245,.2); }
.incl li { padding: 1.6rem 1.4rem 1.6rem 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 1.1rem; align-items: baseline; }
.sec--dark .incl li { border-color: rgba(250,248,245,.14); }
.incl li:not(:nth-child(3n+1)) { padding-left: 1.4rem; border-left: 1px solid var(--line-soft); }
.sec--dark .incl li:not(:nth-child(3n+1)) { border-left-color: rgba(250,248,245,.14); }
.incl__n { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); min-width: 1.9em; }
.incl__t { font-weight: 700; letter-spacing: -.012em; }
.incl__d { display: block; font-weight: 400; font-size: .84rem; line-height: 1.5; color: var(--muted); margin-top: .28rem; letter-spacing: 0; }
@media (max-width: 860px) { .incl { grid-template-columns: repeat(2, 1fr); }
  .incl li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .incl li:nth-child(2n) { padding-left: 1.4rem; border-left: 1px solid var(--line-soft); } }
@media (max-width: 560px) { .incl { grid-template-columns: 1fr; }
  .incl li:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* ---------- Läget ---------- */
.dist { border-top: 1px solid var(--line); margin-top: 2.4rem; }
.sec--dark .dist { border-color: rgba(250,248,245,.2); }
.dist li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: .95rem 0; border-bottom: 1px solid var(--line-soft); }
.sec--dark .dist li { border-color: rgba(250,248,245,.14); }
.dist__p { font-weight: 600; letter-spacing: -.01em; }
.dist__v { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; font-weight: 600; }

/* ---------- Planlösning ---------- */
.plan { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.6rem, 4vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .plan { grid-template-columns: 1fr; } }
.plan__card {
  border: 1px solid var(--line); background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.plan__doc { display: flex; align-items: center; gap: 1.1rem; padding-block: 1.3rem; border-block: 1px solid var(--line); margin-block: 1.6rem; }
.plan__doc svg { flex: none; }
.plan__doc .n { font-weight: 700; letter-spacing: -.01em; }
.plan__doc .m { font-size: .78rem; color: var(--muted); }
.badge {
  display: inline-block; padding: .34em .7em; margin-bottom: 1rem;
  border: 1px solid var(--clay); color: var(--clay);
  font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}

/* ---------- Hyra ---------- */
.price-note { border-left: 2px solid var(--clay); padding-left: clamp(1.2rem, 2.5vw, 2rem); }

/* ---------- Kontakt ----------
   Sektionen blev plottrig när sex inramade fält stod mot en linjerad
   kontaktlista — två konkurrerande linjesystem. Nu: understrukna fält
   (bara underkant) och en olinjerad, staplad kontaktlista. Etiketterna
   bär fälten ensamma; platshållare finns bara där de tillför något
   utöver etiketten (meddelandet). */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 6vw, 6.5rem); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
/* Samma storlek som sidans övriga ingresser — som rubrikstor stal den
   all vikt från formuläret, särskilt med kontaktlistan under sig. */
.contact__big {
  font-size: clamp(1.1rem, 1.55vw, 1.45rem);
  font-weight: 400; line-height: 1.48; letter-spacing: -.012em;
  color: rgba(250,248,245,.86); max-width: 44ch;
}

.contact__list { margin-top: clamp(2.4rem, 4.5vw, 3.4rem); display: grid; gap: 1.7rem; }
.contact__list li { padding: 0; }
.contact__list a { text-decoration: none; display: block; }
.contact__list .k {
  display: block; font-size: .64rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(250,248,245,.5); margin-bottom: .3rem;
}
.contact__list .v { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -.015em; }
.contact__list a:hover .v { text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: 1px; }

/* Formulär — fälten är rader, inte boxar. Fokus markeras med att
   underkanten går från dämpad till helvit och dubblas via box-shadow
   (ingen layoutförskjutning). */
.form { display: grid; gap: clamp(1.5rem, 2.6vw, 2.1rem); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; column-gap: clamp(1.4rem, 2.4vw, 2rem); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field label {
  display: block; font-size: .66rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(250,248,245,.5); margin-bottom: .1rem;
}
.field input, .field textarea, .field select {
  width: 100%; padding: .55em 0;
  background: transparent; color: var(--paper);
  border: 0; border-bottom: 1px solid rgba(250,248,245,.32);
  border-radius: 0;
  font-size: 1rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 1.8em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23faf8f5' stroke-opacity='.6' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .2em center;
}
.field select option { color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: rgba(250,248,245,.32); }
.field input:hover, .field textarea:hover, .field select:hover { border-bottom-color: rgba(250,248,245,.55); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--paper);
  box-shadow: 0 1px 0 var(--paper);
}
.field textarea { resize: vertical; min-height: 96px; }
/* Samtyckesraden */
.consent {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .8rem; line-height: 1.5; color: rgba(250,248,245,.72);
  cursor: pointer; max-width: 52ch;
}
.consent input[type="checkbox"] {
  flex: none; width: 16px; height: 16px; margin-top: .12em;
  accent-color: var(--paper); cursor: pointer;
}
.consent a { color: rgba(250,248,245,.9); text-underline-offset: .18em; }
.consent a:hover { color: var(--paper); }

.form__note { font-size: .74rem; line-height: 1.55; color: rgba(250,248,245,.5); min-height: 1.2em; }
/* Honungsfällan: utanför skärmen, inte display:none — vissa robotar hoppar
   över fält de ser är dolda. */
.hp { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: rgba(250,248,245,.62); padding-block: 3rem 2.4rem; border-top: 1px solid rgba(250,248,245,.14); }
.foot__in { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; align-items: flex-start; justify-content: space-between; }
.foot svg { height: 22px; width: auto; }
.foot svg path { fill: var(--paper); }
.foot__cols { display: flex; flex-wrap: wrap; gap: 1.6rem 3.2rem; font-size: .82rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }
.foot__bot { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(250,248,245,.14); font-size: .72rem; display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 100; background: #100f0e; display: none; }
/* minmax(0,1fr) — inte 1fr. Med enbart 1fr får raden min-content som
   minimigräns, så en hög bild kan tvinga scenen större än fönstret och
   bilden hamnar delvis utanför (syns i Safari). 100dvh håller dessutom
   sidfoten synlig när mobilens adressfält fälls in och ut. */
.lb[open], .lb.is-open {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
}
.lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem var(--gut); color: rgba(250,248,245,.7); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.lb__x, .lb__nav button { background: none; border: 0; color: inherit; cursor: pointer; padding: .6rem; line-height: 0; }
.lb__x:hover, .lb__nav button:hover { color: var(--paper); }
.lb__stage {
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gut); min-height: 0; overflow: hidden; position: relative;
}
/* Inkommande bild vid svep/bläddring: fyller scenen med letterboxing
   (object-fit) så den kan glida in som ett helt lager bredvid den aktuella. */
#lb-img2 {
  position: absolute; inset: 0; padding: 0 var(--gut); box-sizing: border-box;
  width: 100%; height: 100%; object-fit: contain;
  display: none;
}
/* Rubrik och bildtext på varsin rad i foten */
#lb-title { display: block; margin-bottom: .25rem; }
/* Låt bilden dimensionera sig själv inom scenen. Procentuell höjd mot en
   1fr-rad är det som ställer till det — max-height räcker och är stabilt. */
.lb__stage img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* align-items: start, inte center — textblocket har reserverad höjd för
   gruppens längsta bildtext (sätts i JS vid öppning), så pilarna och bilden
   står stilla när radantalet växlar mellan bilder. */
.lb__foot { padding: 1rem var(--gut) 1.6rem; color: rgba(250,248,245,.72); font-size: .84rem; display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; }
.lb__foot p { margin: 0; }
.lb__foot b { color: var(--paper); }
.lb__nav { display: flex; gap: .4rem; }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-head, .lb, .form, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .sec--dark { background: #fff !important; color: #000 !important; }
  .hero { min-height: auto; color: #000; }
  .hero__media::after { display: none; }
}

/* ==========================================================================
   LAGER 2 — interaktion, rörelse och hantverk
   ========================================================================== */

.vh {
  position: absolute !important; 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;
}

/* ---------- Filmkorn: ger ytan lite taktilitet ----------
   Statiskt med flit. En animerad, viewport-täckande yta kostar mer i
   kompositering än vad 2,8 % opacitet är värt. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Läsprogress i headern ---------- */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.site-head.is-stuck .progress { background: rgba(26,24,24,.12); }
.site-head.on-dark .progress { background: rgba(250,248,245,.2); }
.progress span {
  display: block; height: 100%; width: 0%;
  background: var(--ink); transform-origin: left;
  transition: width .12s linear;
}
.site-head.on-dark .progress span { background: rgba(250,248,245,.75); }

/* Aktiv sektion i navigationen */
.site-head__nav a.navlink[aria-current="true"] { background-size: 100% 1px; }

/* ---------- Hero: orden reser sig ---------- */
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.words .w > span { display: inline-block; transform: translateY(110%); }
.words em { font-style: normal; display: block; color: rgba(250,248,245,.74); }
@media (prefers-reduced-motion: no-preference) {
  .words .w > span { transition: transform 1s cubic-bezier(.16,.84,.34,1); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
  body.is-ready .words .w > span { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .words .w > span { transform: none; } }

/* Heron drar sig långsamt uppåt när man scrollar */
.hero__media { will-change: transform; }

/* ---------- UTFORSKA ---------- */
/* Planen till vänster i full höjd, rumskort och reglage staplade till
   höger — så syns planen samtidigt som man drar i reglaget. */
/* ---------- Utforska: planritning + rumskort ----------

   Sektionen är två saker: klicka i ritningen, se rummet. Reglaget som visade
   "hur stor del tar vi" är borta — lokalen hyrs ut i sin helhet, så frågan
   hade ingen riktig funktion. Det förenklade också layouten kraftigt: utan
   reglage under ritningen behöver den inte vara klistrad på halva höjden,
   och därmed behövs inget höjdtak i vh. Bredden styrs helt av spalten.
   (Ritningen är stående, 1020 × 1680 — ett höjdtak i vh lät fönstrets höjd
   bestämma ritningens bredd, vilket gav en 123 px bred ritning på mobil i
   liggande läge.)                                                        */

.explore {
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
/* overflow: hidden är bärande: bildfilen är 1380 enheter bred men det smala
   utsnittet visar bara 1020 — utan klippning sticker trapphuset ut halvklippt
   till höger om ramen på fönster under 960 px. */
.planmap { display: block; height: auto; max-height: none; overflow: hidden;
           width: min(100%, 620px); margin-inline: auto; }
.planmap__legend {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.6rem; justify-content: space-between;
  /* Samma bredd som ritningen — annars hamnar förklaringen ute vid
     spaltens kanter medan ritningen står centrerad i mitten. */
  width: min(100%, 620px); margin: 1.1rem auto 0;
  font-size: .74rem; color: var(--muted);
}

/* Staplat läge: rumskortet hamnar under ritningen, utanför vyn — bara halva
   fotot skymtade i underkant och rumsnamnet låg 331 px under nederkanten.
   Där öppnas bilden i lightboxen i stället (openStops i app.js) och kortet
   göms. Det ligger kvar i DOM:en för aria-live och för att vara rätt ifyllt
   om skärmen roteras. */
.explore__panel { display: none; }

/* Filmremsan som komplement i staplat läge. Där är rumskortet gömt och
   bilderna nås via lightboxen — remsan ger dessutom den passiva svepningen
   som var hela poängen med den gamla sektionen "Rum för rum". Den byggs av
   JS ur STOPS, så den kan aldrig hamna i otakt med planritningen.
   proximity, inte mandatory: med olika breda bilder ligger sista snäppunkten
   bortom max scroll, och mandatory snäpper då tillbaka så att sista bilden
   aldrig går att nå. */
.roomstrip { order: 4; margin-top: .4rem; }
.roomstrip__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 1rem; border-top: 1px solid var(--line); margin-bottom: .9rem;
}
.roomstrip__track {
  display: flex; gap: .6rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .3rem;
}
.roomstrip__track::-webkit-scrollbar { display: none; }
.roomstrip__item {
  flex: 0 0 auto; scroll-snap-align: start;
  display: block; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
}
.roomstrip__item img {
  display: block; height: clamp(160px, 26vh, 230px); width: auto;
  transition: opacity .25s var(--ease);
}
.roomstrip__item:active img { opacity: .7; }
.roomstrip__item:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.roomstrip__cap {
  display: block; margin-top: .45rem; max-width: 24ch;
  font-size: .68rem; line-height: 1.35; color: var(--muted);
}

/* Två spalter när det finns bredd. Villkoret är medvetet en ELLER-lista:
   dels breda fönster, dels låga och breda (mobil liggande), där en staplad
   layout annars klämmer ihop ritningen till ett frimärke. */
@media (min-width: 760px), (min-width: 660px) and (max-height: 620px) {
  .explore__panel { display: block; }
  .roomstrip { display: none; }
  .explore {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1.6rem, 3.5vw, 3rem);
    align-items: start;
  }
  /* auto-spalten krymper till ritningens bredd, så tomrummet vid sidan
     försvinner. Därav vw i stället för % här. 42vw, inte 38: vid 768 px gav
     38vw en 292 px bred ritning där entrén — minsta rummet — blev en 41 px
     klickyta, under WCAG:s 44 px. */
  .planmap, .planmap__legend { width: min(46vw, 580px); }
}

/* Kameramarkören: punkt med synfältskon som glider mellan anhalterna.
   SVG-transform via style så CSS-övergången fungerar; enheter = ritningens. */
.kamera { pointer-events: none; }
.kamera__kon { fill: rgba(63,85,97,.34); }
.kamera__punkt { fill: var(--blue, #3f5561); stroke: var(--paper); stroke-width: 5; }
@media (prefers-reduced-motion: no-preference) {
  .kamera { transition: transform .5s var(--ease); }
}
.planmap__kamera-txt { display: flex; align-items: center; gap: .45rem; }
.kamera-sym {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: #3f5561; box-shadow: 0 0 0 2px rgba(63,85,97,.25);
}

/* Klickytorna ligger som osynliga överlägg på den riktiga planritningen.
   Utan JS eller interaktion syns bara ritningen — precis som i PDF:en. */
.room rect {
  fill: transparent; stroke: transparent; stroke-width: 5;
  transition: fill .3s var(--ease), stroke .3s var(--ease);
}
.room { cursor: pointer; outline: none; }
.room:hover rect { fill: rgba(63,85,97,.14); }
.room:focus-visible rect { stroke: var(--blue); }
/* Valt rum. Kontrasten är medvetet hög — en svagare ton syntes inte mot
   ritningens egna gråskalor. */
.room.is-active rect { fill: rgba(26,24,24,.28); stroke: var(--ink); }

/* Rum som ingår enligt reglaget */
.planmap__legend > p { display: flex; align-items: center; }
.planmap__hint { font-style: italic; }

/* Rumskort */
.roomcard { border: 1px solid var(--line); background: var(--paper); padding: clamp(1rem, 2vw, 1.4rem); }
.roomcard__media { width: 100%; margin-bottom: 1.1rem; }
.roomcard__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.roomcard .eyebrow { font-size: .62rem; }
.roomcard .h3 { margin: .5rem 0 1rem; }
.roomcard__meta { border-top: 1px solid var(--line-soft); margin-bottom: 1rem; }
.roomcard__meta li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line-soft); font-size: .84rem;
}
.roomcard__meta .k { color: var(--muted); }
.roomcard__meta .v { font-weight: 600; text-align: right; }
.roomcard__text { font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }

/* Pilraden längst ned i kortet. Den bär den linjära vandringen genom lokalen
   som filmremsan stod för innan bild- och planblocken slogs ihop. */
.roomnav {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.roomnav__count {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.roomnav__count span:first-child { color: var(--ink); }
.roomnav__btns { display: flex; gap: .5rem; }
.roomnav__btn {
  width: 52px; height: 40px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); color: var(--ink);
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.roomnav__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.roomnav__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.roomcard { transition: opacity .22s var(--ease); }

/* ---------- Konfigurator ---------- */

/* ---------- Nedladdningsremsa ---------- */
.plandl {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: center; justify-content: space-between;
  margin-top: clamp(1.6rem, 3vw, 2.6rem); padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.plandl .badge { margin-bottom: .7rem; }
.plandl__txt { max-width: 52ch; }
.plandl__txt .muted { font-size: .88rem; margin-top: .4rem; }

/* ---------- Avståndsstaplar ---------- */
.dist li { position: relative; }
.dist li::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px;
  width: var(--w, 0%); background: var(--ink); opacity: .5;
  transition: width 1.1s var(--ease); transition-delay: calc(var(--i,0) * 70ms);
}
.sec--dark .dist li::before { background: var(--paper); }
.dist.is-in li::before { width: var(--w, 0%); }

/* ---------- Egen markör över bildytor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.cursor.is-on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
@media (pointer: fine) { .shot { cursor: none; } }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* ---------- View Transitions för lightboxen ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(shot), ::view-transition-new(shot) { animation-duration: .42s; }
}

/* ---------- Discokulan ---------- */
.discotoggle {
  display: inline-flex; align-items: center; gap: .6rem;
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: inherit; opacity: .72; transition: opacity .25s var(--ease);
}
.discotoggle:hover { opacity: 1; }
.discotoggle .ball {
  position: relative;
  width: 15px; height: 15px; border-radius: 50%;
}
/* Glöden ligger som drop-shadow på SVG:n — den följer klotets form exakt.
   box-shadow på spanen gav en solid ring: spridningen ritas som en skiva
   utanför kanten innan oskärpan tar vid. */
.discotoggle .ball svg {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 0 0 rgba(255,235,190,0));
  transition: filter .3s var(--ease);
}
/* Blänket: en spegelglimt som flammar till var sjätte sekund, med en svag
   efterblink — som när en fasett fångar ljuset. Ligger på ett eget lager
   (::after) så det aldrig krockar med glöden som disco-on animerar. */
.discotoggle .ball::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.95), rgba(255,255,255,0) 45%);
  box-shadow: 0 0 7px 1px rgba(255,246,220,.55);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .discotoggle .ball::after { animation: glimt 6s linear infinite 2.5s; }
}
@keyframes glimt {
  0%, 82%, 100% { opacity: 0; }
  85%           { opacity: 1; }
  88%           { opacity: 0; }
  90.5%         { opacity: .55; }
  93%           { opacity: 0; }
}
/* Tänd kula: stadig glöd, och den fasta högdagern får ligga kvar */
body.disco-on .discotoggle .ball svg { filter: drop-shadow(0 0 5px rgba(255,235,190,.95)); }
body.disco-on .discotoggle .ball::after { animation: none; opacity: .85; }

/* ---------- Discokulans ljusspel i heron ----------
   Prickarna räknas fram i JS: strålar från kulan i en enkel rumsmodell
   som träffar golv, väggar och tak och projiceras till skärmen. */
.discolight {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
body.disco-on .discolight { opacity: 1; }
.dl {
  position: absolute; top: 0; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255,250,235,.95), rgba(255,236,200,.55) 55%, rgba(255,236,200,0) 78%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.dl--blue { background: radial-gradient(circle at 42% 38%, rgba(226,238,255,.9), rgba(170,205,255,.5) 55%, rgba(170,205,255,0) 78%); }
.dl--pink { background: radial-gradient(circle at 42% 38%, rgba(255,232,242,.9), rgba(255,180,215,.45) 55%, rgba(255,180,215,0) 78%); }
.dl--glint {
  width: 26px; height: 26px;
  background: radial-gradient(circle, rgba(255,255,250,.95), rgba(255,244,214,.35) 40%, rgba(255,244,214,0) 70%);
}
@media (prefers-reduced-motion: reduce) { .discolight { display: none; } }

/* Skymningen: den regraderade fotokopian tonas in när kulan tänds */
.duskgrade {
  position: absolute; inset: 0; z-index: 1;   /* över fotot, som har filter (egen stackningskontext) */
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease);
  pointer-events: none;
}
body.disco-on .duskgrade { opacity: 1; }

/* Pendellamporna som tänds i kvällsläget */
.lampglow {
  position: absolute; top: 0; left: 0; border-radius: 50%;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 44%,
    rgba(255,222,160,.95), rgba(255,176,96,.4) 36%, rgba(255,150,70,0) 70%);
  transition: opacity 1.6s var(--ease);
  will-change: opacity;
}
body.disco-on .lampglow { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  body.disco-on .lampglow { animation: lampPulse 5s ease-in-out infinite alternate; }
  body.disco-on .lampglow:nth-child(odd) { animation-duration: 6.4s; }
}
@keyframes lampPulse { from { opacity: .42; } to { opacity: .58; } }
@media (prefers-reduced-motion: reduce) { .duskgrade, .lampglow { display: none; } }

/* Strömbrytaren i heron: högerställd i CTA-raden, utan bottenluft så
   texten landar på knappens underkant. */
.discotoggle--hero {
  margin-left: auto; padding-bottom: 0;
  color: rgba(250,248,245,.85);
}
.discotoggle--hero:hover { color: var(--paper); }

/* ---------- Print: ta bort allt nytt pynt ---------- */
@media print {
  .grain, .discolight, .duskgrade, .lampglow, .cursor, .progress, .discotoggle { display: none !important; }
  .words .w > span { transform: none !important; }
  .room rect { fill: transparent !important; stroke: none !important; }
}

/* ==========================================================================
   Utan JavaScript
   Sidan ska vara läsbar och användbar även om skriptet aldrig kör. Det som
   kräver JS döljs hellre än visas trasigt.
   ========================================================================== */
.no-js .rv { opacity: 1; transform: none; }
.no-js .words .w > span { transform: none; }
.no-js .explore__panel { display: block; }   /* utan skript finns ingen lightbox */
.no-js .roomstrip { display: none; }
.no-js .roomnav,
.no-js .planmap__hint,
.no-js .discotoggle { display: none; }
.no-js .shot { cursor: default; }
.no-js .dist li::before { display: none; }