/* Termik Värmepumpar · A6 corporate-authority
   Palett: pergament-blackbla. Mätt kontrast (WCAG 2.1):
     #242320 på #f9f6ee = 14,55:1   #242320 på #efe9da = 12,98:1
     #2b3d5c på #f9f6ee = 10,19:1   #2b3d5c på #efe9da =  9,09:1
     #5c5a52 på #f9f6ee =  6,42:1   #5c5a52 på #efe9da =  5,72:1
     #f9f6ee på #2b3d5c = 10,19:1   #b9c3d4 på #2b3d5c =  6,20:1
     #a7b3c8 på #2b3d5c =  5,20:1
   Accenten är mörk nog för brödtext, så ingen separat textvariant behövs.

   Big Shoulders Display, mätt efter att fonten laddats (200 px, canvas):
     versalhöjd H = 0,80 em · Å = 0,995 em · Ä/Ö = 0,925 em · underhäng g = 0,185 em
   Med versaler krävs radavstånd över 1,005 för att Å-ringen inte ska slå
   upp i raden ovanför. Alla display-rubriker ligger därför på 1,14. */

*,*::before,*::after { box-sizing: border-box; }

:root {
  --bas:#f9f6ee;
  --yta:#efe9da;
  --ink:#242320;
  --dim:#5c5a52;
  --acc:#2b3d5c;
  --ljus:#b9c3d4;
  --ljus-2:#a7b3c8;
  --linje:#ddd5c2;
  --linje-stark:#bfb49a;
  --disp:"Big Shoulders Display","Arial Narrow",Arial,sans-serif;
  --txt:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --gut:clamp(1.25rem,5vw,3.5rem);
  --hdr:62px;
  --luft:clamp(4rem,9vw,8rem);
}
@media (min-width:900px){ :root{ --hdr:78px; } }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--bas);
  color:var(--ink);
  font:400 1.0625rem/1.68 var(--txt);
}

img { max-width:100%; display:block; }
h1,h2,h3 { margin:0; overflow-wrap:break-word; }
p,ul,ol,dl,dd,figure,blockquote { margin:0; }
ul,ol { padding:0; list-style:none; }
a { color:inherit; }

.wrap { width:min(100% - 2 * var(--gut),1180px); margin-inline:auto; }

.dolt {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

*:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
.mork *:focus-visible, .fot *:focus-visible, .rail:focus-visible { outline-color:var(--bas); }

.hoppa {
  position:absolute; left:-9999px; top:0; z-index:100;
  display:inline-flex; align-items:center; min-height:44px; padding:0 1.2rem;
  background:var(--acc); color:var(--bas); text-decoration:none;
  font:500 .85rem/1 var(--mono); letter-spacing:.1em;
}
.hoppa:focus { left:0; }

/* ---------------------------------------------------------- typografi */

/* Bredaste raden är VÄRMEPUMP. på 3,875 em, mätt i snittet. Vid 375 px
   ryms den på 62 px teckengrad med marginal, vid 1440 på 128. Raderna
   bryts med <br> så ragget blir fyra hela ord, inte ett hängande EN. */
h1 {
  font:600 clamp(3.9rem,9vw,8rem)/1.14 var(--disp);
  text-transform:uppercase; letter-spacing:.006em;
  margin:1.4rem 0 0;
}
h2 {
  font:600 clamp(2rem,4.6vw,3.4rem)/1.14 var(--disp);
  text-transform:uppercase; letter-spacing:.008em; max-width:13em;
}
h3 {
  font:600 clamp(1.2rem,2vw,1.55rem)/1.16 var(--disp);
  text-transform:uppercase; letter-spacing:.02em;
}
.lead { font-size:clamp(1.02rem,1.35vw,1.14rem); line-height:1.7; max-width:60ch; }
.et {
  font:500 .72rem/1.4 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}

/* ---------------------------------------------------------- header */

.hdr {
  position:sticky; top:0; z-index:70;
  background:var(--bas); border-bottom:1px solid var(--linje-stark);
}
.hdr-in {
  width:min(100% - 2 * var(--gut),1180px); margin-inline:auto;
  min-height:var(--hdr); display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
}
.mark {
  display:inline-flex; flex-direction:column; justify-content:center;
  min-height:44px; text-decoration:none;
}
.mark-n {
  font:700 1.5rem/1.05 var(--disp); text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink);
}
.mark-u {
  font:400 .64rem/1.2 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-top:.3rem;
}

.nav-lista a, .nav-tel a {
  display:flex; align-items:center; min-height:44px;
  text-decoration:none; font:500 .9rem/1.3 var(--txt);
}
.nav-tel a { font-family:var(--mono); font-size:.82rem; color:var(--acc); }

.burger {
  display:none; align-items:center; gap:.6rem;
  min-height:46px; padding:0 .85rem 0 1rem;
  background:var(--bas); color:var(--ink);
  border:1px solid var(--linje-stark); cursor:pointer;
  font:500 .74rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
}
.burger-ikon { display:block; width:17px; }
.burger-ikon i {
  display:block; height:1.5px; background:var(--ink); margin:3.5px 0;
  transition:transform .24s ease, opacity .24s ease;
}
.burger[aria-expanded="true"] .burger-ikon i:nth-child(1) { transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-ikon i:nth-child(2) { opacity:0; }
.burger[aria-expanded="true"] .burger-ikon i:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }

@media (max-width:899px){
  .burger { display:inline-flex; }
  .nav {
    position:fixed; left:0; right:0; top:calc(var(--hdr) + 1px); bottom:0; z-index:60;
    background:var(--bas); border-top:1px solid var(--linje-stark);
    padding:.75rem var(--gut) 2.5rem; overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
  }
  .nav.oppen { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .nav-lista a {
    min-height:56px; font-size:1.05rem;
    border-bottom:1px solid var(--linje);
  }
  .nav-tel { margin-top:1.4rem; }
  .nav-tel a { min-height:52px; font-size:1rem; }
  body.meny-oppen { overflow:hidden; }
}
@media (min-width:900px){
  .nav { display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.4rem); }
  .nav-lista { display:flex; align-items:center; gap:clamp(.9rem,1.9vw,1.9rem); }
  .nav-lista a { border-bottom:1px solid transparent; }
  .nav-lista a:hover { border-bottom-color:var(--acc); }
  .nav-tel { display:none; }
}
@media (min-width:1140px){ .nav-tel { display:block; } }

/* ---------------------------------------------------------- hero */

.hero-in { display:grid; gap:clamp(2.5rem,5vw,4rem); }
.hero-txt { padding:clamp(2.75rem,6vw,5.5rem) 0 0; }

.hero-txt .lead { margin-top:1.6rem; }
.knappar { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.2rem; }

.knapp {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 1.7rem; text-decoration:none;
  font:600 .95rem/1.2 var(--txt); letter-spacing:.01em;
  background:var(--acc); color:var(--bas); border:1px solid var(--acc);
  transition:background .2s ease, color .2s ease;
}
.knapp:hover { background:transparent; color:var(--acc); }
.knapp-2 { background:transparent; color:var(--acc); }
.knapp-2:hover { background:var(--acc); color:var(--bas); }
.knapp-3 { background:var(--bas); color:var(--ink); border-color:var(--bas); margin-top:.6rem; }
.knapp-3:hover { background:transparent; color:var(--bas); }

.hero-svar { margin-top:clamp(2.5rem,5vw,3.6rem); border-top:1px solid var(--linje-stark); }
.hero-svar > div {
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--linje);
}
.hero-svar dt { font:500 .78rem/1.7 var(--mono); color:var(--acc); }
.hero-svar dd { font-size:.98rem; line-height:1.55; }

.hero-omr {
  margin-top:1.8rem; font:400 .8rem/1.9 var(--mono);
  color:var(--dim); letter-spacing:.03em;
}
.hero-omr span {
  display:block; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin-bottom:.35rem;
}

.hero-plat { padding-bottom:clamp(3rem,6vw,5rem); }
.platta {
  position:relative; background:var(--acc); color:var(--bas);
  padding:clamp(1.9rem,3.4vw,2.6rem);
}
.platta::before {
  content:""; position:absolute; inset:9px; border:1px solid rgba(249,246,238,.28);
  pointer-events:none;
}
.platta::after {
  content:""; position:absolute; inset:19px; pointer-events:none;
  background-image:
    radial-gradient(circle 3px at 0 0, rgba(249,246,238,.55) 96%, transparent 100%),
    radial-gradient(circle 3px at 100% 0, rgba(249,246,238,.55) 96%, transparent 100%),
    radial-gradient(circle 3px at 0 100%, rgba(249,246,238,.55) 96%, transparent 100%),
    radial-gradient(circle 3px at 100% 100%, rgba(249,246,238,.55) 96%, transparent 100%);
  background-repeat:no-repeat;
}
.platta-et {
  font:500 .68rem/1 var(--mono); letter-spacing:.28em;
  text-transform:uppercase; color:var(--ljus-2);
}
.platta-namn {
  font:600 clamp(1.5rem,2.4vw,1.95rem)/1.14 var(--disp);
  text-transform:uppercase; letter-spacing:.03em; margin-top:.55rem;
  padding-bottom:1.1rem; border-bottom:1px solid rgba(249,246,238,.3);
}
.platta-rader { margin-top:.3rem; }
.platta-rader > div {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.9rem;
  padding:.7rem 0; border-bottom:1px solid rgba(249,246,238,.16);
}
.platta-rader dt {
  font:400 .7rem/1.5 var(--mono); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ljus);
}
.platta-rader dd { font:500 .84rem/1.5 var(--mono); color:var(--bas); text-align:right; }
.platta-not {
  margin-top:1.3rem; font-size:.84rem; line-height:1.6; color:var(--ljus);
}

@media (min-width:960px){
  .hero-in { grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(3rem,5vw,5.5rem); }
  .hero-txt { padding-bottom:clamp(4rem,8vw,7rem); }
  .hero-plat { padding-top:clamp(2.75rem,6vw,5.5rem); }
  .platta { position:sticky; top:calc(var(--hdr) + 2.2rem); }
}

/* ---------------------------------------------------------- sektioner */

.sek {
  --sekbg:var(--bas);
  background:var(--sekbg);
  border-top:1px solid var(--linje-stark);
  padding-bottom:var(--luft);
}
.sek.yta { --sekbg:var(--yta); }
.sek.mork { --sekbg:var(--acc); color:var(--bas); }

.sek-et {
  display:inline-block; position:relative; margin-top:-.62em;
  padding-right:1.2rem; background:var(--sekbg);
  font:500 .72rem/1 var(--mono); letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
}
.sek.mork .sek-et { color:var(--ljus-2); }

.sek-huv { padding-top:clamp(3rem,7vw,6rem); }
.sek-huv .lead { margin-top:1.4rem; }
.sek.mork .lead { color:var(--bas); }

/* ---------------------------------------------------- SIGNATUR: tabellen */

.forutsatt {
  margin-top:clamp(2.5rem,5vw,4rem);
  border-top:2px solid var(--acc);
  border-bottom:1px solid var(--linje-stark);
  padding:1.4rem 0 .4rem;
}
.forutsatt-et {
  font:500 .7rem/1 var(--mono); letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim); margin-bottom:1rem;
}
.forutsatt-lista > div {
  display:grid; gap:.25rem 2rem; padding:.7rem 0;
  border-top:1px solid var(--linje);
}
.forutsatt-lista dt {
  font:500 .72rem/1.6 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc);
}
.forutsatt-lista dd { font-size:.95rem; line-height:1.6; max-width:74ch; }
@media (min-width:720px){
  .forutsatt-lista > div { grid-template-columns:180px minmax(0,1fr); }
}

/* Syns bara när tabellen faktiskt går att dra. app.js sätter klassen. */
.rail-tips { display:none; }
.rail-tips.syns {
  display:block; margin:2.4rem 0 .7rem;
  font:400 .72rem/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
.rail-tips.syns::after { content:" \2192"; }

.rail {
  --kol1:148px;
  overflow-x:auto;
  border-top:1px solid var(--linje-stark);
  border-bottom:1px solid var(--linje-stark);
  margin-top:2.8rem;
  /* Snappar en pumpkolumn mot kriteriekolumnens kant, så man slipper läsa
     en halv kolumn. proximity, inte mandatory: med mandatory blir de sista
     pixlarna onåbara när tabellen nästan ryms. */
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--kol1);
}
.rail-tips.syns + .rail { margin-top:.4rem; }

.jmf {
  width:100%; min-width:709px;
  border-collapse:collapse; table-layout:fixed;
  font-size:.9rem;
}
.jmf td { scroll-snap-align:start; }
@media (min-width:800px){ .rail { --kol1:224px; } .jmf { min-width:800px; } }

.jmf th, .jmf td {
  text-align:left; vertical-align:top;
  padding:.95rem 1.1rem .95rem 0;
  border-bottom:1px solid var(--linje);
}
.jmf th:first-child, .jmf td:first-child { padding-left:0; }
.jmf td { padding-left:1.1rem; line-height:1.5; }

.jmf thead th {
  padding-top:1.5rem; padding-bottom:1.2rem;
  border-bottom:2px solid var(--acc);
  vertical-align:bottom;
}
.jmf .hoek { width:var(--kol1); }
.kolet {
  display:block; font:400 .68rem/1 var(--mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
.kod {
  display:block; font:500 .72rem/1 var(--mono); letter-spacing:.24em;
  color:var(--dim); margin-bottom:.55rem;
}
.ktyp {
  display:block; font:600 clamp(1.15rem,2vw,1.5rem)/1.14 var(--disp);
  text-transform:uppercase; letter-spacing:.02em; color:var(--acc);
  white-space:nowrap;
}
.kund {
  display:block; font:400 .74rem/1.4 var(--mono);
  color:var(--dim); margin-top:.4rem;
}

.jmf tbody th[scope="row"] {
  width:var(--kol1);
  font:500 .8rem/1.45 var(--mono); letter-spacing:.02em;
  color:var(--ink); padding-right:1.2rem;
}
/* Kriteriekolumnen står stilla när tabellen dras. Hårlinjen på höger kant
   är vad som gör att en halvt inskrollad pumpkolumn läses som inskrollad
   och inte som text på fel rad. */
.jmf th[scope="row"], .jmf .hoek {
  position:sticky; left:0; z-index:2; background:var(--sekbg);
  box-shadow:1px 0 0 var(--linje-stark);
}
.jmf .hoek { z-index:3; }
@media (min-width:1060px){
  .jmf th[scope="row"], .jmf .hoek { box-shadow:none; }
}

.jmf .band th {
  background:var(--acc); color:var(--bas);
  padding:.55rem 0; border-bottom:none;
}
.bandtxt {
  position:sticky; left:0; display:inline-block;
  font:500 .68rem/1.6 var(--mono); letter-spacing:.24em;
  text-transform:uppercase;
}
.jmf tbody tr:first-child th { border-top:none; }

.jmf .tal {
  font:400 .86rem/1.5 var(--mono);
  font-variant-numeric:tabular-nums;
}
.jmf .avrad th[scope="row"], .jmf .avrad td {
  border-top:2px solid var(--linje-stark);
  padding-top:1.2rem;
}
.jmf .avrad td { color:var(--dim); }
.jmf tbody tr:last-child th, .jmf tbody tr:last-child td { border-bottom:none; }

.jmf-not {
  margin-top:1.8rem; font-size:.92rem; line-height:1.7;
  color:var(--dim); max-width:72ch;
}
.jmf-not span { display:block; margin-top:.5rem; color:var(--acc); font-weight:500; }

/* ---------------------------------------------------------- valet */

.fragor { margin-top:clamp(2.5rem,5vw,4rem); }
.fragor li {
  display:grid; gap:.5rem 2.5rem;
  padding:clamp(1.7rem,3.2vw,2.5rem) 0;
  border-top:1px solid var(--linje-stark);
}
.fragor li:last-child { border-bottom:1px solid var(--linje-stark); }
.fnr {
  font:500 .72rem/1.6 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}
.finn > p { margin-top:.8rem; max-width:62ch; }
.fsvar { font-size:.95rem; line-height:1.75; }
.fs {
  display:inline-block; margin-right:.4rem;
  font:500 .68rem/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc);
  border-bottom:1.5px solid var(--acc); padding-bottom:.2rem;
}
@media (min-width:820px){
  .fragor li { grid-template-columns:180px minmax(0,1fr); }
}

/* ---------------------------------------------------------- arbetsgången */

.steg { margin-top:clamp(2.5rem,5vw,4rem); }
.steg li {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.5rem 1.5rem;
  padding:clamp(1.6rem,3vw,2.3rem) 0;
  border-top:1px solid var(--linje-stark);
}
.steg li:last-child { border-bottom:1px solid var(--linje-stark); }
.snr {
  font:600 clamp(1.7rem,3vw,2.5rem)/1 var(--disp);
  color:var(--acc); letter-spacing:.02em;
}
.stxt p { margin-top:.6rem; max-width:58ch; font-size:.98rem; }
.stid {
  grid-column:2; font:500 .82rem/1.4 var(--mono); color:var(--ink);
}
.stid em {
  display:block; margin-top:.4rem; font-style:normal;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
@media (min-width:900px){
  .steg li { grid-template-columns:88px minmax(0,1fr) 220px; }
  .stid { grid-column:3; grid-row:1; }
}

/* ---------------------------------------------------------- serviceavtal */

.avtal { display:grid; gap:clamp(2.2rem,4vw,3.5rem); margin-top:clamp(2.5rem,5vw,4rem); }
.avtal-kol h3 { padding-bottom:1rem; border-bottom:2px solid var(--acc); }
.bock, .kryss { margin-top:1.4rem; }
.bock li, .kryss li {
  position:relative; padding:.7rem 0 .7rem 2rem;
  border-bottom:1px solid var(--linje); font-size:.98rem; line-height:1.6;
}
.bock li::before {
  content:""; position:absolute; left:1px; top:1.15rem;
  width:11px; height:6px; border-left:1.6px solid var(--acc);
  border-bottom:1.6px solid var(--acc); transform:rotate(-45deg);
}
.kryss li::before {
  content:""; position:absolute; left:0; top:1.4rem;
  width:13px; height:1.6px; background:var(--dim);
}
.avtal-pris { margin-top:2.2rem; border-top:2px solid var(--acc); padding-top:1.2rem; }
.ap-et {
  font:500 .7rem/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
}
.avtal-pris dl { margin-top:1rem; }
.avtal-pris > dl > div {
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--linje);
}
.avtal-pris dt { font-size:.98rem; }
.avtal-pris dd {
  font:500 1.05rem/1.3 var(--mono); color:var(--acc); white-space:nowrap;
}
.ap-not { margin-top:1rem; font-size:.88rem; color:var(--dim); }
@media (min-width:880px){
  .avtal { grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); }
}

/* ---------------------------------------------------------- priser */

.jobb {
  display:grid; gap:1.6rem 3.5rem;
  padding:clamp(2rem,4vw,3rem) 0;
  border-top:1px solid var(--linje-stark);
}
.jobb:first-of-type { margin-top:clamp(2.5rem,5vw,4rem); }
.jobb:last-of-type { border-bottom:1px solid var(--linje-stark); }
.jkod {
  font:500 .72rem/1 var(--mono); letter-spacing:.28em;
  color:var(--acc); margin-bottom:.7rem;
}
.jbes { margin-top:.8rem; font-size:.96rem; line-height:1.65; color:var(--dim); max-width:44ch; }
.poster > div {
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  padding:.6rem 0; border-bottom:1px solid var(--linje);
}
.poster dt { font-size:.94rem; line-height:1.5; }
.poster dd { font:400 .9rem/1.4 var(--mono); white-space:nowrap; font-variant-numeric:tabular-nums; }
.poster .summa {
  border-bottom:none; border-top:2px solid var(--acc);
  margin-top:.5rem; padding-top:.9rem;
}
.poster .summa dt { font-weight:600; }
.poster .summa dd { font-size:1.15rem; font-weight:500; color:var(--acc); }
@media (min-width:860px){
  .jobb { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* ---------------------------------------------------------- omdömen */

.omd { display:grid; gap:clamp(2.2rem,4vw,3.5rem); margin-top:clamp(2.5rem,5vw,4rem); }
.omd blockquote p {
  font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.62;
}
.omd blockquote p::before { content:"\201D"; margin-right:.15em; color:var(--acc); }
.omd figcaption {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem 1.1rem;
  align-items:center; margin-top:1.7rem; padding-top:1.4rem;
  border-top:1px solid var(--linje-stark);
}
.omd figcaption img {
  grid-row:1 / 3; width:58px; height:58px; object-fit:cover;
  border:1px solid var(--linje-stark);
}
.onamn { font:600 1.05rem/1.3 var(--txt); align-self:end; }
.oroll {
  font:400 .74rem/1.4 var(--mono); letter-spacing:.06em;
  color:var(--dim); align-self:start;
}
@media (min-width:840px){
  .omd { grid-template-columns:1fr 1fr; }
  .omd figure:first-child {
    padding-right:clamp(2rem,4vw,3.5rem); border-right:1px solid var(--linje-stark);
  }
}

/* ---------------------------------------------------------- hembesök */

.hb { display:grid; gap:clamp(2.5rem,5vw,4.5rem); padding-top:clamp(3rem,7vw,6rem); }
.hb-txt .lead { margin-top:1.4rem; }
.hb-kontakt { margin-top:2.4rem; border-top:1px solid rgba(249,246,238,.28); }
.hb-kontakt > div {
  display:grid; grid-template-columns:130px minmax(0,1fr); gap:1rem;
  align-items:center; padding:.35rem 0;
  border-bottom:1px solid rgba(249,246,238,.16);
}
.hb-kontakt dt {
  font:400 .7rem/1.5 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ljus);
}
.hb-kontakt dd { font:500 1rem/1.4 var(--mono); color:var(--bas); }
.hb-kontakt dd a {
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--bas); text-decoration:none; border-bottom:1px solid rgba(249,246,238,.45);
}
.hb-kontakt dd a:hover { border-bottom-color:var(--bas); }
.hb-not { margin-top:2rem; font-size:.9rem; line-height:1.7; color:var(--ljus); max-width:52ch; }

.hb-form { border-top:2px solid var(--bas); padding-top:1.6rem; }
.form-et {
  font:500 .7rem/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ljus-2); margin-bottom:1.4rem;
}
.falt { display:grid; gap:.45rem; margin-bottom:1rem; }
.falt label {
  font:500 .72rem/1.4 var(--mono); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ljus);
}
.falt input, .falt select, .falt textarea {
  width:100%; min-height:48px; padding:.7rem .9rem;
  font:400 1rem/1.4 var(--txt); color:var(--ink);
  background:var(--bas); border:1px solid var(--bas); border-radius:0;
}
.falt textarea { min-height:104px; resize:vertical; }
.form-svar { margin-top:1rem; font-size:.92rem; line-height:1.6; color:var(--ljus); }
.form-svar:empty { margin:0; }
@media (min-width:920px){
  .hb { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(3rem,6vw,6rem); }
}

/* ---------------------------------------------------------- footer */

.fot { background:var(--acc); color:var(--bas); padding:clamp(3.5rem,7vw,5.5rem) 0 2rem; }
.fot-in { display:grid; gap:2.4rem; }
.fot-mark {
  font:700 1.7rem/1.05 var(--disp); text-transform:uppercase; letter-spacing:.05em;
}
.fot-und { margin-top:.9rem; font-size:.92rem; line-height:1.65; color:var(--ljus); max-width:34ch; }
.fot-et {
  font:500 .68rem/1 var(--mono); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ljus-2); margin-bottom:.6rem;
}
.fot-lista li { font-size:.94rem; line-height:1.6; color:var(--ljus); }
.fot-lista a {
  display:flex; align-items:center; min-height:44px;
  color:var(--bas); text-decoration:none;
}
.fot-lista a:hover { text-decoration:underline; }
.fot-rad {
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.4rem;
  border-top:1px solid rgba(249,246,238,.24);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem;
}
.fot-rad p { font:400 .76rem/1.6 var(--mono); color:var(--ljus-2); letter-spacing:.04em; }
@media (min-width:780px){
  .fot-in { grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); }
}

/* ---------------------------------------------------------- motion */

.js-rev .rev { opacity:0; transform:translateY(20px); }
.js-rev .rev.in {
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}

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