/* ==========================================================================
   Opsahl Dekk AS — Vianor Hokksund
   Stilark, demo/utkast
   --------------------------------------------------------------------------
   1.  Designtokens
   2.  Grunnlag og typografi
   3.  Byggeklosser (wrap, knapper, etiketter, seksjonshoder)
   4.  Topplinje og header
   5.  Hero
   6.  Booking
   7.  Partnerstripe
   8.  Døgnvakt
   9.  Tjenester
   10. Bildebånd
   11. Dekkhotell
   12. Tunge kjøretøy
   13. Mønsterdybde
   14. Anmeldelser
   15. Om oss
   16. Spørsmål og svar
   17. Kontakt og kart
   18. Footer og handlingslinje
   19. Responsivt
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Designtokens
   -------------------------------------------------------------------------- */
:root {
  /* Merkevare. Flate farger, ingen gradienter. */
  --orange:       #ef7c15;
  --orange-dark:  #d4680a;
  --orange-ink:   #9c4906;   /* holder AA mot lys bakgrunn */
  --orange-wash:  #fdf2e5;
  --orange-line:  #f3ddc2;

  /* Google-gult til stjerner */
  --gold:         #f5a623;

  /* Nøytraler, varm gråskala */
  --ink:          #0e141b;
  --ink-2:        #151d26;
  --ink-3:        #1e2833;
  --ink-line:     #29343f;
  --text:         #3d4650;
  --text-soft:    #646e79;
  --paper:        #f5f3f0;
  --paper-2:      #ece8e3;
  --white:        #ffffff;
  --line:         #e1dcd5;
  --line-soft:    #edeae5;

  /* Typografi */
  --display: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --body:    'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Mål */
  --wrap: 1180px;
  --pad: 26px;
  --r: 8px;
  --r-sm: 6px;
  --r-lg: 12px;

  /* Skygger, lette */
  --shadow: 0 1px 2px rgba(14, 20, 27, .04), 0 8px 24px rgba(14, 20, 27, .06);
  --shadow-lg: 0 2px 6px rgba(14, 20, 27, .05), 0 24px 60px rgba(14, 20, 27, .14);

  --topbar-h: 38px;
  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Grunnlag og typografi
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.8vw, 3.55rem); font-weight: 700; letter-spacing: -0.032em; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.45rem); }
h3 { font-size: clamp(1.08rem, 1.6vw, 1.25rem); letter-spacing: -0.015em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange-dark); }

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

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

strong { color: var(--ink); font-weight: 600; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Byggeklosser
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding: clamp(64px, 8vw, 108px) 0; }
.section--tight { padding: clamp(48px, 5.5vw, 74px) 0; }
.section--paper { background: var(--paper); }

/* Seksjonshode: tittel til venstre, ingress til høyre */
.head { margin-bottom: clamp(34px, 4vw, 52px); }
.head__rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 56px;
  align-items: start;
}
.head h2 { margin-bottom: 0; }
.head__lead {
  font-size: 1.08rem;
  color: var(--text-soft);
  margin: 0;
  max-width: 46ch;
}
.head--solo .head__rad { grid-template-columns: 1fr; }
.head--senter { text-align: center; }

/* Knapper. Flate flater, ingen gradient. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 15px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}

.btn--primary { background: var(--orange); color: #1b1003; }
.btn--primary:hover { background: var(--orange-dark); color: #fff; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }

.btn--onDark { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.28); }
.btn--onDark:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5); color: #fff; }

.btn--sm { padding: 11px 16px; font-size: .9rem; }
.btn--lg { padding: 17px 28px; font-size: 1.02rem; }

.btn .ico { width: 17px; height: 17px; fill: currentColor; flex: none; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Tekstlenke med pil */
.link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .93rem;
  color: var(--orange-ink);
  text-decoration: none;
}
.link .ico { width: 15px; height: 15px; fill: currentColor; transition: transform .15s ease; }
.link:hover .ico { transform: translateX(3px); }

/* Merkelapp */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--orange-ink);
  background: var(--orange-wash);
  border: 1px solid var(--orange-line);
  border-radius: 100px;
  padding: 5px 11px;
}

/* --------------------------------------------------------------------------
   4. Topplinje og header
   -------------------------------------------------------------------------- */
.topbar {
  background: #0a0f14;
  color: #8d99a5;
  font-size: .82rem;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.topbar__left { display: flex; align-items: center; gap: 10px; }
.topbar__right { display: flex; align-items: center; gap: 22px; }
.topbar a { color: #cdd5dd; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar strong { color: #fff; font-weight: 600; }
.topbar .mono { font-weight: 600; color: var(--orange); }

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(14, 20, 27, .93);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hdr .wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 42px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  color: #c5cdd6;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav a.is-active { color: #fff; }

.hdr__cta { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none;
  width: 46px; height: 42px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 19px; height: 2px;
  background: #fff;
  position: relative;
  transition: background-color .15s ease;
}
.burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px; height: 2px;
  background: #fff;
  transition: transform .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hero__media video.is-ready { opacity: 1; }

/* Scrim: mørkt nok til at teksten holder, lyst nok til at anlegget synes. */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  background: linear-gradient(100deg,
    rgba(8,12,17,.90) 0%,
    rgba(8,12,17,.74) 34%,
    rgba(8,12,17,.34) 62%,
    rgba(8,12,17,.12) 100%);
}
.hero::after {
  background: linear-gradient(180deg,
    rgba(8,12,17,.5) 0%,
    rgba(8,12,17,0) 26%,
    rgba(8,12,17,.1) 58%,
    rgba(8,12,17,.72) 100%);
}

.hero__inner {
  position: relative;
  padding: clamp(64px, 8.5vw, 116px) 0 0;
  max-width: 730px;
}
.hero h1 {
  color: #fff;
  margin-bottom: 22px;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--orange);
}
.hero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: #e6ebf0;
  max-width: 56ch;
  margin-bottom: 30px;
  text-shadow: 0 1px 18px rgba(0,0,0,.6);
}
.hero .actions { margin-bottom: clamp(44px, 6vw, 72px); }

/* Faktarail nederst i heroen */
.hero__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.18);
  max-width: 640px;
  padding-bottom: 78px;
}
.hero__rail div {
  padding: 20px 26px 0 0;
  border-right: 1px solid rgba(255,255,255,.14);
}
.hero__rail div:last-child { border-right: 0; padding-left: 26px; }
.hero__rail dt {
  font-size: .84rem;
  font-weight: 500;
  color: var(--orange);
  margin-bottom: 5px;
}
.hero__rail dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  line-height: 1.35;
}
.hero__rail dd span {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: .88rem;
  color: #aab5c0;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   6. Booking
   -------------------------------------------------------------------------- */
.booking { background: var(--paper); padding: clamp(56px, 6.5vw, 88px) 0; }

.booking__intro { text-align: center; max-width: 620px; margin: 0 auto clamp(30px, 4vw, 44px); }
.booking__intro h2 { margin-bottom: 14px; }
.booking__intro p { color: var(--text-soft); margin: 0; }

.booking__card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Stegindikator */
.steg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 14px;
  padding: clamp(24px, 3vw, 32px) clamp(22px, 3.5vw, 38px) 0;
}
.steg li { display: flex; align-items: center; gap: 10px; padding-top: 14px; position: relative; }
.steg li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
}
.steg li.er-ferdig::before, .steg li.er-aktiv::before { background: var(--orange); }
.steg__nr {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--text-soft);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .76rem;
  flex: none;
}
.steg li.er-aktiv .steg__nr { background: var(--orange); color: #fff; }
.steg li.er-ferdig .steg__nr { background: var(--ink); color: #fff; }
.steg__navn {
  font-family: var(--display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-soft);
  letter-spacing: -0.01em;
}
.steg li.er-aktiv .steg__navn, .steg li.er-ferdig .steg__navn { color: var(--ink); }

/* Innhold */
.booking__body { padding: clamp(24px, 3vw, 32px) clamp(22px, 3.5vw, 38px) 0; }
.booking__steg h3 { font-size: 1.3rem; margin: 0 0 22px; }
.booking__merke {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  margin: 0 0 10px;
}
.booking__gruppe + .booking__gruppe { margin-top: 26px; }

/* Valgknapper (kjoretoy og klokkeslett) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button {
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Tjenestevalg */
.valg { display: grid; gap: 10px; }
.valg button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 18px;
  align-items: center;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.valg button:hover { border-color: var(--ink); }
.valg button[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-wash); }
.valg__navn {
  grid-column: 1;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.valg__pris {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  white-space: nowrap;
}

/* Kalender */
.kal { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.kal__topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.kal__topp strong {
  font-family: var(--display);
  font-size: .98rem;
  color: var(--ink);
  text-transform: capitalize;
}
.kal__pil {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.kal__pil:hover { border-color: var(--ink); }
.kal__pil:disabled { opacity: .35; cursor: not-allowed; }
.kal__pil .ico { width: 14px; height: 14px; fill: var(--ink); }
.kal__pil--forrige .ico { transform: rotate(180deg); }
.kal__uke, .kal__dager { display: grid; grid-template-columns: repeat(7, 1fr); }
.kal__uke {
  padding: 10px 8px 4px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
}
.kal__dager { padding: 4px 8px 12px; gap: 3px; }
.kal__dager button, .kal__dager span {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: var(--body);
  font-size: .93rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.kal__dager button:hover { background: var(--paper-2); }
.kal__dager button:disabled, .kal__dager span { color: #bdb6ad; cursor: not-allowed; background: transparent; }
.kal__dager button[aria-pressed="true"] { background: var(--orange); color: #fff; font-weight: 600; }
.kal__dager button[aria-pressed="true"]:hover { background: var(--orange-dark); }

.tider { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tider button {
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 6px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.tider button:hover { border-color: var(--ink); }
.tider button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.booking__toKol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }

/* Oppsummering */
.oppsum { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.oppsum div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 18px;
  font-size: .96rem;
}
.oppsum div + div { border-top: 1px solid var(--line-soft); }
.oppsum dt { color: var(--text-soft); margin: 0; }
.oppsum dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.oppsum div.er-sum { background: var(--paper); }
.oppsum div.er-sum dd { font-family: var(--display); font-size: 1.1rem; }

/* Bunnrad */
.booking__bunn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: clamp(22px, 3vw, 28px) clamp(22px, 3.5vw, 38px);
  margin-top: clamp(22px, 3vw, 28px);
  border-top: 1px solid var(--line-soft);
}
.booking__bunn .btn:disabled { opacity: .45; cursor: not-allowed; }
.booking__bunn .btn--primary:disabled:hover { background: var(--orange); color: #1b1003; }
#bTilbake { margin-right: auto; }

/* Status under tjenester og tider: henter, tomt, eller feil */
.booking__status { font-size: .95rem; color: var(--text-soft); margin: 4px 0 0; line-height: 1.55; }
.valg + .booking__status:not([hidden]) { margin-top: 0; }

/* Etter vellykket bestilling */
.booking__ferdig { text-align: center; padding: 6px 0 clamp(26px, 3vw, 34px); outline: none; }
.booking__ferdig h3 { margin-bottom: 10px; }
.booking__ferdig > p { color: var(--text); margin: 0 auto 22px; max-width: 46ch; }
.booking__ferdig .oppsum { text-align: left; max-width: 520px; margin: 0 auto 18px; }
.booking__hake {
  width: 54px; height: 54px; border-radius: 50%;
  background: #e7f6ec; display: grid; place-items: center; margin: 0 auto 16px;
}
.booking__hake .ico { width: 26px; height: 26px; fill: #1e8a4a; }
.booking__smaa { font-size: .9rem; color: var(--text-soft); margin: 0; }

.booking__svar {
  margin: 0 clamp(22px, 3.5vw, 38px) clamp(22px, 3vw, 28px);
  padding: 15px 18px;
  border: 1px solid var(--orange-line);
  background: var(--orange-wash);
  border-radius: var(--r-sm);
  font-size: .95rem;
  color: #6d5231;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.booking__svar .ico { width: 18px; height: 18px; fill: var(--orange-dark); flex: none; margin-top: 3px; }
.booking__svar p { margin: 0; }
.booking__svar a { color: var(--orange-ink); font-weight: 600; }

/* Skiltfelt for registreringsnummer */
.plate {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.plate:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(239,124,21,.15); }
.plate__flag {
  display: grid;
  place-items: center;
  width: 38px;
  background: #14387f;
  color: #fff;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  flex: none;
}
.plate input {
  border: 0;
  border-radius: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.plate input:focus { box-shadow: none; }

/* Skiltfeltet i steg 1 står ikke i et .field, så det får bredde og luft selv */
.plate input { flex: 1; min-width: 0; padding: 13px 14px; background: transparent; color: var(--ink); outline: none; }
.plate--stor { max-width: 340px; }
.plate--stor .plate__flag { width: 42px; font-size: .74rem; }
.plate--stor input { font-size: 1.18rem; padding: 14px 16px; }

/* Bilen fra registeret, under skiltfeltet */
.bilinfo { margin: 10px 0 0; min-height: 1.6em; font-size: .95rem; line-height: 1.5; color: var(--text-soft); }
.bilinfo:empty { min-height: 0; margin: 0; }
.bilinfo--ok { color: #1e6b3d; font-weight: 600; }
.bilinfo--advarsel { color: #8a5a12; }

/* --------------------------------------------------------------------------
   7. Partnerstripe
   -------------------------------------------------------------------------- */
.strip {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.strip .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
}
.strip__text {
  font-size: .95rem;
  color: var(--text-soft);
  max-width: 40ch;
  margin: 0;
}
.strip__logos { display: flex; align-items: center; gap: 42px; flex-wrap: wrap; }
.strip__logos img { height: 36px; width: auto; }
.strip__logos img.vianor { height: 24px; }

/* --------------------------------------------------------------------------
   8. Døgnvakt
   -------------------------------------------------------------------------- */
.pledge { background: var(--ink); color: #b7c1cc; overflow: hidden; }
.pledge__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 0 clamp(40px, 5vw, 72px);
}
.pledge__body { padding: clamp(58px, 7vw, 92px) 0; }
.pledge h2 { color: #fff; margin-bottom: 20px; }
.pledge p { color: #a9b5c1; max-width: 46ch; }
.pledge__phones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.phone-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  padding: 15px 22px 16px;
  background: var(--ink-2);
  transition: border-color .15s ease, background-color .15s ease;
}
.phone-card:hover { border-color: var(--orange); background: #1a232d; }
.phone-card small {
  font-size: .86rem;
  color: #8b97a3;
}
.phone-card b {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.pledge__media { position: relative; align-self: stretch; min-height: 340px; }
.pledge__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pledge__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(14,20,27,.25) 34%, rgba(14,20,27,0) 100%);
}

/* --------------------------------------------------------------------------
   9. Tjenester
   -------------------------------------------------------------------------- */
.svc__gruppe + .svc__gruppe { margin-top: clamp(48px, 5vw, 70px); }

.svc__gruppehode {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.svc__gruppehode h3 {
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: -0.02em;
}
.svc__gruppehode span { font-size: .93rem; color: var(--text-soft); }

.svc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.kort {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kort:hover { border-color: #cfc8bf; box-shadow: var(--shadow); }
.kort--bookbar { border-color: var(--orange-line); background: #fffdfa; }
.kort--bookbar:hover { border-color: var(--orange); }

.kort__topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.kort__ikon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--paper);
  display: grid;
  place-items: center;
  flex: none;
}
.kort--bookbar .kort__ikon { background: var(--orange-wash); }
.kort__ikon .ico { width: 20px; height: 20px; fill: var(--ink); }
.kort--bookbar .kort__ikon .ico { fill: var(--orange-dark); }

.kort h4 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  line-height: 1.25;
}
.kort p { font-size: .97rem; margin: 0 0 20px; }
.kort__handling { margin-top: auto; padding-top: 4px; }

/* Bred variant: brukes når en gruppe bare har én tjeneste */
.svc__grid--enkel { grid-template-columns: 1fr; }
.kort--bred {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 4px 26px;
  align-items: center;
  padding: 24px 26px;
}
.kort--bred h4 { margin: 0 0 6px; }
.kort--bred p { margin: 0; max-width: 76ch; }
.kort--bred .kort__handling { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   10. Bildebånd
   -------------------------------------------------------------------------- */
.band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
}
.band figure { position: relative; margin: 0; overflow: hidden; background: var(--ink); }
.band img {
  width: 100%;
  height: clamp(230px, 26vw, 330px);
  object-fit: cover;
  transition: transform .5s ease;
}
.band figure:hover img { transform: scale(1.035); }

/* --------------------------------------------------------------------------
   11. Dekkhotell / delt seksjon
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 74px);
  align-items: center;
}
.split--flip .split__media { order: 2; }
.split__media--stack { display: grid; gap: 14px; }
.split__media--stack img:last-child { aspect-ratio: 16 / 7; object-fit: cover; }
.split__media img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.split__body h2 { margin-bottom: 18px; }

.tilbud {
  border: 1px solid var(--orange-line);
  background: var(--orange-wash);
  border-radius: var(--r);
  padding: 22px 24px;
  margin: 26px 0;
}
.tilbud h3 {
  font-size: 1.04rem;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tilbud h3 .ico { width: 19px; height: 19px; fill: var(--orange-dark); flex: none; }
.tilbud p { margin: 0; color: #6d5231; font-size: .98rem; }
.tilbud p + p { margin-top: 8px; }
.tilbud__vilkaar { font-size: .91rem; color: #7d6448; }

.ticks { display: grid; gap: 12px; margin: 22px 0 28px; }
.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  line-height: 1.55;
}
.ticks .ico { width: 18px; height: 18px; fill: var(--orange); margin-top: 4px; }

/* --------------------------------------------------------------------------
   12. Tunge kjøretøy
   -------------------------------------------------------------------------- */
.heavy { background: var(--ink-2); color: #b3bec9; }
.heavy h2, .heavy h3 { color: #fff; }
.heavy .split__media img { border-color: var(--ink-line); }
.heavy .ticks .ico { fill: var(--orange); }

/* --------------------------------------------------------------------------
   13. Mønsterdybde
   -------------------------------------------------------------------------- */
.check { background: var(--orange-wash); border-block: 1px solid var(--orange-line); }
.check .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px 48px;
  padding-block: clamp(40px, 5vw, 58px);
}
.check h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); margin-bottom: 10px; }
.check p { color: #6d5231; max-width: 62ch; margin: 0; }

/* --------------------------------------------------------------------------
   14. Anmeldelser (Google-stil)
   -------------------------------------------------------------------------- */
.g-topp {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 22px;
}
.g-topp__merke { display: flex; align-items: center; gap: 12px; }
.g-topp__merke svg { width: 30px; height: 30px; flex: none; }
.g-topp__merke b {
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: block;
}
.g-topp__merke span { font-size: .86rem; color: var(--text-soft); }

.g-topp__score { display: flex; align-items: center; gap: 14px; }
.g-topp__tall {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.1rem;
  color: #202124;
  line-height: 1;
  letter-spacing: -0.03em;
}
.g-topp__score small { display: block; color: var(--text-soft); font-size: .85rem; margin-top: 4px; }
.g-topp .link { margin-left: auto; }

.stars { display: inline-flex; gap: 2px; }
.stars .ico { width: 17px; height: 17px; fill: var(--gold); }
.stars .ico.er-tom { fill: #dadce0; }

.g-rutenett {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.g-kort {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
}
.g-kort__hode { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.g-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  flex: none;
}
.g-kort__navn {
  font-family: var(--display);
  font-weight: 600;
  font-size: .96rem;
  color: #202124;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.g-kort__dato { font-size: .82rem; color: #70757a; }
.g-kort__stjerner { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.g-kort blockquote {
  margin: 0;
  font-size: .98rem;
  color: #3c4043;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   15. Om oss
   -------------------------------------------------------------------------- */
.about__media { display: grid; gap: 14px; }
.about__media img { border-radius: var(--r-lg); border: 1px solid var(--line); width: 100%; }
.about__media .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sitat {
  border-left: 3px solid var(--orange);
  padding: 4px 0 4px 22px;
  margin: 26px 0 0;
  color: var(--text);
}
.sitat p { font-size: 1.04rem; }

/* --------------------------------------------------------------------------
   16. Spørsmål og svar
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 40px 22px 0; margin: 0; }
.faq summary:hover { color: var(--orange-ink); }

/* --------------------------------------------------------------------------
   17. Kontakt og kart
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(34px, 4.5vw, 60px);
  align-items: start;
}

.info { display: grid; gap: 14px; }
.info__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  padding: 17px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
a.info__row:hover { border-color: var(--ink); }
.info__ico {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--orange-wash);
  display: grid;
  place-items: center;
}
.info__ico .ico { width: 19px; height: 19px; fill: var(--orange-dark); }
.info__row dt {
  font-size: .87rem;
  color: var(--text-soft);
  margin-bottom: 2px;
}
.info__row dd { margin: 0; font-weight: 600; color: var(--ink); }
.info__row dd span { display: block; font-weight: 400; font-size: .9rem; color: var(--text-soft); }

.hours {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
}
.hours h3 {
  margin: 0;
  padding: 16px 20px;
  font-size: .96rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.hours table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { padding: 10px 20px; text-align: left; font-weight: 400; }
.hours th { color: var(--text); font-weight: 400; }
.hours td { text-align: right; font-family: var(--mono); font-size: .86rem; color: var(--ink); }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--line-soft); }
.hours tr.is-closed td { color: var(--text-soft); }
.hours tfoot td {
  text-align: left;
  font-family: var(--body);
  font-size: .89rem;
  color: var(--text-soft);
  border-top: 1px solid var(--line);
  background: var(--paper);
}

/* Høyre kolonne i kontakt */
.kontakt__side { display: grid; gap: 16px; align-content: start; }

/* Skjema */
.form {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: clamp(24px, 3vw, 32px);
}
.form h3 { margin-bottom: 6px; }
.form__intro { color: var(--text-soft); font-size: .96rem; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(239,124,21,.15);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field--row .field { margin-bottom: 0; }
.form__foot { margin-top: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form__hint { font-size: .84rem; color: var(--text-soft); margin: 0; max-width: 34ch; }

.map { border-top: 1px solid var(--line); line-height: 0; background: var(--paper-2); }
.map iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(.24) contrast(1.03); }

/* --------------------------------------------------------------------------
   18. Footer og handlingslinje
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #97a3af;
  padding: clamp(54px, 6vw, 76px) 0 0;
  font-size: .95rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 46px;
}
.footer__brand img { height: 52px; width: auto; margin-bottom: 20px; }
.footer__brand p { max-width: 36ch; color: #8d99a5; font-size: .93rem; }
.site-footer h2 {
  font-size: .92rem;
  font-weight: 600;
  color: #eef2f6;
  margin-bottom: 16px;
}
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #c3ccd5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__partners { display: flex; align-items: center; gap: 22px; margin-top: 4px; }
.footer__partners img {
  height: 28px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .62;
  transition: opacity .15s ease;
}
.footer__partners img.vianor { height: 21px; }
.footer__partners a:hover img { opacity: 1; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 20px 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  font-size: .86rem;
  color: #6f7c89;
}
.footer__bottom p { margin: 0; }

.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: 1px;
  background: rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -6px 24px rgba(8,12,17,.22);
}
.actionbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
  background: var(--ink);
  color: #fff;
}
.actionbar a.is-primary { background: var(--orange); color: #1b1003; }
.actionbar .ico { width: 17px; height: 17px; fill: currentColor; }

/* --------------------------------------------------------------------------
   19. Responsivt
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav a { padding: 10px 10px; font-size: .92rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking__toKol { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
  :root { --header-h: 66px; }

  .burger { display: inline-flex; }
  .hdr .wrap { gap: 12px; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 8px 16px 18px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 8px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 1rem; border-radius: 0; }
  .nav a:last-child { border-bottom: 0; }
  .hdr__cta .btn { display: none; }
  .hdr__cta .btn--callHdr { display: inline-flex; }
  .brand img { height: 36px; }

  .head__rad { grid-template-columns: 1fr; }
  .head__lead { max-width: none; }

  .pledge__grid { grid-template-columns: 1fr; }
  .pledge__media { min-height: 260px; order: -1; }
  .pledge__media::after { background: linear-gradient(180deg, rgba(14,20,27,.15) 0%, rgba(14,20,27,.35) 60%, var(--ink) 100%); }
  .pledge__body { padding-top: 44px; }

  .split, .contact__grid { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }

  .check .wrap { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .g-topp .link { margin-left: 0; }
}

@media (max-width: 780px) {
  :root { --pad: 20px; }

  .topbar { height: auto; padding: 7px 0; font-size: .78rem; }
  .topbar .wrap { justify-content: center; }
  .topbar__left { display: none; }
  .topbar__right { gap: 14px; }

  .hero__inner { padding-top: 52px; max-width: none; }
  .hero h1 { font-size: clamp(1.95rem, 8.2vw, 2.8rem); }
  .hero .actions { margin-bottom: 40px; }
  .hero .actions .btn { flex: 1 1 auto; }
  .hero__rail { grid-template-columns: 1fr; max-width: none; padding-bottom: 40px; }
  .hero__rail div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: 16px 0; }
  .hero__rail div:last-child { border-bottom: 0; padding-left: 0; }

  .steg { gap: 0 8px; padding-inline: 18px; }
  .steg__navn { display: none; }
  .steg li { justify-content: center; }
  .booking__body, .booking__bunn { padding-inline: 18px; }
  .booking__svar { margin-inline: 18px; }
  .valg button { grid-template-columns: 1fr; }
  .valg__pris { text-align: left; }
  .booking__bunn .btn { flex: 1; }

  .svc__grid { grid-template-columns: 1fr; }
  .kort--bred { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; }
  .kort--bred .kort__handling .btn { width: 100%; }
  .band { grid-template-columns: 1fr; }
  .band img { height: 220px; }

  .g-rutenett { grid-template-columns: 1fr; }
  .about__media .row { grid-template-columns: 1fr 1fr; }
  .field--row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .field--row .field { margin-bottom: 16px; }

  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; gap: 6px; }

  .actionbar { display: flex; }
  body { padding-bottom: 54px; }
  .map iframe { height: 320px; }
}

@media (max-width: 420px) {
  .brand img { height: 32px; }
  .hdr .wrap { gap: 8px; }
  .hdr__cta .btn--callHdr { padding: 12px 13px; gap: 0; }
  .hdr__cta .btn--callHdr .btn__txt { display: none; }
  .hdr__cta .btn--callHdr .ico { width: 19px; height: 19px; }

  .hero h1 { font-size: 1.85rem; }
  .hero__lead { font-size: 1rem; }
  .g-topp__tall { font-size: 1.8rem; }
  .btn { padding: 14px 18px; font-size: .93rem; }
}

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

@media print {
  .hdr, .topbar, .actionbar, .map, .hero__media, .booking { display: none; }
  body { color: #000; }
}