/* ============================================================================
   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 {
  /* 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;
  background: color-mix(in srgb, var(--gips) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linje);
}
.topp__rad {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 4.5rem;
  width: 100%; max-width: 110rem; 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; } }

.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;
}
@media (max-width: 21.99rem) {
  .logo__under { display: none; }
  .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;
  min-height: 36px; 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. */
.ringrad { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); }
.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);
}
.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;
}
.jamfor__lapp--fore { left: var(--s-3); }
.jamfor__lapp--efter { right: var(--s-3); }

/* --- 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; }
}

/* --- Form ----------------------------------------------------------------- */
.formular { display: grid; gap: var(--s-4); }
.falt { display: grid; gap: var(--s-1); }
.falt > label {
  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);
}
.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; }
.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. */
.fot__lista li, .fot__lista a { display: flex; align-items: center; min-height: 2.5rem; }
.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: 30rem) { .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; }
@media (min-width: 30rem) {
  .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; min-height: 3.4rem; }
.lada__stang { background: none; border: 0; cursor: pointer; padding: var(--s-2); color: inherit; }
.lada__nav { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.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); }
.lada__fot .sprak { justify-self: start; }

/* --- 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; }
.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 ------------------------------ */
[id] { scroll-margin-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) 94%, 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: color-mix(in srgb, var(--text-svag) 80%, transparent);
  margin-left: 0.5em;
}
.falt__hjalp {
  font-size: var(--steg--2); line-height: 1.5;
  color: var(--text-svag); max-width: 52ch;
}

/* The native control is styled through its button so the field still behaves
   like a real file input — no hidden input and a fake button on top of it. */
.falt input[type="file"] {
  padding: 0.55rem; cursor: pointer;
  font-size: var(--steg--1);
}
.falt input[type="file"]::file-selector-button {
  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(--tjara); color: var(--gips);
  border: 0; border-radius: 2px; cursor: pointer;
  padding: 0.7em 1.1em; margin-right: 0.9rem;
  transition: background var(--snabb);
}
.falt input[type="file"]::file-selector-button:hover { background: var(--koppar); }

.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); }