/* ==========================================================================
   Bluegrid — style.css
   Mørk kinematisk luksus. Filmisk fotografi, filmkorn, én aksentfarge,
   dobbel-bezel-flater og rolig bevegelse med reell masse.

   Kun transform/opacity animeres. Én radius-skala. Ingen eksterne kall.
   ========================================================================== */

/* Display-font for overskrifter (selvhostet, latin subset, variabel vekt) */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Flater — dypt, nesten OLED-svart med kald undertone */
  --bg: #04060b;
  --bg-deep: #010204;
  --bg-elev: #080c14;
  --panel: #0a0f1a;
  --panel-2: #0e1524;

  /* Hairlines. Aldri grå 1px-rammer — alltid en tint av aksenten. */
  --line: rgba(150, 182, 235, 0.09);
  --line-2: rgba(150, 182, 235, 0.16);
  --line-3: rgba(150, 182, 235, 0.28);

  /* Tekst */
  --text: #f1f4fa;
  --muted: #8d9bb4;
  --faint: #5b6880;

  /* Én aksent. Brukes sparsomt: ett ord, én knapp, én linje. */
  --accent: #4f97ff;
  --accent-dim: #1e6cf0;
  --accent-wash: rgba(79, 151, 255, 0.1);

  /* Typografi */
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, -apple-system,
    BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;

  /* Bevegelse — tung, fjærende utgang. Aldri linear/ease-in-out. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Radius */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --bezel: 6px;

  /* Skygger — diffuse og dype, aldri harde */
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.6), 0 12px 28px -12px rgba(0, 0, 0, 0.8),
    0 40px 80px -48px rgba(30, 108, 240, 0.28);
  --shadow-hi: 0 1px 2px rgba(0, 0, 0, 0.6), 0 24px 48px -16px rgba(0, 0, 0, 0.85),
    0 56px 110px -44px rgba(30, 108, 240, 0.4);

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

/* Filmkorn — fast lag, aldri festet til noe som scroller. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="220" height="220" filter="url(%23n)"/></svg>');
}

::selection {
  background: rgba(79, 151, 255, 0.32);
  color: #fff;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 0.55em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 7.2vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.042em;
}

h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.036em;
}

h3 {
  font-size: 1.14rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 300ms var(--ease);
}

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

.container {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.container-wide {
  width: min(1400px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  transition: transform 300ms var(--ease);
}

.skip-link:focus {
  transform: translateY(5rem);
}

/* --------------------------------------------------------------------------
   Typografiske hjelpere
   -------------------------------------------------------------------------- */

/* Ett fremhevet ord. Kursiv editorial-aksent, ikke gradient. */
.accent-word {
  color: var(--accent);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* Redaksjonell markør: en kort aksentstrek, så etiketten. Ingen boks. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.7rem;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(79, 151, 255, 0));
}

.lead {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 34rem;
  text-wrap: pretty;
}

.section {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.section-snug {
  padding-top: clamp(2rem, 5vw, 4rem);
}

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-head p {
  color: var(--muted);
  font-size: 1.06rem;
  margin-bottom: 0;
  text-wrap: pretty;
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}

/* --------------------------------------------------------------------------
   Dobbel-bezel — alt av betydning sitter i en ramme, som maskinert hardware
   -------------------------------------------------------------------------- */

.bezel {
  position: relative;
  padding: var(--bezel);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid var(--line);
  transition: transform 600ms var(--ease), border-color 600ms var(--ease),
    background-color 600ms var(--ease);
}

.bezel-in {
  position: relative;
  height: 100%;
  border-radius: calc(var(--r-xl) - var(--bezel));
  background: linear-gradient(168deg, var(--panel-2), var(--panel) 62%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Knapper — pill med nøstet ikon-sirkel («knapp i knapp»)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0.62rem 0.62rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 0.98rem/1 var(--font);
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease),
    border-color 400ms var(--ease), background-color 400ms var(--ease),
    color 400ms var(--ease);
}

.btn:active {
  transform: scale(0.975);
}

/* Nøstet ikonsirkel, flush mot høyre innerkant */
.btn-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 500ms var(--ease), background-color 400ms var(--ease);
}

.btn-primary {
  background: #f2f5fa;
  color: #05070d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px -18px rgba(190, 214, 255, 0.4);
}

.btn-primary .btn-icon {
  background: rgba(5, 7, 13, 0.09);
  color: #05070d;
}

.btn-ghost {
  color: var(--text);
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.028);
}

.btn-ghost .btn-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* Tekstlenke med glidende pil */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.text-link span {
  display: inline-block;
  transition: transform 500ms var(--ease);
  color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 2px 4px rgba(0, 0, 0, 0.5), 0 28px 60px -18px rgba(190, 214, 255, 0.5);
  }

  .btn-primary:hover .btn-icon {
    transform: translate(3px, -1px) scale(1.06);
    background: rgba(5, 7, 13, 0.14);
  }

  .btn-ghost:hover {
    border-color: var(--line-3);
    background: rgba(255, 255, 255, 0.055);
    transform: translateY(-2px);
  }

  .btn-ghost:hover .btn-icon {
    transform: translate(3px, -1px) scale(1.06);
  }

  .btn:hover:active {
    transform: translateY(-2px) scale(0.975);
  }

  .text-link:hover span {
    transform: translateX(5px);
  }
}

/* --------------------------------------------------------------------------
   Header — flytende glass-pille, løsrevet fra toppen
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: clamp(0.85rem, 2vw, 1.4rem) 0;
  transition: padding 600ms var(--ease);
}

.site-header.is-stuck {
  padding: 0.6rem 0;
}

/* Tre spor: logo venstre, lenker eksakt midtstilt, handlinger høyre.
   .nav-panel bruker display:contents så barna blir egne rutenettceller. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.55rem 0.55rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 20, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 50px -28px rgba(0, 0, 0, 0.9);
  transition: border-color 600ms var(--ease), background-color 600ms var(--ease);
}

.site-header.is-stuck .nav {
  border-color: var(--line-2);
  background: rgba(6, 9, 16, 0.85);
}

.nav-panel {
  display: contents;
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.09em;
  /* Navnet er to ord – det skal aldri brekke over to linjer */
  white-space: nowrap;
}

.brand svg {
  width: 26px;
  height: 26px;
  transition: transform 600ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover svg {
    transform: rotate(-8deg) scale(1.08);
  }
}

.nav-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Handlinger til høyre: sosiale ikoner + hovedknapp */
.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.nav-social {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0 0.35rem 0 0;
  border-right: 1px solid var(--line-2);
}

.nav-social a {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
  color: var(--faint);
  transition: color 400ms var(--ease), background-color 400ms var(--ease),
    transform 400ms var(--ease);
}

.nav-social svg {
  width: 15px;
  height: 15px;
}

@media (hover: hover) and (pointer: fine) {
  .nav-social a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
  }
}

/* Med seks menypunkter blir det trangt tidligere — ikonene bor i
   footeren og i mobilmenyen uansett. */
@media (max-width: 1260px) {
  .nav-social {
    display: none;
  }
}

.nav-links a:not(.nav-cta) {
  display: inline-block;
  position: relative;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.93rem;
  transition: color 400ms var(--ease), background-color 400ms var(--ease);
}

.nav-links a[aria-current="page"] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:not(.nav-cta):hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
  }
}

.nav-cta {
  padding: 0.5rem 0.5rem 0.5rem 1.15rem;
  font-size: 0.9rem;
}

.nav-cta .btn-icon {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 0.8rem;
}

/* Hamburger som morfer til X */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 400ms var(--ease), background-color 400ms var(--ease);
}

.nav-toggle:active {
  transform: scale(0.93);
}

.nav-toggle-bar {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  margin-left: -8px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 500ms var(--ease), opacity 300ms var(--ease);
}

.nav-toggle-bar:nth-child(1) {
  top: 15px;
}
.nav-toggle-bar:nth-child(2) {
  top: 20px;
}
.nav-toggle-bar:nth-child(3) {
  top: 25px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* Hamburgeren slår inn på 1000 px, ikke 860. Menyen har sju punkter etter at
   Blogg kom til, og mellom 861 og ca. 945 px sprakk «Start et prosjekt» ut av
   viewporten og ga vannrett scroll på hele siden. */
@media (max-width: 1000px) {
  .nav-toggle {
    display: block;
  }

  /* backdrop-filter på .nav gjør den til containing block for fixed-barn.
     Blur-en må derfor slås av mens overlegget er åpent, ellers åpner
     menyen seg inne i nav-pillen i stedet for å dekke skjermen. */
  .site-header.is-menu-open .nav {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Tilbake til enkel flex-rad: logo venstre, knapp høyre */
  .nav {
    position: relative;
    display: flex;
    justify-content: space-between;
  }

  /* Logo og lukkeknapp skal ligge over overlegget */
  .nav .brand,
  .nav-toggle {
    position: relative;
    z-index: 2;
  }

  .nav-panel {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    padding: 5.5rem var(--gutter) 2.5rem;
    background: rgba(4, 6, 11, 0.88);
    -webkit-backdrop-filter: blur(36px) saturate(1.4);
    backdrop-filter: blur(36px) saturate(1.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms var(--ease), visibility 0s linear 500ms;
  }

  .nav-panel.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 500ms var(--ease);
  }

  .nav-links {
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Maskeavsløring med stagger */
  .nav-links li {
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }

  .nav-links li > * {
    transform: translateY(110%);
    opacity: 0;
    transition: transform 650ms var(--ease), opacity 500ms var(--ease);
  }

  .nav-panel.is-open .nav-links li > * {
    transform: translateY(0);
    opacity: 1;
  }

  .nav-panel.is-open .nav-links li:nth-child(1) > * {
    transition-delay: 90ms;
  }
  .nav-panel.is-open .nav-links li:nth-child(2) > * {
    transition-delay: 145ms;
  }
  .nav-panel.is-open .nav-links li:nth-child(3) > * {
    transition-delay: 200ms;
  }
  .nav-panel.is-open .nav-links li:nth-child(4) > * {
    transition-delay: 255ms;
  }
  .nav-panel.is-open .nav-links li:nth-child(5) > * {
    transition-delay: 310ms;
  }
  .nav-panel.is-open .nav-links li:nth-child(6) > * {
    transition-delay: 365ms;
  }
  .nav-panel.is-open .nav-links li:nth-child(7) > * {
    transition-delay: 420ms;
  }

  .nav-links a:not(.nav-cta) {
    display: block;
    padding: 1.05rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--text);
    background: none;
  }

  .nav-links a[aria-current="page"] {
    background: none;
    color: var(--accent);
  }

  .nav-actions {
    justify-self: stretch;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1.75rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms var(--ease) 300ms, transform 600ms var(--ease) 300ms;
  }

  .nav-panel.is-open .nav-actions {
    opacity: 1;
    transform: translateY(0);
  }

  /* I overlegget får ikonene plass igjen, sentrert under menyen */
  .nav-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0;
    border-right: none;
  }

  .nav-social a {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line-2);
    color: var(--muted);
  }

  .nav-social svg {
    width: 17px;
    height: 17px;
  }

  .nav-cta {
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
    font-size: 1.05rem;
  }
}

/* --------------------------------------------------------------------------
   Hero — filmisk fullbredde-foto med lagdelte scrims
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(100dvh, 60rem);
  padding: clamp(9rem, 20vh, 14rem) 0 clamp(3.5rem, 8vh, 6rem);
  /* Trekkes opp under den klebende headeren så fotoet går helt til topps.
     --header-h måles i JS; fallback dekker vanlig headerhøyde. */
  margin-top: calc(-1 * var(--header-h, 5.6rem));
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  filter: brightness(1.3) contrast(1.02);
  /* Rolig innzoom ved last — kun transform */
  animation: slow-push 2400ms var(--ease) both;
  transform-origin: center 60%;
  will-change: transform;
}

@keyframes slow-push {
  from {
    transform: scale(1.07);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Scrims: én mot venstre for lesbarhet, én mot bunn for seksjonsovergang */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      rgba(4, 6, 11, 0.93) 0%,
      rgba(4, 6, 11, 0.84) 38%,
      rgba(4, 6, 11, 0.42) 68%,
      rgba(4, 6, 11, 0.16) 100%
    ),
    linear-gradient(180deg, rgba(4, 6, 11, 0.85) 0%, transparent 24%),
    linear-gradient(0deg, var(--bg) 1%, transparent 32%);
}

.hero .container {
  position: relative;
}

.hero h1 {
  max-width: 15ch;
  margin-bottom: 1.6rem;
}

.hero .lead {
  max-width: 36rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.6rem;
}

/* Rullecue nederst i heroen — liten, levende, ikke i veien */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  transform: translateX(-50%);
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: var(--line-2);
}

.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  background: linear-gradient(180deg, rgba(79, 151, 255, 0), var(--accent));
  animation: cue 2.6s var(--ease) infinite;
}

@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(250%);
  }
}

/* Sidehero (undersider) — ingen foto, bare romslig typografi */
.page-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(7rem, 16vw, 11rem) 0 clamp(2rem, 5vw, 3.5rem);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: -50% -10% auto;
  height: 120%;
  z-index: -1;
  background: radial-gradient(
    46% 50% at 62% 30%,
    rgba(30, 108, 240, 0.15),
    transparent 68%
  );
  transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
  pointer-events: none;
}

.page-hero .lead {
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Rutenett og kort
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.1rem;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 940px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Kort = bezel + kjerne. Hele kortet er én lenke der det gir mening. */
.card {
  display: block;
  color: inherit;
}

.card .bezel-in {
  padding: 2.1rem 1.9rem 1.9rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Svak lysglød i toppen av kjernen */
.card .bezel-in::before {
  content: "";
  position: absolute;
  inset: -60% 20% auto;
  height: 100%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(79, 151, 255, 0.11),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 700ms var(--ease);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .card-link:hover {
    transform: translateY(-6px);
    border-color: var(--line-2);
    background: rgba(255, 255, 255, 0.05);
  }

  .card-link:hover .bezel-in::before {
    opacity: 1;
  }

  .card-link:hover .card-more span {
    transform: translateX(5px);
  }

  .card-link:hover .card-icon {
    border-color: var(--line-3);
    transform: scale(1.05);
  }
}

.card h3 {
  margin: 1.35rem 0 0.55rem;
}

.card p {
  color: var(--muted);
  font-size: 0.97rem;
  margin-bottom: 0;
  text-wrap: pretty;
}

.card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 600ms var(--ease), border-color 600ms var(--ease);
}

/* Ultratynne strøk — aldri tunge ikoner */
.card-icon svg {
  width: 19px;
  height: 19px;
  stroke: var(--accent);
  stroke-width: 1.1;
  fill: none;
}

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.card-more span {
  color: var(--accent);
  transition: transform 500ms var(--ease);
}

/* --------------------------------------------------------------------------
   Konseptarbeider
   -------------------------------------------------------------------------- */

.work-card .bezel-in {
  padding: var(--bezel);
}

.work-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - var(--bezel) * 2);
  background: var(--bg-elev);
  border: 1px solid var(--line);
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .card-link:hover .work-thumb img {
    transform: scale(1.045);
  }
}

.work-meta {
  display: block;
  padding: 1.6rem 1.4rem 1.35rem;
}

.work-meta h3 {
  margin: 0 0 0.4rem;
}

.work-meta p {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0;
}

.work-tag {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.75rem;
}

/* Ærlig merking: dette er egne øvelser, ikke kundeoppdrag */
.work-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.028);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   Prosess-steg — tynn tidslinje, ikke fire bokser
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}

@media (max-width: 940px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 580px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 2.4rem 1.75rem 2.4rem 0;
  transition: background-color 700ms var(--ease);
}

.steps li + li {
  border-left: 1px solid var(--line);
  padding-left: 1.75rem;
}

@media (max-width: 580px) {
  .steps li + li {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }
}

/* Lysende markør på tidslinjen */
.steps li::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px rgba(79, 151, 255, 0.65);
  opacity: 0.55;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.steps li + li::after {
  left: 1.75rem;
}

@media (max-width: 580px) {
  .steps li + li::after {
    left: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .steps li:hover::after {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* Uten JS: enkelt nummer som fallback */
.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--faint);
  margin-bottom: 1.2rem;
}

/* Med JS blir ::before i stedet et linjesegment som tegnes inn.
   Segmentene arver stagger-forsinkelsen fra .reveal, så streken
   løper venstre mot høyre gjennom hele tidslinjen ved scroll. */
.steps.js-count li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, var(--accent), rgba(79, 151, 255, 0.22));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1000ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.steps.js-count li.is-visible::before {
  transform: scaleX(1);
}

.steps.js-count li + li::before {
  left: 1.75rem;
}

@media (max-width: 580px) {
  .steps.js-count li + li::before {
    left: 0;
  }
}

/* Stort redaksjonelt tall */
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1px rgba(150, 182, 235, 0.35);
  margin-bottom: 1.3rem;
  transition: -webkit-text-stroke-color 600ms var(--ease), color 600ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .steps li:hover .step-num {
    color: var(--accent);
    -webkit-text-stroke-color: transparent;
  }
}

.steps h3 {
  font-size: 1.08rem;
  margin-bottom: 0.5rem;
}

.steps p {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

/* Prosess-seksjon over fullbredde-foto — bryter den lange mørke rytmen */
.process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.process-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.process-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  filter: brightness(1.25) contrast(1.03);
}

.process-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      var(--bg) 0%,
      rgba(4, 6, 11, 0.93) 20%,
      rgba(4, 6, 11, 0.87) 60%,
      var(--bg) 100%
    ),
    linear-gradient(90deg, rgba(4, 6, 11, 0.8) 0%, rgba(4, 6, 11, 0.32) 55%, rgba(4, 6, 11, 0.66) 100%);
}

.process > .container {
  position: relative;
}

/* --------------------------------------------------------------------------
   Punktliste med hake
   -------------------------------------------------------------------------- */

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.check-list li {
  position: relative;
  padding: 1.05rem 0 1.05rem 2.3rem;
  color: var(--muted);
  font-size: 0.98rem;
  border-bottom: 1px solid var(--line);
  text-wrap: pretty;
}

.check-list li:first-child {
  border-top: 1px solid var(--line);
}

.check-list li strong {
  color: var(--text);
  font-weight: 600;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 0.95rem;
  height: 0.95rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234f97ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 6.5"/></svg>')
    center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Fullbredde fotoseksjon — utsagn over bilde
   -------------------------------------------------------------------------- */

.statement {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(85vh, 46rem);
  padding: clamp(5rem, 12vw, 9rem) 0;
  overflow: hidden;
}

.statement-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.statement-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Råfilen er eksponert for tekstoverlegg; løftes så motivet leses */
  filter: brightness(1.5) contrast(1.04) saturate(1.1);
}

/* Slør: nok til at tekst er lesbar, ikke så mye at fotoet forsvinner */
.statement-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      95deg,
      rgba(4, 6, 11, 0.9) 0%,
      rgba(4, 6, 11, 0.62) 34%,
      rgba(4, 6, 11, 0.12) 72%,
      rgba(4, 6, 11, 0) 100%
    ),
    linear-gradient(180deg, var(--bg) 0%, transparent 15%),
    linear-gradient(0deg, var(--bg) 0%, transparent 16%);
}

.statement h2 {
  max-width: 18ch;
  font-size: clamp(2.1rem, 5vw, 3.9rem);
}

.statement .lead {
  max-width: 36rem;
}

.statement-body {
  max-width: 42rem;
}

/* --------------------------------------------------------------------------
   Editorial split — stort bilde ved siden av tekst
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

@media (max-width: 940px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.split-media .bezel-in {
  aspect-ratio: 4 / 5;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   CTA — fullbredde foto med utsagn og knapp
   -------------------------------------------------------------------------- */

.section-cta {
  padding: 0 0 clamp(4rem, 8vw, 7rem);
}

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.75rem, 5vw, 4rem);
  text-align: center;
  box-shadow: var(--shadow);
}

.cta-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Horisontlinjen legges lavt i rammen, under teksten, som en lysende sokkel */
  object-position: center 18%;
  filter: brightness(1.4) contrast(1.05);
}

.cta-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Mørk kjerne bak teksten, klart mot kantene så horisonten får leve */
  background: radial-gradient(
      68% 62% at 50% 42%,
      rgba(4, 6, 11, 0.82),
      rgba(4, 6, 11, 0.34) 100%
    ),
    linear-gradient(180deg, rgba(4, 6, 11, 0.5) 0%, transparent 30%);
}

.cta-band h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.cta-band p {
  color: var(--muted);
  max-width: 34rem;
  margin-inline: auto;
  text-wrap: pretty;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* --------------------------------------------------------------------------
   Tjenester — vekslende rader
   -------------------------------------------------------------------------- */

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-bottom: 1px solid var(--line);
}

.service-row:first-of-type {
  padding-top: 0;
}

.service-row:last-of-type {
  border-bottom: none;
}

/* Annenhver rad speilvendes på desktop */
@media (min-width: 881px) {
  .service-row.is-reversed > .service-visual {
    order: 1;
  }
  .service-row.is-reversed > .service-copy {
    order: 2;
  }
}

@media (max-width: 880px) {
  .service-row {
    grid-template-columns: 1fr;
  }

  /* Bilde alltid under tekst på mobil, uansett rekkefølge på desktop */
  .service-row > .service-visual {
    order: 2;
  }
  .service-row > .service-copy {
    order: 1;
  }
}

.service-row h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}

.service-row .lead {
  font-size: 1.04rem;
  max-width: 32rem;
}

.service-visual.bezel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.service-visual .bezel-in {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
}

/* Bildetekst under rammen, innenfor bezelen */
.service-visual .work-note {
  align-self: center;
  margin: 0 0 0.3rem;
}

/* Klikkbar konseptvisning — hele rammen er lenken */
a.service-visual {
  color: inherit;
  text-decoration: none;
}

.service-visual .visual-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.55rem 0.3rem;
}

.service-visual .visual-foot .work-note {
  align-self: auto;
  margin: 0;
}

.visual-open {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.visual-open span {
  color: var(--accent);
  transition: transform 500ms var(--ease);
}

@media (max-width: 480px) {
  .service-visual .visual-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .service-visual.is-clickable:hover {
    transform: translateY(-5px);
    border-color: var(--line-2);
    background: rgba(255, 255, 255, 0.05);
  }

  .service-visual.is-clickable:hover .visual-open span {
    transform: translateX(5px);
  }

  .service-visual.is-clickable img {
    transition: transform 900ms var(--ease);
  }

  .service-visual.is-clickable:hover img {
    transform: scale(1.03);
  }
}

.service-visual.is-clickable .bezel-in {
  overflow: hidden;
}

.service-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lyse foto må dempes for å sitte i den mørke rytmen */
.img-moody {
  filter: brightness(0.46) contrast(1.24) saturate(0.72);
}

/* Ren, tynn ikonflate når det ikke finnes et foto */
.service-visual .glyph {
  width: min(38%, 120px);
  height: auto;
  stroke: var(--accent);
  stroke-width: 0.7;
  fill: none;
  opacity: 0.85;
}

.service-visual .bezel-in.is-glyph {
  background: radial-gradient(
      60% 70% at 50% 42%,
      rgba(79, 151, 255, 0.12),
      transparent 70%
    ),
    linear-gradient(168deg, var(--panel-2), var(--panel) 62%);
}

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--accent-wash);
  border: 1px solid rgba(79, 151, 255, 0.24);
  color: #a9caff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}

.price-tag small {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   Prisstripe på forsiden — kort svar på «hva koster det»
   -------------------------------------------------------------------------- */

.price-strip .bezel-in {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.9rem, 4vw, 2.75rem);
}

@media (max-width: 1040px) {
  .price-strip .bezel-in {
    grid-template-columns: 1fr;
  }
}

.price-strip-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  margin: 0;
  max-width: 20ch;
}

.price-strip-tiers {
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 620px) {
  .price-strip-tiers {
    flex-direction: column;
  }
}

.price-mini {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.35rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.028);
  color: inherit;
  transition: transform 500ms var(--ease), border-color 500ms var(--ease),
    background-color 500ms var(--ease);
}

.price-mini.is-featured {
  border-color: rgba(79, 151, 255, 0.28);
  background: var(--accent-wash);
}

@media (hover: hover) and (pointer: fine) {
  .price-mini:hover {
    transform: translateY(-3px);
    border-color: var(--line-3);
    background: rgba(255, 255, 255, 0.06);
  }
}

.price-mini-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.price-mini-name em {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  background: rgba(79, 151, 255, 0.16);
  color: #a9caff;
}

.price-mini-sum {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.price-mini-sub {
  font-size: 0.82rem;
  color: var(--faint);
}

/* Knappen legger seg under begge kolonnene */
.price-strip-cta {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   Booking — faktachips og Calendly-ramme
   -------------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.028);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.chips svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.booking-frame .bezel-in {
  padding: var(--bezel);
}

/* Calendly setter selv høyden på iframen; denne sikrer plass før den laster */
.booking-frame .calendly-inline-widget,
.embed-holder {
  min-width: 320px;
  height: 760px;
  border-radius: calc(var(--r-xl) - var(--bezel) * 2);
  overflow: hidden;
}

@media (max-width: 700px) {
  .booking-frame .calendly-inline-widget,
  .embed-holder {
    height: 1000px;
  }
}

.embed-holder[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Samtykkeport for innebygd tredjepart

   Ingenting hentes fra tredjeparten før besøkende trykker på knappen.
   Porten skal derfor forklare hva som skjer – ikke bare be om et klikk.
   -------------------------------------------------------------------------- */

.embed-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
}

.embed-gate[hidden] {
  display: none;
}

.embed-gate-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.embed-gate-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.1;
}

.embed-gate h2 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  margin: 1.4rem 0 0;
}

.embed-gate p {
  max-width: 44ch;
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.embed-gate .btn {
  margin-top: 1.9rem;
}

.embed-gate-alt {
  font-size: 0.88rem !important;
  color: var(--faint) !important;
  margin-top: 1.9rem !important;
  max-width: 48ch;
}

.embed-gate-alt a:not(.text-link) {
  color: var(--muted);
  border-bottom: 1px solid var(--line-3);
}

.embed-gate-alt a:not(.text-link):hover {
  color: var(--text);
}

/* Angreknapp – samtykket skal være like lett å trekke tilbake som å gi. */
.embed-forget {
  display: block;
  margin: 1.1rem auto 0.35rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--faint);
  font: 500 0.82rem/1 var(--font);
  cursor: pointer;
  transition: color 400ms var(--ease);
}

.embed-forget[hidden] {
  display: none;
}

.embed-forget:hover {
  color: var(--text);
}

.booking-fallback {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--muted);
}

.booking-note {
  margin: 2rem 0 0;
  color: var(--faint);
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   Priser — to pakker, den anbefalte løftet fram
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  align-items: start;
}

@media (max-width: 940px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

.plan .bezel-in {
  display: flex;
  flex-direction: column;
  padding: clamp(1.9rem, 4vw, 2.6rem);
  height: 100%;
}

/* Den anbefalte pakken får aksentkant og en svak glød */
.plan.is-featured {
  border-color: rgba(79, 151, 255, 0.32);
  background: rgba(79, 151, 255, 0.05);
}

.plan.is-featured .bezel-in {
  border-color: rgba(79, 151, 255, 0.22);
  background: radial-gradient(
      90% 60% at 50% 0%,
      rgba(79, 151, 255, 0.13),
      transparent 70%
    ),
    linear-gradient(168deg, var(--panel-2), var(--panel) 62%);
}

.plan-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.plan-head h3 {
  font-size: 1.3rem;
  margin: 0;
}

.plan-flag {
  padding: 0.26rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-wash);
  border: 1px solid rgba(79, 151, 255, 0.3);
  color: #a9caff;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.plan-desc {
  color: var(--muted);
  font-size: 0.97rem;
  margin: 0 0 1.75rem;
  text-wrap: pretty;
}

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.plan-price small {
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--faint);
}

.plan-then {
  margin: 0.7rem 0 1.9rem;
  padding-bottom: 1.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--muted);
}

.plan-then b {
  color: var(--text);
  font-weight: 600;
}

.plan .check-list {
  margin-bottom: 2rem;
}

.plan .check-list li {
  padding: 0.75rem 0 0.75rem 1.9rem;
  font-size: 0.94rem;
  border-bottom: none;
}

.plan .check-list li:first-child {
  border-top: none;
}

.plan .check-list li::before {
  top: 1.05em;
  width: 0.85rem;
  height: 0.85rem;
}

.plan .btn {
  margin-top: auto;
  justify-content: space-between;
}

.plan-note {
  margin: 2rem 0 0;
  font-size: 0.88rem;
  color: var(--faint);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-info {
  display: grid;
  gap: 1.1rem;
}

.contact-info .bezel-in {
  padding: 1.35rem 1.5rem;
}

.contact-info h3 {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--faint);
  margin: 0 0 0.45rem;
}

.contact-info p,
.contact-info a {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .contact-info a:hover {
    color: var(--accent);
  }
}

/* Skjema */

.form .bezel-in {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  gap: 1.35rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem;
}

@media (max-width: 580px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.field input,
.field textarea {
  font: 1rem/1.5 var(--font);
  color: var(--text);
  background: rgba(2, 4, 8, 0.6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 400ms var(--ease), box-shadow 400ms var(--ease),
    background-color 400ms var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--faint);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(79, 151, 255, 0.55);
  background: rgba(2, 4, 8, 0.85);
  box-shadow: 0 0 0 3px rgba(79, 151, 255, 0.14);
}

.field textarea {
  resize: vertical;
  min-height: 150px;
}

.field.has-error input,
.field.has-error textarea {
  border-color: rgba(242, 109, 109, 0.7);
}

.field-error {
  font-size: 0.83rem;
  color: #f0999c;
  min-height: 1.1em;
  margin: 0;
}

.form-status {
  border-radius: var(--r-sm);
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 450ms var(--ease), transform 450ms var(--ease);
}

.form-status[hidden] {
  display: none;
}

.form-status.success {
  background: rgba(64, 190, 122, 0.1);
  border: 1px solid rgba(64, 190, 122, 0.3);
  color: #86dfaf;
}

@starting-style {
  .form-status.success {
    opacity: 0;
    transform: translateY(8px);
  }
}

.form-note {
  font-size: 0.85rem;
  color: var(--faint);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding: clamp(4rem, 8vw, 6rem) 0 2rem;
  background: linear-gradient(180deg, var(--bg), var(--bg-deep));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.site-footer h3 {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--faint);
  margin-bottom: 1.1rem;
}

.site-footer .brand {
  margin-bottom: 1.25rem;
}

.site-footer p {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 26rem;
  text-wrap: pretty;
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--muted);
  transition: color 400ms var(--ease), border-color 400ms var(--ease),
    background-color 400ms var(--ease), transform 400ms var(--ease);
}

.footer-social svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover {
    color: var(--text);
    border-color: var(--line-3);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
  }
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.footer-list li {
  color: var(--muted);
  font-size: 0.95rem;
}

.footer-list a {
  color: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .footer-list a:hover {
    color: var(--text);
  }
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--faint);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Scroll-avsløring (JS legger til .is-visible)
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease),
    filter 900ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Ingen JS: vis alt */
.no-js .reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   Blogg — oversikt og artikkel
   -------------------------------------------------------------------------- */

.blog-list {
  display: grid;
  gap: 1.1rem;
}

/* Kortet arver .card/.bezel. Her styres bare bloggspesifikk innmat. */
.blog-card .bezel-in {
  padding: 2.1rem 1.9rem 1.9rem;
}

.blog-card h3 {
  font-size: 1.55rem;
  line-height: 1.14;
  letter-spacing: -0.024em;
  margin: 0.9rem 0 0.6rem;
}

/* Ingressen i kortet skal ikke gå i full kortbredde — lange linjer leses dårlig. */
.blog-card p {
  max-width: 46rem;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.blog-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-3);
}

/* Artikkelspalte — smalere enn resten av siden, for lesbarhet. */
.article {
  max-width: 43rem;
  margin: 0 auto;
}

.article-head h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.036em;
}

.article-head .lead {
  max-width: none;
}

.article-rule {
  height: 1px;
  margin: 2.6rem 0;
  background: linear-gradient(90deg, var(--line-3), transparent);
  border: 0;
}

.prose {
  font-size: 1.09rem;
  line-height: 1.72;
  color: var(--muted);
}

.prose > h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: var(--text);
  margin: 3.1rem 0 0.9rem;
}

.prose > h3 {
  font-size: 1.12rem;
  color: var(--text);
  margin: 2.2rem 0 0.6rem;
}

.prose > p:first-child {
  font-size: 1.2rem;
  color: var(--text);
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
}

/* Nummererte steg skal leses som en oppskrift — tallet i aksentfarge, litt luft */
.prose ol {
  padding-left: 1.35rem;
}

.prose ol li::marker {
  font-weight: 600;
}

.prose li {
  margin-bottom: 0.6rem;
  padding-left: 0.35rem;
}

.prose li::marker {
  color: var(--accent);
}

/* Tallutdrag — ett tall, stort, med forklaring under. */
.pull-stat {
  margin: 2.5rem 0;
  padding: 1.9rem 1.8rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(168deg, var(--panel-2), var(--panel) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pull-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: 0.7rem;
}

.pull-stat span {
  display: block;
  font-size: 0.98rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* Kildehenvisning — leseren skal kunne etterprøve tallene. */
.article-source {
  margin-top: 3rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.024);
  font-size: 0.88rem;
  color: var(--faint);
}

.article-source p {
  margin: 0;
}

/* Stående film i en artikkel. Bredden holdes nede med vilje: 9:16 i full
   spaltebredde blir en skjerm høy og skyver all teksten under den bort. */
.article-video {
  margin: 2.75rem auto;
  max-width: 340px;
}

.article-video video {
  width: 100%;
  /* height:auto er nødvendig – height-attributtet på <video> slår ellers ut
     aspect-ratio, og elementet blir 1280 px høyt. */
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: #04060b;
}

.article-video figcaption {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 400ms var(--ease);
}

.article-back:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Pakkeside — ordliste, sammenligning, apper og spørsmål
   -------------------------------------------------------------------------- */

/* Liten merkelapp inne i kort. Samme uttrykk som .plan-flag, men fritt plassert. */
.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.26rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--faint);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.is-accent {
  background: var(--accent-wash);
  border-color: rgba(79, 151, 255, 0.3);
  color: #a9caff;
}

/* Ordliste — begrepskort. Ordet først, forklaringen rett under. */
.term .bezel-in {
  padding: 1.7rem 1.6rem 1.5rem;
}

.term h3 {
  font: 600 1.12rem/1.2 var(--font-display);
  letter-spacing: -0.02em;
  margin: 0 0 0.55rem;
}

.term p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.62;
}

.term p + p {
  margin-top: 0.7rem;
  color: var(--faint);
  font-size: 0.88rem;
}

/* Sammenligning. Skal kunne skrolles sidelengs på liten skjerm. */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: calc(var(--r-xl) - var(--bezel));
}

.compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.compare th,
.compare td {
  padding: 0.95rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.compare thead th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  font: 600 0.68rem/1 var(--font);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.compare tbody th {
  font-weight: 500;
  color: var(--text);
  width: 46%;
}

.compare tbody th small {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: 0.84rem;
  color: var(--faint);
}

.compare td {
  color: var(--muted);
  width: 27%;
}

.compare tr:last-child th,
.compare tr:last-child td {
  border-bottom: 0;
}

.compare .yes {
  color: var(--accent);
  font-weight: 600;
}

.compare .no {
  color: var(--faint);
}

/* Tabellen skrolles sidelengs på mobil — si fra om det. */
.compare-hint {
  display: none;
  margin: 0;
  padding: 0.2rem 1.2rem 1.15rem;
  font-size: 0.82rem;
  color: var(--faint);
}

@media (max-width: 620px) {
  .compare-hint {
    display: block;
  }
}

/* Fremhevet kort — samme uttrykk som den fremhevede prisplanen. */
.card.is-featured {
  border-color: rgba(79, 151, 255, 0.32);
  background: rgba(79, 151, 255, 0.05);
}

.card.is-featured .bezel-in {
  border-color: rgba(79, 151, 255, 0.22);
  background: radial-gradient(
      90% 60% at 50% 0%,
      rgba(79, 151, 255, 0.13),
      transparent 70%
    ),
    linear-gradient(168deg, var(--panel-2), var(--panel) 62%);
}

/* Appkort — én kategori per kort, med navnene på appene under. */
.app-card .bezel-in {
  padding: 1.8rem 1.7rem 1.6rem;
}

.app-card h3 {
  font: 600 1.15rem/1.2 var(--font-display);
  letter-spacing: -0.02em;
  margin: 1rem 0 0.5rem;
}

.app-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.62;
}

.app-names {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.app-names li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.026);
  color: var(--faint);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Merkelappen står over overskriften, som i appkortene med skjermbilde. */
.app-card .badge {
  margin: 1rem 0 0;
}

/* Appkort med skjermbilde — gjenbruker .work-card, men trenger egen luft. */
.work-meta .badge {
  margin-bottom: 0.85rem;
}

.work-meta .app-names {
  margin-top: 1rem;
}

/* Merknadsboks — for forbehold som må stå, men ikke skal rope. */
.note {
  margin-top: 2.4rem;
  padding: 1.3rem 1.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-3);
  background: rgba(255, 255, 255, 0.024);
  color: var(--faint);
  font-size: 0.92rem;
  line-height: 1.65;
}

.note p {
  margin: 0;
}

.note p + p {
  margin-top: 0.7rem;
}

.note strong {
  color: var(--muted);
  font-weight: 600;
}

/* Spørsmål og svar — native <details>, ingen JavaScript. */
.faq {
  max-width: 46rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font: 500 1.05rem/1.45 var(--font);
  letter-spacing: -0.012em;
  color: var(--text);
  transition: color 400ms var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent);
}

.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 0.42rem;
  background: linear-gradient(var(--faint), var(--faint)) center / 100% 1.5px
      no-repeat,
    linear-gradient(var(--faint), var(--faint)) center / 1.5px 100% no-repeat;
  transition: transform 500ms var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(135deg);
}

.faq details p {
  margin: 0 0 1.45rem;
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.99rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Regnestykke — liten kalkulator i artikler
   -------------------------------------------------------------------------- */

.regnestykke {
  margin: 2.6rem 0;
  padding: 1.9rem 1.8rem 1.7rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(168deg, var(--panel-2), var(--panel) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.regnestykke h3 {
  margin: 0 0 0.35rem;
  color: var(--text);
}

.regnestykke > p {
  color: var(--faint);
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
}

.regne-felt {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.1rem;
}

@media (max-width: 620px) {
  .regne-felt {
    grid-template-columns: 1fr;
  }
}

.regne-felt .field input {
  font-variant-numeric: tabular-nums;
}

/* Svaret. Skjult til JS slår det på, så det aldri står tomt uten grunn. */
.regne-svar {
  margin-top: 1.7rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-2);
}

.regne-linje {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.97rem;
  color: var(--muted);
}

.regne-linje + .regne-linje {
  border-top: 1px solid var(--line);
}

.regne-linje b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.regne-sum {
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-3);
}

.regne-sum span {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.5rem;
}

.regne-sum b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.regne-fot {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--faint);
}

/* Uten JS gir feltene ingen mening — da vises bare regneeksempelet. */
.no-js .regnestykke form,
.no-js .regne-svar {
  display: none;
}

/* --------------------------------------------------------------------------
   Redusert bevegelse
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    transform: none;
    filter: none;
    transition: opacity 250ms linear;
  }

  .hero-media img {
    animation: none;
  }

  .page-hero::before {
    transform: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    transition-duration: 250ms !important;
  }
}