/* Testfrisøren: varm terrakotta og krem. */
:root {
  --vk-hoved: #8a3b2e;
  --vk-hoved-tekst: #fffaf5;
  --vk-bakgrunn: #f7f1ea;
  --vk-flate: #fffdfa;
  --vk-tekst: #2a211d;
  --vk-dempet: #6d5f57;
  --vk-kant: #e4d8cc;
  --vk-radius: 14px;
  --vk-overskrift-font: Georgia, "Times New Roman", serif;
}

h1, h2 { font-family: var(--vk-overskrift-font); font-weight: 600; letter-spacing: -.01em; }

.side-topp { background: var(--vk-hoved); color: var(--vk-hoved-tekst); overflow: hidden; }
.side-topp-innhold {
  max-width: 1100px; margin: 0 auto; padding: 56px 16px;
  display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 32px;
}
.side-topp .merke { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; opacity: .8; margin: 0 0 12px; }
.side-topp h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.02; margin: 0 0 16px; }
.side-topp p { font-size: 20px; margin: 0 0 28px; opacity: .92; max-width: 30em; }
.side-topp .vk-knapp { background: var(--vk-hoved-tekst); color: var(--vk-hoved); padding: 12px 26px; }
.side-topp .vk-knapp + .vk-knapp { background: transparent; color: var(--vk-hoved-tekst); box-shadow: inset 0 0 0 2px currentColor; }
.side-topp img { width: 100%; max-width: 360px; justify-self: center; }

.seksjon { max-width: 1100px; margin: 0 auto; padding: 56px 16px; }
.seksjon h2 { font-size: 32px; margin: 0 0 20px; }
.to-kolonner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; }
.bestill { background: var(--vk-flate); border-block: 1px solid var(--vk-kant); }
.bestill .seksjon { max-width: 860px; }
.fordeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.fordeler li { background: var(--vk-flate); border: 1px solid var(--vk-kant); border-radius: var(--vk-radius); padding: 18px 20px; }
.fordeler strong { display: block; font-family: var(--vk-overskrift-font); font-size: 19px; margin-bottom: 4px; }

@media (max-width: 720px) {
  .side-topp-innhold { grid-template-columns: 1fr; padding: 40px 16px; }
  .side-topp img { max-width: 200px; justify-self: start; order: -1; }
}