/* ══════════════════════════════════════════════════════════════════
   SJØ OG LAND SERVICE AS — sjøentreprenør, Bergen
   ------------------------------------------------------------------
   Paletten er hentet ut av fotoet av M/S Plutselig, pikselvis.
   Ikke gjettet: #001837 er skroget ved baugen, #00669d er skroget
   midtskips, #67788b er åssiden bak, #a0a4a9 er sjø og himmel
   (41 % av bildet), #575635 er skogen.

   Grepet i designet er VANNLINJEN. Alt dette firmaet driver med
   ligger i forhold til overflaten: kaia er over, ilesteinen er på
   bunnen, berging henter noe opp. Sida faller derfor nedover — lys
   himmelgrå på toppen, dypt marineblått nederst — og dybdeskalaen
   i venstre marg er ekte informasjon, ikke pynt: den forteller
   kunden på hvilket dyp hver tjeneste utføres.

   Fonter er selvhostet. Google Fonts blokkerte gjengivelsen i
   1 960 ms på mobil på festivalsida — den feilen gjør vi ikke igjen.
   ══════════════════════════════════════════════════════════════════ */

/* ── Fonter ────────────────────────────────────────────────────── */
/* Archivo og Plex Sans er variable (verifisert med fontTools:
   wght 100–900 og 100–700). Én fil dekker hele vektspennet. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonter/archivo-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonter/archivo-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/fonter/plex-sans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/fonter/plex-sans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonter/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonter/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Grunnverdier ──────────────────────────────────────────────── */

:root {
  /* Farger, hentet ut av fotoet */
  --dyp:      #001837;   /* skroget ved baugen — grunnfarge under vann */
  --dyp-myk:  #0a2447;   /* ett hakk opp, til kort på mørk bunn */
  --skrog:    #00669d;   /* skroget midtskips — eneste sterke farge */
  --skrog-lys:#3d92c4;   /* lenker på mørk bunn */
  --skifer:   #5e6e7f;   /* åssiden, mørknet — sekundærtekst PÅ LYS BUNN (4.61:1)
                            Originalen #67788b fra fotoet ga 3.99:1 og strøk på AA. */
  --skifer-lys:#8b9aab;  /* samme kulør, lysnet — sekundærtekst PÅ MØRK BUNN (5.4–6.6:1) */
  --dis:      #a0a4a9;   /* sjø og himmel */
  --oliven:   #575635;   /* skogen — brukes én gang, om land */
  --lys:      #eef1f2;   /* sidegrunn over vannlinjen */
  --kvit:     #ffffff;
  --strek:    #cdd5d9;   /* hårstrek på lys bunn */
  --strek-mork: rgba(255,255,255,.14);  /* hårstrek på mørk bunn */

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --brod:    'Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --tall:    'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Mål */
  --bredde: 1180px;
  --marg: clamp(1.15rem, 4vw, 3rem);
  --rail: 124px;         /* bredden på dybdeskalaen i venstre marg */
  --topp: 60px;          /* målt høyde på den faste karusell-linja (33 px på mobil) */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topp) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--lys);
  color: var(--dyp);
  font-family: var(--brod);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--skrog); text-underline-offset: .18em; }
a:hover { color: var(--dyp); }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.innhold {
  width: 100%;
  max-width: var(--bredde);
  margin-inline: auto;
  padding-inline: var(--marg);
}

/* Etikett-typografi: liten, mono, sperret. Brukes til alt som er
   en MERKELAPP og ikke en setning — dybder, org.nr, seksjonsnavn. */
.merkelapp {
  font-family: var(--tall);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--skifer);
  margin: 0;
}

/* ── Plassholdere ──────────────────────────────────────────────── */
/* Alt vi ikke har fått fra kunden ennå merkes slik. I utkastmodus
   lyser de gult, så det er umulig å publisere noe halvferdig ved
   et uhell. Fjern klassen «utkast» på <body> for å slå det av. */

/* IKKE white-space: nowrap her. Den lange plassholderen i «Siste jobber»
   ble 812 px bred på en 390 px skjerm og dyttet hele sida sidelengs.
   Korte plassholdere som ‹telefonnummer› har ingen mellomrom og henger
   sammen av seg selv. */
.mangler {
  font-family: var(--tall);
  font-size: .92em;
  font-style: normal;
  overflow-wrap: anywhere;
}
.utkast .mangler {
  background: #ffd400;
  color: #241c00;
  padding: .06em .38em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  font-weight: 500;
}

/* ── Topplinje ─────────────────────────────────────────────────── */
/* LYS, ikke marineblå. Grunnen er logoen: den er tegnet med marineblå
   ring og marineblå tekst, og på marineblå bunn forsvinner halve merket.
   Å gi logoen den grunnen den er laget for var riktigere enn å operere
   i logoen — og den lyse linja gir dessuten et skarpere skille mot det
   mørke toppbildet under. */

/* Topplinja er nå BARE karusellen. Cato droppet raden med merke og
   ringeknapp 24.08. Nummeret står fortsatt i karusellteksten, i
   toppbildets knapperad og i kontaktkortet. */
.topp {
  position: sticky;
  top: 0;
  z-index: 50;
  display: block;
}
.topp .innhold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--topp);
  padding-block: .5rem;
}
.merke {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--dyp);
  min-width: 0;
}
.merke img {
  height: 46px;
  width: auto;
  flex: none;
}
.merke-tekst {
  display: block;
  min-width: 0;
}
.merke-navn {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.95rem, 2.6vw, 1.1rem);
  letter-spacing: -.005em;
  line-height: 1.1;
  color: var(--dyp);
  white-space: nowrap;
}
.merke-sted {
  display: block;
  font-family: var(--tall);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--skifer);
  margin-top: .12rem;
}

/* Ringeknappen. Den er hele poenget med sida — den som trenger
   berging leser ikke, han ringer. Derfor er den alltid synlig. */
.ring {
  font-family: var(--tall);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--kvit);
  background: var(--skrog);
  text-decoration: none;
  padding: .62rem 1rem;
  border-radius: 3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  transition: background .15s ease, transform .15s ease;
}
.ring:hover { background: var(--dyp); color: var(--kvit); transform: translateY(-1px); }
.ring::before {
  content: "";
  width: .82em; height: .82em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--tlf-ikon) center/contain no-repeat;
          mask: var(--tlf-ikon) center/contain no-repeat;
}
:root {
  --tlf-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

/* Under 560 px tar navnetrekket for mye plass ved siden av en
   tommelvennlig ringeknapp. Da står merket alene — logoen bærer det. */
@media (max-width: 559px) {
  .merke-tekst { display: none; }
  .merke img { height: 42px; }
}

/* ── Hero ──────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--dyp);
  min-height: min(88svh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero picture, .hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero img { object-fit: cover; object-position: 50% 38%; }

/* Fotoet er lyst og luftig. Teksten trenger en grunn å stå på, men
   et flatt sort slør dreper bildet. To lag i stedet: en mørk kile
   nedenfra, og et svakt kaldt slør over hele for å binde fotoet til
   paletten. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0,17,40,.95) 0%, rgba(0,17,40,.80) 34%, rgba(0,17,40,.22) 66%, rgba(0,17,40,.02) 100%),
    linear-gradient(to right, rgba(0,20,46,.66) 0%, rgba(0,20,46,.40) 40%, rgba(0,24,55,0) 74%);
}
.hero .innhold {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.6rem, 7vw, 4.6rem);
}
.hero-eyebrow {
  color: #8fcbea;
  margin-bottom: 1.1rem;
}
.hero h1 {
  color: var(--kvit);
  font-size: clamp(2.05rem, 6.4vw, 4rem);
  font-weight: 800;
  max-width: 17ch;
  margin-bottom: 1.1rem;
}
.hero-lead {
  color: #d3dce4;
  font-size: clamp(1.02rem, 2.2vw, 1.19rem);
  line-height: 1.58;
  max-width: 52ch;
  margin: 0 0 1.9rem;
}
.hero-lead strong { color: var(--kvit); font-weight: 600; }

/* ── Delt topp på skjerm ──────────────────────────────────────────────
   Arbeidsbildene fra båten er STÅENDE: mannen står øverst og lasten
   henger nederst. I en bred stripe ryker alltid den ene — målt på dette
   bildet spenner de to over 1165 px, mens en 1440×820-stripe bare kan
   vise 656 px av kilden. Derfor deles toppen i to over 900 px: teksten
   får venstre halvdel på marineblått, fotoet får høyre i full høyde.
   Under 900 px faller det tilbake til fullbredde-bildet, som passer
   fint der skjermen selv er stående. */
@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .hero picture {
    position: relative;
    inset: auto;
    grid-area: 1 / 2;
    width: 100%;
    height: 100%;
  }
  /* Bildet er staaende, kolonnen er bredere enn utsnittet paa store
     skjermer, og da kutter nettleseren topp og bunn. Maalt: 328 kilde-
     piksler ryker paa 1920 px. Hodet til mannen ligger paa y 90-160 i
     utsnittet, altsaa akkurat i det som ryker naar utsnittet sentreres.
     Derfor forankres bildet naer toppen i staden for i midten. */
  .hero img { position: absolute; inset: 0; object-position: 50% 12%; }
  .hero .innhold {
    grid-area: 1 / 1;
    max-width: none;
    margin-inline: 0;
    width: 100%;
    padding-inline: clamp(1.6rem, 5vw, 4rem) clamp(1.6rem, 3.5vw, 3rem);
  }
  /* Venstre side skal ikke være en flat mørk flate. Samme foto legges
     bak teksten — uskarpt, avmettet og nedtonet — og marineblåtten toner
     ut mot høyre i stedet for å stoppe i en kant. Det er samme fil som
     <picture> alt har lastet, så det koster ingen ny nedlasting.
     Skaleringen på 1.06 skjuler at blur() gjør ytterkantene
     gjennomsiktige. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("/bilder/hero-lofte-1152.jpg");
    background-size: cover;
    background-position: 50% 24%;
    filter: blur(26px) saturate(.66) brightness(.72);
    transform: scale(1.06);
  }
  /* Selve fotokanten tones ut i det uskarpe laget bak. Uten dette står
     det en synlig loddrett strek midt på skjermen der halvdelene møtes. */
  .hero picture {
    z-index: 1;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.22) 10%, rgba(0,0,0,.65) 24%, #000 40%);
    mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.22) 10%, rgba(0,0,0,.65) 24%, #000 40%);
  }
  /* Lang, myk overgang. Fadet starter tidlig og slipper taket sent, så
     det ikke finnes noe punkt der man ser at fotoet «begynner». */
  .hero::after {
    z-index: 2;
    background: linear-gradient(to right,
      rgba(0, 17, 40, .86) 0%,
      rgba(0, 17, 40, .78) 24%,
      rgba(0, 18, 42, .60) 38%,
      rgba(0, 19, 44, .34) 48%,
      rgba(0, 21, 48, .14) 58%,
      rgba(0, 24, 55, 0) 70%);
  }
  .hero .innhold { z-index: 3; }
}

.knapper { display: flex; flex-wrap: wrap; gap: .75rem; }

.knapp {
  font-family: var(--tall);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .015em;
  text-decoration: none;
  padding: .82rem 1.5rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;          /* tommelvennlig */
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.knapp-full {
  background: var(--skrog);
  color: var(--kvit);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}
.knapp-full:hover { background: #0079b8; color: var(--kvit); transform: translateY(-1px); }
.knapp-full::before {
  content: "";
  width: .95em; height: .95em; flex: none;
  background: currentColor;
  -webkit-mask: var(--tlf-ikon) center/contain no-repeat;
          mask: var(--tlf-ikon) center/contain no-repeat;
}
.knapp-tom {
  border: 1px solid rgba(255,255,255,.42);
  color: var(--kvit);
  background: rgba(255,255,255,.04);
}
.knapp-tom:hover { border-color: var(--kvit); background: rgba(255,255,255,.11); color: var(--kvit); }

/* ── Vannlinjen ────────────────────────────────────────────────── */
/* Signaturen i hele designet: én hårstrek merket 0 m, der sida går
   fra å være over vann til å være under. */

.vannlinje {
  position: relative;
  background: var(--lys);
  border-top: 2px solid var(--dyp);
}
.vannlinje .innhold {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .62rem;
}
.vannlinje .merkelapp { color: var(--dyp); font-weight: 500; }
.vannlinje .strek {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--strek) 0 6px, transparent 6px 12px);
}

/* ── Akutt ─────────────────────────────────────────────────────── */
/* Rett under overflaten, fordi det er der ulykken skjer. Én farge,
   ingen pynt, og knappen er det eneste blikket skal finne. */

.akutt {
  background: var(--dyp);
  color: #d3dce4;
  border-bottom: 1px solid var(--strek-mork);
}
.akutt .innhold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.1rem, 3vw, 2.4rem);
  padding-block: clamp(1.6rem, 4vw, 2.3rem);
}
.akutt .merkelapp { color: #ff9d3d; margin-bottom: .5rem; }
.akutt h2 {
  color: var(--kvit);
  font-size: clamp(1.12rem, 2.6vw, 1.42rem);
  font-weight: 700;
  max-width: 30ch;
  line-height: 1.22;
}
.akutt p { margin: .55rem 0 0; color: #a8b8c6; max-width: 46ch; }
.akutt .knapp { flex: none; }

/* ── Nedstigningen ─────────────────────────────────────────────── */
/* Bakgrunnen faller fra lys himmelgrå til dypt marineblått etter
   hvert som seksjonene går nedover i vannet. */

.seksjon { padding-block: clamp(3rem, 7vw, 5.2rem); }

.grunn-lys  { background: var(--lys); color: var(--dyp); }
.grunn-dyp  { background: var(--dyp); color: #d3dce4; }

/* Selve nedstigningen. Den ligger som et eget felt MELLOM seksjonene,
   ikke bak tekst — et fargeforløp bak brødtekst betyr at kontrasten
   varierer nedover avsnittet, og da er det garantert et sted der den
   er for lav. Her er overgangen tom, og hver seksjon har én farge. */
.overgang {
  height: clamp(96px, 13vw, 170px);
  /* Flere stopp enn nødvendig, med vilje: et forløp i to stopp får en
     synlig stripe på midten på 8-bits skjermer. */
  background: linear-gradient(to bottom,
    var(--lys) 0%, #d4dbe0 18%, #a9b6c0 38%,
    #7286a0 58%, #3f5878 78%, var(--dyp) 100%);
}
.grunn-dyp h2, .grunn-dyp h3 { color: var(--kvit); }
.grunn-dyp .merkelapp { color: var(--skrog-lys); }
.grunn-dyp a { color: var(--skrog-lys); }
.grunn-dyp a:hover { color: var(--kvit); }

.seksjon-topp { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.seksjon-topp h2 {
  font-size: clamp(1.65rem, 4.2vw, 2.5rem);
  margin-top: .7rem;
  max-width: 22ch;
}
.seksjon-topp p.ingress {
  max-width: 58ch;
  margin: .9rem 0 0;
  font-size: 1.06rem;
  color: var(--skifer);
}
.grunn-dyp .seksjon-topp p.ingress { color: #a8b8c6; }

/* ── Tjenester ─────────────────────────────────────────────────── */
/* Dybdeskalaen til venstre er ryggraden. Hvert kort henger på den
   på sitt eget arbeidsdyp. Under 900 px faller skalaen bort og
   dybden vises som en merkelapp inne i kortet i stedet — den er
   fortsatt informasjon, den trenger bare ikke en akse. */

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

.tjeneste {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: 0 clamp(1rem, 3vw, 2.2rem);
  padding-block: clamp(1.5rem, 3vw, 2.1rem);
  border-top: 1px solid var(--strek);
  position: relative;
}
.grunn-dyp .tjeneste { border-top-color: var(--strek-mork); }
.tjeneste:last-child { border-bottom: 1px solid var(--strek); }
.grunn-dyp .tjeneste:last-child { border-bottom-color: var(--strek-mork); }

/* Selve aksen */
.tjeneste-dyp {
  font-family: var(--tall);
  font-size: .78rem;
  font-weight: 500;
  color: var(--skrog);
  text-align: right;
  padding-top: .32rem;
  position: relative;
  white-space: nowrap;
}
.grunn-dyp .tjeneste-dyp { color: var(--skrog-lys); }
.tjeneste-dyp::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(1rem, 3vw, 2.2rem) / 2);
  top: .62rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--skrog);
  transform: translateX(50%);
}
.grunn-dyp .tjeneste-dyp::after { background: var(--skrog-lys); }

.tjeneste > div > h3 {
  font-size: clamp(1.18rem, 2.6vw, 1.45rem);
  font-weight: 700;
  margin-bottom: .5rem;
}
.tjeneste > div > p { margin: 0; max-width: 60ch; color: var(--skifer); }
.grunn-dyp .tjeneste > div > p { color: #a8b8c6; }
.tjeneste .les-mer {
  display: inline-block;
  margin-top: .8rem;
  font-family: var(--tall);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

@media (max-width: 899px) {
  .tjeneste { grid-template-columns: 1fr; gap: 0; }
  .tjeneste-dyp {
    text-align: left;
    padding-top: 0;
    margin-bottom: .5rem;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .tjeneste-dyp::after { display: none; }
}

/* ── Siste jobber ──────────────────────────────────────────────── */

/* ── Siste jobber ──────────────────────────────────────────────── */
/* Bildene står uten bildetekst med vilje: de er tydelige nok i seg selv,
   og en oppdiktet tekst under et ekte bilde er verre enn ingen tekst.
   Alt-teksten er der likevel — den er for skjermlesere og for Google,
   ikke noe som vises. */

.jobber {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(.8rem, 2vw, 1.2rem);
}
.jobb {
  background: var(--dyp-myk);
  border: 1px solid var(--strek-mork);
  border-radius: 4px;
  overflow: hidden;
}
.jobb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.jobb:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .jobb img, .jobb:hover img { transition: none; transform: none; }
}

/* ── Fakta ─────────────────────────────────────────────────────── */

.fakta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  background: var(--strek-mork);
  border: 1px solid var(--strek-mork);
}
.fakta li {
  background: var(--dyp);
  padding: 1.2rem 1.3rem 1.35rem;
}
.fakta dt, .fakta .n {
  font-family: var(--tall);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--skifer-lys);
  display: block;
  margin-bottom: .45rem;
}
.fakta dd, .fakta .v {
  margin: 0;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--kvit);
  letter-spacing: -.01em;
}
.fakta .v small {
  display: block;
  font-family: var(--brod);
  font-size: .87rem;
  font-weight: 400;
  color: #a8b8c6;
  letter-spacing: 0;
  margin-top: .25rem;
}

/* ── Kontakt ───────────────────────────────────────────────────── */

.kontakt-rad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: start;
}
.kontakt-blokk h3 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: .55rem;
}
.kontakt-blokk p { margin: 0; color: #a8b8c6; }
.kontakt-stor {
  font-family: var(--tall);
  font-size: clamp(1.3rem, 4.5vw, 1.75rem);
  font-weight: 500;
  color: var(--kvit);
  text-decoration: none;
  letter-spacing: -.01em;
  display: inline-block;
  margin-top: .2rem;
}
.kontakt-stor:hover { color: var(--skrog-lys); }

/* ── Bunn ──────────────────────────────────────────────────────── */

.bunn {
  background: #001127;
  border-top: 1px solid var(--strek-mork);
  padding-block: 2rem 2.4rem;
  color: var(--skifer-lys);
  font-size: .88rem;
}
.bunn .innhold {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.bunn a { color: var(--skifer-lys); }
.bunn a:hover { color: var(--kvit); }
.bunn .orgnr { font-family: var(--tall); font-size: .82rem; letter-spacing: .02em; }

/* ── Hoppelenke ────────────────────────────────────────────────── */

/* Skjult med clip, ikke med left:-9999px — en boks som ligger langt
   ute i venstremargen teller fortsatt med i sidas bredde. */
.hopp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 100;
}
.hopp:focus {
  position: fixed;
  left: .5rem; top: .5rem;
  width: auto; height: auto;
  margin: 0; padding: .8rem 1.2rem;
  clip-path: none;
  background: var(--kvit);
  color: var(--dyp);
  font-family: var(--tall);
  font-size: .9rem;
  text-decoration: none;
}

/* ── Visittkortet ──────────────────────────────────────────────── */
/* Kontaktopplysningene ligger på et hvitt kort inne i den mørke
   seksjonen. To grunner: logoen er tegnet for lys bunn og trenger
   den for å leses, og et hvitt kort med logo, telefon og org.nr ER
   i praksis et visittkort — formen sier hva innholdet er. */

.visittkort {
  background: var(--kvit);
  border-radius: 5px;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.visittkort-logo {
  width: clamp(110px, 16vw, 168px);
  height: auto;
  flex: none;
}
.visittkort .kontakt-rad { gap: clamp(1.2rem, 3vw, 2.2rem); }
.visittkort .kontakt-blokk h3 { color: var(--dyp); }
.visittkort .kontakt-blokk p { color: var(--skifer); }
.visittkort .kontakt-stor { color: var(--dyp); }
.visittkort .kontakt-stor:hover { color: var(--skrog); }
.visittkort a { color: var(--skrog); }
.visittkort a:hover { color: var(--dyp); }

@media (max-width: 700px) {
  .visittkort { grid-template-columns: 1fr; justify-items: start; }
}

/* E-postadressen er lang. På en smal skjerm må den få bryte, ellers
   sprenger den visittkortet. */
.kontakt-epost {
  font-size: clamp(.9rem, 3.4vw, 1.16rem);
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* ── Hvem du snakker med ───────────────────────────────────────── */
/* Et lite firma har ingen sentralbord. Da er det verdifullt å si rett
   ut hvem som tar hva — den som lurer på en faktura skal ikke ringe
   mannen som står i en bergingsjobb. */

.hvem {
  /* Visittkortet er et 2-kolonners rutenett (logo | opplysninger).
     Uten denne havner blokka i logokolonnen i rad 2 og blir en smal
     strimmel under merket. */
  grid-column: 1 / -1;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding-top: clamp(1.3rem, 3vw, 1.8rem);
  border-top: 1px solid var(--strek);
}
.hvem h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--dyp);
  margin-bottom: 1rem;
}
.hvem ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 3vw, 2.2rem);
}
.hvem li { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hvem-rolle {
  font-family: var(--tall);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--skifer);
}
.hvem-navn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dyp);
  margin-bottom: .25rem;
}
.hvem a {
  color: var(--skrog);
  font-size: .95rem;
  overflow-wrap: anywhere;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,102,157,.35);
  align-self: flex-start;
  padding-block: .18rem;
}
.hvem a:hover { color: var(--dyp); border-bottom-color: currentColor; }

/* ── Slagordet ─────────────────────────────────────────────────── */
/* «Et hav av muligheter». Den står IKKE som overskrift: en fremmed
   som lander på sida må først få vite hva firmaet gjør, og det er
   h1-en sin jobb — både for leseren og for Google. Slagordet kommer
   rett etter, som firmaets egen stemme, med en strek foran seg slik
   et motto skrives. */

.slagord {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  letter-spacing: -.01em;
  /* IKKE --skrog-lys her. Målt mot fotoet ga den 1,84:1 — under kravet
     selv for stor tekst. Et foto har ingen «bakgrunnsfarge», så en
     mellomtone vil alltid kollidere med noe. Denne er lys nok til å
     holde mot hele bildet, og den blå tonen beholdes i streken. */
  color: #cfe6f5;
  margin: 0 0 1.25rem;
  text-shadow: 0 1px 12px rgba(0,17,40,.65);
  display: flex;
  align-items: center;
  gap: .85rem;
}
.slagord::before {
  content: "";
  width: clamp(28px, 6vw, 52px);
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: var(--skrog-lys);
}

.bunn-slagord {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--kvit);
  margin: 0;
  letter-spacing: -.008em;
}

/* ── Tjenestesider ─────────────────────────────────────────────── */
/* Undersidene har ikke toppbilde. Det er et valg, ikke en mangel: vi
   har ikke ekte arbeidsbilder ennå, og et arkivbilde av en tilfeldig
   båt ville vært en løgn på en side som skal bygge tillit. Et rolig
   marineblått felt gjør jobben, og sida laster raskere. */

.sidetopp {
  background: var(--dyp);
  color: #d3dce4;
  padding-block: clamp(2rem, 5vw, 3.4rem) clamp(2.2rem, 5vw, 3.6rem);
}
.sidetopp h1 {
  color: var(--kvit);
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  max-width: 18ch;
  margin-bottom: 1rem;
}
.sidetopp-dyp { color: var(--skrog-lys); margin-bottom: .8rem; }
.sidetopp-lead {
  color: #b9c8d6;
  font-size: clamp(1.02rem, 2.2vw, 1.17rem);
  line-height: 1.58;
  max-width: 54ch;
  margin: 0 0 1.9rem;
}

.brodsmule {
  font-family: var(--tall);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--skifer-lys);
  margin-bottom: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.brodsmule a { color: var(--skifer-lys); text-decoration: none; border-bottom: 1px solid transparent; }
.brodsmule a:hover { color: var(--kvit); border-bottom-color: currentColor; }
.brodsmule [aria-current] { color: var(--kvit); }

/* Brødteksten på undersidene. Målet er lesbarhet, ikke bredde:
   en linje på 70+ tegn er tung å følge. */
.tekstside { max-width: 74ch; }
.tekstblokk + .tekstblokk { margin-top: clamp(2rem, 4.5vw, 3rem); }
.tekstblokk h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.8rem);
  margin-bottom: .85rem;
  max-width: 24ch;
}
.tekstblokk p {
  margin: 0 0 1rem;
  color: var(--skifer);
  max-width: 68ch;
}
.tekstblokk p:last-child { margin-bottom: 0; }
.tekstblokk strong { color: var(--dyp); font-weight: 600; }

/* Lenker videre til de andre tjenestene */
.andre {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  background: var(--strek-mork);
  border: 1px solid var(--strek-mork);
}
.andre li { background: var(--dyp); }
.andre a {
  display: block;
  padding: 1.15rem 1.3rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--kvit);
  text-decoration: none;
  min-height: 56px;
  transition: background .15s ease;
}
.andre a::after { content: " →"; color: var(--skrog-lys); }
.andre a:hover { background: var(--dyp-myk); color: var(--kvit); }

/* ── Facebook-knappen ──────────────────────────────────────────── */
/* Cato: «typisk facebook stil slik at alle skjønner hva det er».
   Derfor Metas egen farge og Metas egen f — ikke vår palett. Poenget
   med et gjenkjennelig merke er nettopp at det IKKE ser ut som resten
   av sida; det er slik folk vet hva som skjer når de trykker.

   Fargen er #0866FF, Metas nyere blå. Den klassiske #1877F2 gir bare
   4,23:1 mot hvit tekst og stryker på WCAG AA. #0866FF gir 4,82:1 og
   er like gjenkjennelig. */

:root {
  --fb-bla: #0866ff;
  --fb-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z'/%3E%3C/svg%3E");
}

.knapp-fb {
  background: var(--fb-bla);
  color: var(--kvit);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}
.knapp-fb:hover { background: #0a58d6; color: var(--kvit); transform: translateY(-1px); }
.knapp-fb::before {
  content: "";
  width: 1.15em; height: 1.15em; flex: none;
  background: currentColor;
  -webkit-mask: var(--fb-ikon) center/contain no-repeat;
          mask: var(--fb-ikon) center/contain no-repeat;
}

/* ── Tekstkarusellen ───────────────────────────────────────────── */
/* Egen linje øverst, over raden med merke og ringeknapp. Cato ville ha
   den så stor som mulig, så den har fått hele bredden og Archivo i tung
   vekt med god sperring — samme skrift som overskriftene, så den hører
   hjemme i stedet for å se påklistret ut.

   Marineblå bunn med hvit tekst: da leses den som et skilt, og den
   skiller seg fra den hvite linja under uten å bruke en ny farge.

   Fire kopier i et spor som flyttes 50 % til venstre. To kopier er
   alltid bredere enn skjermen, så løkka blir sømløs. Ingen JavaScript. */

.ticker {
  background: var(--dyp);
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.12);
  /* Mykner kantene så teksten glir inn og ut i stedet for å bli klippet */
  -webkit-mask: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.ticker-spor {
  display: flex;
  flex: none;
  white-space: nowrap;
  will-change: transform;
  animation: rull 52s linear infinite;
}
.ticker-tekst {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.5vw, 1.95rem);
  line-height: 1.9;
  letter-spacing: .07em;
  color: var(--kvit);
  padding-right: 2.5rem;
}
@keyframes rull {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Stopp når musa hviler over, så teksten kan leses ferdig */
.ticker:hover .ticker-spor { animation-play-state: paused; }

/* Har noen slått av bevegelse i systemet, skal teksten stå stille og
   være lesbar — ikke fryse midt i en bokstav. Den generelle
   reduced-motion-regelen lenger oppe setter varigheten til 0,001 ms,
   og det ville etterlatt sporet i sluttposisjonen. */
@media (prefers-reduced-motion: reduce) {
  .ticker-spor {
    animation: none !important;
    transform: none !important;
  }
}