/* ============================================================
   KontorKlar – kontorklar.no
   Ett stilark, ingen rammeverk, ingen byggesteg.

   Layouten er bygget som et dokument, ikke som en landingsside:
   en tynn venstremarg med seksjonsnummer og navn som blir stående
   mens innholdet ruller forbi, og hårfine linjer i stedet for kort
   med skygge. Det er dette som skiller siden fra de andre
   kundesidene – header, skjema og tilgjengelighet er delt husstil.
   ============================================================ */

/* ======== VARIABLER ======== */

/* Navy og grønn er hentet rett ut av logofila (bilder/logo.png):
   #1A3345 fra «Kontor», #536B5A fra «Klar». Endres logoen, hent
   fargene på nytt derfra – ikke gjett. */
:root {
  --bg: #f7f6f3;            /* varm off-white, samme som delingsbildet */
  --bg-alt: #edeee9;        /* annenhver seksjon */
  --surface: #ffffff;
  --border: #dfe0d9;
  --rule: #cfd1c8;          /* hårfine skillelinjer i dokumentlayouten */

  --ink: #1a3345;           /* merkenavy – brødtekst og overskrifter */
  --ink-soft: #5a6874;      /* dempet tekst – 5,3:1 mot --bg */
  --ink-faint: #8c96a0;     /* marginummer og etiketter */

  --green: #6e8472;         /* lys bladgrønn – ikoner og grafikk (3,7:1) */
  --green-strong: #536b5a;  /* merkegrønn – tekst og knapper (5,4:1) */
  --green-dark: #3e5344;    /* hover */
  --green-wash: #e8ece7;    /* svak grønn flate */

  --dark: #1a3345;          /* merkenavy – brevseksjonen og footer */
  --dark-soft: #c3ced6;     /* dempet tekst på mørk bakgrunn – 8,2:1 */
  --dark-border: #31495c;

  --field-border: #767f94;  /* synlig kant på skjemafelt (WCAG 1.4.11) */

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 40px rgba(26, 51, 69, 0.08);

  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1180px;
  --rail: 190px;            /* bredden på venstremargen */
  --header-h: 76px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* clip lager ikke en rulle-container slik hidden gjør, så
     position: sticky fortsetter å virke. Linja over er fallback. */
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.05rem, 4.2vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }

p { color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ======== TILGJENGELIGHET ======== */

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -70px;
  z-index: 1200;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

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

/* ======== KNAPPER ======== */

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--green-strong); color: #fff; }
.btn--primary:hover { background: var(--green-dark); }

.btn--ghost {
  border-color: var(--green-strong);
  color: var(--green-strong);
  background: transparent;
}
.btn--ghost:hover { background: var(--green-wash); }

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

.btn--full { display: block; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ======== HEADER (delt husstil) ======== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(18px, 4vw, 40px);
  background: rgba(247, 246, 243, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled {
  background: rgba(247, 246, 243, 0.97);
  border-bottom-color: var(--rule);
}

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo__img { height: 44px; width: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  font-size: 0.97rem;
  font-weight: 500;
}
.site-nav a { color: var(--ink); transition: color 0.2s ease; }
.site-nav a:hover { color: var(--green-strong); }

.site-nav .nav-cta {
  background: var(--green-strong);
  color: #fff;
  padding: 11px 24px;
  border-radius: 999px;
  font-weight: 600;
}
.site-nav .nav-cta:hover { background: var(--green-dark); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ======== HERO ======== */

.hero {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 78px));
  padding-bottom: clamp(48px, 7vw, 90px);
  border-bottom: 1px solid var(--rule);
}

.hero__grid {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

/* Teksten får ekstra luft under seg, slik at scenen til høyre har noe
   å stå festet gjennom. Det er denne strekningen bunkene sorterer seg
   over – uten den rakk man ikke å se dem legge seg. */
.hero__inner { padding-bottom: clamp(0px, 15vh, 180px); }

.hero__scene {
  position: sticky;
  top: calc(var(--header-h) + 34px);
}

.hero__eyebrow {
  display: inline-block;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-strong);
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.hero h1 { margin-bottom: 20px; }

.hero__lead {
  font-size: clamp(1.03rem, 1.7vw, 1.18rem);
  max-width: 33em;
}

.hero__points {
  display: grid;
  gap: 9px;
  margin-top: 34px;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.hero__points li { display: flex; align-items: center; gap: 10px; }
.hero__points svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; }

/* ======== HAUGEN SOM SORTERER SEG ========
   Papirene står ferdig sortert i HTML-en. main.js sprer dem ut når
   siden lastes, og lar dem falle på plass mens du ruller gjennom
   hero-en. Uten JS – eller med redusert bevegelse – ligger de bare
   sortert med én gang, som de gjør i markupen. */

.haug {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.82;
  /* Uten dette utvider de spredte arkene dokumentet og gir rullefelt */
  overflow: hidden;
}

.ark {
  position: absolute;
  display: block;
  background: #fff;
  border: 1px solid #d3d6cd;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(26, 51, 69, 0.07);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Konvolutt: litt varmere papir og en antydet klaff */
.ark--konvolutt {
  background: var(--green-wash);
  border-color: #c6d0c4;
}
.ark--konvolutt::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  border-bottom: 1px solid #bcc7ba;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Bare det øverste arket i hver bunke får synlig innhold – resten
   viser uansett bare kanten. */
/* Prosent-padding regnes mot BREDDEN, ikke høyden. På de lave
   slippene spiste den hele innholdshøyden, så de får egne verdier. */
.ark--topp { padding: 11% 10%; }
.ark--slipp.ark--topp { padding: 5px 9px; }

.ark__hode {
  display: block;
  height: 9%;
  min-height: 5px;
  width: 46%;
  background: var(--green-strong);
  border-radius: 1px;
  margin-bottom: 12%;
}
.ark__linjer {
  display: block;
  height: 62%;
  background: repeating-linear-gradient(
    to bottom,
    #c8ccc3 0 1.5px,
    transparent 1.5px 22%
  );
}
.ark--slipp .ark__linjer {
  height: 100%;
  background: repeating-linear-gradient(to bottom, #c8ccc3 0 1.5px, transparent 1.5px 8px);
}

/* Merkelapper under bunkene – toner inn når sorteringen er ferdig */
.haug__merkelapp {
  position: absolute;
  bottom: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  /* Synlige som utgangspunkt, slik at de står der uten JS. main.js
     skjuler dem synkront ved sidelast og tar dem fram igjen når
     bunkene har lagt seg – da rekker de aldri å blinke. */
  opacity: 1;
  transition: opacity 0.4s ease;
}
.haug.skjul-lapper .haug__merkelapp { opacity: 0; }

/* ======== DOKUMENTLAYOUT ========
   Hver seksjon er en oppslag: nummer og navn i margen til venstre,
   innholdet til høyre. Margen blir stående mens man ruller. */

.doc { padding: clamp(56px, 7vw, 96px) 0; }
.doc--alt { background: var(--bg-alt); }
.doc--linje { border-top: 1px solid var(--rule); }

.doc__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.doc__rail {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  border-top: 2px solid var(--ink);
}
.doc__num {
  font-family: var(--font-head);
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.doc__label {
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.doc__head { max-width: 40em; margin-bottom: clamp(30px, 4vw, 48px); }
.doc__head h2 { margin-bottom: 14px; }
.doc__head p { font-size: 1.06rem; }

/* ======== REGISTER (tjenestene) ========
   Fire oppføringer skilt av hårfine linjer, ikke fire like kort. */

.post {
  display: grid;
  grid-template-columns: 0.36fr 0.64fr;
  gap: clamp(16px, 3vw, 46px);
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--rule);
}
.post:last-child { border-bottom: 1px solid var(--rule); }

.post h3 { color: var(--ink); }
.post p { font-size: 0.99rem; }

/* Stikkordene som en løpende linje, ikke som piller */
.post__stikk {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--ink-faint);
  line-height: 1.75;
}

/* ======== BREVET FRA KOMMUNEN ========
   Det lyse arket ligger på merkenavy, så det leser som et fysisk
   papir på pulten. Tallene i brevet svarer til notatene ved siden. */

.brev-seksjon {
  background: var(--dark);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0;
}
.brev-seksjon .doc__rail { border-top-color: #fff; }
.brev-seksjon .doc__num { color: var(--dark-soft); }
.brev-seksjon .doc__label { color: #fff; }
.brev-seksjon h2 { color: #fff; }
.brev-seksjon .doc__head p { color: var(--dark-soft); }

.brev {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}

.brev__ark {
  background: #fbfaf6;
  color: var(--ink);
  border-radius: 3px;
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  /* Ørlite skjevt, som et papir som er lagt fra seg */
  transform: rotate(-0.5deg);
}

.brev__hode {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.brev__hode strong { color: var(--ink); font-weight: 600; }

.brev__tittel {
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  color: var(--ink);
  margin-bottom: 18px;
}

.brev p { font-size: 0.96rem; margin-bottom: 14px; }

/* Fristen er ringet rundt for hånd */
.brev__frist {
  display: inline-block;
  padding: 3px 14px;
  color: var(--ink);
  font-weight: 600;
  border: 2px solid #b4553f;
  border-radius: 46% 54% 50% 50% / 56% 44% 56% 44%;
}

/* Simulert brødtekst nederst i brevet */
.brev__fyll {
  margin-top: 20px;
  height: 44px;
  background: repeating-linear-gradient(
    to bottom,
    #d7d9d0 0 1.5px,
    transparent 1.5px 14px
  );
}

/* Nummermarkør inne i brevet */
.merke {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--green-strong);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-body);
  vertical-align: 1px;
  margin: 0 3px;
}

/* Notatene ved siden av brevet */
.notat { display: grid; gap: 20px; }
.notat li { display: flex; gap: 14px; align-items: flex-start; }
.notat .merke { flex-shrink: 0; margin: 2px 0 0; }
.notat strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.notat span.notat__tekst { color: var(--dark-soft); font-size: 0.95rem; }

.notat__slutt {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--dark-border);
}
.notat__slutt blockquote {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: #fff;
  margin-bottom: 14px;
}
.notat__slutt p { color: var(--dark-soft); font-size: 0.95rem; }
.notat__slutt .btn { margin-top: 20px; }

/* ======== MÅLGRUPPER ========
   Ni termer som én løpende linje. Kompakt og selvsikkert –
   ni ruter ville bare vært mer av det samme. */

.termer {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1.55;
  color: var(--ink);
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.termer span { white-space: nowrap; }
.termer i {
  font-style: normal;
  color: var(--green);
  padding: 0 3px;
}

/* ======== OM TRUDE ======== */

.om {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.om__figur { margin: 0; }

/* Ingen fast aspect-ratio her. Bildet beholder sitt eget format, saa et
   nytt portrett kan byttes inn uten aa bli beskaaret eller strukket. */
.om__foto {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.om__tekst p + p { margin-top: 15px; }

.om__sitat {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
  border-left: 2px solid var(--green);
  padding-left: 20px;
  margin: 26px 0;
}

.verdier {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 0.87rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 2;
}
.verdier i { font-style: normal; padding: 0 3px; color: var(--green); }

/* ======== KONTAKT ======== */

.kontakt {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.contact-list {
  margin-top: 28px;
  display: grid;
  gap: 0;
}
.contact-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
}
.contact-list li:last-child { border-bottom: 1px solid var(--rule); }
.contact-list strong {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-list a,
.contact-list span {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--green-strong);
  text-align: right;
}
.contact-list a:hover { text-decoration: underline; }

.contact-steps { margin-top: 34px; }
.contact-steps__head {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.contact-steps ol { list-style: none; counter-reset: steg; display: grid; gap: 14px; }
.contact-steps li {
  counter-increment: steg;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.contact-steps li::before {
  content: counter(steg);
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-wash);
  color: var(--green-strong);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Skjemaet beholder en egen flate – det er en flate man fyller ut */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(24px, 3.2vw, 36px);
  box-shadow: var(--shadow);
}

.form-row { margin-bottom: 17px; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }

.form-row label {
  display: block;
  font-size: 0.87rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--ink);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row textarea { resize: vertical; min-height: 124px; }

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--green-strong);
  box-shadow: 0 0 0 3px rgba(83, 107, 90, 0.15);
}

.contact-form .btn { margin-top: 6px; }

.form-note {
  margin-top: 17px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.form-note a { color: var(--green-strong); font-weight: 600; }
.form-note a:hover { text-decoration: underline; }

/* ======== FOOTER (delt husstil) ======== */

.site-footer {
  background: var(--dark);
  color: var(--dark-soft);
  text-align: center;
  padding: clamp(46px, 6vw, 68px) 24px;
}
.site-footer p { color: var(--dark-soft); font-size: 0.92rem; }

.footer__brand { display: inline-block; margin-bottom: 18px; }
.footer__brand img { height: 42px; width: auto; }

.footer__tagline { margin-bottom: 22px; }
.footer__legal { margin-bottom: 8px; }
.footer__legal a { color: #fff; text-decoration: underline; }
.footer__copy { font-size: 0.86rem; }
.footer__credit { font-size: 0.84rem; margin-top: 10px; }
.footer__credit a { color: #fff; text-decoration: underline; }

/* ======== SLIK JOBBER VI ========
   Fem tilbud. Fast KontorKlar-dag er signaturtjenesten og ligger som et
   fremhevet panel øverst; de fire andre står i et rolig rutenett under. */

/* --- Det fremhevede panelet --- */

.utvalgt {
  background: var(--green-wash);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: clamp(24px, 3.2vw, 42px);
  margin-bottom: clamp(30px, 4vw, 48px);
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: clamp(24px, 4vw, 50px);
  align-items: center;
}

.utvalgt__merke {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-strong) !important;
  margin-bottom: 10px;
}
.utvalgt h3 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  color: var(--ink);
  margin-bottom: 16px;
}
.utvalgt p { color: var(--ink-soft); }
.utvalgt__vilkaar {
  margin-top: 12px;
  font-weight: 600;
  color: var(--ink) !important;
}
.utvalgt__slagord {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: var(--ink) !important;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--green);
}
.utvalgt .btn { margin-top: 22px; }

/* --- Kalenderbladet. Samme papirspråk som arkene i hero-en. --- */

.kal {
  background: #fff;
  border: 1px solid #d3d6cd;
  border-radius: 3px;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 10px 30px rgba(26, 51, 69, 0.12);
  transform: rotate(-1.5deg);
}
.kal__hode {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--ink) !important;
  text-align: center;
  padding-bottom: 11px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--rule);
}
.kal__uke,
.kal__rutenett {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  text-align: center;
}
.kal__uke {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.kal__rutenett {
  font-size: 0.86rem;
  color: var(--ink-soft);
  row-gap: 6px;
}
.kal__rutenett span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
/* Dagen som settes av – samme håndtegnede ring som fristen i brevet */
.kal__dag {
  color: var(--ink);
  font-weight: 600;
  border: 2px solid #b4553f;
  border-radius: 46% 54% 50% 50% / 56% 44% 56% 44%;
}

/* --- De fire øvrige tilbudene --- */

.tilbud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.tilbud__kort {
  padding: clamp(22px, 2.8vw, 32px) clamp(18px, 2.4vw, 32px);
  border-bottom: 1px solid var(--rule);
}
/* Venstre spalte får en loddrett skillelinje og ingen venstremarg */
.tilbud__kort:nth-child(2n+1) {
  border-right: 1px solid var(--rule);
  padding-left: 0;
}
.tilbud__kort:nth-child(2n) { padding-right: 0; }

.tilbud__merke {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-strong) !important;
  margin-bottom: 10px;
}
.tilbud__kort h3 { color: var(--ink); margin-bottom: 12px; }
.tilbud__kort p { font-size: 0.95rem; }
.tilbud__note {
  margin-top: 12px;
  font-size: 0.87rem;
  color: var(--ink-faint) !important;
}

/* Prislinjer inne i kortene: navn til venstre, pris til høyre */
.prisrad { margin: 16px 0; }
.prisrad div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px dotted var(--rule);
  font-size: 0.95rem;
}
.prisrad div:last-child { border-bottom: 1px dotted var(--rule); }
.prisrad span { color: var(--ink-soft); }
.prisrad strong {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* --- Avsluttende linjer --- */

.slik__punkt {
  margin-top: clamp(26px, 3vw, 38px);
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: var(--ink) !important;
}
.mva {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  max-width: 62em;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-faint) !important;
}
.mva strong { color: var(--ink-soft); }

/* ======== SOSIALE PROFILER I FOOTEREN ======== */

.footer__sosialt {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 4px;
}
.footer__sosialt a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--dark-border);
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.footer__sosialt a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--dark-soft);
}
.footer__sosialt svg { width: 18px; height: 18px; }

/* ======== JURIDISKE SIDER (personvern) ======== */

.legal-hero {
  padding-top: calc(var(--header-h) + clamp(44px, 6vw, 72px));
  padding-bottom: clamp(26px, 4vw, 42px);
  max-width: 800px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.legal-hero h1 { margin-bottom: 12px; }
.legal-updated { font-size: 0.9rem; }

.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px clamp(60px, 8vw, 96px);
}

.legal-lead {
  font-size: 1.05rem;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.legal-lead strong { color: var(--ink); }

.legal-toc {
  list-style: decimal;
  margin: 28px 0 44px;
  padding: 24px 24px 24px 44px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  font-size: 0.95rem;
}
.legal-toc li::marker { color: var(--green-strong); font-weight: 600; }
.legal-toc a { color: var(--green-strong); font-weight: 500; }
.legal-toc a:hover { text-decoration: underline; }

.legal h2 {
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  margin: 44px 0 16px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.legal h3 { font-size: 1.04rem; margin: 26px 0 10px; }
.legal p { margin-bottom: 14px; }
.legal p strong { color: var(--ink); }

.legal ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 16px;
  color: var(--ink-soft);
}
.legal ul li { margin-bottom: 7px; }
.legal ul li::marker { color: var(--green); }

.legal a { color: var(--green-strong); font-weight: 500; }
.legal a:hover { text-decoration: underline; }

.legal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  margin: 20px 0 24px;
}
.legal-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.legal-box ul li { margin: 0; }

.legal-back {
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

/* ======== REVEAL ========
   Skjul-tilstanden henger på .js-ready, som main.js setter på <html>
   først når scriptet faktisk kjører. Uteblir scriptet – eller er
   JavaScript slått av – vises alt innhold som normalt. */

.js-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ======== MOBIL ======== */

@media (max-width: 900px) {
  /* Margen legger seg over innholdet i stedet for ved siden av */
  .doc__inner { grid-template-columns: 1fr; gap: 22px; }
  .doc__rail {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }

  .hero__grid { grid-template-columns: 1fr; }
  /* Haugen legger seg under teksten og får mindre plass. Headrommet
     over bunkene trengs bare til spredningen på desktop, så her
     trekkes den opp – den øvre delen av flata er likevel tom. */
  .haug { max-width: 380px; margin: -46px auto 0; }
  /* På mobil ligger scenen i flyten under teksten, og haugen sorterer
     seg etter hvert som den kommer opp i synsfeltet i stedet. */
  .hero__scene { position: static; }
  .hero__inner { padding-bottom: 0; }

  .brev { grid-template-columns: 1fr; }
  .utvalgt { grid-template-columns: 1fr; }
  .kal { max-width: 300px; margin: 0 auto; }
  .tilbud { grid-template-columns: 1fr; }
  .tilbud__kort {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }
  .om { grid-template-columns: 1fr; }
  .om__figur { max-width: 320px; }
  .kontakt { grid-template-columns: 1fr; }

  .post { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    padding: 32px 34px;
    background: var(--surface);
    box-shadow: -12px 0 40px rgba(26, 51, 69, 0.16);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    font-size: 1.1rem;
  }
  .site-nav.is-open { transform: translateX(0); }

  .logo__img { height: 38px; }
  .form-row--split { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* ======== REDUSERT BEVEGELSE ======== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-ready .reveal { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
  .haug__merkelapp { opacity: 1; }
}