/* ============================================================================
   Vlade & Co — Bygg och Renovering AB
   Design system. See docs/DESIGN.md for the reasoning behind these choices.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/plexsans-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* A small picture-frame glyph, used as a mask so it takes the button's colour. */
  --ikon-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");

  /* Colour: every value is a material from the work itself. */
  --tjara:  #14171A;   /* tarred timber facade */
  --zink:   #2D3438;   /* zinc sheet */
  --gips:   #EBE9E4;   /* plaster — the light ground */
  --kalk:   #F8F7F5;   /* chalk — elevated surfaces */
  --koppar: #9E4C25;   /* new copper */
  --patina: #2F6459;   /* aged copper */
  --koppar-ljus: #D9843F;  /* copper legible on dark ground */
  --patina-ljus: #6FA396;

  --linje:        color-mix(in srgb, var(--tjara) 14%, transparent);
  --linje-stark:  color-mix(in srgb, var(--tjara) 28%, transparent);
  --linje-mork:   color-mix(in srgb, var(--gips) 16%, transparent);

  --text:      var(--tjara);
  --text-svag: color-mix(in srgb, var(--tjara) 66%, var(--gips));

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --brod:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  --steg--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --steg--1: clamp(0.92rem, 0.86rem + 0.24vw, 0.94rem);
  --steg-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.19rem);
  --steg-1:  clamp(1.20rem, 1.12rem + 0.42vw, 1.58rem);
  --steg-2:  clamp(1.44rem, 1.31rem + 0.67vw, 2.11rem);
  --steg-3:  clamp(1.73rem, 1.51rem + 1.10vw, 2.81rem);
  --steg-4:  clamp(1.78rem, 1.42rem + 1.80vw, 3.75rem);
  --steg-5:  clamp(2.49rem, 1.93rem + 2.80vw, 4.05rem);  /* largest that keeps the hero headline on two lines in both languages */

  /* Space */
  --s-1: 0.5rem;  --s-2: 0.75rem; --s-3: 1rem;    --s-4: 1.5rem;
  --s-5: 2rem;    --s-6: 3rem;    --s-7: 4rem;    --s-8: 6rem;
  --s-9: clamp(4rem, 9vw, 9rem);

  --matt: 76rem;              /* content measure */
  --kant: clamp(1.5rem, 5vw, 4rem);   /* page gutter */
  /* Where .wrap's text actually begins. Full-bleed blocks use this so their
     content lines up with the sections above and below them. */
  --insats: max(var(--kant), calc((100vw - var(--matt)) / 2 + var(--kant)));

  --snabb: 180ms cubic-bezier(.2,.7,.3,1);
  --lugn:  420ms cubic-bezier(.2,.7,.3,1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--gips);
  color: var(--text);
  font-family: var(--brod);
  font-size: var(--steg-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-variation-settings: 'wdth' 115;
  overflow-wrap: break-word;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--steg-5); }
h2 { font-size: var(--steg-4); }
h3 { font-size: var(--steg-2); letter-spacing: -0.01em; }
h4 { font-size: var(--steg-1); font-weight: 700; letter-spacing: 0; }

/* Small caps utility label — the second voice of Archivo. */
@media (max-width: 34rem) {
  /* Narrowing the width axis narrows the space glyph too, so words start to
     run together. Give the tracking back what the axis took. */
  h1, h2 {
    font-variation-settings: 'wdth' 96;
    letter-spacing: -0.005em;
    word-spacing: 0.1em;
  }
  h3 { font-variation-settings: 'wdth' 104; letter-spacing: 0; word-spacing: 0.05em; }
}

.etikett {
  font-family: var(--display);
  font-variation-settings: 'wdth' 105;
  font-weight: 600;
  font-size: var(--steg--2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--koppar);
  display: block;
}
.etikett--tyst { color: var(--text-svag); }
.etikett--ljus { color: var(--koppar-ljus); }

.ingress { font-size: var(--steg-1); line-height: 1.5; text-wrap: pretty; }
.tyst { color: var(--text-svag); }
p { text-wrap: pretty; max-width: 62ch; }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--matt); margin-inline: auto; padding-inline: var(--kant); }
.sektion { padding-block: var(--s-9); }
.sektion.sektion--tat,
.sektion--tat { padding-block: var(--s-7); }

.split > * { min-width: 0; }

.split {
  display: grid;
  gap: var(--s-6) var(--s-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 5fr 7fr; gap: var(--s-8); }
  .split--vand { grid-template-columns: 7fr 5fr; }
  .split--mitt { align-items: center; }
}

/* Stacked into one column, the alternating layout would put the photo above one
   service and below the next. Every service reads photo → name → detail. */
@media (max-width: 61.99rem) {
  .split .tjanst__bild { order: -1; }
}

.rutnat > * { min-width: 0; }
.rutnat { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .rutnat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .rutnat--3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Dark ground ---------------------------------------------------------- */
.morkt,
.fot {
  background: var(--tjara);
  color: var(--gips);
  --text: var(--gips);
  --text-svag: color-mix(in srgb, var(--gips) 68%, var(--tjara));
  --linje: var(--linje-mork);
  --linje-stark: color-mix(in srgb, var(--gips) 32%, transparent);
  --koppar: var(--koppar-ljus);
  --patina: var(--patina-ljus);
}

/* --- Herringbone rule (the signature) ------------------------------------- */
/* A band of individual planks laid in a chevron. Drawn as an SVG pattern so it
   tiles at any width, then wiped in left-to-right on scroll — a floor going
   down plank by plank. */
.fiskben {
  --plank: color-mix(in srgb, var(--tjara) 15%, transparent);
  /* Both layers shift by the same amount, so the accent can sit anywhere along
     the band without the courses falling out of phase. The offset follows the
     viewport rather than a fixed tile count, which would run off a phone. */
  --vpos: 2;
  --skift: calc(var(--vpos) * 8vw);
  position: relative;
  height: 72px;
  width: 100%;
  border: 0;
  overflow: hidden;
}
@media (min-width: 40rem) { .fiskben { --skift: calc(var(--vpos) * 12vw); } }
@media (min-width: 62rem) { .fiskben { --skift: calc(var(--vpos) * 16vw); } }

.fiskben::before,
.fiskben::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-size: auto 72px;
          mask-size: auto 72px;
  -webkit-mask-position: var(--skift) 0;
          mask-position: var(--skift) 0;
}

/* The floor itself. */
.fiskben::before {
  background-color: var(--plank);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2296%22%20height=%2272%22%20viewBox=%220%200%2096%2072%22%3E%3Cg%20fill=%22black%22%3E%3Cpath%20d=%22M-47.01%20-48.00%20L-36.00%20-59.01%20L11.01%20-12.00%20L-0.00%20-0.99Z%22/%3E%3Cpath%20d=%22M-47.01%20-24.00%20L-36.00%20-35.01%20L11.01%2012.00%20L-0.00%2023.01Z%22/%3E%3Cpath%20d=%22M-47.01%20-0.00%20L-36.00%20-11.01%20L11.01%2036.00%20L0.00%2047.01Z%22/%3E%3Cpath%20d=%22M-47.01%2024.00%20L-36.00%2012.99%20L11.01%2060.00%20L-0.00%2071.01Z%22/%3E%3Cpath%20d=%22M-47.01%2048.00%20L-36.00%2036.99%20L11.01%2084.00%20L0.00%2095.01Z%22/%3E%3Cpath%20d=%22M-47.01%2072.00%20L-36.00%2060.99%20L11.01%20108.00%20L0.00%20119.01Z%22/%3E%3Cpath%20d=%22M0.99%200.00%20L48.00%20-47.01%20L59.01%20-36.00%20L12.00%2011.01Z%22/%3E%3Cpath%20d=%22M48.99%20-48.00%20L60.00%20-59.01%20L107.01%20-12.00%20L96.00%20-0.99Z%22/%3E%3Cpath%20d=%22M0.99%2024.00%20L48.00%20-23.01%20L59.01%20-12.00%20L12.00%2035.01Z%22/%3E%3Cpath%20d=%22M48.99%20-24.00%20L60.00%20-35.01%20L107.01%2012.00%20L96.00%2023.01Z%22/%3E%3Cpath%20d=%22M0.99%2048.00%20L48.00%200.99%20L59.01%2012.00%20L12.00%2059.01Z%22/%3E%3Cpath%20d=%22M48.99%200.00%20L60.00%20-11.01%20L107.01%2036.00%20L96.00%2047.01Z%22/%3E%3Cpath%20d=%22M0.99%2072.00%20L48.00%2024.99%20L59.01%2036.00%20L12.00%2083.01Z%22/%3E%3Cpath%20d=%22M48.99%2024.00%20L60.00%2012.99%20L107.01%2060.00%20L96.00%2071.01Z%22/%3E%3Cpath%20d=%22M0.99%2096.00%20L48.00%2048.99%20L59.01%2060.00%20L12.00%20107.01Z%22/%3E%3Cpath%20d=%22M48.99%2048.00%20L60.00%2036.99%20L107.01%2084.00%20L96.00%2095.01Z%22/%3E%3Cpath%20d=%22M0.99%20120.00%20L48.00%2072.99%20L59.01%2084.00%20L12.00%20131.01Z%22/%3E%3Cpath%20d=%22M48.99%2072.00%20L60.00%2060.99%20L107.01%20108.00%20L96.00%20119.01Z%22/%3E%3Cpath%20d=%22M96.99%200.00%20L144.00%20-47.01%20L155.01%20-36.00%20L108.00%2011.01Z%22/%3E%3Cpath%20d=%22M96.99%2024.00%20L144.00%20-23.01%20L155.01%20-12.00%20L108.00%2035.01Z%22/%3E%3Cpath%20d=%22M96.99%2048.00%20L144.00%200.99%20L155.01%2012.00%20L108.00%2059.01Z%22/%3E%3Cpath%20d=%22M96.99%2072.00%20L144.00%2024.99%20L155.01%2036.00%20L108.00%2083.01Z%22/%3E%3Cpath%20d=%22M96.99%2096.00%20L144.00%2048.99%20L155.01%2060.00%20L108.00%20107.01Z%22/%3E%3Cpath%20d=%22M96.99%20120.00%20L144.00%2072.99%20L155.01%2084.00%20L108.00%20131.01Z%22/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2296%22%20height=%2272%22%20viewBox=%220%200%2096%2072%22%3E%3Cg%20fill=%22black%22%3E%3Cpath%20d=%22M-47.01%20-48.00%20L-36.00%20-59.01%20L11.01%20-12.00%20L-0.00%20-0.99Z%22/%3E%3Cpath%20d=%22M-47.01%20-24.00%20L-36.00%20-35.01%20L11.01%2012.00%20L-0.00%2023.01Z%22/%3E%3Cpath%20d=%22M-47.01%20-0.00%20L-36.00%20-11.01%20L11.01%2036.00%20L0.00%2047.01Z%22/%3E%3Cpath%20d=%22M-47.01%2024.00%20L-36.00%2012.99%20L11.01%2060.00%20L-0.00%2071.01Z%22/%3E%3Cpath%20d=%22M-47.01%2048.00%20L-36.00%2036.99%20L11.01%2084.00%20L0.00%2095.01Z%22/%3E%3Cpath%20d=%22M-47.01%2072.00%20L-36.00%2060.99%20L11.01%20108.00%20L0.00%20119.01Z%22/%3E%3Cpath%20d=%22M0.99%200.00%20L48.00%20-47.01%20L59.01%20-36.00%20L12.00%2011.01Z%22/%3E%3Cpath%20d=%22M48.99%20-48.00%20L60.00%20-59.01%20L107.01%20-12.00%20L96.00%20-0.99Z%22/%3E%3Cpath%20d=%22M0.99%2024.00%20L48.00%20-23.01%20L59.01%20-12.00%20L12.00%2035.01Z%22/%3E%3Cpath%20d=%22M48.99%20-24.00%20L60.00%20-35.01%20L107.01%2012.00%20L96.00%2023.01Z%22/%3E%3Cpath%20d=%22M0.99%2048.00%20L48.00%200.99%20L59.01%2012.00%20L12.00%2059.01Z%22/%3E%3Cpath%20d=%22M48.99%200.00%20L60.00%20-11.01%20L107.01%2036.00%20L96.00%2047.01Z%22/%3E%3Cpath%20d=%22M0.99%2072.00%20L48.00%2024.99%20L59.01%2036.00%20L12.00%2083.01Z%22/%3E%3Cpath%20d=%22M48.99%2024.00%20L60.00%2012.99%20L107.01%2060.00%20L96.00%2071.01Z%22/%3E%3Cpath%20d=%22M0.99%2096.00%20L48.00%2048.99%20L59.01%2060.00%20L12.00%20107.01Z%22/%3E%3Cpath%20d=%22M48.99%2048.00%20L60.00%2036.99%20L107.01%2084.00%20L96.00%2095.01Z%22/%3E%3Cpath%20d=%22M0.99%20120.00%20L48.00%2072.99%20L59.01%2084.00%20L12.00%20131.01Z%22/%3E%3Cpath%20d=%22M48.99%2072.00%20L60.00%2060.99%20L107.01%20108.00%20L96.00%20119.01Z%22/%3E%3Cpath%20d=%22M96.99%200.00%20L144.00%20-47.01%20L155.01%20-36.00%20L108.00%2011.01Z%22/%3E%3Cpath%20d=%22M96.99%2024.00%20L144.00%20-23.01%20L155.01%20-12.00%20L108.00%2035.01Z%22/%3E%3Cpath%20d=%22M96.99%2048.00%20L144.00%200.99%20L155.01%2012.00%20L108.00%2059.01Z%22/%3E%3Cpath%20d=%22M96.99%2072.00%20L144.00%2024.99%20L155.01%2036.00%20L108.00%2083.01Z%22/%3E%3Cpath%20d=%22M96.99%2096.00%20L144.00%2048.99%20L155.01%2060.00%20L108.00%20107.01Z%22/%3E%3Cpath%20d=%22M96.99%20120.00%20L144.00%2072.99%20L155.01%2084.00%20L108.00%20131.01Z%22/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}

/* Boards laid in copper: one chevron — the same two, at the same angle, as the
   mark in the logotype — and a single board further along. Muted enough to read
   as something you notice rather than something announced. */
.fiskben::after {
  background-color: color-mix(in srgb, var(--koppar) 52%, transparent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22288%22%20height=%2272%22%20viewBox=%220%200%20288%2072%22%3E%3Cg%20fill=%22black%22%3E%3Cpath%20d=%22M48.99%2024.00%20L60.00%2012.99%20L107.01%2060.00%20L96.00%2071.01Z%22/%3E%3Cpath%20d=%22M96.99%2048.00%20L144.00%200.99%20L155.01%2012.00%20L108.00%2059.01Z%22/%3E%3Cpath%20d=%22M192.99%2048.00%20L240.00%200.99%20L251.01%2012.00%20L204.00%2059.01Z%22/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22288%22%20height=%2272%22%20viewBox=%220%200%20288%2072%22%3E%3Cg%20fill=%22black%22%3E%3Cpath%20d=%22M48.99%2024.00%20L60.00%2012.99%20L107.01%2060.00%20L96.00%2071.01Z%22/%3E%3Cpath%20d=%22M96.99%2048.00%20L144.00%200.99%20L155.01%2012.00%20L108.00%2059.01Z%22/%3E%3Cpath%20d=%22M192.99%2048.00%20L240.00%200.99%20L251.01%2012.00%20L204.00%2059.01Z%22/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.morkt .fiskben { --plank: color-mix(in srgb, var(--gips) 22%, transparent); }
.morkt .fiskben::after { background-color: color-mix(in srgb, var(--koppar) 46%, transparent); }

@media (max-width: 40rem) {
  .fiskben, .fiskben::before, .fiskben::after { height: 54px; }
  .fiskben::before, .fiskben::after { -webkit-mask-size: auto 54px; mask-size: auto 54px; }
  .fiskben::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2272%22%20height=%2254%22%20viewBox=%220%200%2072%2054%22%3E%3Cg%20fill=%22black%22%3E%3Cpath%20d=%22M-35.01%20-36.00%20L-27.00%20-44.01%20L8.01%20-9.00%20L0.00%20-0.99Z%22/%3E%3Cpath%20d=%22M-35.01%20-18.00%20L-27.00%20-26.01%20L8.01%209.00%20L0.00%2017.01Z%22/%3E%3Cpath%20d=%22M-35.01%200.00%20L-27.00%20-8.01%20L8.01%2027.00%20L-0.00%2035.01Z%22/%3E%3Cpath%20d=%22M-35.01%2018.00%20L-27.00%209.99%20L8.01%2045.00%20L0.00%2053.01Z%22/%3E%3Cpath%20d=%22M-35.01%2036.00%20L-27.00%2027.99%20L8.01%2063.00%20L0.00%2071.01Z%22/%3E%3Cpath%20d=%22M-35.01%2054.00%20L-27.00%2045.99%20L8.01%2081.00%20L0.00%2089.01Z%22/%3E%3Cpath%20d=%22M0.99%200.00%20L36.00%20-35.01%20L44.01%20-27.00%20L9.00%208.01Z%22/%3E%3Cpath%20d=%22M36.99%20-36.00%20L45.00%20-44.01%20L80.01%20-9.00%20L72.00%20-0.99Z%22/%3E%3Cpath%20d=%22M0.99%2018.00%20L36.00%20-17.01%20L44.01%20-9.00%20L9.00%2026.01Z%22/%3E%3Cpath%20d=%22M36.99%20-18.00%20L45.00%20-26.01%20L80.01%209.00%20L72.00%2017.01Z%22/%3E%3Cpath%20d=%22M0.99%2036.00%20L36.00%200.99%20L44.01%209.00%20L9.00%2044.01Z%22/%3E%3Cpath%20d=%22M36.99%200.00%20L45.00%20-8.01%20L80.01%2027.00%20L72.00%2035.01Z%22/%3E%3Cpath%20d=%22M0.99%2054.00%20L36.00%2018.99%20L44.01%2027.00%20L9.00%2062.01Z%22/%3E%3Cpath%20d=%22M36.99%2018.00%20L45.00%209.99%20L80.01%2045.00%20L72.00%2053.01Z%22/%3E%3Cpath%20d=%22M0.99%2072.00%20L36.00%2036.99%20L44.01%2045.00%20L9.00%2080.01Z%22/%3E%3Cpath%20d=%22M36.99%2036.00%20L45.00%2027.99%20L80.01%2063.00%20L72.00%2071.01Z%22/%3E%3Cpath%20d=%22M0.99%2090.00%20L36.00%2054.99%20L44.01%2063.00%20L9.00%2098.01Z%22/%3E%3Cpath%20d=%22M36.99%2054.00%20L45.00%2045.99%20L80.01%2081.00%20L72.00%2089.01Z%22/%3E%3Cpath%20d=%22M72.99%200.00%20L108.00%20-35.01%20L116.01%20-27.00%20L81.00%208.01Z%22/%3E%3Cpath%20d=%22M72.99%2018.00%20L108.00%20-17.01%20L116.01%20-9.00%20L81.00%2026.01Z%22/%3E%3Cpath%20d=%22M72.99%2036.00%20L108.00%200.99%20L116.01%209.00%20L81.00%2044.01Z%22/%3E%3Cpath%20d=%22M72.99%2054.00%20L108.00%2018.99%20L116.01%2027.00%20L81.00%2062.01Z%22/%3E%3Cpath%20d=%22M72.99%2072.00%20L108.00%2036.99%20L116.01%2045.00%20L81.00%2080.01Z%22/%3E%3Cpath%20d=%22M72.99%2090.00%20L108.00%2054.99%20L116.01%2063.00%20L81.00%2098.01Z%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2272%22%20height=%2254%22%20viewBox=%220%200%2072%2054%22%3E%3Cg%20fill=%22black%22%3E%3Cpath%20d=%22M-35.01%20-36.00%20L-27.00%20-44.01%20L8.01%20-9.00%20L0.00%20-0.99Z%22/%3E%3Cpath%20d=%22M-35.01%20-18.00%20L-27.00%20-26.01%20L8.01%209.00%20L0.00%2017.01Z%22/%3E%3Cpath%20d=%22M-35.01%200.00%20L-27.00%20-8.01%20L8.01%2027.00%20L-0.00%2035.01Z%22/%3E%3Cpath%20d=%22M-35.01%2018.00%20L-27.00%209.99%20L8.01%2045.00%20L0.00%2053.01Z%22/%3E%3Cpath%20d=%22M-35.01%2036.00%20L-27.00%2027.99%20L8.01%2063.00%20L0.00%2071.01Z%22/%3E%3Cpath%20d=%22M-35.01%2054.00%20L-27.00%2045.99%20L8.01%2081.00%20L0.00%2089.01Z%22/%3E%3Cpath%20d=%22M0.99%200.00%20L36.00%20-35.01%20L44.01%20-27.00%20L9.00%208.01Z%22/%3E%3Cpath%20d=%22M36.99%20-36.00%20L45.00%20-44.01%20L80.01%20-9.00%20L72.00%20-0.99Z%22/%3E%3Cpath%20d=%22M0.99%2018.00%20L36.00%20-17.01%20L44.01%20-9.00%20L9.00%2026.01Z%22/%3E%3Cpath%20d=%22M36.99%20-18.00%20L45.00%20-26.01%20L80.01%209.00%20L72.00%2017.01Z%22/%3E%3Cpath%20d=%22M0.99%2036.00%20L36.00%200.99%20L44.01%209.00%20L9.00%2044.01Z%22/%3E%3Cpath%20d=%22M36.99%200.00%20L45.00%20-8.01%20L80.01%2027.00%20L72.00%2035.01Z%22/%3E%3Cpath%20d=%22M0.99%2054.00%20L36.00%2018.99%20L44.01%2027.00%20L9.00%2062.01Z%22/%3E%3Cpath%20d=%22M36.99%2018.00%20L45.00%209.99%20L80.01%2045.00%20L72.00%2053.01Z%22/%3E%3Cpath%20d=%22M0.99%2072.00%20L36.00%2036.99%20L44.01%2045.00%20L9.00%2080.01Z%22/%3E%3Cpath%20d=%22M36.99%2036.00%20L45.00%2027.99%20L80.01%2063.00%20L72.00%2071.01Z%22/%3E%3Cpath%20d=%22M0.99%2090.00%20L36.00%2054.99%20L44.01%2063.00%20L9.00%2098.01Z%22/%3E%3Cpath%20d=%22M36.99%2054.00%20L45.00%2045.99%20L80.01%2081.00%20L72.00%2089.01Z%22/%3E%3Cpath%20d=%22M72.99%200.00%20L108.00%20-35.01%20L116.01%20-27.00%20L81.00%208.01Z%22/%3E%3Cpath%20d=%22M72.99%2018.00%20L108.00%20-17.01%20L116.01%20-9.00%20L81.00%2026.01Z%22/%3E%3Cpath%20d=%22M72.99%2036.00%20L108.00%200.99%20L116.01%209.00%20L81.00%2044.01Z%22/%3E%3Cpath%20d=%22M72.99%2054.00%20L108.00%2018.99%20L116.01%2027.00%20L81.00%2062.01Z%22/%3E%3Cpath%20d=%22M72.99%2072.00%20L108.00%2036.99%20L116.01%2045.00%20L81.00%2080.01Z%22/%3E%3Cpath%20d=%22M72.99%2090.00%20L108.00%2054.99%20L116.01%2063.00%20L81.00%2098.01Z%22/%3E%3C/g%3E%3C/svg%3E"); }
  .fiskben::after  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22216%22%20height=%2254%22%20viewBox=%220%200%20216%2054%22%3E%3Cg%20fill=%22black%22%3E%3Cpath%20d=%22M36.99%2018.00%20L45.00%209.99%20L80.01%2045.00%20L72.00%2053.01Z%22/%3E%3Cpath%20d=%22M72.99%2036.00%20L108.00%200.99%20L116.01%209.00%20L81.00%2044.01Z%22/%3E%3Cpath%20d=%22M144.99%2036.00%20L180.00%200.99%20L188.01%209.00%20L153.00%2044.01Z%22/%3E%3C/g%3E%3C/svg%3E");  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22216%22%20height=%2254%22%20viewBox=%220%200%20216%2054%22%3E%3Cg%20fill=%22black%22%3E%3Cpath%20d=%22M36.99%2018.00%20L45.00%209.99%20L80.01%2045.00%20L72.00%2053.01Z%22/%3E%3Cpath%20d=%22M72.99%2036.00%20L108.00%200.99%20L116.01%209.00%20L81.00%2044.01Z%22/%3E%3Cpath%20d=%22M144.99%2036.00%20L180.00%200.99%20L188.01%209.00%20L153.00%2044.01Z%22/%3E%3C/g%3E%3C/svg%3E"); }
}

.js .fiskben--laggs::before,
.js .fiskben--laggs::after { clip-path: inset(0 100% 0 0); transition: clip-path 900ms cubic-bezier(.3,.8,.3,1); }
.js .fiskben--laggs.syns::before,
.js .fiskben--laggs.syns::after { clip-path: inset(0 0 0 0); }

/* --- Header --------------------------------------------------------------- */
.topp {
  position: sticky; top: 0; z-index: 60;
  /* Deliberately see-through. Half-transparent reads as a mistake; this is
     committed enough to be glass, and the line and shadow below do the work of
     separating it from the page. */
  background: color-mix(in srgb, var(--gips) 88%, transparent);
  backdrop-filter: blur(12px);
  /* Contrast before thickness: a crisp 1px line reads as a decision, a pale
     2px one reads as a mistake. */
  border-bottom: 1px solid var(--linje-stark);
  transition: box-shadow .18s ease;
}
/* At the very top there is nothing above the header, so nothing needs
   separating. The shadow arrives only once content has passed underneath —
   which is the moment the header stops being a band and starts being a plane.
   The attribute is set by main.js. */
.topp[data-rullad] {
  box-shadow: 0 2px 14px color-mix(in srgb, var(--tjara) 11%, transparent);
}
@media (prefers-reduced-motion: reduce) { .topp { transition: none; } }
.topp__rad {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 4.5rem;
  /* 110rem let the logotype drift 272px to the left of the page's own edge on
     a wide monitor. The row needs 1292px to hold the menu without crowding;
     capping it just above that keeps the drift under 64px at any width, and
     the logotype lines up exactly with the content below it up to 1216px. */
  width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: var(--kant);
}
.topp__nav { display: none; margin-left: auto; align-items: center; gap: var(--s-4); }
.topp__nav .knapp { white-space: nowrap; padding-inline: 1.15em; }
@media (min-width: 34rem) { .topp__rad { gap: var(--s-4); } }
@media (min-width: 78rem) { .topp__nav { gap: var(--s-5); } }
@media (min-width: 70rem) { .topp__nav { display: flex; } }

/* Between the width where the horizontal menu appears (70rem) and the width
   where the row stops growing (84rem) there is not room for it at full size:
   at 1120px the language switch was pushed out of the row entirely and English
   became unreachable. The band below tightens the letter-spacing, the gaps and
   the phone button just enough to keep every item on the row. Above 78rem the
   rule above restores the wider gap. */
@media (min-width: 70rem) and (max-width: 81.24rem) {
  .topp__rad { gap: var(--s-3); }
  .topp__nav { gap: var(--s-2); }
  .navlank { letter-spacing: 0.06em; font-variation-settings: 'wdth' 98; }
  .topp__nav .knapp { padding-inline: 0.7em; }
}

.navlank {
  white-space: nowrap;
  font-family: var(--display);
  font-variation-settings: 'wdth' 104;
  font-weight: 600; font-size: var(--steg--1);
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
  transition: border-color var(--snabb), color var(--snabb);
}
.navlank:hover { color: var(--koppar); }
.navlank[aria-current="page"] { border-bottom-color: var(--koppar); }

/* --- Logo ----------------------------------------------------------------- */
.logo {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; flex-shrink: 0;
  min-height: 44px; padding-block: 0.35rem;
}
.logo__marke { width: 2.5rem; height: 1.4rem; flex-shrink: 0; color: var(--koppar); }
.logo__text { display: grid; gap: 0.14em; line-height: 1; }
.logo__namn {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118;
  font-weight: 800; font-size: 1.06rem;
  text-transform: uppercase; letter-spacing: 0.01em;
}
/* Below this the row has to give something up, and the sub-line is the least
   load-bearing part of it. The cut-off is set by the English sub-line, which is
   the wider of the two — one breakpoint for both languages beats two. */
@media (max-width: 25.99rem) {
  .logo__under { display: none; }
}

/* Narrower still: the last few pixels come out of the spacing. The gutter is
   only tightened here, so the logotype stays on the content line above it. */
@media (max-width: 21.99rem) {
  .topp__rad { gap: var(--s-2); padding-inline: var(--s-3); }
  .topp__ring { padding-inline: 0.7em; }
  .topp__meny { padding-inline: 0.7rem; margin-left: var(--s-1); }
  .logo__namn { font-size: 0.98rem; }
}

.logo__under {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100;
  font-weight: 500; font-size: 0.5rem;
  text-transform: uppercase; letter-spacing: 0.235em;
  color: var(--text-svag);
}

/* --- Language switch ------------------------------------------------------ */
.sprak { display: flex; flex-shrink: 0; align-items: center; border: 1px solid var(--linje-stark); border-radius: 2px; overflow: hidden; }
.morkt .sprak, .topp .sprak { border-color: var(--linje-stark); }
.sprak__val {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: var(--steg--2);
  text-transform: uppercase; letter-spacing: 0.09em;
  background: none; border: 0; cursor: pointer;
  /* 44px tall everywhere. Width stays at 40 in the header: the row has only a
     few pixels of slack at the narrowest width the horizontal menu appears at,
     and height is the axis a thumb actually misses on. Below 70rem, where the
     switch sits in the full-screen menu and there is room, it gets 48 wide. */
  min-height: 44px; min-width: 40px; padding: 0.42rem 0.6rem; line-height: 1;
  color: var(--text-svag);
  transition: background var(--snabb), color var(--snabb);
}
.sprak__val:hover { color: var(--koppar); }
@media (max-width: 69.99rem) {
  .sprak__val { min-height: 44px; min-width: 48px; }
}
.sprak__val[aria-current="true"] { background: var(--tjara); color: var(--gips); }
.morkt .sprak__val[aria-current="true"] { background: var(--gips); color: var(--tjara); }

/* --- Buttons -------------------------------------------------------------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--display); font-variation-settings: 'wdth' 106;
  font-weight: 700; font-size: var(--steg--1);
  text-transform: uppercase; letter-spacing: 0.09em;
  text-decoration: none; cursor: pointer;
  padding: 1.05em 1.7em; border: 1px solid transparent; border-radius: 2px;
  transition: background var(--snabb), color var(--snabb), border-color var(--snabb), transform var(--snabb);
}
.knapp:active { transform: translateY(1px); }
.knapp--primar { background: var(--koppar); color: #fff; }
.knapp--primar:hover { background: color-mix(in srgb, var(--koppar) 84%, #000); }
.morkt .knapp--primar { color: var(--tjara); }
.knapp--kant { border-color: var(--linje-stark); color: var(--text); }
.knapp--kant:hover { border-color: var(--koppar); color: var(--koppar); }
.knapp__ikon { width: 1.05em; height: 1.05em; flex-shrink: 0; }

.knappar { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; border-bottom: 1px solid var(--linje); }
.hero__rutnat {
  display: grid; grid-template-columns: 1fr; align-items: stretch;
  width: 100%;
}
.hero__innehall {
  padding: var(--s-7) var(--s-5) var(--s-8) var(--insats);
  display: flex; flex-direction: column; justify-content: center;
}
/* On a phone the hero is an environment shot, so the composition is kept rather
   than centre-cropped to a letterbox. The top 30% is sky and treetops, which the
   photograph can spare — trimming it keeps the block from running too tall while
   the lake, the house and the site all stay in frame.
   The ratio below is the source's own 1200x1934 with 30% taken off the top. */
.hero__bild {
  position: relative;
  overflow: hidden;
  background: var(--zink);
  /* Height comes from padding, not aspect-ratio. The only child is absolutely
     positioned, so a browser without aspect-ratio support (Safari before 15)
     would give this box zero height and the photograph would simply vanish.
     112.83% is the source's 1200x1934 with the top 30% trimmed. */
  height: 0;
  padding-bottom: 112.83%;
}
.hero__bild img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@media (min-width: 34rem) {
  .hero__bild { padding-bottom: 62.5%; }   /* 16:10 */
  .hero__bild img { object-position: center; }
}
/* Two columns only once the text column is wide enough to be one. Below this the
   hero stacks — the same width at which the navigation becomes a menu button. */
@media (min-width: 70rem) {
  .hero__rutnat { grid-template-columns: 1fr 1fr; min-height: min(84vh, 52rem); }
  .hero__innehall > * { max-width: 34rem; }
  .hero__innehall { padding-block: var(--s-8); }
  /* Two columns: the grid row sets the height, so the ratio box steps aside. */
  .hero__bild { height: auto; padding-bottom: 0; }
}
.hero + .fiskben { margin-top: var(--s-8); }

.hero h1 { margin-bottom: var(--s-4); }

.hero .ingress { margin-bottom: var(--s-6); }

/* The phone number is set as display type: it is what the page is for. */
/* Label above, number below. Side by side the label read as part of the number
   and the number lost the weight it is there to have. */
.ringrad {
  display: grid; justify-items: start; gap: var(--s-2);
  margin: var(--s-5) 0;
}
.ringrad:first-child { margin-top: 0; }
.ringnummer {
  font-family: var(--display); font-variation-settings: 'wdth' 112;
  font-weight: 800; font-size: var(--steg-3);
  letter-spacing: -0.015em; text-decoration: none; white-space: nowrap;
  color: var(--koppar);
  border-bottom: 3px solid transparent;
  transition: border-color var(--snabb);
}
.ringnummer:hover { border-bottom-color: var(--koppar); }

/* --- Cards ---------------------------------------------------------------- */
.kort {
  background: var(--kalk); border: 1px solid var(--linje);
  display: flex; flex-direction: column; height: 100%;
  border-radius: 2px; overflow: hidden;
  transition: border-color var(--snabb), transform var(--snabb);
}
.morkt .kort { background: color-mix(in srgb, var(--gips) 6%, var(--tjara)); }
a.kort { text-decoration: none; }
a.kort:hover { border-color: var(--koppar); transform: translateY(-3px); }
.kort__bild { aspect-ratio: 4 / 3; background: var(--zink); overflow: hidden; }
.kort__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.7,.3,1); }
a.kort:hover .kort__bild img { transform: scale(1.04); }
.kort__kropp { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.kort__kropp h3 { font-size: var(--steg-1); }
.kort__kropp p { font-size: var(--steg--1); }

/* --- Numbered process ----------------------------------------------------- */
/* Numbers earn their place here: these steps happen in this order. */
.steg { display: grid; gap: var(--s-5); grid-template-columns: 1fr; counter-reset: steg; }
@media (min-width: 48rem) { .steg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .steg { grid-template-columns: repeat(4, 1fr); } }
.steg__post { counter-increment: steg; border-top: 2px solid var(--linje-stark); padding-top: var(--s-3); }
.steg__post::before {
  content: counter(steg, decimal-leading-zero);
  font-family: var(--display); font-variation-settings: 'wdth' 110;
  font-weight: 800; font-size: var(--steg-2);
  color: var(--koppar); display: block; line-height: 1; margin-bottom: var(--s-2);
}
/* The four steps are a sequence: you call, then we come out, then we build.
   The numerals carry information a reader needs. The reasons under "Varför
   Vlade & Co" are four independent claims — numbering them asserts an order
   that is not there, and spends the numerals that make the process legible two
   screens further up. Same grid, same rule, no counter. */
.steg--punkter .steg__post { counter-increment: none; }
.steg--punkter .steg__post::before { content: none; }

.steg__post h3 { font-size: var(--steg-1); margin-bottom: var(--s-2); }
.steg__post p { font-size: var(--steg--1); }

/* --- Fact list ------------------------------------------------------------ */
.fakta { display: grid; gap: 0; border-top: 1px solid var(--linje); }
.fakta__rad {
  display: grid; gap: var(--s-1) var(--s-4); grid-template-columns: 1fr;
  padding-block: var(--s-3); border-bottom: 1px solid var(--linje);
}
@media (min-width: 34rem) { .fakta__rad { grid-template-columns: 12.5rem 1fr; align-items: baseline; } }
.fakta__namn {
  font-family: var(--display); font-variation-settings: 'wdth' 102;
  font-weight: 600; font-size: var(--steg--2);
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-svag);
}
.fakta__varde { font-size: var(--steg--1); }
.fakta__varde a { display: inline-flex; align-items: center; min-height: 2.5rem; }

/* --- Before / after ------------------------------------------------------- */
.jamfor { position: relative; overflow: hidden; border-radius: 2px; background: var(--zink); touch-action: pan-y; }
.jamfor img { width: 100%; display: block; }
.jamfor__overlager { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.jamfor__overlager img { position: absolute; inset: 0; height: 100%; width: auto; max-width: none; object-fit: cover; }
.jamfor__handtag {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--kalk); transform: translateX(-1px); pointer-events: none;
}
.jamfor__handtag::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%);
  border: 2px solid var(--kalk); border-radius: 50%;
  background: color-mix(in srgb, var(--tjara) 55%, transparent);
  backdrop-filter: blur(3px);
}
.jamfor__reglage {
  position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}
.jamfor__reglage:focus-visible ~ .jamfor__handtag { background: var(--koppar-ljus); }
.jamfor__lapp {
  position: absolute; bottom: var(--s-3); z-index: 2;
  font-family: var(--display); font-variation-settings: 'wdth' 102;
  font-weight: 700; font-size: var(--steg--2);
  text-transform: uppercase; letter-spacing: 0.13em;
  background: color-mix(in srgb, var(--tjara) 72%, transparent);
  color: var(--gips); padding: 0.4rem 0.7rem; border-radius: 2px; pointer-events: none;
}
/* The palette says copper and patina are the same metal at two ages. This is
   the one component on the site where that is literally true: the photograph
   behind "efter" is the new copper roof the accent was taken from, and "före"
   is the same sheet weathered. The labels carry the ages rather than repeating
   the same neutral chip twice. */
.jamfor__lapp--fore {
  left: var(--s-3);
  background: color-mix(in srgb, var(--patina) 88%, var(--tjara));
}
.jamfor__lapp--efter {
  right: var(--s-3);
  background: color-mix(in srgb, var(--koppar) 88%, var(--tjara));
}

/* --- Gallery -------------------------------------------------------------- */
.galleri { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense; }
@media (min-width: 62rem) { .galleri { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.galleri__post { position: relative; overflow: hidden; border-radius: 2px; background: var(--zink); }
.galleri__post img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 600ms cubic-bezier(.2,.7,.3,1); }
/* Two of the photographs are portrait; steer the crop so the subject survives it. */
.galleri__post--klinker img { object-position: center 32%; }
.galleri__post--bastu img { object-position: center 45%; }
@media (min-width: 62rem) { .galleri__post--bred { grid-column: span 2; } }
.galleri__post:hover img { transform: scale(1.03); }
.galleri__text {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-5) var(--s-3) var(--s-2);
  background: linear-gradient(to top, color-mix(in srgb, var(--tjara) 82%, transparent), transparent);
  color: var(--gips); font-size: var(--steg--2);
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  line-height: 1.35; text-wrap: balance;
}
@media (max-width: 40rem) {
  .galleri__text { font-size: 0.66rem; letter-spacing: 0.06em; padding: var(--s-5) 0.65rem 0.55rem; }
}

/* --- Area pages ------------------------------------------------------------ */
/* Three photographs, one column on a phone and three on a desktop. Never two:
   three items in a two-column grid leaves a hole, and this row is the first
   proof a visitor from a search sees. */
.omr-bilder { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .omr-bilder { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
}
.omr-bild { margin: 0; overflow: hidden; border-radius: 2px; background: var(--zink); }
.omr-bild img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; aspect-ratio: 4 / 3;
}

/* The rate is the one number a visitor comparing builders is looking for. It
   used to sit in the smallest, palest text on the page. */
.omr-pris {
  font-family: var(--display); font-variation-settings: 'wdth' 110;
  font-weight: 800; font-size: var(--steg-3); line-height: 1;
  color: var(--koppar);
}
.omr-pris__enhet {
  display: block; margin-top: var(--s-2);
  font-family: var(--brod); font-variation-settings: normal;
  font-weight: 400; font-size: var(--steg--1); letter-spacing: 0;
  color: var(--text-svag);
}

/* --- Form ----------------------------------------------------------------- */
.formular { display: grid; gap: var(--s-4); }
.falt { display: grid; gap: var(--s-1); }
.falt > label,
.falt__namn {
  font-family: var(--display); font-variation-settings: 'wdth' 102;
  font-weight: 600; font-size: var(--steg--2);
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-svag);
}
.falt input, .falt textarea, .falt select {
  background: var(--kalk); border: 1px solid var(--linje-stark); border-radius: 2px;
  padding: 0.85rem 0.9rem; font-family: var(--brod); font-size: var(--steg-0); width: 100%;
  transition: border-color var(--snabb), box-shadow var(--snabb);
}
.falt input:focus, .falt textarea:focus, .falt select:focus {
  outline: none; border-color: var(--koppar);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--koppar) 22%, transparent);
}
/* Den mjuka ringen ovan räcker som återkoppling för en muspekare, men inte som
   fokusmarkering för den som tabbar — 22 % opacitet klarar inte kontrastkravet.
   Efter regeln ovan, så att dess `outline: none` skrivs över. */
.falt input:focus-visible, .falt textarea:focus-visible, .falt select:focus-visible {
  outline: 3px solid var(--koppar); outline-offset: 2px;
}
.falt textarea { min-height: 9rem; resize: vertical; }
.falt--par { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .falt--par { grid-template-columns: 1fr 1fr; } }
.honung { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.honung label, .honung input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.svar { padding: var(--s-3) var(--s-4); border-radius: 2px; font-size: var(--steg--1); border: 1px solid; }
/* Rutan står kvar i sidan i stället för att döljas med `hidden`. Ett dolt
   element finns inte i tillgänglighetsträdet, och en live-region som föds i
   samma ögonblick som sin text hinner inte annonseras. Tom ruta, ingen låda. */
.svar:empty { display: none; }
.svar--ok { border-color: var(--patina); background: color-mix(in srgb, var(--patina) 12%, transparent); }
.svar--fel { border-color: var(--koppar); background: color-mix(in srgb, var(--koppar) 12%, transparent); }
[hidden] { display: none !important; }

/* --- Footer --------------------------------------------------------------- */
.fot { padding-block: var(--s-7) var(--s-5); }
.fot__rutnat { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .fot__rutnat { grid-template-columns: 1.4fr 1fr 1fr; } }
.fot a { text-decoration: none; }
.fot a:hover { color: var(--koppar-ljus); }
.fot__lista { list-style: none; padding: 0; display: grid; gap: var(--s-1); font-size: var(--steg--1); }
/* Footer links are the smallest thing on the page and the most likely to be
   tapped with a thumb. Give them a real target without changing how they look:
   44px is the figure Apple and WCAG both land on, and 2.5rem was four short. */
.fot__lista li, .fot__lista a { display: flex; align-items: center; min-height: 2.75rem; }
.fot__botten > * { min-width: 0; }
.fot__botten {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--linje-mork);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between;
  font-size: var(--steg--2); color: color-mix(in srgb, var(--gips) 62%, var(--tjara));
}


/* --- Mobile menu ---------------------------------------------------------- */
/* When the button is the icon alone, the icon has to carry the whole meaning —
   it cannot be sized off the label that is not there. */
.topp__ring .knapp__ikon { width: 1.4rem; height: 1.4rem; }
@media (min-width: 34rem) { .topp__ring .knapp__ikon { width: 1.15rem; height: 1.15rem; } }

.topp__ring {
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0.7em 0.9em;
  font-size: var(--steg--2);
  white-space: nowrap;
}
.topp__ring__nr { display: none; }
/* The number appears once the row can hold it in either language — the English
   sub-line under the logotype is the wider of the two. */
@media (min-width: 34rem) {
  .topp__ring { padding-inline: 1.05em; }
  .topp__ring__nr { display: inline; }
}
@media (min-width: 70rem) { .topp__ring { display: none; } }

.topp__meny__ikon { width: 18px; height: 14px; flex-shrink: 0; }
.topp__meny__ord { display: none; }
@media (min-width: 26rem) {
  .topp__meny__ord { display: inline; }
  .topp__meny__ikon { display: none; }
}

.topp__meny {
  margin-left: var(--s-2); display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: 1px solid var(--linje-stark); border-radius: 2px;
  min-height: 44px; padding: 0.55rem 0.9rem; cursor: pointer;
  font-family: var(--display); font-variation-settings: 'wdth' 102;
  font-weight: 700; font-size: var(--steg--2);
  text-transform: uppercase; letter-spacing: 0.11em;
}
@media (min-width: 70rem) {
  .topp__meny { display: none; }
}

.lada {
  position: fixed; inset: 0; z-index: 80; background: var(--tjara); color: var(--gips);
  display: flex; flex-direction: column; padding: var(--s-4) var(--kant) var(--s-6);
  transform: translateY(-100%); visibility: hidden;
  transition: transform var(--lugn), visibility var(--lugn);
}
.lada[data-oppen="true"] { transform: translateY(0); visibility: visible; }
.lada__topp { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 3.4rem; }
/* The switch sits where it does in the header on a wide screen: top right,
   next to the control that closes the panel. Below six menu items it was a
   scroll away. */
.lada__verktyg { display: flex; align-items: center; gap: var(--s-3); }
.lada__stang {
  background: none; border: 0; cursor: pointer; color: inherit;
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
}
/* Explicit size: the global svg rule lets an icon collapse inside a flex row. */
.lada__stang svg { width: 24px; height: 24px; flex-shrink: 0; }
.lada__nav { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.lada__nav a[aria-current="page"] { color: var(--koppar); border-bottom-color: var(--koppar); }
.lada__nav a {
  font-family: var(--display); font-variation-settings: 'wdth' 114;
  font-weight: 800; font-size: var(--steg-3);
  text-transform: uppercase; letter-spacing: -0.01em;
  text-decoration: none; padding-block: 0.2em;
  border-bottom: 1px solid var(--linje-mork);
}
.lada__fot { margin-top: auto; display: grid; gap: var(--s-3); padding-top: var(--s-6); }


/* --- Missing-content markers ---------------------------------------------- */
/* Deliberately loud: these must be impossible to ship by accident.
   Every one of them is listed in docs/ATT-FYLLA-I.md. */
.saknas {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  font-family: var(--display); font-variation-settings: 'wdth' 100;
  font-weight: 700; font-size: 0.85em;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--koppar);
  border: 1px dashed var(--koppar); border-radius: 2px;
  padding: 0.1em 0.45em;
}

/* --- Scroll reveal -------------------------------------------------------- */
/* Hidden only when JavaScript is there to bring it back. */
.js .avslojas { opacity: 0; transform: translateY(18px); transition: opacity var(--lugn), transform var(--lugn); }
.js .avslojas.syns { opacity: 1; transform: none; }

/* --- Focus and motion ----------------------------------------------------- */
:focus-visible { outline: 3px solid var(--koppar); outline-offset: 3px; border-radius: 2px; }
.hoppa {
  position: absolute; left: var(--s-3); top: -4rem; z-index: 100;
  background: var(--tjara); color: var(--gips); padding: 0.75rem 1rem;
  text-decoration: none; border-radius: 2px; transition: top var(--snabb);
}
.hoppa:focus { top: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .avslojas { opacity: 1; transform: none; }
  .js .fiskben--laggs::before,
  .js .fiskben--laggs::after { clip-path: inset(0 0 0 0); }
}

/* --- Bulleted specifics --------------------------------------------------- */
/* The marker is one board end, cut at the same angle as the boards in the
   mark — the same motif, at the smallest size it can still be read. */
.lista { list-style: none; padding: 0; margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.lista li { position: relative; padding-left: 1.7rem; font-size: var(--steg--1); max-width: 52ch; }
/* Where a list item is a link — the service list on an area page — it should
   look like the rest of the site's links, not like a default browser one. */
.lista a {
  text-decoration: none;
  border-bottom: 1px solid var(--linje-stark);
  transition: color var(--snabb), border-color var(--snabb);
}
.lista a:hover { color: var(--koppar); border-bottom-color: var(--koppar); }

/* A list of links needs rows big enough to hit with a thumb; a list of plain
   statements does not, and would only get taller for nothing. */
.lista--lankar li { min-height: 2.5rem; display: flex; align-items: center; }
.lista--lankar a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.lista--lankar li::before { top: calc(50% - 0.16rem); }

.lista li::before {
  content: ''; position: absolute; left: 0; top: 0.66em;
  width: 0.68rem; height: 0.32rem;
  background: var(--koppar);
  transform: skewX(-38deg);
}

/* --- Inner page header ---------------------------------------------------- */
.sidhuvud { padding-top: var(--s-7); }
.sidhuvud h1,
.txt-h2 { font-size: var(--steg-4); }
.sidhuvud .ingress { max-width: 46ch; }

/* --- Section id offset for the sticky header ------------------------------ */
/* scroll-padding på rullytan i stället för scroll-margin på målet: det gäller
   varje rullning dit, alltså även när tangentbordsfokus flyttas till något som
   saknar id — annars hamnar det under den fastnitade headern. */
html { scroll-padding-top: 6rem; }

/* The sixth service card carries no photograph — it carries the phone number.
   Its dark ground is stated outright rather than borrowed from .morkt, whose
   background would lose to .kort on source order and leave light text on light. */
.kort--sista {
  background: var(--tjara);
  border-color: var(--tjara);
  color: var(--gips);
}
.kort--sista .kort__kropp { justify-content: center; padding: var(--s-5) var(--s-4); }
.kort--sista .etikett { color: var(--koppar-ljus); }
.kort--sista .tyst { color: color-mix(in srgb, var(--gips) 70%, var(--tjara)); }
.kort--sista .ringnummer { color: var(--koppar-ljus); border-bottom: 0; font-size: var(--steg-0); }
a.kort--sista:hover { border-color: var(--koppar-ljus); }

/* --- Common questions ----------------------------------------------------- */
/* Native <details>: no script, keyboard-operable, and the answers stay in the
   markup where crawlers and assistants can read them whether open or closed. */
.faq { display: grid; border-top: 1px solid var(--linje); }
.fraga { border-bottom: 1px solid var(--linje); }
.fraga summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s-4);
  padding-block: var(--s-4);
}
/* Three resets, because each engine hides the native triangle differently.
   Without the ::marker rule Safari and Firefox keep drawing it on its own line. */
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::marker { content: ''; }
/* Questions are sentences, not signage — the display face without the caps. */
.fraga summary h3 {
  font-size: var(--steg-1); flex: 1;
  text-transform: none; letter-spacing: -0.005em; font-weight: 700;
  font-variation-settings: 'wdth' 106;
}
.fraga summary::after {
  content: ''; width: 1.1rem; height: 1.1rem; flex-shrink: 0;
  background:
    linear-gradient(var(--koppar), var(--koppar)) center / 100% 2px no-repeat,
    linear-gradient(var(--koppar), var(--koppar)) center / 2px 100% no-repeat;
  transition: transform var(--snabb);
}
.fraga[open] summary::after { transform: rotate(45deg); }
.fraga summary:hover h3 { color: var(--koppar); }
.fraga > p { padding-bottom: var(--s-4); max-width: 60ch; }

/* --- Image viewer --------------------------------------------------------- */
.galleri__oppna { display: block; height: 100%; }
.galleri__oppna:focus-visible { outline-offset: -4px; }

.visare {
  border: 0; padding: 0; max-width: 100vw; max-height: 100dvh;
  width: 100%; height: 100%;
  background: color-mix(in srgb, var(--tjara) 97%, transparent);
  color: var(--gips);
  display: grid; place-items: center;
}
.visare::backdrop { background: color-mix(in srgb, var(--tjara) 82%, transparent); }
.visare:not([open]) { display: none; }

.visare__ram {
  display: grid; gap: var(--s-3);
  max-width: min(94vw, 68rem); max-height: 88dvh;
  padding: var(--s-4);
}
.visare__bild {
  max-width: 100%; max-height: 74dvh; width: auto; height: auto;
  object-fit: contain; border-radius: 2px; margin-inline: auto;
}
.visare__text {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: baseline; justify-content: space-between;
  font-family: var(--display); font-variation-settings: 'wdth' 102;
  font-weight: 600; font-size: var(--steg--2);
  text-transform: uppercase; letter-spacing: 0.11em;
}
.visare__raknare { color: var(--koppar-ljus); }

.visare__stang, .visare__nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: color-mix(in srgb, var(--gips) 12%, transparent);
  border: 1px solid var(--linje-mork); border-radius: 50%;
  color: var(--gips); cursor: pointer;
  transition: background var(--snabb), border-color var(--snabb);
}
.visare__stang:hover, .visare__nav:hover {
  background: var(--koppar); border-color: var(--koppar); color: #fff;
}
.visare__stang { top: var(--s-3); right: var(--s-3); }
.visare__nav--bak { left: var(--s-2); top: 50%; transform: translateY(-50%); }
.visare__nav--fram { right: var(--s-2); top: 50%; transform: translateY(-50%); }
@media (min-width: 48rem) {
  .visare__nav--bak { left: var(--s-4); }
  .visare__nav--fram { right: var(--s-4); }
  .visare__stang { top: var(--s-4); right: var(--s-4); }
}
/* On a phone the arrows would sit on top of the picture, so they move below it. */
@media (max-width: 34rem) {
  .visare__nav { top: auto; bottom: var(--s-4); transform: none; }
  .visare__nav--bak { left: calc(50% - 4rem); }
  .visare__nav--fram { right: calc(50% - 4rem); }
  .visare__ram { padding-bottom: var(--s-8); }
}

/* --- Utilities ------------------------------------------------------------ */
/* Small and deliberately few. They exist because a strict Content-Security-
   Policy drops inline style attributes, so every one of them had to become a
   class — see docs/DESIGN.md. */
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }

.txt-xs { font-size: var(--steg--2); }
.txt-s  { font-size: var(--steg--1); }
.txt-l  { font-size: var(--steg-2); }
.txt-xl { font-size: var(--steg-3); }

/* A framed photograph inside a text column. */
.bildruta { aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; }
.bildruta--hog { aspect-ratio: 3 / 4; }

.knappar--rad { align-items: center; gap: var(--s-4); }

/* Where each rule lays its copper boards along the course. */
.fiskben--v1 { --vpos: 1; }
.fiskben--v2 { --vpos: 2; }
.fiskben--v3 { --vpos: 3; }
.fiskben--v4 { --vpos: 4; }

/* --- Reading size on small screens ---------------------------------------- */
/* The lists of what a service includes, and the footer, are content rather than
   captions — on a phone they get the body size instead of the caption size. */
@media (max-width: 40rem) {
  .lista li { font-size: var(--steg-0); }
  .fot__lista { font-size: var(--steg-0); }
  .fot .txt-s { font-size: var(--steg-0); }
  .fot__botten { font-size: var(--steg--1); }
}

/* --- Photo attachments ---------------------------------------------------- */
.falt__frivillig {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--text-svag);
  margin-left: 0.5em;
}
.falt__hjalp {
  font-size: var(--steg--2); line-height: 1.5;
  color: var(--text-svag); max-width: 52ch;
}

/* The browser's own file button says "Choose files / No file chosen" in English
   and its text cannot be changed from CSS. The input is therefore taken out of
   view — still focusable, still keyboard-operable — and a label styled as a
   button stands in for it. A label needs no script to open the picker, so this
   works with JavaScript switched off too. */
.falt input.filfalt {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Outlined, like the site's secondary buttons. Attaching a photo is a step on
   the way to sending, not the send itself — it should not compete with the one
   copper button on the page. */
.filknapp {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 44px; padding: 0.75em 1.2em;
  font-family: var(--display); font-variation-settings: 'wdth' 104;
  font-weight: 700; font-size: var(--steg--2);
  text-transform: uppercase; letter-spacing: 0.09em;
  background: var(--kalk); color: var(--text);
  border: 1px solid var(--linje-stark); border-radius: 2px; cursor: pointer;
  transition: border-color var(--snabb), color var(--snabb);
}
.filknapp::before {
  content: ''; width: 1.05em; height: 1.05em; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--ikon-bild) center / contain no-repeat;
          mask: var(--ikon-bild) center / contain no-repeat;
}
.filknapp:hover { border-color: var(--koppar); color: var(--koppar); }
.falt input.filfalt:focus-visible + .filknapp {
  outline: 3px solid var(--koppar); outline-offset: 3px;
}

.bildval { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.bildval__post {
  position: relative; margin: 0;
  width: 7.5rem;
  border: 1px solid var(--linje-stark); border-radius: 2px; overflow: hidden;
  background: var(--kalk);
}
.bildval__post img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.bildval__post figcaption {
  font-size: var(--steg--2); color: var(--text-svag);
  padding: 0.35rem 0.5rem;
}
.bildval__bort {
  position: absolute; top: 0.35rem; right: 0.35rem;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  background: color-mix(in srgb, var(--tjara) 78%, transparent);
  color: var(--gips); border: 0; border-radius: 50%; cursor: pointer;
  transition: background var(--snabb);
}
.bildval__bort:hover { background: var(--koppar); }

/* --- Areas ---------------------------------------------------------------- */
.omradeslista {
  list-style: none; padding: 0;
  display: grid; gap: var(--s-3);
  /* Two across even on a narrow phone — fourteen municipalities in one column
     is a scroll, not a list. */
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.omradeslista a {
  display: flex; align-items: center; min-height: 3.25rem;
  padding: var(--s-3);
}
@media (min-width: 40rem) {
  .omradeslista { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
  .omradeslista a { min-height: 3.5rem; padding: var(--s-3) var(--s-4); }
}
.omradeslista a {
  background: var(--kalk); border: 1px solid var(--linje);
  border-radius: 2px; text-decoration: none;
  font-family: var(--display); font-variation-settings: 'wdth' 108;
  font-weight: 700; font-size: var(--steg-0);
  transition: border-color var(--snabb), color var(--snabb), transform var(--snabb);
}
.omradeslista a:hover {
  border-color: var(--koppar); color: var(--koppar); transform: translateY(-2px);
}


/* --- The rate, as a card -------------------------------------------------- */
/* Dark on the light ground, beside the heading rather than under it. The number
   needs somewhere to sit — left on its own in a short section it made the page
   look as though it had already ended. */
.priskort {
  background: var(--tjara);
  color: var(--gips);
  border-radius: 2px;
  padding: var(--s-6) var(--s-5);
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.priskort__tal {
  display: flex; align-items: baseline; gap: 0.1em;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 800;
  font-size: clamp(3.6rem, 2.1rem + 5.4vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--koppar-ljus);
  max-width: none;
}
.priskort__valuta { font-size: 0.36em; letter-spacing: 0.01em; }
.priskort__enhet {
  font-size: var(--steg--1);
  color: color-mix(in srgb, var(--gips) 74%, var(--tjara));
  max-width: 26ch;
}
.priskort__rader {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--linje-mork);
  display: grid; gap: var(--s-3);
}
.priskort__rader > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
}
.priskort__rader dt {
  font-family: var(--display); font-variation-settings: 'wdth' 102;
  font-weight: 600; font-size: var(--steg--2);
  text-transform: uppercase; letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--gips) 66%, var(--tjara));
}
.priskort__rader dd { margin: 0; font-size: var(--steg--1); text-align: right; }