/* Håndlangeren: selskapets egen side. Samme merke som møtepresentasjonen (presentasjon/mal/deck.css). */
:root {
  --papir: #f5f3ee;
  --flate: #ffffff;
  --blekk: #15171a;
  --demp: #5a6067;
  --linje: #e2ded5;
  --merke: #1f5c4a;
  --merke-mork: #174538;
  --merke-mid: #8fb5a6;
  --merke-lys: #e6efeb;
  --r: 14px;
  --tekst: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --tittel: "Barlow Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papir); color: var(--blekk); font: 400 18px/1.55 var(--tekst); }
h1, h2, h3 { font-family: var(--tittel); font-weight: 700; line-height: 1.02; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--merke-mid); outline-offset: 3px; border-radius: 6px; }

.bredde { width: min(1160px, 100% - 32px); margin-inline: auto; }
.etikett { font: 600 .8rem/1 var(--tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--merke); margin-bottom: 14px; }

/* Knapper */
.knapp { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 12px;
         background: var(--merke); color: #fff; font: 600 1.05rem/1 var(--tekst); text-decoration: none; border: 2px solid var(--merke);
         transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
.knapp:hover { background: var(--merke-mork); border-color: var(--merke-mork); }
.knapp:active { transform: translateY(1px); }
.knapp-lys { background: transparent; color: var(--merke); }
.knapp-lys:hover { background: var(--merke-lys); border-color: var(--merke); }
.knapp-liten { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.knapp-hvit { background: #fff; color: var(--merke); border-color: #fff; }
.knapp-hvit:hover { background: var(--merke-lys); border-color: var(--merke-lys); }
.knapp-omriss { background: transparent; border-color: rgb(255 255 255 / .5); }
.knapp-omriss:hover { background: rgb(255 255 255 / .08); border-color: #fff; }
.handling { display: flex; flex-wrap: wrap; gap: 12px; }

/* Topp */
.topp { position: sticky; top: 0; z-index: 10; background: rgb(245 243 238 / .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linje); }
.topp-inn { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.ordmerke { font: 700 1.7rem/1 var(--tittel); color: var(--merke); text-decoration: none; letter-spacing: -.01em; }
.ordmerke-liten { font-size: 1.3rem; }
.meny { display: none; gap: 26px; margin-left: auto; }
.meny a { text-decoration: none; color: var(--demp); font-weight: 500; }
.meny a:hover { color: var(--blekk); }
.topp .knapp { margin-left: auto; }
@media (min-width: 860px) { .meny { display: flex; } .meny + .knapp { margin-left: 0; } }

/* Pilot */
.pilot-merke { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 20px; padding: 7px 14px 7px 7px;
               border-radius: 999px; background: var(--merke-lys); color: var(--merke); font-size: .92rem; text-decoration: none; }
.pilot-merke b { background: var(--merke); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: .8rem; letter-spacing: .04em; }
.pilot-merke:hover { background: #dbe8e2; }
.pilot { margin-top: 40px; background: var(--merke-lys); border-radius: var(--r); padding: 30px 28px; display: grid; gap: 12px; justify-items: start; scroll-margin-top: 90px; }
.pilot h3 { font-size: 2rem; }
.pilot p:not(.etikett) { max-width: 40em; }
.pilot .etikett { margin-bottom: 0; }
.pilot .knapp { margin-top: 8px; }
@media (min-width: 860px) { .pilot { padding: 38px 40px; } }

/* Helt */
.helt { padding: 40px 0 64px; }
.helt-inn { display: grid; gap: 40px; align-items: center; }
.helt h1 { font-size: clamp(2.6rem, 8.4vw, 5rem); max-width: 13ch; }
.ingress { font-size: clamp(1.1rem, 2.4vw, 1.3rem); color: var(--demp); margin-top: 18px; max-width: 34em; }
.helt .handling { margin-top: 26px; }
.trygg { margin-top: 18px; font-size: .95rem; color: var(--demp); }
@media (min-width: 900px) {
  .helt { padding: 72px 0 96px; }
  .helt-inn { grid-template-columns: 1.15fr .85fr; gap: 64px; }
}

/* Telefonen: eksempel på flyten, laget i HTML */
.tlf-ramme { margin: 0; justify-self: center; width: min(340px, 100%); }
.tlf { background: #111; border-radius: 44px; padding: 12px; box-shadow: 0 40px 70px -40px rgb(21 23 26 / .55); }
.tlf-topp { background: var(--merke); color: #fff; border-radius: 34px 34px 0 0; padding: 26px 22px 14px; }
.tlf-hvem { display: block; font: 700 1.25rem/1.1 var(--tittel); }
.tlf-under { font-size: .8rem; opacity: .8; }
.tlf-tråd { background: #f4f3ef; border-radius: 0 0 34px 34px; padding: 16px 14px 20px; display: grid; gap: 8px; font-size: .9rem; line-height: 1.35; }
.hendelse { justify-self: center; font-size: .75rem; color: var(--demp); background: #e9e6df; border-radius: 999px; padding: 3px 10px; }
.sms { max-width: 84%; padding: 9px 12px; border-radius: 16px; }
.sms.ut { background: var(--merke-lys); color: var(--blekk); border-bottom-left-radius: 5px; }
.sms.inn { justify-self: end; background: #fff; border: 1px solid #e6e3dc; border-bottom-right-radius: 5px; }
.sms.bilde { display: flex; gap: 5px; padding: 6px; }
.sms.bilde span { width: 46px; height: 36px; border-radius: 8px; background: repeating-linear-gradient(45deg, #e2ded5 0 6px, #ece9e2 6px 12px); }
.kort-sammendrag { margin-top: 6px; background: #fff; border: 2px solid var(--merke); border-radius: 14px; padding: 11px 13px; display: grid; gap: 2px; }
.kort-sammendrag b { font: 700 1rem/1.2 var(--tittel); color: var(--merke); letter-spacing: .01em; }
.kort-sammendrag .klar { margin-top: 4px; font-weight: 600; color: var(--merke); }
.tlf-ramme figcaption { margin-top: 14px; text-align: center; font-size: .85rem; color: var(--demp); }

/* Seksjoner */
.seksjon { padding: 72px 0; border-top: 1px solid var(--linje); }
.seksjon h2 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); max-width: 18ch; }
.seksjon-ingress { margin-top: 16px; font-size: 1.15rem; color: var(--demp); max-width: 38em; }
.merk { margin-top: 28px; color: var(--demp); max-width: 44em; }
.merk b { color: var(--blekk); }

/* Tall */
.tall { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 16px; }
.tall li { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--r); padding: 26px 26px 22px; display: grid; gap: 6px; align-content: start; }
.tall b { font: 700 clamp(3rem, 7vw, 4.2rem)/1 var(--tittel); color: var(--merke); }
.tall small { margin-top: 8px; font-size: .8rem; color: var(--demp); }
@media (min-width: 760px) { .tall { grid-template-columns: repeat(3, 1fr); } }

/* Hjulet */
.hjul { background: var(--merke); color: #fff; border-top: 0; }
.hjul h2 { color: #fff; }
.hjul-steg { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 10px; counter-reset: hjul; }
.hjul-steg li { counter-increment: hjul; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: baseline;
                padding: 16px 0; border-top: 1px solid rgb(255 255 255 / .18); }
.hjul-steg li::before { content: counter(hjul); grid-row: span 2; font: 700 1.6rem/1 var(--tittel); color: var(--merke-mid); }
.hjul-steg b { font: 700 1.6rem/1.1 var(--tittel); }
.hjul-steg span { color: rgb(255 255 255 / .75); }
.hjul-steg li:last-child::after { content: "↻"; grid-column: 2; font-size: 1.4rem; color: var(--merke-mid); margin-top: 6px; }
@media (min-width: 900px) {
  .hjul-steg { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .hjul-steg li { grid-template-columns: 1fr; padding: 22px 22px 0 0; border-top: 2px solid rgb(255 255 255 / .25); }
  .hjul-steg li::before { grid-row: auto; margin-bottom: 14px; }
  .hjul-steg li:last-child::after { grid-column: 1; }
}

/* Pakkene */
.pakker { display: grid; gap: 18px; margin-top: 40px; }
.pakke { background: var(--flate); border: 1px solid var(--linje); border-radius: var(--r); padding: 30px 28px; }
.pakke h3 { font-size: 2rem; margin-bottom: 18px; }
.pakke-mork { background: var(--blekk); color: #fff; border-color: var(--blekk); }
.pakke-mork .etikett { color: var(--merke-mid); }
.liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.liste li { padding-left: 26px; position: relative; color: var(--demp); }
.liste li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--merke); border-bottom: 2.5px solid var(--merke); transform: rotate(-45deg); }
.liste b { color: var(--blekk); font-weight: 600; }
.pakke-mork .liste li { color: rgb(255 255 255 / .72); }
.pakke-mork .liste b { color: #fff; }
.pakke-mork .liste li::before { border-color: var(--merke-mid); }
@media (min-width: 860px) { .pakker { grid-template-columns: 1.1fr 1fr; } .pakke { padding: 38px 40px; } }

/* Slik starter det */
.steg { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 16px; counter-reset: steg; }
.steg li { counter-increment: steg; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--r); padding: 26px; display: grid; gap: 6px; }
.steg li::before { content: counter(steg); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
                   background: var(--merke-lys); color: var(--merke); font: 700 1.3rem/1 var(--tittel); margin-bottom: 10px; }
.steg b { font: 700 1.5rem/1.1 var(--tittel); }
.steg span { color: var(--demp); }
@media (min-width: 760px) { .steg { grid-template-columns: repeat(3, 1fr); } }

/* Hvem vi er */
.folk { display: flex; flex-wrap: wrap; gap: 40px 72px; margin-top: 44px; }
.person { display: grid; gap: 2px; }
.person .bilde { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; }
.person b { font: 700 1.4rem/1.1 var(--tittel); }
.person span:last-child { color: var(--demp); }

/* Kontakt */
.kontakt { background: var(--merke); color: #fff; border-top: 0; }
.kontakt h2 { color: #fff; }
.kontakt-inn > p { margin: 16px 0 28px; font-size: 1.15rem; color: rgb(255 255 255 / .8); max-width: 34em; }

/* Bunn */
.bunn { background: var(--merke-mork); color: rgb(255 255 255 / .7); font-size: .9rem; }
.bunn-inn { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding: 26px 0; }
.bunn .ordmerke { color: #fff; }
.bunn a:not(.ordmerke) { color: #fff; text-underline-offset: 3px; }

/* Tekstsider (personvern) */
.tekstside { padding: 48px 0 80px; }
.tekstside > * { max-width: 44em; }
.tekstside h1 { font-size: clamp(2.6rem, 8vw, 4rem); }
.tekstside .ingress { margin-top: 14px; }
.tekstside .oppdatert { margin-top: 10px; font-size: .9rem; color: var(--demp); }
.tekstside h2 { font-size: 1.8rem; margin: 44px 0 12px; }
.tekstside p + p { margin-top: 12px; }
.tekstside ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.tekstside a { color: var(--merke); text-underline-offset: 3px; }