/* ==========================================================================
   Altumera — design tokens
   Source: Claude Assets/Altumera Style Guide.md
   ========================================================================== */

:root {
  --grund: #EDEBE5;
  --papper: #F7F6F2;
  --black: #1A1A18;
  --damped: #6E6C66;
  --linje: #DEDCD5;
  --signal: #E25303;
  --signal-hover: #C24503;
  --signal-large: #E15501;
  --signal-tone: #F4D8C6;
  --green: #2F4538;

  /* Stocked powders, for gallery cells standing in for a photograph. Screen
     approximations only — replace with measured values when available. */
  --ral-9005: #0A0A0A;
  --ral-6005: #114232;
  --ral-3001: #A72920;

  --font-body: 'Jost', sans-serif;

  --placeholder-stripe: repeating-linear-gradient(
    135deg,
    var(--linje) 0px, var(--linje) 6px,
    #F1EFE9 6px, #F1EFE9 14px
  );

  --side-pad: 28px;
  --header-height: 60px;
}

@media (min-width: 1024px) {
  :root {
    --side-pad: 80px;
    --header-height: 70px;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

/* Any `display` declaration outbids the [hidden] attribute's default, so
   toggling .hidden on a flex/grid container silently does nothing without
   this. Needed by the contact form's success state. */
[hidden] {
  display: none !important;
}

html, body, h1, h2, h3, p, figure, figcaption {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Chromium Edge */
}

body {
  background: var(--papper);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-block;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms;
}

.btn--primary {
  background: var(--signal);
  color: var(--papper);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 15px 22px;
}

.btn--primary:hover {
  background: var(--signal-hover);
}

@media (min-width: 1024px) {
  .btn--primary {
    font-size: 14px;
    padding: 17px 26px;
  }
}

/* ==========================================================================
   Logo
   ========================================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.logo-icon,
.logo-wordmark {
  display: block;
  height: 20px;
  width: auto;
}

@media (min-width: 1024px) {
  .logo {
    gap: 11px;
  }

  .logo-icon,
  .logo-wordmark {
    height: 25px;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--papper);
  border-bottom: 1px solid var(--linje);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--side-pad);
}

.site-nav {
  display: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin: -12px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.hamburger span {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 1px;
  background: var(--black);
  transition:
    transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
    width 260ms cubic-bezier(0.4, 0, 0.2, 1),
    height 260ms cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 260ms ease,
    background-color 200ms ease,
    opacity 200ms ease;
}

/* Open state: the three bars form an orange X. */
.hamburger[aria-expanded="true"] span:nth-child(1) {
  background: var(--signal);
  transform: translateY(9px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
  background: var(--signal);
  transform: translateY(-9px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .site-header {
    padding: 22px var(--side-pad);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 44px;
  }

  .site-nav a {
    font-size: 15px;
    font-weight: 400;
    color: var(--black);
  }

  .site-nav .btn--nav {
    padding: 13px 20px;
    font-size: 13px;
  }

  .hamburger {
    display: none;
  }
}

/* ==========================================================================
   Mobile nav overlay
   ========================================================================== */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--papper);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-16px);
  transition:
    opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 240ms;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

.mobile-nav nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mobile-nav nav > a {
  font-size: 22px;
  font-weight: 400;
  color: var(--black);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.mobile-nav.is-open nav > a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav.is-open nav > a:nth-child(1) { transition-delay: 80ms; }
.mobile-nav.is-open nav > a:nth-child(2) { transition-delay: 120ms; }
.mobile-nav.is-open nav > a:nth-child(3) { transition-delay: 160ms; }
.mobile-nav.is-open nav > a:nth-child(4) { transition-delay: 200ms; }

.mobile-nav .btn {
  margin-top: 16px;
}

html.nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav nav > a,
  .hamburger span {
    transition: none !important;
    transform: none !important;
  }

  .hero__calc-cursor {
    animation: none !important;
  }

  .hero__price-value--flash {
    animation: none !important;
  }
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  min-height: 100vh;
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px var(--side-pad);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__headline {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 48px;
}

.hero__calc {
  width: 100%;
  max-width: 300px;
  border-bottom: 1px solid var(--linje);
  padding-bottom: 10px;
}

.hero__calc-input {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  overflow: hidden;
}

.hero__calc-text {
  font-size: 26px;
  line-height: 1.3;
  color: var(--black);
  white-space: nowrap;
}

.hero__calc-cursor {
  display: inline-block;
  width: 2px;
  height: 30px;
  margin-left: 2px;
  background: var(--black);
  animation: caretBlink 1s steps(1) infinite;
  flex-shrink: 0;
}

@keyframes caretBlink {
  50% { opacity: 0; }
}

.hero__price {
  margin-top: 28px;
  font-size: 44px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hero__price-value--flash {
  display: inline-block;
  animation: priceFlash 220ms ease;
}

@keyframes priceFlash {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__desc {
  margin-top: 16px;
  max-width: 280px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--damped);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero__cta {
  margin-top: 48px;
  padding: 18px 30px;
  font-size: 14px;
}

.hero__image {
  display: none;
}

@media (min-width: 1024px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    align-content: center;
    gap: 80px;
    padding: 100px var(--side-pad);
  }

  .hero__copy {
    display: block;
    text-align: left;
  }

  .hero__headline {
    font-size: 46px;
    line-height: 1.25;
    max-width: 480px;
    margin-bottom: 32px;
  }

  .hero__calc {
    max-width: none;
  }

  .hero__calc-input {
    justify-content: flex-start;
    height: 46px;
  }

  .hero__calc-text {
    font-size: 34px;
  }

  .hero__calc-cursor {
    height: 38px;
  }

  .hero__price {
    font-size: 64px;
    margin-top: 32px;
  }

  .hero__desc {
    font-size: 17px;
    line-height: 1.55;
    max-width: 380px;
    margin-top: 18px;
  }

  .hero__cta {
    margin-top: 56px;
    padding: 22px 38px;
    font-size: 16px;
  }

  .hero__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-image: repeating-linear-gradient(
      135deg,
      #E8E5DD 0px, #E8E5DD 6px,
      #F1EFE9 6px, #F1EFE9 14px
    );
  }
}

/* ==========================================================================
   Location
   ========================================================================== */

.location {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px var(--side-pad) 88px;
  border-top: 1px solid var(--linje);
}

.location__intro {
  margin-bottom: 40px;
  text-align: center;
}

.location__title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--black);
}

.location__row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.location__map {
  width: 100%;
  max-width: 240px;
  margin-bottom: 32px;
}

.location__map-svg {
  display: block;
  width: 100%;
  height: auto;
}

.location__map-shape {
  fill: var(--signal);
}

.location__map-dot {
  fill: var(--black);
}

.location__map-dot-ring {
  fill: none;
  stroke: var(--black);
  stroke-width: 4;
  opacity: 0.35;
}

.location__map-label {
  font-family: var(--font-body);
  font-size: 46px;
  font-weight: 500;
  fill: var(--black);
}

.location__content {
  max-width: 340px;
  text-align: center;
}

.location__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--damped);
}

@media (min-width: 1024px) {
  .location {
    padding: 130px var(--side-pad);
  }

  .location__intro {
    text-align: left;
    margin-bottom: 56px;
    width: 100%;
    max-width: 850px;
  }

  .location__title {
    font-size: 40px;
  }

  .location__row {
    flex-direction: row;
    justify-content: center;
    gap: 110px;
  }

  .location__map {
    max-width: 320px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .location__content {
    max-width: 420px;
    text-align: left;
  }

  .location__body {
    font-size: 17px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   Accent band
   ========================================================================== */

.accent-band {
  background: var(--signal-large);
  padding: 88px var(--side-pad);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.accent-band__headline {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--papper);
  max-width: 260px;
  text-align: center;
}

.accent-band__support {
  display: none;
}

/* Shorter band for sub-pages, where it closes the page rather than
   punctuating the middle of it. */
.accent-band--compact {
  padding: 72px var(--side-pad);
  min-height: 180px;
}

@media (min-width: 1024px) {
  .accent-band {
    padding: 110px var(--side-pad);
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
  }

  .accent-band__headline {
    font-size: 40px;
    max-width: 420px;
    text-align: left;
  }

  .accent-band__support {
    display: block;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(247, 246, 242, 0.85);
    max-width: 420px;
  }

  .accent-band--compact {
    padding: 88px var(--side-pad);
  }
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery__intro {
  padding: 96px var(--side-pad) 0;
  margin-bottom: 48px;
}

.gallery__intro h2 {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--black);
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
}

.gallery__grid {
  padding: 0 var(--side-pad) 40px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 120px;
  gap: 2px;
}

.gallery__item {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.gallery__item-media {
  flex: 1;
  min-height: 0;
}

.gallery__item-media--photo {
  background-image: var(--placeholder-stripe);
}

.gallery__item-media--green {
  background: var(--green);
}

.gallery__item-media--black {
  background: var(--black);
}

.gallery__item figcaption {
  padding-top: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--damped);
}

/* Same underlined-text treatment as .summary__edit — the site's one non-button
   link style. */
.gallery__more {
  display: block;
  width: fit-content;
  margin: 0 auto 96px;
  padding-bottom: 2px;
  font-size: 15px;
  color: var(--black);
  border-bottom: 1px solid var(--linje);
  transition: color 150ms, border-color 150ms;
}

.gallery__more:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

@media (min-width: 1024px) {
  .gallery__intro {
    padding: 110px var(--side-pad) 0;
    margin-bottom: 56px;
  }

  .gallery__intro h2 {
    font-size: 28px;
    margin: 0;
    text-align: left;
  }

  .gallery__grid {
    padding: 0 var(--side-pad) 48px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 3px;
  }

  .gallery__more {
    margin: 0 var(--side-pad) 120px;
  }

  .gallery__item {
    grid-row: auto;
  }
}

/* ==========================================================================
   Page intro — headline + lead paragraph at the top of a sub-page.
   Generic on purpose: kontakt.html and om-oss.html take the same block.
   ========================================================================== */

.page-intro {
  padding: 56px var(--side-pad) 64px;
  text-align: center;
}

.page-intro__title {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--black);
  max-width: 300px;
  margin: 0 auto;
}

.page-intro__body {
  margin: 16px auto 0;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--damped);
}

@media (min-width: 1024px) {
  .page-intro {
    padding: 100px var(--side-pad) 80px;
    text-align: left;
  }

  .page-intro__title {
    font-size: 46px;
    line-height: 1.25;
    max-width: 560px;
    margin: 0;
  }

  .page-intro__body {
    margin: 18px 0 0;
    max-width: 420px;
    font-size: 17px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   Form fields — no boxed inputs anywhere. A micro-label sits above a plain
   baseline; the Linje underline turns Signal on focus. Choice sets extend
   the same idea into square tiles (see .choice below).
   ========================================================================== */

.field {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0; /* fieldset defaults to min-content, which breaks the grid */
}

.field__label {
  display: block;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--damped);
  margin-bottom: 14px;
}

.field__input {
  width: 100%;
  display: block;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--linje);
  border-radius: 0;
  padding: 0 0 12px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.4;
  color: var(--black);
  appearance: none;
  transition: border-color 150ms;
}

.field__input::placeholder {
  color: var(--damped);
  opacity: 1;
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--signal);
}

.field__input--multiline {
  /* Stays a baseline rather than becoming a boxed textarea — the extra bottom
     padding is what gives it room to be multi-line. */
  padding-bottom: 40px;
  resize: none;
}

/* Signal already means "attention here" on focus; an invalid field borrows it
   rather than introducing a red the palette doesn't have. */
.field__input--error {
  border-bottom-color: var(--signal);
}

.field__hint {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--damped);
}

/* Choice tiles ------------------------------------------------------------ */

.choices {
  display: grid;
  gap: 2px;
}

.choices--2 { grid-template-columns: repeat(2, 1fr); }
.choices--4 { grid-template-columns: repeat(2, 1fr); }

/* The real radio stays in the DOM for keyboard and screen-reader behaviour;
   the label is the visible tile. Taken out of flow so it never occupies a
   grid cell of its own. */
.choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid var(--linje);
  background: transparent;
  font-size: 15px;
  line-height: 1.3;
  color: var(--black);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}

.choice:hover {
  border-color: var(--black);
}

.choice__input:checked + .choice {
  background: var(--black);
  border-color: var(--black);
  color: var(--papper);
}

.choice__input:focus-visible + .choice {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Quantity stepper -------------------------------------------------------- */

.stepper {
  display: flex;
  align-items: center;
  gap: 2px;
}

.stepper__btn {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--linje);
  font-size: 20px;
  line-height: 1;
  color: var(--black);
  transition: border-color 150ms, background-color 150ms, color 150ms;
}

.stepper__btn:hover {
  border-color: var(--black);
}

.stepper__btn:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.stepper__value {
  min-width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}

.stepper__unit {
  margin-left: 10px;
  font-size: 15px;
  color: var(--damped);
}

/* ==========================================================================
   Calculator
   ========================================================================== */

.calc__layout {
  padding: 0 var(--side-pad);
}

.calc__form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Price panel — desktop only; .price-bar is the mobile counterpart. */
.price-panel {
  display: none;
}

.price-panel__label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--damped);
}

.price-panel__value {
  margin-top: 20px;
  font-size: 44px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--black);
  /* A price range must never break across lines — it stops reading as one
     figure. The panel column is sized to fit the longest expected range. */
  white-space: nowrap;
}

.price-panel__spec {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--damped);
}

.price-panel__cta {
  margin-top: 32px;
  align-self: flex-start;
}

.price-panel__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--damped);
}

/* Re-uses the hero's priceFlash keyframes so a changed figure reads as
   updated rather than as having always said that. */
.price-flash {
  display: inline-block;
  animation: priceFlash 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .price-flash {
    animation: none !important;
  }
}

/* Mobile price bar -------------------------------------------------------- */

.price-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--side-pad);
  background: var(--papper);
  border-top: 1px solid var(--linje);
}

.price-bar__label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--damped);
}

.price-bar__value {
  margin-top: 8px;
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--black);
}

/* Keeps the last section clear of the fixed bar. */
body.has-price-bar {
  padding-bottom: 92px;
}

@media (min-width: 1024px) {
  .calc__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    gap: 80px;
  }

  .calc__form {
    gap: 52px;
    max-width: 560px;
  }

  .choices--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .choice {
    min-height: 62px;
    font-size: 16px;
  }

  .price-panel {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--header-height) + 40px);
    background: var(--grund);
    padding: 40px;
  }

  .price-panel__value {
    font-size: 46px;
  }

  .price-bar {
    display: none;
  }

  body.has-price-bar {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Calculator visuals

   The cube, the plåt and the finish piece. Style guide §12.6 treats motion
   beyond the hover darken as a deliberate exception; this is that exception,
   and it is confined to these three objects — nothing else on the site moves.

   Everything here follows one rule: the three stages are identical except for
   what is standing on them. Same frame, same camera, same orange edge, same
   420ms. Geometry and shading live in js/calc-visuals.js and the <defs> block
   in kalkyl.html.
   ========================================================================== */

/* Paint store only. Zero-sized rather than display:none — a display:none
   subtree stops some browsers resolving filter and gradient references. */
.viz-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.viz {
  background: var(--grund);
  padding: 20px 20px 22px;
  margin-bottom: 26px;
  text-align: center;
}

.viz__svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  transition: opacity 420ms ease;
}

/* Before the question is answered the object is present but visibly not an
   answer — the choices below it are what should be pulling the eye. */
.viz--idle .viz__svg {
  opacity: 0.55;
}

.viz__face {
  stroke: var(--signal);
  stroke-width: 2;
  stroke-linejoin: miter;
  transition: stroke 420ms ease;
}

.viz__face--top { fill: url(#viz-steel-top); }
.viz__face--left { fill: url(#viz-steel-left); }
.viz__face--right { fill: url(#viz-steel-right); }

.viz--idle .viz__face {
  stroke: var(--damped);
}

/* Past the equipment limit. Orange edges would disappear into RAL 3001, so the
   outline flips to Papper — the cube reads as one solid warning object. */
.viz--limit .viz__face--top { fill: url(#viz-red-top); }
.viz--limit .viz__face--left { fill: url(#viz-red-left); }
.viz--limit .viz__face--right { fill: url(#viz-red-right); }

.viz--limit .viz__face {
  stroke: var(--papper);
}

.viz__shadow {
  fill: url(#viz-shadow);
}

.viz__overlay {
  stroke: none;
}

/* Measurements, written against the silhouette edge they measure. Tabular
   figures for the same reason the price uses them (§04): these count up while
   the cube grows, and proportional digits would jitter. */
/* Sized in viewBox units, so the rendered size is this times the stage's
   scale factor — about 0.9× on a phone, 1.2× on desktop. 14 lands it near
   13px on mobile, which is the smallest these stay comfortable at. */
.viz__dim {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  fill: var(--damped);
  /* Knocks the floor hairline and the contact shadow out from behind the text.
     The two lower measurements sit on the floor line by construction, so
     without this they are always struck through. */
  stroke: var(--grund);
  stroke-width: 4px;
  paint-order: stroke fill;
  transition: fill 420ms ease;
}

.viz--limit .viz__dim {
  fill: var(--ral-3001);
}

/* Surface variants ---------------------------------------------------------
   All four are drawn at once and cross-faded. Rebuilding them per choice would
   reseed the turbulence filters, so the rust would rearrange itself every time
   the customer looked away and back. */

.viz__layer {
  opacity: 0;
  transition: opacity 420ms ease;
}

#viz-skick[data-state="blank"] .viz__layer[data-state="blank"],
#viz-skick[data-state="lack"] .viz__layer[data-state="lack"],
#viz-skick[data-state="rost"] .viz__layer[data-state="rost"],
#viz-skick[data-state="okand"] .viz__layer[data-state="okand"],
#viz-finish[data-state="blank"] .viz__layer[data-state="blank"],
#viz-finish[data-state="halvblank"] .viz__layer[data-state="halvblank"],
#viz-finish[data-state="matt"] .viz__layer[data-state="matt"],
#viz-finish[data-state="struktur"] .viz__layer[data-state="struktur"] {
  opacity: 1;
}

/* The kulör stage has a single slab that gets repainted rather than a set of
   layers to cross-fade, so its one layer is always on. */
#viz-kulor .viz__layer {
  opacity: 1;
}

/* The coated piece is coated on every face, not only the one you can see. */
[data-viz="finish"] .viz__face--left { fill: url(#viz-coat-left); }
[data-viz="finish"] .viz__face--right { fill: url(#viz-coat-right); }

/* Readout ------------------------------------------------------------------
   Names the state in words directly under the object. The picture says roughly;
   this says exactly, which is the order §02 asks for. */

.viz__readout {
  margin-top: 14px;
}

.viz__readout-name {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--black);
}

.viz--idle .viz__readout-name {
  font-weight: 400;
  color: var(--damped);
}

.viz__readout-dims {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--damped);
}

.viz--idle .viz__readout-dims {
  visibility: hidden;
}

/* Colour swatches ----------------------------------------------------------
   The gallery's colour cell (§07) turned into a control: a square of flat
   colour with its RAL code beneath in micro-label style. Same borrowed idea as
   the choice tiles — the real radio stays in the DOM, the label is the visible
   thing.

   Selection is shown by a frame around the whole swatch rather than anything
   drawn on the chip: the set runs from RAL 9016 white to RAL 9005 black, and
   any mark placed on the colour itself disappears against one end or the
   other. */

.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.swatch {
  display: block;
  padding: 3px;
  border: 2px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 150ms;
}

.swatch:hover {
  border-color: var(--linje);
}

.choice__input:checked + .swatch {
  border-color: var(--black);
}

.choice__input:focus-visible + .swatch {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.swatch__chip {
  display: block;
  aspect-ratio: 1;
  background: var(--linje);
}

/* Anything not on the shelf. Same 45° stripe the gallery uses for a photo it
   doesn't have yet, and the skick plate for a surface it can't see. */
.swatch__chip--other {
  background-image: var(--placeholder-stripe);
}

.swatch__code {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--damped);
  font-variant-numeric: tabular-nums;
  transition: color 150ms;
}

.choice__input:checked + .swatch .swatch__code {
  color: var(--black);
}

/* Revealed only for "Annan kulör". Plain form field, same underline as every
   other input on the site. */
.kulor-other {
  margin-top: 24px;
}

/* Size slider --------------------------------------------------------------
   Five stops on a plain scale. The slider is a nicer way to move between five
   discrete answers, not a continuous measurement. */

.sizer__store {
  display: none;
}

.sizer__range {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    var(--signal) 0, var(--signal) var(--fill, 0%),
    var(--linje) var(--fill, 0%), var(--linje) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.sizer__range::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
  border: none;
}

.sizer__range::-moz-range-track {
  height: 2px;
  background: transparent;
  border: none;
}

/* Square, like everything else, and orange because it is the thing you drag.
   Same edge colour as the cube it moves, so the two read as one control. */
.sizer__range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -10px;
  box-sizing: border-box;
  border: 4px solid var(--signal);
  border-radius: 0;
  background: var(--black);
  appearance: none;
  -webkit-appearance: none;
}

.sizer__range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 4px solid var(--signal);
  border-radius: 0;
  background: var(--black);
}

.sizer__range:focus {
  outline: none;
}

.sizer__range:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Tick labels sit centred under the stop they name. The thumb travels between
   11px and (width − 11px), not 0 and 100%, so positions are written against
   that inset rather than spaced evenly across the track.

   Two-character labels are what make plain centring work: half of "XS" is less
   than the 11px inset, so even the outer two can't overhang the column. Longer
   labels here would need the outer ones pinned to the edges again. */
.sizer__ticks {
  position: relative;
  height: 30px;
  margin-top: 2px;
  list-style: none;
}

.sizer__tick {
  position: absolute;
  top: 0;
  left: calc(11px + (100% - 22px) * var(--at));
  transform: translateX(-50%);
  padding-top: 12px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--damped);
  white-space: nowrap;
  transition: color 150ms;
}

.sizer__tick:nth-child(1) { --at: 0; }
.sizer__tick:nth-child(2) { --at: 0.25; }
.sizer__tick:nth-child(3) { --at: 0.5; }
.sizer__tick:nth-child(4) { --at: 0.75; }
.sizer__tick:nth-child(5) { --at: 1; }

.sizer__tick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 6px;
  background: var(--linje);
}

.sizer__tick--on {
  color: var(--black);
}

/* Equipment limit. Sits below the slider so triggering it never moves the
   control that triggered it, and reads as a field message (§07 · Forms) rather
   than as part of the picture. */
.sizer__limit {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ral-3001);
}

.sizer__limit:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .viz__svg,
  .viz__face,
  .viz__dim,
  .viz__layer {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .viz {
    padding: 28px 28px 30px;
    margin-bottom: 30px;
  }

  .viz__svg {
    max-width: 380px;
  }

  .viz__readout-name {
    font-size: 16px;
  }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact__body {
  padding: 0 var(--side-pad) 96px;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.contact__actions-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--damped);
  text-align: center;
  min-height: 21px; /* Reserved so an error message doesn't shift the page. */
}

/* Carried-over enquiry ---------------------------------------------------- */

/* Same Grund fill as the calculator's price panel, deliberately: it reads as
   the same object having followed the customer across to this page. */
.summary {
  background: var(--grund);
  padding: 28px;
  margin-bottom: 48px;
}

.summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.summary__label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--damped);
}

.summary__edit {
  font-size: 14px;
  color: var(--black);
  border-bottom: 1px solid var(--linje);
  transition: color 150ms, border-color 150ms;
}

.summary__edit:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

.summary__spec {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--black);
}

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linje);
}

.summary__row-label {
  font-size: 15px;
  color: var(--damped);
}

.summary__row-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Image upload ------------------------------------------------------------ */

.upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 28px;
  border: 1px dashed var(--linje);
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms;
}

.upload:hover {
  border-color: var(--black);
}

.upload__input:focus-visible + .upload {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.upload__text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--damped);
}

.upload__text--filled {
  color: var(--black);
}

/* Success state ----------------------------------------------------------- */

/* No top hairline: the form it would have separated from is gone by the time
   this is on screen, leaving the rule dividing nothing. */
.success {
  text-align: center;
}

.success:focus {
  outline: none;
}

.success__title {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--black);
}

.success__body {
  margin: 16px auto 0;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--damped);
}

.success__recap {
  margin-top: 40px;
  background: var(--grund);
  padding: 28px;
  text-align: left;
}

.success__spec {
  font-size: 17px;
  line-height: 1.5;
  color: var(--black);
}

.success__note {
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--damped);
}

@media (min-width: 1024px) {
  /* Same two-column grid as the calculator, and the summary sits in the same
     right-hand slot the price panel occupied there. Moving between the two
     pages, the Grund panel stays put and only the left column changes from
     questions to contact details. */
  .contact__body {
    padding: 0 var(--side-pad) 130px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    align-items: start;
    gap: 80px;
  }

  .summary,
  .contact__form,
  .success {
    grid-row: 1;
  }

  .contact__form,
  .success {
    grid-column: 1;
    max-width: 560px;
  }

  .summary {
    grid-column: 2;
    position: sticky;
    top: calc(var(--header-height) + 40px);
  }

  .contact__form {
    gap: 52px;
  }

  .contact__actions {
    align-items: flex-start;
  }

  .contact__actions-note {
    text-align: left;
  }

  .summary {
    padding: 36px;
    margin-bottom: 0;
  }

  .summary__row-value {
    font-size: 26px;
  }

  .success {
    text-align: left;
  }

  .success__title {
    font-size: 40px;
  }

  .success__body {
    margin: 18px 0 0;
    max-width: 420px;
    font-size: 17px;
    line-height: 1.6;
  }

  .success__recap {
    padding: 36px;
  }
}

/* ==========================================================================
   Works — the gallery page grid. Distinct from the homepage's .gallery
   preview: every cell is clickable and carries a two-line caption.
   ========================================================================== */

.works {
  padding: 0 var(--side-pad) 88px;
}

.works__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Columns stay edge-to-edge as elsewhere in the system; rows need real space
     because each cell carries its own caption. */
  column-gap: 3px;
  row-gap: 36px;
}

.works__button {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.works__button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.works__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity 150ms;
}

.works__button:hover .works__media {
  opacity: 0.88;
}

.works__media--photo { background-image: var(--placeholder-stripe); }
.works__media--ral-9005 { background: var(--ral-9005); }
.works__media--ral-6005 { background: var(--ral-6005); }
.works__media--ral-3001 { background: var(--ral-3001); }

.works__caption {
  display: block;
  padding-top: 10px;
}

.works__part {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--black);
}

.works__meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--damped);
}

.works__note {
  margin-top: 56px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  line-height: 1.55;
  color: var(--damped);
  text-align: center;
}

@media (min-width: 1024px) {
  .works {
    padding: 0 var(--side-pad) 130px;
  }

  .works__grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 3px;
    row-gap: 48px;
  }

  .works__meta {
    font-size: 14px;
  }

  .works__note {
    margin: 72px 0 0;
    max-width: 480px;
    font-size: 15px;
    text-align: left;
  }
}

/* Work detail panel ------------------------------------------------------- */

.work-detail {
  border: none;
  border-radius: 0;
  padding: 0;
  background: var(--papper);
  color: var(--black);
  /* Full-screen on mobile: a small centred panel on a phone leaves the image
     too small to be worth opening. */
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  overflow-y: auto;
}

.work-detail::backdrop {
  background: rgba(26, 26, 24, 0.55);
}

/* Focus lands on the panel itself when it opens, so the close button doesn't
   come up ringed. The dialog is labelled, so it still announces properly. */
.work-detail:focus {
  outline: none;
}

.work-detail__close {
  position: absolute;
  top: 14px;
  right: var(--side-pad);
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Same orange X the hamburger forms when open, so "close" looks the same
   everywhere on the site. */
.work-detail__close span {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 1px;
  background: var(--signal);
}

.work-detail__close span:nth-child(1) { transform: translateY(1.5px) rotate(45deg); }
.work-detail__close span:nth-child(2) { transform: translateY(-1.5px) rotate(-45deg); }

.work-detail__close:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.work-detail__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: 72px;
}

.work-detail__media--photo { background-image: var(--placeholder-stripe); }
.work-detail__media--ral-9005 { background: var(--ral-9005); }
.work-detail__media--ral-6005 { background: var(--ral-6005); }
.work-detail__media--ral-3001 { background: var(--ral-3001); }

.work-detail__body {
  padding: 32px var(--side-pad) 48px;
}

.work-detail__title {
  font-size: 26px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

.work-detail__cta {
  display: block;
  width: fit-content;
  margin-top: 40px;
}

/* Spec list — label/value rows on a light surface. The dark-block rows are
   the same idea inverted; this is the version for Papper. */
.spec {
  margin: 0;
}

.spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--linje);
  padding: 16px 0;
}

.spec__label {
  font-size: 14px;
  color: var(--damped);
}

.spec__value {
  margin: 0;
  font-size: 16px;
  color: var(--black);
  text-align: right;
}

@media (min-width: 1024px) {
  .work-detail {
    width: calc(100% - 160px);
    max-width: 1040px;
    /* fit-content, not auto: the UA gives a modal dialog `inset: 0`, so
       `height: auto` resolves by filling that gap instead of shrinking to
       content, and the panel comes out viewport-tall. */
    height: fit-content;
    max-height: calc(100vh - 120px);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .work-detail__close {
    top: 20px;
    right: 20px;
  }

  /* Stretches to whatever height the spec list needs, so the panel is never
     taller than its own content. */
  .work-detail__media {
    margin-top: 0;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 380px;
  }

  .work-detail__body {
    padding: 56px;
  }

  .work-detail__title {
    font-size: 32px;
    margin-bottom: 36px;
  }

  .work-detail__cta {
    margin-top: 48px;
  }
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  padding: 0 var(--side-pad) 88px;
}

.about__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-image: var(--placeholder-stripe);
  margin-bottom: 32px;
}

.about__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--damped);
}

/* The opening paragraph carries the page's one claim, so it reads as primary
   text; everything after it is supporting detail. */
.about__body--lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--black);
}

.about__body + .about__body {
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .about {
    padding: 0 var(--side-pad) 130px;
  }

  .about__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
  }

  .about__media {
    margin-bottom: 0;
  }

  .about__content {
    max-width: 480px;
  }

  .about__body {
    font-size: 17px;
    line-height: 1.65;
  }

  .about__body--lead {
    font-size: 22px;
    line-height: 1.45;
  }

  .about__body + .about__body {
    margin-top: 24px;
  }
}

/* ==========================================================================
   Steps — the numbered process. The oversized numeral is reserved for this
   component and nothing else (style guide §06).
   ========================================================================== */

.steps {
  padding-bottom: 96px;
}

.steps__title {
  padding: 0 var(--side-pad);
  margin: 0 auto 40px;
  max-width: 280px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--black);
  text-align: center;
}

.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps__item {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--linje);
  padding: 34px var(--side-pad);
}

.steps__numeral {
  position: absolute;
  top: 50%;
  right: 44px;
  transform: translateY(-50%);
  z-index: 0;
  font-size: 118px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--signal-tone);
}

/* Capped width so the copy never collides with the numeral behind it. Text
   stays left-aligned on mobile — the one exception to centring there, because
   the numeral is anchored to the right edge. */
.steps__content {
  position: relative;
  z-index: 1;
  max-width: 190px;
}

.steps__item-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--black);
}

.steps__item-body {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--damped);
}

.steps__cta {
  display: block;
  width: fit-content;
  margin: 48px auto 0;
}

@media (min-width: 1024px) {
  .steps {
    padding-bottom: 130px;
  }

  .steps__title {
    margin: 0 0 56px;
    max-width: none;
    font-size: 28px;
    text-align: left;
  }

  .steps__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 var(--side-pad);
    border-top: 1px solid var(--linje);
  }

  .steps__item {
    border-top: none;
    border-right: 1px solid var(--linje);
    padding: 64px 56px;
    min-height: 280px;
  }

  .steps__item:last-child {
    border-right: none;
  }

  .steps__numeral {
    top: auto;
    bottom: 16px;
    right: 24px;
    transform: none;
    font-size: 168px;
  }

  .steps__content {
    max-width: 260px;
  }

  .steps__item-title {
    font-size: 24px;
  }

  .steps__item-body {
    margin-top: 14px;
    font-size: 16px;
  }

  .steps__cta {
    margin: 56px var(--side-pad) 0;
  }
}

/* ==========================================================================
   Note — hairline-separated list of qualifiers under the calculator
   ========================================================================== */

.note {
  padding: 88px var(--side-pad) 96px;
}

.note__title {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--black);
  max-width: 280px;
  margin: 0 auto 40px;
  text-align: center;
}

.note__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.note__item {
  border-top: 1px solid var(--linje);
  padding: 28px 0;
}

.note__item-title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--black);
}

.note__item-body {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--damped);
}

.note__closing {
  margin-top: 40px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--damped);
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 1024px) {
  .note {
    padding: 130px var(--side-pad);
  }

  .note__title {
    font-size: 28px;
    max-width: none;
    margin: 0 0 56px;
    text-align: left;
  }

  .note__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    border-top: 1px solid var(--linje);
  }

  .note__item {
    border-top: none;
    padding: 40px 0 0;
  }

  .note__item-title {
    font-size: 20px;
  }

  .note__item-body {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 12px;
  }

  .note__closing {
    margin: 64px 0 0;
    font-size: 17px;
    line-height: 1.6;
    max-width: 480px;
    text-align: left;
  }
}

/* ==========================================================================
   Legal — long-form prose page (sekretesspolicy). One narrow reading column,
   hairline-separated sections; no cards, no boxes.
   ========================================================================== */

.legal {
  padding: 0 var(--side-pad) 88px;
}

.legal__meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--damped);
  margin-bottom: 32px;
}

.legal__section {
  border-top: 1px solid var(--linje);
  padding: 28px 0 0;
}

.legal__section + .legal__section {
  margin-top: 28px;
}

.legal__title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--black);
}

.legal__body {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--damped);
}

.legal__body a {
  color: var(--black);
  border-bottom: 1px solid var(--linje);
}

.legal__body a:hover {
  border-bottom-color: var(--signal);
}

.legal__list {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--damped);
}

.legal__list li + li {
  margin-top: 6px;
}

/* Ändamål / laglig grund / lagringstid for one processing activity. Same
   label-left, value-right hairline rows as .spec. */
.legal__facts {
  margin: 20px 0 0;
}

.legal__facts-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--linje);
  padding: 12px 0;
}

.legal__facts-label {
  font-size: 13px;
  color: var(--damped);
  flex: none;
}

.legal__facts-value {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--black);
  text-align: right;
}

@media (min-width: 1024px) {
  .legal {
    padding: 0 var(--side-pad) 130px;
  }

  .legal__inner {
    max-width: 680px;
  }

  .legal__meta {
    margin-bottom: 48px;
  }

  .legal__section {
    padding-top: 40px;
  }

  .legal__section + .legal__section {
    margin-top: 40px;
  }

  .legal__title {
    font-size: 20px;
  }

  .legal__body,
  .legal__list {
    font-size: 16px;
  }

  .legal__facts-value {
    font-size: 16px;
  }
}

/* ==========================================================================
   Dark contrast block — one per page. Here it carries the contact details;
   the price breakdown lives in the panel above, so the two never collide.
   ========================================================================== */

.dark-block {
  background: var(--black);
  padding: 64px var(--side-pad);
}

.dark-block__intro {
  font-size: 20px;
  line-height: 1.5;
  color: var(--papper);
  max-width: 270px;
  margin: 0 auto 48px;
  text-align: center;
}

.dark-block__rows {
  margin: 0;
}

.dark-block__row {
  border-top: 1px solid rgba(247, 246, 242, 0.16);
  padding: 18px 0;
}

.dark-block__label {
  font-size: 14px;
  line-height: 1.3;
  color: rgba(247, 246, 242, 0.55);
}

.dark-block__value {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--papper);
}

.dark-block__value a {
  transition: color 150ms;
}

.dark-block__value a:hover {
  color: var(--signal);
}

@media (min-width: 1024px) {
  .dark-block {
    padding: 110px var(--side-pad);
  }

  .dark-block__intro {
    font-size: 28px;
    max-width: 420px;
    margin: 0 0 56px;
    text-align: left;
  }

  .dark-block__rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 80px;
    max-width: 860px;
  }

  .dark-block__row {
    padding: 22px 0;
  }

  .dark-block__value {
    font-size: 18px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--linje);
  background: var(--grund);
  padding: 0 var(--side-pad);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  padding-top: 36px;
  padding-bottom: 36px;
}

.site-footer__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.site-footer__legal-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--black);
}

.site-footer__address {
  margin-top: 4px;
  font-size: 15px;
  color: var(--damped);
}

.site-footer__contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.site-footer__contact-links a {
  font-size: 15px;
  font-weight: 400;
  color: var(--black);
  transition: color 150ms;
}

.site-footer__contact-links a:hover {
  color: var(--signal);
}

.site-footer__bottom {
  border-top: 1px solid var(--linje);
  padding: 24px 0 32px;
}

.site-footer__copyright {
  font-size: 12px;
  color: var(--damped);
  text-align: left;
}

@media (min-width: 1024px) {
  .site-footer__grid {
    column-gap: 80px;
    padding-top: 72px;
    padding-bottom: 48px;
  }

  .site-footer__legal-name,
  .site-footer__address,
  .site-footer__contact-links a {
    font-size: 16px;
  }

  .site-footer__bottom {
    padding: 24px 0 48px;
  }
}