/* ───────────────────────────────────────────────────────────
   sider.css — delt designsystem for HELE nettstedet.
   Inneholder font, lyst tema, header med dropdown, footer,
   seksjonsoverskrifter og scroll-animasjoner.
   Sidespesifikke seksjoner ligger i egne filer (f.eks. forside.css).
   ─────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────
   forside.css — tema-overstyringer kun for index.html (forsiden)
   Redesign inspirert av payouts.com. Alt her er tillegg til
   hjemmeside.css, ikke en erstatning — resten av sidene er urørt.
   ─────────────────────────────────────────────────────────── */

/* ─── Font: Geist overalt på forsiden (hjemmeside.css hardkoder
   Space Grotesk på en del enkeltklasser — disse listes eksplisitt
   under i stedet for en blanket !important-overstyring) ─── */
/* Referansen (staffer.com) kjører Inter i brødtekst og Season Sans på
   display. Season Sans er lisensiert — til den eventuelt kjøpes,
   faller alt tilbake på Inter, som er nøyaktig det referansen
   bruker til alt annet enn overskriftene. */
html, body,
.nav .menu-btn,
.section-label,
.statement .lead,
.statement .meta-item,
.statement .meta-item strong,
.cbot-stat .cbot-src,
.svc-panel .s-num,
.foot-brand .org,
.foot-col h3,
.foot-base {
  font-family: 'Inter', 'Geist', sans-serif;
}

/* hjemmeside.css setter html+body til sort. Begge må overstyres —
   html maler lerretet, så bare body er ikke nok (ga sort stripe i
   toppen og rundt heroens 10px-marg). */
html { background: #fff; }
body { background: #fff; color: #0a0a0a; }


/* ═══════════════════════════════════════════════════════════
   SIDEHERO — delt skall for alle undersider.
   Mørk flate med myke hjørner og luft ut mot kantene, akkurat
   som forsidens hero. Innholdet inni er sidespesifikt og ligger
   i hver sides egen fil (tjenester.css, webdesign.css …).
   ═══════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 10px;
  border-radius: 22px;
  background: #0a0a0a;
  /* hjemmeside.css gir alle section 120px padding — den må nulles.
     Toppen beholder 94px: nav-baren er «fixed» og ligger ikke i flyten,
     så uten dette havner hero-teksten bak den.
     94 = 16 marg + 12 + 12 padding + ~54 innhold. */
  padding: 94px 0 0;
}
/* Løfter innholdet over bakgrunnsglød og mønstre.
   Må stå FØR nav-regelen under, ellers vinner denne (lik
   spesifisitet) og dropdownen havner bak hero-teksten. */
.page-hero > * { position: relative; z-index: 2; }


/* ═══════════════════════════════════════════════════════════
   FOTO-HERO — felles skall, seks helt ulike komposisjoner.
   Tittelen står IKKE samme sted på to sider: sentrert, nede til
   venstre, midt til høyre, øverst sentrert, øverst til venstre,
   nede sentrert. Konseptet flytter seg tilsvarende.
   Skrift: Syne (byrå-grotesk) på titlene, Geist i brødtekst.
   ═══════════════════════════════════════════════════════════ */
.photo-hero { min-height: min(84vh, 840px); background: #0a0a0a; }

/* Må stå etter «.page-hero > *» — den setter position: relative på
   alle barn, og bildet må kunne ligge absolutt. */
.ph-img {
  position: absolute; z-index: 0; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.55) contrast(1.08) brightness(0.62) saturate(0.8);
}
.ph-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ph-obj { position: absolute; z-index: 3; }

.ph-body { z-index: 3; padding: 0 56px 56px; margin-top: auto; }
.ph-kicker {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 22px;
}
.ph-title {
  font-family: 'Season Sans', 'Geist', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1.04;
  color: #fff;
  font-size: clamp(32px, 3.6vw, 56px);
  text-wrap: balance;
}
.ph-lead {
  margin-top: 20px; max-width: 50ch;
  font-size: 17px; line-height: 1.6;
  color: rgba(255,255,255,0.78);
}
.ph-link {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 24px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em;
  color: #0a0a0a; background: #fff;
  padding: 11px 20px; border-radius: 999px;
  transition: background 0.22s, color 0.22s;
}
.ph-link span { transition: transform 0.25s ease; }
.ph-link:hover { background: var(--lime); color: #0a0a0a; }
.ph-link:hover span { transform: translateX(5px); }


/* ── 1. WEBDESIGN — tittelen midt i flaten, stor. Vinduet under. ── */
.ph-split .ph-veil {
  background: linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.42) 30%, rgba(10,10,10,0.6) 62%, rgba(10,10,10,0.92) 100%);
}
.ph-split .ph-body {
  margin: auto auto 0; max-width: 900px; text-align: center;
  padding-bottom: 236px;
}
.ph-split .ph-title { font-size: clamp(32px, 3.9vw, 60px); max-width: 20ch; margin: 0 auto; }
.ph-split .ph-lead { margin-left: auto; margin-right: auto; }
.ph-split .ph-obj { left: 50%; transform: translateX(-50%); bottom: -108px; width: min(640px, 62%); }

/* ── 2. DRIFT — tittelen nede til venstre, stripe i bunnkanten ── */
.ph-band .ph-img { top: auto; bottom: 0; height: 62%; }
.ph-band .ph-veil {
  background: linear-gradient(180deg, #0a0a0a 0%, #0a0a0a 32%, rgba(10,10,10,0.4) 46%, rgba(10,10,10,0.28) 70%, rgba(10,10,10,0.8) 100%);
}
.ph-band .ph-body { margin: auto 0 0; padding-bottom: 108px; max-width: 60%; }
.ph-band .ph-obj { left: 0; right: 0; bottom: 0; }

/* ── 3. CHATBOTS — tittelen midt til høyre ── */
.ph-mirror .ph-img { right: auto; left: 0; width: 56%; }
.ph-mirror .ph-veil {
  background: linear-gradient(270deg, #0a0a0a 0%, #0a0a0a 40%, rgba(10,10,10,0.5) 49%, rgba(10,10,10,0.1) 66%, transparent 100%);
}
.ph-mirror .ph-body {
  margin: auto 0 auto auto; max-width: 48%;
  padding-bottom: 0; text-align: right;
}
.ph-mirror .ph-lead { margin-left: auto; }
.ph-mirror .ph-title { font-size: clamp(30px, 3.3vw, 48px); }
.ph-mirror .ph-obj { left: 56px; top: 50%; transform: translateY(-50%); width: min(340px, 38%); }

/* ── 4. SYSTEMUTVIKLING — tittelen øverst, sentrert. Kartet under. ── */
.ph-poster .ph-veil {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.62) 34%, rgba(10,10,10,0.55) 70%, rgba(10,10,10,0.86) 100%);
}
.ph-poster .ph-body {
  margin: 0 auto auto; max-width: 860px; text-align: center;
  padding-top: 26px; padding-bottom: 0;
}
.ph-poster .ph-title { font-size: clamp(32px, 3.8vw, 58px); }
.ph-poster .ph-lead { margin-left: auto; margin-right: auto; max-width: 48ch; }
.ph-poster .ph-obj { left: 50%; transform: translateX(-50%); bottom: 56px; width: min(500px, 58%); }

/* ── 5. API — tittelen øverst til venstre, rørgata i bunnkanten ── */
.ph-edge .ph-img { left: auto; right: 0; width: 30%; }
.ph-edge .ph-veil {
  background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 64%, rgba(10,10,10,0.4) 74%, transparent 100%);
}
.ph-edge .ph-body { margin: 0 0 auto; padding-top: 30px; max-width: 66%; }
.ph-edge .ph-title { font-size: clamp(32px, 3.8vw, 58px); }
.ph-edge .ph-obj { left: 56px; right: 56px; bottom: 56px; }

/* ── 6. BOOKING — tittelen nede, sentrert. Tidene øverst. ── */
.ph-frame .ph-img { inset: 0; width: 100%; }
.ph-frame .ph-veil {
  background: linear-gradient(180deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.45) 34%, rgba(10,10,10,0.7) 72%, rgba(10,10,10,0.95) 100%);
}
.ph-frame .ph-body { margin: auto auto 0; max-width: 900px; text-align: center; }
.ph-frame .ph-lead { margin-left: auto; margin-right: auto; }
.ph-frame .ph-title { font-size: clamp(32px, 3.9vw, 60px); max-width: 20ch; margin: 0 auto; }
.ph-frame .ph-obj { left: 50%; transform: translateX(-50%); top: 122px; width: min(760px, 76%); }


/* ── Mobil: én enkel stabel, konseptet ut ── */
@media (max-width: 900px) {
  .photo-hero { min-height: min(78vh, 620px); }
  .ph-body, .ph-split .ph-body, .ph-mirror .ph-body, .ph-poster .ph-body,
  .ph-frame .ph-body, .ph-edge .ph-body, .ph-band .ph-body {
    margin: auto 0 0; max-width: none; text-align: left;
    padding: 0 24px 40px;
  }
  .ph-mirror .ph-lead, .ph-poster .ph-lead, .ph-split .ph-lead,
  .ph-frame .ph-lead { margin-left: 0; margin-right: 0; }
  .ph-img, .ph-split .ph-img, .ph-mirror .ph-img, .ph-edge .ph-img,
  .ph-frame .ph-img, .ph-band .ph-img {
    inset: 0; width: 100%; height: 100%; border-radius: 0;
  }
  .ph-veil, .ph-split .ph-veil, .ph-mirror .ph-veil, .ph-poster .ph-veil,
  .ph-edge .ph-veil, .ph-frame .ph-veil, .ph-band .ph-veil {
    background: linear-gradient(180deg, rgba(6,7,7,0.7) 0%, rgba(6,7,7,0.12) 32%, rgba(6,7,7,0.72) 74%, rgba(6,7,7,0.95) 100%);
  }
  .ph-title, .ph-split .ph-title, .ph-mirror .ph-title, .ph-poster .ph-title,
  .ph-edge .ph-title, .ph-frame .ph-title, .ph-band .ph-title {
    font-size: clamp(29px, 6.6vw, 40px);
  }
  .ph-obj, .ph-split .ph-obj, .ph-mirror .ph-obj, .ph-poster .ph-obj,
  .ph-edge .ph-obj, .ph-frame .ph-obj, .ph-band .ph-obj { display: none; }
}
@media (max-width: 560px) {
  .ph-body { padding: 0 18px 34px !important; }
  .ph-kicker { letter-spacing: 0.22em; margin-bottom: 16px; }
  .ph-lead { font-size: 15px; margin-top: 18px; }
}


/* ─── Nav oppå heroen ───
   Svevende, gjennomskinnelig linje som ligger inne på heroflaten i
   stedet for å ligge flatt i toppen. Hvitopasiteten holdes lav og
   blur-en lett med vilje: gradienten bak skal fortsatt leses tydelig
   gjennom baren — den skal bare løfte seg fra den, ikke dekke den. */
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  /* Fast fra start. Lå tidligere i flyten og byttet til «fixed» ved
     rulling — men position kan ikke animeres, så baren hoppet i stedet
     for å utvide seg. Nå endres bare bredde, marg, radius og farge, og
     alt det lar seg overgangsanimere. */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  max-width: 1290px;
  width: calc(100% - 36px);
  margin: 16px auto 0;
  padding: 12px 12px 12px 22px;
  transition:
    max-width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.42s ease,
    box-shadow 0.42s ease,
    border-color 0.42s ease;
  border-radius: 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(9px) saturate(1.2);
  -webkit-backdrop-filter: blur(9px) saturate(1.2);
  box-shadow: 0 14px 34px rgba(3,24,58,0.15);
}

/* Logo + slagord, skilt med en tynn strek — venstre blokk i baren */
.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}
.hero-tagline {
  font-size: 12.5px;
  line-height: 1.34;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.74);
  padding-left: 15px;
  border-left: 1px solid rgba(255,255,255,0.28);
}
/* Må matche spesifisiteten til «.hero > *:not(.hero-photo)» (0,2,0),
   ellers vinner den regelen og dropdownen havner bak hero-teksten.
   NB: «position» settes IKKE her lenger — baren er «fixed», og en
   relative-regel med høyere spesifisitet ville låst den i flyten. */
.hero > .hero-nav,
.page-hero > .hero-nav { z-index: 60; }
.hero-nav .brand {
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Logomerket males med mask-image i stedet for å ligge inline. Sebraen
   er 13 kB path-data — inline ville den ligget tre ganger på hver av 20
   sider. Som maske hentes logo.svg én gang og caches, og «background:
   currentColor» gir samme fargearv som fill: currentColor ga. */
.brand .mark,
.brand-big .mark,
.mm-top .mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: block;
  background: currentColor;
  -webkit-mask: var(--logo-maske) center / contain no-repeat;
  mask: var(--logo-maske) center / contain no-repeat;
}
.brand-big .mark { width: 34px; height: 34px; }
/* Footerens wordmark skal ha samme tynne behandling som i nav-en —
   det er logoteksten, ikke brødtekst. Resten av footeren står urørt. */
.foot-brand .brand-big {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 300;
  font-size: 27px;
  letter-spacing: 0.05em;
  gap: 14px;
}
.hero-nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.hero-nav-links > a,
.hero-nav-links .nav-dropdown-trigger {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.18s;
}
.hero-nav-links > a:hover,
.hero-nav-links .nav-dropdown-trigger:hover { opacity: 0.72; }
.hero-nav-links .chev {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s;
}
.nav-dropdown { position: relative; }
.nav-dropdown:hover .chev,
.nav-dropdown:focus-within .chev { transform: rotate(180deg); }
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translate(-50%, -8px);
  min-width: 268px;
  background: #fff;
  border: 1px solid rgba(10,10,10,0.08);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 56px rgba(0,0,0,0.22);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}
.nav-dropdown-panel a {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(10,10,10,0.78);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown-panel a:hover { background: rgba(10,10,10,0.05); color: #0a0a0a; }
.nav-dropdown-all {
  margin-top: 8px;
  padding: 12px 14px !important;
  background: var(--lime);
  color: #0a0a0a !important;
  font-weight: 700 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nav-dropdown-all:hover { background: #c2f01e !important; color: #0a0a0a !important; }
.nav-dropdown-panel .nav-dropdown-sep {
  height: 1px;
  background: rgba(10,10,10,0.1);
  margin: 8px 6px 2px;
}

.hero-nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-btn-ghost, .nav-btn-lime {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 12px 26px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
/* Inne i den gjennomskinnelige baren ble en kantet knapp for mye ramme
   oppå ramme. Den er nå en ren lenke, så CTA-en står alene som knapp. */
.nav-btn-ghost {
  border: 0;
  color: rgba(255,255,255,0.88);
  padding: 12px 10px;
}
.nav-btn-ghost:hover { color: #fff; }
.nav-btn-lime {
  background: var(--lime);
  color: #0a0a0a;
  border: 1.5px solid var(--lime);
}
.nav-btn-lime:hover { background: #c2f01e; border-color: #c2f01e; }

/* ─── Menyknapp i heroen: skjult på desktop, eneste navigasjon på mobil.
   hjemmeside.css styler kun «.nav .menu-btn», så den må stiles her. ─── */
.hero-nav .menu-btn {
  display: none;
  align-items: center;
  gap: 11px;
  background: transparent;
  border: 0;
  padding: 6px 0;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.hero-nav .menu-btn .bars {
  width: 26px; height: 1.5px;
  background: #fff;
  position: relative;
}
.hero-nav .menu-btn .bars::before {
  content: ""; position: absolute;
  width: 100%; height: 1.5px;
  background: #fff;
  top: -7px; left: 0;
}

/* Var 1080px. Målt: ved 1081px var innholdet 1030px bredt i en bar på
   1025 — lenkene hadde allerede begynt å klemmes sammen. Byttet skjer nå
   FØR baren blir trang, ikke etter. */
@media (max-width: 1150px) {
  .hero-nav { padding: 12px 18px; gap: 18px; }
  .hero-nav-links,
  .hero-nav-actions .nav-btn-ghost { display: none; }
  .hero-nav .menu-btn { display: inline-flex; padding: 8px 0; }
}
@media (max-width: 820px) {
  /* Slagordet er det første som må vike når baren blir trang */
  .hero-tagline { display: none; }
}
@media (max-width: 560px) {
  .hero-nav-actions .nav-btn-lime { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   PLATTFORMEN — seksjonen rett under hero
   ═══════════════════════════════════════════════════════════ */
.platform {
  background: #fff;
  padding: 120px 0 110px;
}
.platform-top {
  max-width: 1290px;
  margin: 0 auto 84px;
  padding: 0 24px;
}
.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.19em;
  color: #0a0a0a;
  font-family: 'Geist Mono', ui-monospace, monospace;
  margin-bottom: 42px;
}
.pf-sq { width: 5px; height: 5px; background: #0a0a0a; display: inline-block; }

.pf-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 72px;
  align-items: end;
}
.pf-head {
  font-family: 'Season Sans', 'Geist', 'Inter', sans-serif;
  font-size: clamp(32px, 3.15vw, 52px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.16;
  color: #0a0a0a;
  text-wrap: balance;
}
.pf-grey { color: #b3b3b3; }
/* Uthever ett ord inne i den grå halvdelen av en overskrift. Holder seg
   i gråfamilien så to-tone-grepet består — det er vekten som markerer. */
.pf-em {
  font-style: normal;
  font-weight: 700;
  color: #4a4a4a;
}

.pf-aside { padding-bottom: 6px; }
.pf-aside p {
  /* 15.5px var for spinkelt ved siden av en overskrift på 32–52px.
     Dette er brødtekst folk faktisk skal lese, ikke en bildetekst. */
  font-size: 17px;
  line-height: 1.6;
  color: rgba(10,10,10,0.66);
  margin-bottom: 20px;
  max-width: 340px;
}
.pf-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: #0a0a0a;
  padding-bottom: 5px;
  border-bottom: 1.5px solid #0a0a0a;
}
.pf-link-arrow { transition: transform 0.22s ease; }
.pf-link:hover .pf-link-arrow { transform: translateX(4px); }

/* ─── Ikon-badges med bittesmå animasjoner ─── */
.pf-badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--lime);
  flex-shrink: 0;
  align-self: flex-start;
}
.pf-lime-card .pf-badge { background: #0a0a0a; }
.pf-dark-card .pf-badge { background: var(--lime); position: relative; z-index: 2; }
.pf-badge svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: #0a0a0a;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.pf-lime-card .pf-badge svg { stroke: var(--lime); }

/* Lag-ikon: lagene puster forsiktig fra hverandre */
.ic-stack .l1 { animation: stackTop 3.6s ease-in-out infinite; }
.ic-stack .l2 { animation: stackMid 3.6s ease-in-out infinite; }
.ic-stack .l3 { animation: stackBot 3.6s ease-in-out infinite; }
@keyframes stackTop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes stackMid { 0%,100% { transform: translateY(0); } 50% { transform: translateY(0.3px); } }
@keyframes stackBot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1.4px); } }

/* Måler: nålen svinger opp mot maks */
.ic-gauge .needle {
  transform-origin: 12px 18px;
  animation: needleSweep 4s cubic-bezier(0.45,0,0.25,1) infinite;
}
@keyframes needleSweep {
  0%, 12%   { transform: rotate(-72deg); }
  55%, 88%  { transform: rotate(70deg); }
  100%      { transform: rotate(-72deg); }
}

/* Klokke: viseren går rundt sakte */
.ic-clock .hand {
  transform-origin: 12px 12px;
  animation: clockHand 7s linear infinite;
}
@keyframes clockHand { to { transform: rotate(360deg); } }

/* Syklus: hele ikonet roterer rolig */
.ic-cycle {
  transform-origin: 50% 50%;
  animation: cycleSpin 9s linear infinite;
}
@keyframes cycleSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ic-stack .l1, .ic-stack .l2, .ic-stack .l3,
  .ic-gauge .needle, .ic-clock .hand, .ic-cycle { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   VARIANTER AV SEKSJONS-HEADEREN
   Standard = eyebrow venstre, tittel venstre, aside høyre.
   Variantene under bryter opp rytmen nedover siden.
   ═══════════════════════════════════════════════════════════ */

/* ── Sentrert ── */
.pt-center { text-align: center; }
.pt-center .pf-eyebrow { margin-bottom: 26px; }
.pt-center .pf-top-grid {
  grid-template-columns: 1fr;
  gap: 24px;
  justify-items: center;
}
.pt-center .pf-head { max-width: 860px; }
.pt-center .pf-aside { padding-bottom: 0; }
.pt-center .pf-aside p {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.pt-center .pf-link { margin: 0 auto; }

/* ── Speilvendt: aside venstre, tittel høyre ── */
.pt-reverse .pf-eyebrow { margin-bottom: 42px; }
.pt-reverse .pf-top-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
}
.pt-reverse .pf-head { order: 2; }
.pt-reverse .pf-aside { order: 1; }

/* ── Én linje: tittel venstre, lenke helt til høyre ── */
.pt-inline .pf-eyebrow { margin-bottom: 26px; }
.pt-inline .pf-top-grid {
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 48px;
}
.pt-inline .pf-aside { padding-bottom: 0; }
.pt-inline .pf-aside p { display: none; }
.pt-inline .pf-link { white-space: nowrap; }

@media (max-width: 900px) {
  /* Standardvarianten må også kollapse — ellers klemmes tittel og
     sidetekst inn i to smale kolonner på mobil. */
  .pf-top-grid { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .pt-reverse .pf-top-grid,
  .pt-inline .pf-top-grid { grid-template-columns: 1fr; }
  .pt-reverse .pf-head { order: 0; }
  .pt-reverse .pf-aside { order: 1; }
  .pt-inline .pf-top-grid { align-items: start; }
  .pt-inline .pf-aside p { display: block; }

  .platform-top { margin-bottom: 48px; }
  .pf-eyebrow,
  .pt-reverse .pf-eyebrow { margin-bottom: 24px; }
  .pf-aside { padding-bottom: 0; }
  .pf-aside p { max-width: 520px; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — identisk på alle sider
   ═══════════════════════════════════════════════════════════ */
/* Footeren speiler heroen: luft ut mot sidene og myke hjørner øverst,
   men helt flush mot bunnen av siden. */
footer {
  margin: 0 10px;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}
/* Logo-prikken i footeren skal være lime som resten av merkevaren */
/* .dot er erstattet av .mark — merket arver footerens tekstfarge */

/* Den brede varianten med alle undersidene — fem kolonner */
.foot-top-wide { grid-template-columns: 1.3fr 1fr 1fr 1fr 0.9fr; gap: 40px; }
@media (max-width: 980px) {
  .foot-top-wide { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
}
@media (max-width: 640px) {
  .foot-top-wide { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   SCROLL-ANIMASJONER
   Klassene settes av forside.js — markupen holdes ren.
   ═══════════════════════════════════════════════════════════ */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
.rv.on {
  opacity: 1;
  transform: none;
}

/* Kort får et snev av skalering i tillegg — kjennes mer fysisk */
.pf-card.rv, .s2-card.rv, .cv-card.rv, .rv-card.rv,
.sv-card.rv, .nk-card.rv, .bl-card.rv,
.wy-card.rv, .bn.rv, .ds-card.rv, .dp-card.rv,
.lv-card.rv, .bk.rv, .sp-card.rv, .pb.rv, .mn.rv {
  transform: translateY(30px) scale(0.985);
}
.pf-card.rv.on, .s2-card.rv.on, .cv-card.rv.on, .rv-card.rv.on,
.sv-card.rv.on, .nk-card.rv.on, .bl-card.rv.on,
.wy-card.rv.on, .bn.rv.on, .ds-card.rv.on, .dp-card.rv.on,
.lv-card.rv.on, .bk.rv.on, .sp-card.rv.on, .pb.rv.on, .mn.rv.on {
  transform: none;
}

/* Kompetanse-radene sklir inn fra venstre i stedet */
.komp-row.rv { transform: translateX(-22px); opacity: 0; }
.komp-row.rv.on { transform: none; opacity: 1; }

/* FAQ-kortene kommer inn fra høyre */
.fq-item.rv { transform: translateX(22px); }
.fq-item.rv.on { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.on,
  .komp-row.rv, .fq-item.rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DEMO-CTA — siste seksjon før footeren
   Ett fullbredde-band med Norden-bildet i full bredde og hele sin
   høyde, og all CTA-teksten lagt oppå. Lå tidligere som to kort side
   om side, der bildet ble beskåret til ca. en tredel — jordkrumningen,
   atmosfæren, Island og Skottland forsvant helt ut av rammen.
   ═══════════════════════════════════════════════════════════ */
.demo2 { background: #fff; padding: 20px 0 0; }

.dm-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Speiler heroen: samme 10px innrykk og hjørneradius, og møter
     footeren som har samme innrykk rett under. */
  margin: 0 10px 10px;
  border-radius: 22px;
  /* Fast, lav høyde i stedet for bildets eget forhold (1408/768), som ga
     et ~775px høyt bånd. Nedre grense er satt av innholdet: eyebrow,
     overskrift, tekst, knapp og punktliste trenger drøyt 430px. */
  height: clamp(450px, 36vw, 580px);
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.dm-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Beskjæringen tas nesten bare nedenfra, så jordkrumningen og
     atmosfæren i toppen — motivets beste del — blir stående. */
  object-position: center 14%;
}
/* Mørkner nede til venstre der teksten står. Oppe til høyre ligger
   jordkrumningen og atmosfæren urørt — det er motivet. */
.dm-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,8,20,0.93) 0%, rgba(2,8,20,0.74) 28%, rgba(2,8,20,0.26) 58%, transparent 80%),
    linear-gradient(0deg, rgba(2,8,20,0.88) 0%, rgba(2,8,20,0.42) 40%, transparent 74%);
}
.dm-inner {
  position: relative;
  width: 100%;
  /* 780px er så bredt teksten kan gå før den krysser ut av det mørke
     havet og legger seg over Norge. Trengs for at de tre punktene
     nederst skal stå på én linje. */
  max-width: 780px;
  padding: 64px 58px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dm-eyebrow { color: rgba(255,255,255,0.72); margin-bottom: 26px; }
.dm-eyebrow .pf-sq { background: var(--lime); }
.dm-head {
  font-size: clamp(34px, 3.5vw, 54px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.dm-lime { color: var(--lime); }
.dm-text {
  font-size: 16px;
  line-height: 1.6;
  /* Lysere enn på sort kort — over foto trenger brødteksten mer vekt. */
  color: rgba(255,255,255,0.82);
  max-width: 480px;
  margin-bottom: 34px;
  text-shadow: 0 1px 14px rgba(0,0,0,0.5);
}
.dm-btn {
  --cap: 42px;
  --pad: 7px;
  gap: 20px;
  align-self: flex-start;
  padding: var(--pad) var(--pad) var(--pad) 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.dm-points {
  list-style: none;
  margin-top: 38px;
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  border-top: 1px solid rgba(255,255,255,0.22);
  width: 100%;
}
.dm-points li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.dm-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--lime);
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .dm-band { height: auto; }
  .dm-inner { max-width: 100%; padding: 230px 26px 34px; }
  .dm-points { gap: 10px 22px; }
}



/* ═══════════════════════════════════════════════════════════
   UTSAGN — sentrert avsnitt der bare nøkkelsetningene er svarte
   og resten er grå. Brukes mellom seksjonene som pustepause.
   ═══════════════════════════════════════════════════════════ */
.say { background: #fff; padding: 110px 24px; }
.say p {
  font-family: 'Season Sans', 'Geist', 'Inter', sans-serif;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(20px, 2.05vw, 27px);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.45;
  color: #a8a8a4;
  text-wrap: pretty;
}
.say em { font-style: normal; color: #0a0a0a; }
@media (max-width: 700px) {
  .say { padding: 74px 20px; }
  .say p { font-size: 19px; }
}


/* ═══════════════════════════════════════════════════════════
   SMÅ LIVSTEGN
   Fire ting, alle diskré. Poenget er at siden skal kjennes
   som noe noen steller med — ikke som en animasjonsdemo.
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. Trykkfølelse ───
   Uten dette skjer det ingenting mellom klikk og sidebytte, og
   på mobil kjennes knappen død i det halve sekundet det tar. */
.btn-circle,
.nav-btn-lime,
.ph-link,
.pf-link,
.sp-go {
  transition:
    transform 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.btn-circle:active,
.nav-btn-lime:active,
.ph-link:active,
.sp-go:active { transform: scale(0.972); }
/* Kort som allerede løftes ved hover skal presses litt ned igjen */
.sv-card:active,
.bl-card:active,
.rv-card:active,
.ci-card:active,
.rc-card:active,
.wz-opt:active { transform: translateY(0) scale(0.994); }


/* ─── 2. Bilder toner inn ───
   Bildene poppet inn ferdig lastet, ett og ett, etter hvert som
   nettet rakk. Fadeen gjør rekkefølgen umerkelig. */
img[loading="lazy"] {
  opacity: 0;
  animation: bildeInn 0.6s ease forwards;
}
/* Ligger bildet i cache er det ferdig før animasjonen rekker å
   starte — derfor forwards og ingen forsinkelse. */
@keyframes bildeInn { to { opacity: 1; } }


/* ─── 3. Logoprikken puster ───
   Merkevarens eneste bevegelse når man bare står stille på siden. */
.brand .mark,
.brand-big .mark {
  animation: prikkPust 6s ease-in-out infinite;
}
/* Merket puster svakere og saktere enn prikken gjorde — et logomerke
   som pumper blir påtrengende. */
@keyframes prikkPust {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.82; }
}


/* ─── 4. Klokke og status i footeren ───
   Ekte tid i Drammen. Det er det eneste på hele siden som
   forteller den besøkende at det finnes en person i andre enden. */
.foot-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fl-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  position: relative;
}
.fl-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--lime);
  opacity: 0.6;
  animation: flPing 2.6s ease-out infinite;
}
@keyframes flPing {
  0%   { transform: scale(0.7); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.foot-live time {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.fl-sep { opacity: 0.4; }
/* Utenfor arbeidstid dempes prikken — statusteksten sier det samme,
   men fargen sier det først. */
.foot-live [data-status].is-sen { opacity: 0.72; }
.foot-live:has([data-status].is-sen) .fl-dot { background: #9aa0a6; }
.foot-live:has([data-status].is-sen) .fl-dot::after { border-color: #9aa0a6; }


@media (prefers-reduced-motion: reduce) {
  .brand .mark, .brand-big .mark,
  .fl-dot::after { animation: none; }
  img[loading="lazy"] { opacity: 1; animation: none; }
  .btn-circle:active, .nav-btn-lime:active,
  .ph-link:active, .sp-go:active,
  .sv-card:active, .bl-card:active, .rv-card:active,
  .ci-card:active, .rc-card:active, .wz-opt:active { transform: none; }
}


/* ═══════════════════════════════════════════════════════════
   NAV-TYPOGRAFI — Syne
   Nav-en gikk i Geist, samme skrift som brødteksten, og ble
   dermed helt nøytral. Syne er en byrå-grotesk med markert
   karakter i store bokstaver og et bredt, geometrisk snitt —
   den står allerede nevnt som tiltenkt display-skrift øverst i
   denne fila, men ble aldri lastet. Nå brukes den KUN i nav-en,
   så den blir sidens signatur og ikke støy i brødteksten.
   ═══════════════════════════════════════════════════════════ */
/* Wordmarken skal IKKE i Syne — den ble tung og bred ved siden av
   et grafisk merke. Tynn Geist med litt luft mellom bokstavene leser
   som noe dyrt, og gir kontrast mot det massive logomerket. */
.hero-nav .brand {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 300;
  font-size: 21px;
  letter-spacing: 0.05em;
}
.hero-nav-links > a,
.hero-nav-links .nav-dropdown-trigger,
.nav-btn-ghost,
.nav-btn-lime {
  font-family: 'Syne', 'Geist', sans-serif;
  font-weight: 600;
}
.hero-nav-links > a,
.hero-nav-links .nav-dropdown-trigger {
  font-size: 14.5px;
  letter-spacing: 0.002em;
}
/* Syne er merkbart bredere enn Geist — «Kompetanse» går fra 91 til
   98px. Grad og mellomrom trekkes ned tilsvarende, ellers måtte
   hamburger-brytepunktet flyttes helt opp mot 1300px. */
.hero-nav-links { gap: 28px; }
.nav-btn-ghost,
.nav-btn-lime { font-size: 12px; letter-spacing: 0.1em; }
/* Slagordet forblir i Geist. Syne er en display-skrift og blir
   sliten å lese på 12,5px over to linjer. */
.hero-tagline { font-family: 'Geist', 'Inter', sans-serif; }
/* Dropdown-panelet arver nav-en — der er det lenketekst, ikke display */
.nav-dropdown-panel a { font-family: 'Geist', 'Inter', sans-serif; }


/* ═══════════════════════════════════════════════════════════
   MOBILMENY
   Lå igjen fra forrige designgenerasjon: mørk flate, hvit tekst,
   og en overstyring til hvit som bare gjaldt forsiden — altså to
   forskjellige menyer avhengig av hvor du sto. Defineres her, én
   gang, for alle sider.
   ═══════════════════════════════════════════════════════════ */
.mobile-menu {
  background: #fff;
  justify-content: space-between;
  text-align: left;
  align-items: stretch;
  padding: 26px 26px 34px;
}

/* Toppen: merket, så man ser hvor man er mens menyen er åpen */
.mm-top {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0a0a0a;
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.05em;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(10,10,10,0.10);
  opacity: 0;
}
.mm-top .mark { width: 26px; height: 26px; }
.mobile-menu.open .mm-top {
  animation: menuItemIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

.mobile-menu-nav {
  flex: 1;
  justify-content: center;
  gap: 2px;
}
.mobile-menu-nav a {
  /* Samme skrift som nav-lenkene på desktop */
  font-family: 'Syne', 'Geist', sans-serif;
  font-size: clamp(2rem, 5.6vh, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #0a0a0a;
  padding: clamp(5px, 0.9vh, 11px) 0;
  transition: color 0.2s, transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:active {
  color: #0a0a0a;
  transform: translateX(6px);
}

/* Kontaktinfoen nederst — limegrønn med glød, samme aksent som resten */
.mobile-menu-foot {
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(10,10,10,0.10);
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.mobile-menu-foot a {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #7a9c14;
  /* Ren lime (#d4ff3d) er uleselig på hvitt. Teksten settes i en mørkere
     tone av samme farge, og gløden legges bak med text-shadow. */
  text-shadow:
    0 0 14px rgba(212, 255, 61, 0.85),
    0 0 30px rgba(212, 255, 61, 0.45);
  transition: color 0.2s, text-shadow 0.2s;
}
.mobile-menu-foot a:hover {
  color: #0a0a0a;
  text-shadow: 0 0 18px rgba(212, 255, 61, 1), 0 0 36px rgba(212, 255, 61, 0.6);
}
.mm-foot-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.4);
  margin-bottom: 4px;
}

/* Menyknappen står oppå den hvite flaten når menyen er åpen */
body.menu-open .hero-nav .menu-btn { color: #0a0a0a; }
body.menu-open .hero-nav .menu-btn .bars,
body.menu-open .hero-nav .menu-btn .bars::before { background: #0a0a0a; }


/* ═══════════════════════════════════════════════════════════
   NAV PÅ LYS FLATE
   Nav-en er bygget for mørk/farget bakgrunn: hvit tekst og en
   gjennomskinnelig hvit bar. På en lys hero forsvinner den helt.
   Denne varianten snur den — og gjenbrukes til den hvite baren
   som legger seg på ved scrolling.
   ═══════════════════════════════════════════════════════════ */
.hero-nav.is-dark {
  background: rgba(10,10,10,0.045);
  border-color: rgba(10,10,10,0.10);
  box-shadow: 0 10px 28px rgba(10,10,10,0.07);
}
.hero-nav.is-dark .brand { color: #0a0a0a; }
.hero-nav.is-dark .hero-tagline {
  color: rgba(10,10,10,0.6);
  border-left-color: rgba(10,10,10,0.18);
}
.hero-nav.is-dark .hero-nav-links > a,
.hero-nav.is-dark .hero-nav-links .nav-dropdown-trigger { color: rgba(10,10,10,0.82); }
.hero-nav.is-dark .hero-nav-links > a:hover,
.hero-nav.is-dark .hero-nav-links .nav-dropdown-trigger:hover { color: #0a0a0a; }
.hero-nav.is-dark .nav-btn-ghost { color: rgba(10,10,10,0.75); }
.hero-nav.is-dark .nav-btn-ghost:hover { color: #0a0a0a; }
.hero-nav.is-dark .menu-btn { color: #0a0a0a; }
.hero-nav.is-dark .menu-btn .bars,
.hero-nav.is-dark .menu-btn .bars::before { background: #0a0a0a; }


/* ═══════════════════════════════════════════════════════════
   KORT-HOVER
   Halvparten av kortene på nettstedet reagerte ikke på musa i
   det hele tatt — de leste som bilder, ikke som noe man kan
   forholde seg til. Én felles behandling: kortet løftes, får
   en myk skygge, og det som er kortets «anker» (ikon, tall,
   nummer) rører litt på seg. Ingen farge­eksplosjon — det er
   bevegelsen som gjør at siden kjennes levende, ikke effekten.
   ═══════════════════════════════════════════════════════════ */
.pf-card, .s2-card, .cv-card,
.sp-card, .pk-card, .hw-step,
.ph-card, .ag-card, .wy-card,
.nk-card, .st-step, .in-price,
.bg-next-card, .rc-card, .ci-card {
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s ease,
    background 0.25s ease;
  will-change: transform;
}

.pf-card:hover, .s2-card:hover, .cv-card:hover,
.sp-card:hover, .pk-card:hover,
.ph-card:hover, .ag-card:hover, .wy-card:hover,
.nk-card:hover, .in-price:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(10, 10, 10, 0.11);
}
/* Mørke kort trenger en dypere skygge for at løftet skal leses */
.pf-dark-card:hover, .s2-dark:hover, .cv-dark:hover,
.sp-quote:hover, .pk-featured:hover,
.ph-dark:hover, .ag-dark:hover, .wy-card.is-dark:hover,
.nk-dark:hover, .in-price:hover {
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.34);
}

/* Ankeret i kortet: ikonet, tallet eller nummeret */
.pf-badge,
.pf-val, .s2-num, .nk-stat,
.ag-n, .ph-n, .wy-n, .sv-num, .pk-price {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pf-card:hover .pf-badge,
.ag-card:hover .ag-n,
.ph-card:hover .ph-n,
.wy-card:hover .wy-n,
.sv-card:hover .sv-num { transform: translateY(-2px) scale(1.06); }
.pf-card:hover .pf-val,
.s2-card:hover .s2-num,
.nk-card:hover .nk-stat,
.pk-card:hover .pk-price { transform: translateY(-2px); }

/* Stegene i prosessene: prikken på tidslinja lyser opp */
.hw-step::before, .st-step::before {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.hw-step:hover::before, .st-step:hover::before {
  transform: scale(1.5);
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(212, 255, 61, 0.28);
}
.hw-step:hover h3, .st-step:hover h3 { color: #0a0a0a; }

/* Kortene som allerede løftet seg får samme kurve, så alt på
   siden beveger seg med samme «vekt». */
.sv-card, .bl-card, .rv-card {
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s ease,
    background 0.25s ease;
}
.sv-card:hover, .bl-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(10, 10, 10, 0.11);
}
.sv-dark:hover { box-shadow: 0 24px 52px rgba(0, 0, 0, 0.34); }

@media (prefers-reduced-motion: reduce) {
  .pf-card, .s2-card, .cv-card, .sp-card, .pk-card, .hw-step,
  .ph-card, .ag-card, .wy-card, .nk-card, .st-step, .in-price,
  .bg-next-card, .rc-card, .ci-card, .sv-card, .bl-card, .rv-card {
    transition: none;
  }
  .pf-card:hover, .s2-card:hover, .cv-card:hover, .sp-card:hover,
  .pk-card:hover, .ph-card:hover, .ag-card:hover, .wy-card:hover,
  .nk-card:hover, .in-price:hover, .sv-card:hover, .bl-card:hover {
    transform: none;
  }
  .hw-step:hover::before, .st-step:hover::before { transform: none; }
}

/* Berøringsskjermer har ingen hover — der ville løftet blitt
   hengende igjen etter et trykk. */
@media (hover: none) {
  .pf-card:hover, .s2-card:hover, .cv-card:hover, .sp-card:hover,
  .pk-card:hover, .ph-card:hover, .ag-card:hover, .wy-card:hover,
  .nk-card:hover, .in-price:hover, .sv-card:hover, .bl-card:hover,
  .rv-card:hover, .bg-next-card:hover, .rc-card:hover, .ci-card:hover {
    transform: none;
    box-shadow: none;
  }
}


/* ═══════════════════════════════════════════════════════════
   NAV — inngang og fast bar
   Ved lasting glir baren ned ovenfra og legger seg på plass.
   Ruller man forbi heroen, festes den i toppen som en hvit bar
   i full bredde, med sort tekst.
   ═══════════════════════════════════════════════════════════ */
.hero-nav {
  animation: navNed 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}
@keyframes navNed {
  from { opacity: 0; transform: translateY(-140%); }
  to   { opacity: 1; transform: none; }
}

/* Fast bar. Settes av hjemmeside.js i det man begynner å rulle.
   Her endres kun bredde, marg, radius og farge — baren ligger allerede
   fast, så utvidelsen glir i stedet for å hoppe. */
.hero-nav.is-stuck {
  max-width: 100%;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border-color: transparent;
  border-bottom: 1px solid rgba(10,10,10,0.09);
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 6px 26px rgba(10,10,10,0.07);
  padding: 12px max(22px, calc((100% - 1290px) / 2 + 22px));
}

@media (prefers-reduced-motion: reduce) {
  .hero-nav { animation: none; }
  .hero-nav.is-stuck { transition: none; }
}