/* ==========================================================================
   Skorpen Konsulenttjenester
   Mobile-first. No JavaScript. No external resources.
   ========================================================================== */

:root {
  --bg:      #FBF8F4;
  --band:    #F5EFE6;   /* soft tint used to separate full-bleed sections */
  --surface: #FFFFFF;
  --ink:     #1F1C18;
  --muted:   #6B655C;   /* 5.45:1 on --bg, 5.05:1 on --band, 5.77:1 on white */
  --line:    #E7DFD4;
  --clay:    #8A5A44;   /* 5.79:1 on white, 5.47:1 on --bg */
  --clay-dk: #6C4534;

  --serif: 'Times New Roman', Times, serif;
  --sans: 'Times New Roman', Times, serif;

  --shell: 1120px;
  --prose: 64ch;        /* ≈72 characters per line — inside the 68ch cap */
  --sec: 64px;          /* vertical section rhythm */
  --radius: 14px;
}

/* --------------------------------------------------------------- reset --- */

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

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

/* Sticky footer: on a short page (404) the footer sits at the bottom of the
   window instead of leaving a band of empty background beneath it. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

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

h1, h2, h3 {
  font-family: var(--serif);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

p, figure, blockquote { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--clay); }
a:hover { color: var(--clay-dk); }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------- primitives --- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 20px;
}

.prose { max-width: var(--prose); }

.section { padding-block: var(--sec); }

.section--band {
  background: var(--band);
  border-block: 1px solid var(--line);
}

/* Written sentence-case in the HTML; the caps are presentational only, so a
   screen reader reads a word instead of spelling out the letters. */
.eyebrow {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--clay);
  flex: none;
}

h1 {
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: 0;
}

h2 { font-size: 26px; letter-spacing: 0; }

h3 { font-size: 20px; letter-spacing: 0; }

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

.section-head { margin-bottom: 32px; }

.stack > * + * { margin-top: 18px; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--clay);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.btn:hover { background: var(--clay-dk); border-color: var(--clay-dk); color: #fff; }

/* The e-mail address is long, but the primary CTA must never be smaller than
   body text, so the side padding gives way instead of the type. At 320px the
   address needs 201px and this leaves 208px. There is a <wbr> before the @ in
   the markup, so if it ever does wrap it breaks at a readable place. */
.btn--wide {
  max-width: 100%;
  font-size: 16px;
  padding-inline: 14px;
  overflow-wrap: break-word;
  text-align: center;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  color: var(--clay);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease;
}

.textlink:hover { border-color: var(--clay); }

.textlink svg { flex: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 30px;
}

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

.skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--clay);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
  font-weight: 600;
}

.skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  color: #fff;
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.header-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-block: 8px 4px;
}

.wordmark {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0;
  padding-block: 10px;
  align-self: flex-start;
}

.wordmark:hover { color: var(--clay-dk); }

/* Phone: one row that scrolls sideways. Two wrapped rows of links with no
   row-gap read as a single broken block, and hide the tail of the menu. */
.nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  gap: 0 10px;
  margin-inline: -8px;
  padding-inline: 8px;
}

.nav::-webkit-scrollbar { display: none; }

/* Below ~600px the menu is always wider than the screen, so fade the right
   edge — otherwise the row looks like it simply ends after "Innhold". */
@media (max-width: 599px) {
  .nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }
}

.nav li { flex: none; }

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  font-size: 15px;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.nav a:hover { color: var(--ink); }

.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--clay);
}

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

.hero { padding-block: 40px var(--sec); }

.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: 0;
  margin-bottom: 20px;
}

.hero .lede {
  font-size: 20px;
  line-height: 1.55;
  max-width: 68ch;
}

#kundeomtale { padding-block: 28px 56px; }

@media (max-width: 699px) {
  .site-header {
    background: var(--surface);
  }

  .header-inner {
    align-items: center;
    padding-block: 14px 0;
  }

  .wordmark {
    align-self: center;
    padding-block: 2px 12px;
    font-size: 22px;
    text-align: center;
  }

  .site-header nav {
    width: 100%;
    border-top: 1px solid var(--line);
  }

  .nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0 18px;
    margin-inline: -16px;
    padding: 6px 16px 8px;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }

  .nav a {
    min-height: 36px;
    padding-inline: 0;
    font-size: 13px;
  }

  .nav li:last-child {
    display: none;
  }

  .hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-block: 24px 34px;
  }

  .hero .shell {
    padding-inline: 22px;
  }

  .hero .eyebrow {
    margin-bottom: 16px;
    font-size: 11px;
  }

  .hero .eyebrow::before {
    width: 18px;
  }

  .hero h1 {
    font-size: clamp(27px, 7.6vw, 30px);
    line-height: 1.08;
    margin-bottom: 14px;
    white-space: nowrap;
  }

  .hero .lede {
    max-width: 37ch;
    font-size: 16px;
    line-height: 1.5;
  }

  .actions {
    display: grid;
    grid-template-columns: minmax(118px, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    margin-top: 20px;
  }

  .actions .btn,
  .actions .textlink {
    min-height: 44px;
    width: 100%;
    padding-inline: 12px;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
}

/* --------------------------------------------------------------- photo --- */

.figure {
  position: relative;
  max-width: 380px;
  margin-inline: auto;
}

.figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--line);
}

/* -------------------------------------------------------------- galleri --- */

/* Sveip/scroll sidelengs i stedet for en lang vegg av bilder. */

.gallery {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  margin-inline: -20px;
  padding-inline: 20px;
  padding-bottom: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.gallery::-webkit-scrollbar { display: none; }

.gallery figure {
  flex: 0 0 min(74%, 260px);
  margin: 0;
  scroll-snap-align: start;
}

.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--line);
  display: block;
}

/* Plassholder. Samme mål som et ekte bilde, så seksjonen ikke hopper i høyde
   når bildene faktisk kommer inn. --line er den samme grå tonen som brukes som
   bakgrunn bak bilder som laster, så den ser bevisst ut, ikke ødelagt. */
.gallery .ph {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--line);
}

.gallery figcaption {
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}

/* --------------------------------------------------------------- cards --- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.card-icon {
  color: var(--clay);
  margin-bottom: 14px;
  display: block;
}

.card h3 { margin-bottom: 6px; }

.card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 34ch;
}

/* The whole card is the link, so on a phone the "Les mer" row is a third
   line of chrome for nothing. It comes back at 600px. */
.card-more { display: none; }

/* ------------------------------------------------------------- om meg --- */

.split { display: grid; gap: 36px; }

.split .figure { max-width: 340px; }

/* --------------------------------------------------------- anmeldelser --- */

.reviews-head { text-align: center; }
.reviews-head .eyebrow { justify-content: center; }

.reviews {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 20px;
}

.reviews.reviews--single {
  grid-template-columns: 1fr;
  max-width: 1040px;
  margin-inline: auto;
}

.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}

.review blockquote {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
}

.review blockquote p + p { margin-top: 16px; }

.review figcaption {
  color: var(--muted);
  font-size: 15px;
}

/* ------------------------------------------------------------- kontakt --- */

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 20px;
  max-width: 660px;
  margin-inline: auto;
}

.contact-card .lede { margin-top: 18px; }

.contact-card .btn { margin-top: 26px; }

.contact-sub { margin-top: 14px; color: var(--muted); font-size: 15px; }

/* -------------------------------------------------------- service page --- */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
}

.backlink:hover { color: var(--clay-dk); }

/* One left-aligned column on every service page — no empty second track.
   No bottom padding: the section below already supplies the rhythm, and
   stacking the two left a dead band above the first hairline. */
.page-head { padding-block: 20px 0; }

.page-head-col { max-width: 720px; }

.page-head .eyebrow { margin-top: 16px; }

.page-head h1 {
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  line-height: 1.06;
  margin-bottom: 18px;
}

.page-head .lede { max-width: 56ch; }

.checklist { margin-top: 20px; }

.checklist li {
  position: relative;
  padding-left: 28px;
  margin-top: 14px;
  max-width: var(--prose);
}

.checklist li:first-child { margin-top: 0; }

.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  background: var(--clay);
  border-radius: 50%;
}

.list-note {
  margin-top: 18px;
  color: var(--muted);
  max-width: var(--prose);
}

.block {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.block + .block { margin-top: 48px; }

.block h2 { margin-bottom: 18px; }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 40px;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  color: var(--muted);
}

.footer-inner .f-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
}

.footer-inner a {
  color: var(--clay);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-block: 8px;
  overflow-wrap: anywhere;
}

.footer-copy { margin-top: 14px; font-size: 14px; }

/* ------------------------------------------------------------- 404 --- */

.errorpage { padding-block: var(--sec); }
.errorpage h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.errorpage .actions { margin-top: 26px; }

/* ================================================================ 360px === */

@media (min-width: 360px) {
  .btn--wide { padding-inline: 20px; }
}

/* ================================================================ 600px === */

@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;   /* every card the same size, none looks weightier */
    gap: 20px;
  }

  .card { padding: 24px 22px; }

  .card-more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--clay);
    font-size: 15px;
    font-weight: 600;
  }

  /* 24px of air above the hairline, 16px below it. */
  .card p { margin-bottom: 24px; }
  .card .card-more { margin-top: auto; }

  .footer-inner { font-size: 16px; }
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================ 700px === */

@media (min-width: 700px) {
  /* Enough room for the whole menu; stop the sideways scroll. */
  .nav { overflow-x: visible; flex-wrap: wrap; gap: 0 8px; }

  .gallery {
    gap: 16px;
    padding-bottom: 14px;
    scrollbar-color: var(--clay) var(--line);
    scrollbar-width: thin;
  }

  .gallery::-webkit-scrollbar {
    display: block;
    height: 10px;
  }

  .gallery::-webkit-scrollbar-track {
    background: var(--line);
    border-radius: 999px;
  }

  .gallery::-webkit-scrollbar-thumb {
    background: var(--clay);
    border-radius: 999px;
  }
}

/* ================================================================ 768px === */

@media (min-width: 768px) {
  :root { --sec: 88px; }

  body { font-size: 18px; line-height: 1.7; }

  .shell { padding-inline: 32px; }

  .gallery {
    margin-inline: -32px;
    padding-inline: 32px;
  }

  h2 { font-size: 33px; }
  h3 { font-size: 21px; }

  .lede { font-size: 20px; line-height: 1.6; }

  .section-head { margin-bottom: 44px; }

  .wordmark { font-size: 21px; }

  .hero { padding-block: 72px 44px; }
  .hero-text { max-width: 920px; }

  #kundeomtale { padding-block: 36px 72px; }

  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    align-items: start;
    gap: 56px;
  }

  .split .figure { max-width: 320px; margin-inline: auto 0; }

  .split--media { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .split--media .figure { margin-inline: 0 auto; }

  .review { padding: 40px 32px; }

  .contact-card { padding: 44px 40px; }

  .card { padding: 28px 26px; }

  .block + .block { margin-top: 64px; }

  .page-head { padding-block: 40px 0; }
  .page-head .eyebrow { margin-top: 22px; }
}

/* ================================================================ 900px === */

@media (min-width: 900px) {
  /* Wordmark and nav fit on one line from here up. */
  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 8px;
  }

  .nav { justify-content: flex-end; gap: 0 14px; margin-inline: 0; padding-inline: 0; }

  .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 28px;
    row-gap: 6px;
  }

  .footer-inner .f-name { margin-bottom: 0; }

  .footer-inner .footer-copy { margin-top: 0; margin-left: auto; }
}

/* ================================================================ 960px === */

@media (min-width: 960px) {
  /* Five identical cards on a three-column grid. The last row is left
     aligned with one empty cell — deliberate, and it keeps all five the
     same size so none of them looks more important than the others. */
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;   /* both rows the same height — a deliberate set */
    gap: 24px;
  }

  .card {
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }

  .card:hover {
    border-color: var(--clay);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(31, 28, 24, .06);
  }

  .split { gap: 80px; }
  .split .figure { max-width: 360px; }

  /* Service pages: heading sits in a left rail, content in the reading column. */
  .block {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px 56px;
    align-items: start;
    padding-top: 32px;
  }

  .block h2 { font-size: 26px; margin-bottom: 0; }

  .block .checklist { margin-top: 0; }
}

/* =============================================================== 1120px === */

@media (min-width: 1120px) {
  :root { --sec: 128px; }

  h2 { font-size: 38px; }

  .hero { padding-block: 104px 56px; }
  .hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
  .hero-text { max-width: 1120px; }

  .page-head { padding-block: 56px 0; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover { transform: none; }
}