/* Morning Walk Marketing, nettside-prototype. Delt redaksjonelt lag over
   designsystemet. Kun tokens, ingen hardkodede verdier. Klasser prefikses pp-. */

body { font-family: var(--font-brod); color: var(--mwm-tekst); background: var(--mwm-hvit); margin: 0; }
.pp-wrap { max-width: var(--bredde-container); margin-inline: auto; padding-inline: var(--sp-6); }
.pp-eyebrow {
  font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift);
  font-size: var(--fs-liten); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mwm-morkegronn-lys); margin: 0 0 var(--sp-5) 0;
}

/* ---------- Toppmeny ---------- */
.pp-nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--mwm-hvit) 90%, transparent); backdrop-filter: saturate(1.1) blur(6px); border-bottom: var(--kant-dekor); }
.pp-nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-block: var(--sp-4); }
.pp-brand { display: inline-flex; align-items: center; text-decoration: none; }
.pp-brand__logo { height: 56px; width: auto; display: block; }
.pp-nav__links { display: flex; align-items: center; gap: var(--sp-7); }
.pp-nav__links a { color: var(--mwm-tekst); text-decoration: none; font-size: var(--fs-brod); }
.pp-nav__links a:hover { color: var(--mwm-morkegronn-lys); }
.pp-nav__links a[aria-current="page"] { color: var(--mwm-morkegronn); text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 2px; }

/* Mobilmeny-knapp (hamburger). Skjult på desktop, vises under 768px. */
.pp-nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--sp-3); margin: calc(-1 * var(--sp-3)); color: var(--mwm-morkegronn); }
.pp-nav__toggle:focus-visible { outline: none; box-shadow: var(--fokus-ring); border-radius: var(--radius-sm); }
.pp-nav__strek, .pp-nav__strek::before, .pp-nav__strek::after { display: block; width: 24px; height: 2px; background: currentColor; transition: transform var(--overgang), opacity var(--overgang); }
.pp-nav__strek { position: relative; }
.pp-nav__strek::before { content: ""; position: absolute; left: 0; top: -7px; }
.pp-nav__strek::after { content: ""; position: absolute; left: 0; top: 7px; }
.pp-nav__toggle[aria-expanded="true"] .pp-nav__strek { background: transparent; }
.pp-nav__toggle[aria-expanded="true"] .pp-nav__strek::before { transform: translateY(7px) rotate(45deg); }
.pp-nav__toggle[aria-expanded="true"] .pp-nav__strek::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.pp-hero { padding-block: clamp(var(--sp-9), 8vw, var(--sp-11)) var(--sp-9); }
.pp-hero__slagord { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-4); line-height: var(--lh-4); color: var(--mwm-morkegronn-lys); margin: 0 0 var(--sp-5) 0; }
.pp-hero h1 {
  font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift);
  font-size: var(--fs-1); line-height: var(--lh-1); letter-spacing: var(--sperring-overskrift);
  margin: 0 0 var(--sp-7) 0; color: var(--mwm-morkegronn);
}
.pp-hero h1 span { display: block; }
.pp-hero__lead { font-size: var(--fs-ingress); line-height: var(--lh-ingress); max-width: 52ch; margin: 0 0 var(--sp-6) 0; }
.pp-linkpil { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); color: var(--mwm-burgunder); text-decoration: none; font-size: var(--fs-4); }
.pp-linkpil:hover { color: var(--mwm-burgunder-mork); }
.pp-linkpil--lys { color: var(--mwm-tekst-invers); }
.pp-linkpil--lys:hover { color: var(--mwm-hvit); }
.pp-linkpil::after { content: " \2192"; }

/* Mørk hero, Ta kontakt */
.pp-hero--mork { background: var(--mwm-morkegronn); color: var(--mwm-tekst-invers); }
.pp-hero--mork h1 { color: var(--mwm-hvit); }
.pp-hero--mork .pp-hero__lead { color: var(--mwm-tekst-invers); }
.pp-hero--mork .pp-eyebrow { color: var(--mwm-tekst-invers); }

/* Artikkelkort: mindre tittel enn systemets basis-h3 for bedre kortproporsjon */
.mwm-kort h3 { font-size: var(--fs-4); line-height: var(--lh-4); color: var(--mwm-morkegronn); }
.mwm-kort__meta { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mwm-morkegronn-lys); }

/* ---------- Kontaktside ---------- */
.pp-kontakt { padding-block: var(--sp-seksjon); }
.pp-kontakt__intro { max-width: var(--bredde-tekst); font-size: var(--fs-ingress); line-height: var(--lh-ingress); margin: 0 0 var(--sp-8) 0; }
.pp-kontakt__grid { display: grid; grid-template-columns: minmax(0, var(--bredde-smal)) 1fr; gap: var(--sp-9); align-items: start; }
.pp-navnrad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.pp-kontakt__info h2 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-4); line-height: var(--lh-4); margin: 0 0 var(--sp-4) 0; color: var(--mwm-morkegronn); }
.pp-kontakt__info a { display: block; color: var(--farge-primer); text-decoration: none; padding-block: var(--sp-1); font-size: var(--fs-brod); }
.pp-kontakt__info a:hover { color: var(--mwm-morkegronn-lys); }
.pp-kontakt__info p { margin: var(--sp-5) 0 0 0; font-size: var(--fs-liten); line-height: var(--lh-liten); color: var(--mwm-morkegronn-lys); max-width: 34ch; }
@media (max-width: 900px) { .pp-kontakt__grid { grid-template-columns: 1fr; gap: var(--sp-8); } }
@media (max-width: 480px) { .pp-navnrad { grid-template-columns: 1fr; } }

/* ---------- Fullbredde bilde som pust ---------- */
.pp-bleed { position: relative; width: 100%; margin: 0; }
.pp-bleed img { display: block; width: 100%; }
.pp-bleed--natur img { height: clamp(360px, 58vh, 620px); object-fit: cover; }
.pp-bleed--portrett img { width: 100%; height: auto; display: block; }

/* ---------- Metodikk-sekvens ---------- */
.pp-metode { padding-block: var(--sp-seksjon); }
.pp-metode__hode { max-width: var(--bredde-tekst); margin-bottom: var(--sp-9); }
.pp-metode__hode h2 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-2); line-height: var(--lh-2); margin: 0; color: var(--mwm-morkegronn); }
.pp-steg { position: relative; display: grid; gap: var(--sp-8); max-width: 60ch; }
.pp-steg::before { content: ""; position: absolute; left: 28px; top: 28px; bottom: 28px; width: 2px; background: var(--mwm-lysgra); z-index: 0; }
.pp-steg__rad { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-6); align-items: start; }
.pp-steg__ikonwrap { z-index: 1; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--mwm-lysgra-lys); border: 1px solid var(--mwm-lysgra); display: flex; align-items: center; justify-content: center; }
.pp-steg__ikon { width: 28px; height: 28px; display: block; }
.pp-steg__tekst h3 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-4); line-height: var(--lh-4); margin: var(--sp-2) 0 var(--sp-3) 0; color: var(--mwm-morkegronn); }
.pp-steg__tekst p { margin: 0; max-width: 52ch; font-size: var(--fs-brod); line-height: var(--lh-brod); }

/* ---------- Tjeneste-seksjoner ---------- */
.pp-tjeneste { padding-block: var(--sp-seksjon); border-top: var(--kant-dekor); }
.pp-tjeneste--lys { background: var(--mwm-lysgra-lys); }
.pp-tjeneste__hode { max-width: var(--bredde-tekst); margin-bottom: var(--sp-8); }
.pp-tjeneste__hode h2 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-2); line-height: var(--lh-2); margin: 0 0 var(--sp-4) 0; color: var(--mwm-morkegronn); }
.pp-forhvem { font-size: var(--fs-ingress); line-height: var(--lh-ingress); margin: 0; }
.pp-tjeneste__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-8) var(--sp-9); align-items: start; }
.pp-label { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-liten); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mwm-morkegronn-lys); margin: 0 0 var(--sp-4) 0; }
.pp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.pp-liste li { padding-left: var(--sp-5); position: relative; line-height: var(--lh-brod); }
.pp-liste li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--mwm-stovbla); border-radius: var(--radius-full); }
.pp-metablokk { display: grid; gap: var(--sp-6); }
.pp-metablokk p { margin: 0; line-height: var(--lh-brod); }
.pp-metablokk__resultat { padding-top: var(--sp-5); border-top: 2px solid var(--mwm-stovbla); }
.pp-metablokk__resultat .pp-label { color: var(--mwm-stovbla-mork); }

/* ---------- Bevis: resultatblokk på støvblå ---------- */
.pp-bevis { padding-block: var(--sp-seksjon); }
.pp-bevis__hode { max-width: var(--bredde-tekst); margin-bottom: var(--sp-8); }
.pp-bevis .pp-eyebrow { color: var(--mwm-morkegronn); }
.pp-bevis__hode h2, .pp-slik__hode h2 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-2); line-height: var(--lh-2); margin: 0; color: var(--mwm-morkegronn); }
.pp-bevis__intro { font-size: var(--fs-ingress); line-height: var(--lh-ingress); margin: 0; }

/* ---------- Slik jobber vi ---------- */
.pp-slik { padding-block: var(--sp-seksjon); }
.pp-slik__hode { margin-bottom: var(--sp-8); }
.pp-slik__liste { display: grid; gap: var(--sp-7); max-width: var(--bredde-tekst); margin: 0; }
.pp-slik__liste > div { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: var(--kant-dekor); }
.pp-slik__liste dt { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-4); line-height: var(--lh-4); color: var(--mwm-morkegronn); margin: 0; }
.pp-slik__liste dd { margin: 0; line-height: var(--lh-brod); max-width: 62ch; }

/* ---------- Prosa-seksjon (Om oss) ---------- */
.pp-prosa { padding-block: var(--sp-seksjon); }
.pp-prosa--lys { background: var(--mwm-lysgra-lys); }
.pp-prosa__hode { margin-bottom: var(--sp-7); }
.pp-prosa__hode h2 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-2); line-height: var(--lh-2); margin: 0; color: var(--mwm-morkegronn); }
.pp-prosa__tekst { max-width: var(--bredde-tekst); display: grid; gap: var(--sp-5); }
.pp-prosa__tekst p { margin: 0; font-size: var(--fs-brod); line-height: var(--lh-brod); }

/* Stort utsagn, det filosofiske grunnlaget */
.pp-utsagn { padding-block: var(--sp-seksjon); }
.pp-utsagn__inn { max-width: var(--bredde-tekst); display: grid; gap: var(--sp-5); }
.pp-utsagn p { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-3); line-height: var(--lh-3); letter-spacing: var(--sperring-overskrift); color: var(--mwm-morkegronn); margin: 0; }

/* Todeling, filosofi og hvem-vi-jobber-med */
.pp-todeling { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-9); }
.pp-todeling h3 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-4); line-height: var(--lh-4); margin: 0 0 var(--sp-4) 0; color: var(--mwm-morkegronn); }
.pp-todeling p { margin: 0; line-height: var(--lh-brod); }
.pp-todeling ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-3); line-height: var(--lh-brod); }
@media (max-width: 767px) { .pp-todeling { grid-template-columns: 1fr; gap: var(--sp-7); } }

/* ---------- Avslutning ---------- */
.pp-slutt { padding-block: var(--sp-seksjon); background: var(--mwm-lysgra-lys); }
.pp-slutt__inn { max-width: var(--bredde-tekst); }
.pp-slutt h2 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-2); line-height: var(--lh-2); margin: 0 0 var(--sp-5) 0; color: var(--mwm-morkegronn); max-width: 24ch; }
.pp-slutt__lead { font-size: var(--fs-ingress); line-height: var(--lh-ingress); max-width: 50ch; margin: 0 0 var(--sp-7) 0; }
.pp-slutt__note { margin: var(--sp-5) 0 0 0; font-size: var(--fs-liten); color: var(--mwm-morkegronn-lys); }

/* ---------- Bunn ---------- */
.pp-bunn { background: var(--mwm-morkegronn); color: var(--mwm-tekst-invers); padding-block: var(--sp-9) var(--sp-7); }
.pp-bunn__inn { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); align-items: end; }
.pp-bunn__venstre { display: flex; gap: var(--sp-9); }
.pp-bunn h4 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-liten); letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 var(--sp-4) 0; }
.pp-bunn a { color: var(--mwm-tekst-invers); text-decoration: none; display: block; padding-block: var(--sp-1); overflow-wrap: anywhere; }
.pp-bunn a:hover { text-decoration: underline; }
.pp-bunn a.pp-linkedin { display: inline-flex; align-items: center; gap: var(--sp-3); }
.pp-linkedin img { width: 22px; height: 22px; display: block; }
.pp-bunn__hoyre { justify-self: end; align-self: end; }
.pp-bunn__logo { height: 92px; width: auto; display: block; }
.pp-bunn__stripe { border-top: 1px solid rgba(240,240,240,.25); margin-top: var(--sp-8); padding-top: var(--sp-5); font-size: var(--fs-liten); color: var(--mwm-lysgra-mork); }

/* ---------- Rolig bevegelse ---------- */
.pp-inn { opacity: 0; transform: translateY(14px); transition: opacity 640ms ease-out, transform 640ms ease-out; }
.pp-inn.er-inne { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pp-inn { opacity: 1; transform: none; transition: none; } }

/* ---------- Artikkel (Perspektiver-lesevisning) ---------- */
.pp-artikkel { padding-block: var(--sp-7) var(--sp-9); }
.pp-tilbake { max-width: var(--bredde-tekst); margin: 0 auto var(--sp-7) auto; }
.pp-tilbake a { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-liten); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mwm-morkegronn-lys); text-decoration: none; }
.pp-tilbake a:hover { color: var(--mwm-morkegronn); }
.pp-tilbake a::before { content: "\2190\00a0"; }

.pp-artikkel__hode { max-width: var(--bredde-tekst); margin: 0 auto var(--sp-7) auto; }
.pp-artikkel__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-liten); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mwm-morkegronn-lys); margin: 0 0 var(--sp-5) 0; }
.pp-artikkel__hode h1 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-1); line-height: var(--lh-1); letter-spacing: var(--sperring-overskrift); color: var(--mwm-morkegronn); margin: 0 0 var(--sp-6) 0; }
.pp-artikkel__byline { font-size: var(--fs-liten); color: var(--mwm-morkegronn-lys); border-top: var(--kant-dekor); border-bottom: var(--kant-dekor); padding-block: var(--sp-4); margin: 0; }

.pp-artikkel__brod { max-width: var(--bredde-tekst); margin: 0 auto; }
.pp-artikkel__brod p { font-size: var(--fs-brod); line-height: var(--lh-brod); margin: 0 0 var(--sp-5) 0; }
.pp-artikkel__lead { font-size: var(--fs-ingress); line-height: var(--lh-ingress); }
.pp-artikkel__brod h2 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--mwm-morkegronn); margin: var(--sp-8) 0 var(--sp-5) 0; }

.pp-sitat { border-left: 3px solid var(--mwm-burgunder); padding-left: var(--sp-6); margin: var(--sp-7) 0; font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--mwm-morkegronn); }

.pp-artikkel__brod ul { list-style: none; margin: 0 0 var(--sp-5) 0; padding: 0; display: grid; gap: var(--sp-4); }
.pp-artikkel__brod ul li { position: relative; padding-left: var(--sp-6); font-size: var(--fs-brod); line-height: var(--lh-brod); }
.pp-artikkel__brod ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 8px; background: var(--mwm-stovbla); border-radius: var(--radius-full); }

/* Nummererte spørsmål (diagnosens tre spørsmål) */
.pp-sporsmal { list-style: none; counter-reset: sp; margin: var(--sp-6) 0; padding: 0; display: grid; gap: var(--sp-5); }
.pp-sporsmal li { counter-increment: sp; position: relative; padding-left: calc(var(--sp-7) + var(--sp-5)); font-size: var(--fs-brod); line-height: var(--lh-brod); min-height: var(--sp-7); }
.pp-sporsmal li::before { content: counter(sp); position: absolute; left: 0; top: 0; width: var(--sp-7); height: var(--sp-7); background: var(--mwm-morkegronn); color: var(--mwm-hvit); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-brod); }
.pp-sporsmal li strong { display: block; color: var(--mwm-morkegronn); font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); margin-bottom: var(--sp-2); }

/* Datalinjer (f.eks. syltetøy-forsøket) */
.pp-artikkel__data { border-left: 3px solid var(--mwm-stovbla); padding-left: var(--sp-6); margin: var(--sp-6) 0; display: grid; gap: var(--sp-3); }
.pp-artikkel__data p { margin: 0; }
.pp-artikkel__data strong { color: var(--mwm-stovbla-mork); }

/* Figurer og video */
.pp-artikkel__fig { margin: var(--sp-7) 0; }
.pp-artikkel__fig img, .pp-artikkel__fig video { width: 100%; height: auto; display: block; border-radius: var(--radius-md); border: var(--kant-dekor); background: var(--mwm-lysgra-lys); }
.pp-artikkel__fig figcaption { font-size: var(--fs-liten); line-height: var(--lh-liten); color: var(--mwm-morkegronn-lys); margin-top: var(--sp-3); }

/* Referanser */
.pp-artikkel__ref { background: var(--mwm-lysgra-lys); padding-block: var(--sp-8); }
.pp-artikkel__ref-inn { max-width: var(--bredde-tekst); margin: 0 auto; }
.pp-artikkel__ref h2 { font-family: var(--font-overskrift); font-weight: var(--vekt-overskrift); font-size: var(--fs-4); line-height: var(--lh-4); color: var(--mwm-morkegronn); margin: 0 0 var(--sp-5) 0; }
.pp-artikkel__ref ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pp-artikkel__ref li { position: relative; padding-left: var(--sp-5); font-size: var(--fs-liten); line-height: var(--lh-liten); }
.pp-artikkel__ref li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--mwm-stovbla); border-radius: var(--radius-full); }

@media (max-width: 900px) {
  .pp-tjeneste__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pp-brand__logo { height: 44px; }
  .pp-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .pp-nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--mwm-hvit); border-bottom: var(--kant-dekor);
    padding: var(--sp-4) var(--sp-6) var(--sp-6) var(--sp-6);
    display: none;
  }
  .pp-nav--apen .pp-nav__links { display: flex; }
  .pp-nav__links a:not(.mwm-knapp) { padding-block: var(--sp-4); border-top: var(--kant-dekor); }
  .pp-nav__links a.mwm-knapp { margin-top: var(--sp-5); text-align: center; }
  .pp-bunn__inn { grid-template-columns: 1fr; }
  .pp-bunn__venstre { flex-direction: column; gap: var(--sp-6); }
  .pp-bunn__hoyre { justify-self: start; }
}
@media (max-width: 480px) {
  .pp-wrap { padding-inline: var(--sp-4); }
}