/* Kodelig — Premium 2.0
   The hero keeps its character from kodelig-main (same photo, same
   terminal, same tokens); 2.0 only polishes its timing (masked word
   entrance, smoother wireframe crossfade, calmer terminal hand-off).
   Everything below the hero is a calm, alternating light/dark editorial
   rhythm meant to read as premium and trustworthy to a business owner.
   Effect level 2: masked reveals, subtle parallax, precise hover states,
   a soft page transition - no glitch, no WebGL. */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
}

:root {

  --ink-950: #0B1A28;
  --ink-900: #0F2032;
  --ink-800: #13293E;
  --ink-700: #1C384F;
  --ink-600: #2E5268;
  --ink-500: #3E5F76;

  --mist: #F4F6F5;
  --muted: #92A5B8;

  --gold: #E8A855;
  --gold-soft: #F6D9A8;
  --aurora: #3E7A6D;
  --error: #E2604F;

  /* Warm paper tones for the new light sections below the hero — kept out
     of pure white/grey so they read as considered, not a default "light
     mode" inversion of the dark theme. */
  --cream: #F6F2EA;
  --cream-panel: #FFFFFF;
  --cream-ink: #1A1D18;
  --cream-text: #4B4A3F;
  --cream-muted: #746E5D;
  --cream-border: #E4DFCF;
  --cream-kicker: #7A5418;   /* warm bronze: 6:1 on cream, for kickers/icons */
  --cream-ink-soft: #2D2B24;

  --bg: var(--ink-950);
  --panel: var(--ink-800);
  --border: var(--ink-700);
  --text: var(--mist);
  --text-muted: var(--muted);
  --accent: var(--gold);

  --font-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Karla', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  --container: clamp(84rem, 92vw, 104rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
  --section-pad: clamp(5rem, 3rem + 7vw, 9.5rem);
  --dur-fast: 180ms;
  --dur-base: 500ms;
  --dur-reveal: 650ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
html { overflow-x: clip; }
::selection { background: rgba(232, 168, 85, 0.35); color: inherit; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Used on the hero terminal and the contact modal's own "terminal window"
   chrome - the two moments that deliberately echo each other. Elevated
   from kodelig-main's bracket-corner HUD mask + moving scanline (both
   read as gadget/technical) to a single soft diagonal light-catch, the
   same restrained gloss language a well-made physical object's edge
   would show under warm light - present, but never announcing itself. */
.hud-corners {
  position: relative;
}
.hud-corners::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(232, 168, 85, 0.28) 0%, rgba(232, 168, 85, 0) 45%);
  mix-blend-mode: screen;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  background: var(--gold);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
}

/* ============================================================
   Header / nav — same behaviour as kodelig-main (transparent over the
   hero, blurred dark bar once scrolled), but the nav itself drops the
   monospace "»» LABEL" HUD treatment for plain, quieter type: the header
   is chrome a visitor sees on every page, so it sets the tone for
   "premium" before a single section below has even loaded.
   ============================================================ */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
  background: transparent;
  box-shadow: 0 10px 30px rgba(3, 8, 14, 0);
  transition:
    padding-top var(--dur-base) var(--ease-out),
    padding-bottom var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  background: rgba(11, 26, 40, 0.84);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(244, 246, 245, 0.06), 0 10px 30px rgba(3, 8, 14, 0.35);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.brand-mark-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 4px;
  flex-shrink: 0;
}

.brand-mark {
  width: 30px;
  height: 30px;
  color: var(--gold);
  flex-shrink: 0;
}

.brand:hover .brand-mark { color: var(--gold-soft); }
.brand-mark { transition: color var(--dur-fast) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .js .site-header .brand-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: crest-draw 1.6s var(--ease-soft) 0.15s forwards; }
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--mist);
}

.main-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  color: rgba(244, 246, 245, 0.78);
}

.main-nav a {
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--gold);
  transition: right var(--dur-base) var(--ease-out);
}
.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--mist);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  right: 0;
}

@media (min-width: 68em) {
  .main-nav { display: flex; }
}
@media (min-width: 68em) and (max-width: 80em) {
  .main-nav { gap: var(--space-5); }
}
.main-nav a[aria-current="page"] { color: var(--mist); }
.main-nav a[aria-current="page"]::after { right: 0; }

.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header .btn--demo-cta {
  overflow: hidden;
  max-width: 12rem;
  margin-inline-end: 0;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    max-width var(--dur-base) var(--ease-out),
    padding-inline var(--dur-base) var(--ease-out),
    margin-inline-end var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
/* A quiet attention cue for the header's one persistent action - at rest
   most of the time, with a brief tilt-wiggle + glow burst every ~5.5s
   ("vrikk") rather than moving continuously, so it stays noticeable
   without ever competing with the hero underneath. */
@media (prefers-reduced-motion: no-preference) {
  .btn--demo-cta {
    animation: btn-demo-wiggle 5.5s ease-in-out infinite;
  }
  .btn--demo-cta:hover,
  .btn--demo-cta:focus-visible {
    animation-play-state: paused;
  }
}
@keyframes btn-demo-wiggle {
  0%, 78% {
    transform: rotate(0deg);
    box-shadow: 0 0 0 0 rgba(232, 168, 85, 0);
  }
  81% { transform: rotate(-3deg); }
  84% {
    transform: rotate(3deg);
    box-shadow: 0 0 0 7px rgba(232, 168, 85, 0.32);
  }
  87% { transform: rotate(-1.5deg); }
  90%, 100% {
    transform: rotate(0deg);
    box-shadow: 0 0 0 12px rgba(232, 168, 85, 0);
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--mist);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.nav-toggle-icon {
  width: 22px;
  height: 22px;
}

.nav-toggle-bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle.is-open .nav-toggle-bar--top { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar--mid { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar--bottom { transform: translateY(-5px) rotate(-45deg); }

body:has(.mobile-nav.is-open) {
  overflow: hidden;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
  background: var(--ink-900);
  border: 1px solid rgba(244, 246, 245, 0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(3, 8, 14, 0.5);
  overflow: hidden;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav a {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  color: rgba(244, 246, 245, 0.8);
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.mobile-nav a:last-child { border-bottom: none; }

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
  color: var(--gold-soft);
  background: rgba(244, 246, 245, 0.03);
}

@media (prefers-reduced-motion: no-preference) {
  .mobile-nav {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .mobile-nav.is-open {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 68em) {
  .nav-toggle,
  .mobile-nav {
    display: none !important;
  }
}
.mobile-nav a[aria-current="page"] { color: var(--gold-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--gold);
  color: var(--ink-950);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--lg {
  font-size: 1.0625rem;
  padding: var(--space-4) var(--space-7);
}

/* Only the hero's own eyebrow keeps this treatment (mono, »» prefix) —
   every new section below uses .section-kicker instead, see further down. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-5);
}
.eyebrow-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.hero-content .eyebrow { color: var(--gold-soft); }

/* ============================================================
   HERO — kodelig-main's hero, kept: same tokens, same terminal, same
   photo. 2.0 changes only timing/polish: the wireframe now opens and
   fades as one continuous crossfade (no flicker steps), the heading
   rises word by word from behind a mask, the terminal arrives last.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ink-950);
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  bottom: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: 63% 40%;
}

.hero-glow {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 55% 42% at 66% 82%,
    rgba(246, 217, 168, 0.55) 0%,
    rgba(232, 168, 85, 0.22) 45%,
    rgba(232, 168, 85, 0) 72%);
}

.hero-wire {
  opacity: 0;
  mix-blend-mode: screen;
  clip-path: inset(50% 0 50% 0);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-wire { animation: wire-grow 18s ease-in-out infinite; }
}
/* One continuous breath: the wireframe opens from the horizon line while
   fading in, holds, then fades out fully open - the clip only resets while
   it is invisible, so there is never a visible jump. */
@keyframes wire-grow {
  0%, 22%   { opacity: 0;    clip-path: inset(50% 0 50% 0); animation-timing-function: cubic-bezier(0.33, 0, 0.15, 1); }
  40%       { opacity: 0.62; clip-path: inset(0 0 0 0); }
  52%       { opacity: 0.66; clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  68%       { opacity: 0;    clip-path: inset(0 0 0 0); }
  69%, 100% { opacity: 0;    clip-path: inset(50% 0 50% 0); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(8, 15, 24, 0.86) 0%,
      rgba(8, 15, 24, 0.64) 30%,
      rgba(8, 15, 24, 0.28) 55%,
      rgba(8, 15, 24, 0.08) 76%),
    linear-gradient(to top,
      rgba(8, 15, 24, 0.6) 0%,
      rgba(8, 15, 24, 0) 28%);
}

@media (max-width: 40em) {
  .hero-scrim {
    background:
      linear-gradient(rgba(6, 12, 20, 0.6), rgba(6, 12, 20, 0.6)),
      linear-gradient(to top,
        rgba(6, 12, 20, 0.7) 0%,
        rgba(6, 12, 20, 0.35) 30%,
        rgba(6, 12, 20, 0.45) 65%,
        rgba(6, 12, 20, 0.7) 100%);
  }
}

.hero-terminal-col {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-terminal {
  border-radius: var(--radius-md);
  background: rgba(15, 30, 45, 0.26);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(244, 246, 245, 0.14);
  box-shadow:
    0 10px 20px rgba(3, 8, 14, 0.4),
    0 40px 80px rgba(3, 8, 14, 0.5),
    0 1px 0 rgba(244, 246, 245, 0.06) inset;
  overflow: hidden;
}

@media (min-width: 64em) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr min(36vw, 520px);
    align-items: start;
    column-gap: clamp(1.5rem, 4vw, 4rem);
  }
  .hero-terminal-col {
    margin-top: calc(var(--space-9) + 4rem);
  }
}

@media (min-width: 90em) {
  .hero h1 { max-width: 20ch; }
  .hero .lede { max-width: 46ch; }
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(244, 246, 245, 0.1);
  background: rgba(15, 30, 45, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.term-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(244, 246, 245, 0.28);
}

.term-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* A solid dark backing (not just the glass tint) behind the boot log/
   command text - gives the terminal an actual "screen" to sit on rather
   than floating directly over the photo, improves text legibility
   regardless of how bright that part of the photo is, and lets the same
   topo texture used on every other dark surface read clearly here too. */
.term-body {
  height: 206px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 168, 85, 0.35) transparent;
  background: rgba(8, 15, 24, 0.55) url('../images/texture-dark.webp') repeat;
  background-size: 480px auto;
}
.term-body::-webkit-scrollbar { width: 6px; }
.term-body::-webkit-scrollbar-track { background: transparent; }
.term-body::-webkit-scrollbar-thumb { background: rgba(232, 168, 85, 0.35); border-radius: 999px; }
.term-body::-webkit-scrollbar-thumb:hover { background: rgba(232, 168, 85, 0.55); }

@media (min-width: 64em) {
  .term-body { height: min(400px, 30vh); }
}

.term-body > div { min-height: 1.7em; }

.term-cmd { color: var(--mist); }
.term-ok { color: var(--gold-soft); }
.term-code { color: var(--muted); }
.term-dim { color: var(--muted); opacity: 0.75; }
.term-error { color: var(--error); }

.term-logo { position: relative; overflow: hidden; }
.term-logo-line span.is-beam {
  color: var(--mist);
  text-shadow: 0 0 6px rgba(244, 246, 245, 0.85), 0 0 14px rgba(246, 217, 168, 0.55);
}
.term-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(244, 246, 245, 0.4) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.term-logo.is-lit::after { animation: term-logo-glint 1.1s ease-out 1; }
@keyframes term-logo-glint {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .term-logo.is-lit::after { animation: none; }
}

.term-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(244, 246, 245, 0.1);
  background: rgba(8, 15, 24, 0.55) url('../images/texture-dark.webp') repeat;
  background-size: 480px auto;
}
.term-prompt-label {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.term-cursor {
  display: inline-block;
  width: 6px;
  height: 1em;
  background: var(--gold);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .term-cursor { animation: term-blink 1s step-end infinite; }
}
@keyframes term-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.term-input-row:has(.term-input:focus) .term-cursor,
.term-input-row:has(.term-input:not(:placeholder-shown)) .term-cursor,
.term-input-row:has(.term-input:disabled) .term-cursor {
  display: none;
}
.term-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  caret-color: var(--gold);
}
.term-input::placeholder { color: var(--muted); opacity: 0.75; }
.term-input:disabled { opacity: 0.5; }

@media (max-width: 47.9375em) {
  .term-input { font-size: 16px; }
}

.term-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.term-hint button {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--mist);
  background: rgba(15, 30, 45, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 168, 85, 0.4);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.term-hint button:hover,
.term-hint button:focus-visible {
  background: rgba(21, 41, 61, 0.6);
  border-color: var(--gold);
}
.term-hint button:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: glow 9s ease-in-out infinite alternate; }
  .hero-photo, .hero-glow { will-change: transform; }
  .hero-photo:not(.hero-wire) { animation: hero-settle 2.4s var(--ease-expo) both; }
  @keyframes hero-settle { from { opacity: 0.4; scale: 1.06; } to { opacity: 1; scale: 1; } }
}

@keyframes glow {
  from { opacity: 0.58; }
  to   { opacity: 1; }
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-content {
  position: relative;
  padding-top: var(--space-9);
  padding-bottom: clamp(1.5rem, 5vh, 4.5rem);
}

.hero h1 {
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 2.1rem + 3.2vw, 5.25rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--mist);
  max-width: 16ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--gold);
}

.hero .lede {
  margin-top: var(--space-5);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 38ch;
}

.scroll-cue {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin: var(--space-7) var(--gutter) var(--space-7);
  padding: var(--space-2) var(--space-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.scroll-cue:hover,
.scroll-cue:focus-visible { color: var(--gold-soft); }

.scroll-cue-icon {
  width: 16px;
  height: 16px;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue-icon { animation: scroll-cue-bounce 2.2s ease-in-out infinite; }
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero-content > * {
    opacity: 0;
    transform: translateY(14px);
    animation: rise var(--dur-base) var(--ease-out) forwards;
  }
  .js .hero-content > *:nth-child(1) { animation-delay: 80ms; animation-duration: 900ms; }
  .js .hero-content > .lede { animation-delay: 700ms; animation-duration: 1100ms; }
  @keyframes rise {
    to { opacity: 1; transform: none; }
  }
  /* The heading itself stays put; its words rise from behind masks. */
  .js .hero-content > .hero-title { opacity: 1; transform: none; animation: none; }
  .js .hero-title .w-i {
    transform: translate3d(0, 108%, 0);
    animation: word-rise 1.2s var(--ease-expo) forwards;
    animation-delay: calc(220ms + var(--i, 0) * 75ms);
  }
  @keyframes word-rise { to { transform: none; } }
  .js .hero-terminal-col {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    animation: rise 1.2s var(--ease-expo) 850ms forwards;
  }
  .js .scroll-cue { opacity: 0; animation: rise 1s var(--ease-soft) 1.4s forwards; }
}
.reveal-all .hero-title .w-i, .reveal-all .hero-content > *, .reveal-all .hero-terminal-col, .reveal-all .scroll-cue { opacity: 1 !important; transform: none !important; }
.term-body { transition: opacity 280ms var(--ease-soft); }
.term-body.is-swapping { opacity: 0; }

@media (max-height: 480px) {
  .hero-content {
    padding-top: 4.5rem;
    padding-bottom: var(--space-3);
  }
  .hero h1 {
    font-size: clamp(1.75rem, 1.4rem + 2.2vw, 3rem);
    line-height: 1.08;
  }
  .hero .lede { display: none; }
  .hero-terminal-col { display: none; }
  .scroll-cue { margin: var(--space-3) var(--gutter); }
}

/* ============================================================
   2.0 — motion vocabulary. Everything below the hero moves in one calm,
   consistent way: words rise from behind a mask, blocks fade up a short
   distance, images open from a soft inset while settling from a slight
   zoom. Nothing bounces, nothing flickers. All of it is gated on .js
   (so no-JS shows everything) and on prefers-reduced-motion. .reveal-all
   is the failsafe the inline head script adds if main.js never runs.
   ============================================================ */

.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for descenders (g, j, ø) inside the clipping mask */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.w-i { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .js .mask-heading .w-i {
    transform: translate3d(0, 108%, 0);
    transition: transform 1.15s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
  }
  .js .mask-heading.is-visible .w-i { transform: none; }

  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 1s var(--ease-soft), transform 1.1s var(--ease-expo);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  .js .img-reveal {
    clip-path: inset(10% 8% 10% 8% round var(--radius-lg));
    transition: clip-path 1.5s var(--ease-expo);
  }
  .js .img-reveal img { scale: 1.12; transition: scale 1.8s var(--ease-expo); }
  .js .img-reveal.is-visible { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
  .js .img-reveal.is-visible img { scale: 1; }
}
.reveal-all .mask-heading .w-i,
.reveal-all .reveal { opacity: 1 !important; transform: none !important; }
.reveal-all .img-reveal { clip-path: none !important; }
.reveal-all .img-reveal img { scale: 1 !important; }

/* Soft page-to-page transition (cross-document View Transitions, where
   supported - other browsers simply navigate normally). The header keeps
   its own name so it stays put while the page underneath crossfades. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 320ms var(--ease-soft) both; }
::view-transition-new(root) { animation: vt-in 620ms var(--ease-expo) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ============================================================
   Shared editorial type
   ============================================================ */

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-kicker);
  margin: 0 0 var(--space-4);
}
.section-kicker::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.section-kicker--on-dark { color: var(--gold-soft); }

.section-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--cream-ink);
  max-width: 18ch;
  text-wrap: balance;
}
.section-heading--xl { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.75rem); max-width: 14ch; }
.section-heading--on-dark { color: var(--mist); }

.prose {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--cream-text);
  max-width: 58ch;
  text-wrap: pretty;
}
.prose + .prose { margin-top: var(--space-4); }
.prose--lead {
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  line-height: 1.55;
  color: var(--cream-ink-soft);
  letter-spacing: -0.005em;
}
.prose--on-dark { color: rgba(244, 246, 245, 0.74); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--cream-ink);
  padding-bottom: 4px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: color var(--dur-fast) var(--ease-out), gap 500ms var(--ease-expo), background-size 700ms var(--ease-expo);
}
.text-link { background-size: 100% 1px, 0% 1px; background-image: linear-gradient(rgba(26, 29, 24, 0.22), rgba(26, 29, 24, 0.22)), linear-gradient(var(--gold), var(--gold)); }
.text-link:hover, .text-link:focus-visible { color: var(--cream-kicker); gap: 0.75em; background-size: 100% 1px, 100% 1px; }
.text-link--on-dark { color: var(--mist); background-image: linear-gradient(rgba(244, 246, 245, 0.3), rgba(244, 246, 245, 0.3)), linear-gradient(var(--gold-soft), var(--gold-soft)); }
.text-link--on-dark:hover, .text-link--on-dark:focus-visible { color: var(--gold-soft); }

.paper {
  background: var(--cream) url('../images/texture-light.webp') repeat;
  background-size: 640px auto;
}
.ink {
  background: var(--ink-950) url('../images/texture-dark.webp') repeat;
  background-size: 640px auto;
}

/* ============================================================
   Sub-page header - dark band, masked title, hand-drawn ridgeline
   ============================================================ */

.page-hero {
  --ridge-base: var(--ink-950);
  position: relative;
  overflow: clip;
  padding-top: clamp(8.5rem, 7rem + 6vw, 12rem);
  padding-bottom: clamp(7rem, 4rem + 9vw, 12rem);
  background:
    radial-gradient(ellipse 60% 70% at 85% -10%, rgba(232, 168, 85, 0.13), rgba(232, 168, 85, 0) 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(62, 122, 109, 0.14), rgba(62, 122, 109, 0) 70%),
    var(--ink-950) url('../images/texture-dark.webp') repeat;
  background-size: auto, auto, 640px auto;
}
.subpage--article .page-hero,
.subpage--facebook .page-hero { --ridge-base: var(--cream); }
.page-hero-inner { position: relative; z-index: 2; }
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.5rem + 3.9vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--mist);
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
@media (max-width: 26em) { .page-title { font-size: clamp(2.125rem, 9.6vw, 2.5rem); } }
.page-lede {
  margin-top: var(--space-6);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
  color: rgba(244, 246, 245, 0.74);
  max-width: 60ch;
  text-wrap: pretty;
}
.page-lede p + p { margin-top: var(--space-4); }
.page-lede--on-dark { color: rgba(244, 246, 245, 0.7); }
.page-hero-split { display: grid; gap: var(--space-7); align-items: end; }
@media (min-width: 64em) {
  .page-hero-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); }
}
.page-hero-art { max-width: 30rem; width: 100%; justify-self: end; }

.ridge {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: clamp(80px, 13vw, 210px);
  z-index: 1;
  pointer-events: none;
}
.ridge svg { width: 100%; height: 100%; overflow: visible; }
.ridge-l { will-change: transform; }
.ridge-l--3 { fill: var(--ink-800); opacity: 0.7; }
.ridge-l--2 { fill: var(--ink-900); }
.ridge-l--1 { fill: var(--ridge-base); }
.ridge-crest {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.25;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.75;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .js .ridge-crest { stroke-dashoffset: 1; animation: crest-draw 2.8s var(--ease-soft) 0.45s forwards; }
}
@keyframes crest-draw { to { stroke-dashoffset: 0; } }

/* ============================================================
   Trust strip - first thing after the hero; calm, hairline-divided.
   ============================================================ */

.trust-strip {
  background: var(--cream) url('../images/texture-light.webp') repeat;
  background-size: 640px auto;
  border-bottom: 1px solid var(--cream-border);
  padding-block: var(--space-7);
}
.trust-strip-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 36em) { .trust-strip-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); } }
@media (min-width: 64em) {
  .trust-strip-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .trust-item { padding-inline: var(--space-5); }
  .trust-item:first-child { padding-left: 0; }
  .trust-item + .trust-item { border-left: 1px solid var(--cream-border); }
}
.trust-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.trust-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--cream-kicker); margin-top: 2px; }
.trust-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--cream-ink);
  margin-bottom: 2px;
}
.trust-item p { font-size: 0.9375rem; line-height: 1.45; color: var(--cream-text); }

/* ============================================================
   Intro / "Hvorfor Kodelig?"
   ============================================================ */

.intro {
  background: var(--cream) url('../images/texture-light.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--section-pad);
}
.intro-grid { display: grid; gap: var(--space-6); }
@media (min-width: 56em) {
  .intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: end;
  }
}

/* ============================================================
   Offerings ("Hva jeg tilbyr")
   ============================================================ */

.offerings {
  background: var(--ink-950) url('../images/texture-dark.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--section-pad);
}
.offering-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 40em) { .offering-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .offering-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 72em) { .offering-grid--page { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.offering-card {
  position: relative;
  height: 100%;
  padding: var(--space-6) var(--space-6) var(--space-7);
  background: linear-gradient(180deg, rgba(19, 41, 62, 0.75), rgba(15, 32, 50, 0.75));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 600ms var(--ease-expo), transform 700ms var(--ease-expo), box-shadow 700ms var(--ease-expo);
}
.offering-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(232, 168, 85, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-expo);
}
.offering-card:hover,
.offering-card:focus-within {
  border-color: var(--ink-600);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(3, 8, 14, 0.8);
}
.offering-card:hover::before,
.offering-card:focus-within::before { transform: scaleX(1); }
.offering-index {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}
.offering-icon {
  width: 22px;
  height: 22px;
  padding: 12px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(232, 168, 85, 0.12);
  color: var(--gold);
  margin-bottom: var(--space-6);
  transition: background 600ms var(--ease-expo), color 600ms var(--ease-expo);
}
.offering-card:hover .offering-icon { background: var(--gold); color: var(--ink-950); }
.offering-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--mist);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.offering-card p { font-size: 1rem; line-height: 1.6; color: rgba(244, 246, 245, 0.68); }
.offering-grid--page .offering-card { padding: var(--space-7); }
.offering-grid--page .offering-card h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); max-width: 22ch; }
.offerings--page { padding-top: var(--space-6); }

/* ============================================================
   Process - a hairline draws across the steps (down them on mobile) and
   each number ring warms to gold in sequence. Pure CSS, driven by the
   steps' own .is-visible state.
   ============================================================ */

.process {
  background: var(--cream) url('../images/texture-light.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--section-pad);
}
.process-list { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.process-list::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(var(--cream-kicker), var(--cream-border));
  transform-origin: top;
}
.process-list > li { position: relative; padding-left: calc(44px + var(--space-5)); }
.process-num {
  position: absolute;
  left: 0;
  top: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cream-border);
  background: var(--cream);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--cream-ink);
  transition: border-color 700ms var(--ease-soft), background 700ms var(--ease-soft), color 700ms var(--ease-soft);
  transition-delay: calc(var(--step, 1) * 220ms + 200ms);
}
.process-list > li.is-visible .process-num,
.reveal-all .process-num,
html:not(.js) .process-num { border-color: var(--gold); background: #FBEBD2; color: #5C3B10; }
@media (min-width: 64em) {
  .process-list { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .process-list::before {
    left: 22px;
    right: 0;
    top: 22px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--cream-kicker), var(--cream-border) 80%, rgba(228, 223, 207, 0));
    transform-origin: left;
  }
  .process-list > li { padding-left: 0; padding-top: calc(44px + var(--space-5)); padding-right: var(--space-4); }
  .process-num { top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .process-list::before { transform: scaleY(0); transition: transform 1.8s var(--ease-soft) 0.2s; }
  .js .process-list:has(> li.is-visible)::before { transform: none; }
  @media (min-width: 64em) {
    .js .process-list::before { transform: scaleX(0); }
    .js .process-list:has(> li.is-visible)::before { transform: none; }
  }
}
.process-list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--cream-ink);
  margin-bottom: var(--space-2);
}
.process-text, .process-text p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cream-text);
  max-width: 42ch;
}

/* ============================================================
   Showcase - editorial: the first project as a wide feature, the rest
   two-up. Real client work at real size, not thumbnails.
   ============================================================ */

.showcase {
  background: var(--ink-950) url('../images/texture-dark.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--section-pad);
}
.showcase-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.showcase-head .text-link { margin-top: 0; }
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 48em) {
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-item--feature { grid-column: 1 / -1; }
}
.showcase-card { display: block; color: inherit; }
.showcase-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-800);
  box-shadow: 0 40px 80px -40px rgba(3, 8, 14, 0.9);
}
.showcase-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(244, 246, 245, 0.08);
  pointer-events: none;
}
.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s var(--ease-expo);
}
.showcase-media--empty { background: linear-gradient(135deg, var(--ink-800), var(--ink-900)); }
.showcase-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding-top: var(--space-5);
}
.showcase-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold-soft);
  padding-top: 0.45em;
}
.showcase-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--mist);
}
.showcase-body h3 {
  background: linear-gradient(var(--gold-soft), var(--gold-soft)) left 100% / 0% 1px no-repeat;
  display: inline;
  transition: background-size 800ms var(--ease-expo);
}
.showcase-tag { margin-top: var(--space-2); font-size: 0.9375rem; color: rgba(244, 246, 245, 0.66); }
.showcase-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244, 246, 245, 0.2);
  color: var(--mist);
  transition: background 600ms var(--ease-expo), border-color 600ms var(--ease-expo), color 600ms var(--ease-expo), transform 700ms var(--ease-expo);
}
.showcase-arrow svg { width: 18px; height: 18px; }
.showcase-card:hover .showcase-media img,
.showcase-card:focus-visible .showcase-media img { scale: 1.035; }
.showcase-card:hover .showcase-body h3,
.showcase-card:focus-visible .showcase-body h3 { background-size: 100% 1px; }
.showcase-card:hover .showcase-arrow,
.showcase-card:focus-visible .showcase-arrow { background: var(--gold); border-color: var(--gold); color: var(--ink-950); transform: rotate(45deg); }
.showcase-card:focus-visible { outline: none; }
.showcase-card:focus-visible .showcase-media { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (min-width: 64em) {
  .showcase-item--feature .showcase-card {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
  }
  .showcase-item--feature .showcase-body {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 0 var(--space-4);
  }
  .showcase-item--feature .showcase-index {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    padding: 0 0 var(--space-6);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-3);
  }
  .showcase-item--feature .showcase-body h3 { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.5rem); line-height: 1.12; }
}
.showcase--page { padding-top: var(--space-6); }

/* ============================================================
   Founder
   ============================================================ */

.founder {
  background: var(--cream) url('../images/texture-light.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--section-pad);
  overflow: clip;
}
.founder-grid { display: grid; gap: var(--space-7); }
@media (min-width: 64em) {
  .founder-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-8);
    align-items: center;
  }
  .founder-grid .founder-body { order: -1; }
}
.founder-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 70px -35px rgba(26, 29, 24, 0.45);
}
@media (max-width: 47.9375em) { .founder-media { aspect-ratio: 16 / 10; } }
.founder-media img {
  position: absolute;
  inset: -7% 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: 62% 50%;
}
.founder-body .section-heading { margin-bottom: var(--space-5); }

/* ============================================================
   Pricing - head above, the packages as an even row of cards. The first
   package carries the gold "headline" treatment.
   ============================================================ */

.pricing-band {
  background: var(--ink-950) url('../images/texture-dark.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--section-pad);
}
.pricing-band-head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 56em) {
  .pricing-band-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; gap: var(--space-8); }
}
.pricing-band-cards,
.pricing-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 40em) {
  .pricing-band-cards, .pricing-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 80em) {
  .pricing-band-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(19, 41, 62, 0.8), rgba(15, 32, 50, 0.8));
  overflow: hidden;
  transition: border-color 600ms var(--ease-expo), translate 700ms var(--ease-expo), box-shadow 700ms var(--ease-expo);
}
.price-card:hover { border-color: var(--ink-600); translate: 0 -4px; box-shadow: 0 30px 60px -30px rgba(3, 8, 14, 0.8); }
.price-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.price-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--mist);
}
.price-index { order: 2; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.price-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.4em;
  font-family: var(--font-display);
  color: var(--gold-soft);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.price-from { font-size: 0.9375rem; font-weight: 600; color: rgba(246, 217, 168, 0.8); }
.price-num {
  font-size: clamp(2rem, 1.7rem + 1vw, 2.625rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.price-unit { flex-basis: 100%; margin-top: var(--space-2); font-size: 0.875rem; font-weight: 500; color: rgba(246, 217, 168, 0.75); }
.price-desc { font-size: 0.9375rem; line-height: 1.6; color: rgba(244, 246, 245, 0.72); }
.price-desc p + p, .price-desc ul + p, .price-desc p + ul { margin-top: var(--space-4); }
.price-desc ul { display: grid; gap: var(--space-2); }
.price-desc li { position: relative; padding-left: 1.4em; color: rgba(244, 246, 245, 0.86); }
.price-desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.7em;
  height: 1px;
  background: var(--gold);
}
.price-desc ul + p:last-child { font-size: 0.8125rem; color: rgba(244, 246, 245, 0.6); padding-top: var(--space-4); border-top: 1px dashed var(--border); }
.price-card--headline {
  background: linear-gradient(165deg, rgba(232, 168, 85, 0.16), rgba(232, 168, 85, 0.03) 60%), var(--ink-900);
  border-color: rgba(232, 168, 85, 0.42);
}
.price-card--headline::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), rgba(232, 168, 85, 0.2));
}
.price-card--headline .price-amount { border-bottom-color: rgba(232, 168, 85, 0.3); }
.price-card--headline .price-index { color: var(--gold-soft); }
.price-card--headline:hover { border-color: rgba(232, 168, 85, 0.7); }
/* One slow light-catch across the headline card as it arrives - the same
   restrained gloss as the hero terminal's edge, played once. */
.price-card--headline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(246, 217, 168, 0) 35%, rgba(246, 217, 168, 0.14) 50%, rgba(246, 217, 168, 0) 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .price-card--headline.is-visible::after { animation: card-sheen 2.2s var(--ease-soft) 0.6s 1 both; }
}
@keyframes card-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* Rebuild graphic (a priceless pricing card, if one is ever added) */
.rebuild-graphic { margin-top: auto; padding-top: var(--space-6); }
.rebuild-graphic svg { display: block; width: 100%; max-width: 260px; margin-inline: auto; }
.rebuild-frame { stroke: var(--border); }
.rebuild-dot { fill: var(--border); stroke: none; }
.rebuild-bar { fill: var(--muted); opacity: 0.4; stroke: none; }
.rebuild-bar-fix { animation: rebuild-pulse 3.2s ease-in-out infinite; }
.rebuild-bar-fix--1 { animation-delay: 0s; }
.rebuild-bar-fix--2 { animation-delay: 0.5s; }
.rebuild-bar-fix--3 { animation-delay: 1s; }
@keyframes rebuild-pulse {
  0%, 12%, 100% { fill: var(--muted); opacity: 0.4; }
  6% { fill: var(--gold); opacity: 0.95; }
}
.rebuild-cta { fill: none; stroke: var(--muted); stroke-opacity: 0.4; animation: rebuild-cta-pulse 3.2s ease-in-out 1.4s infinite; }
@keyframes rebuild-cta-pulse {
  0%, 18%, 100% { stroke: var(--muted); stroke-opacity: 0.4; }
  12% { stroke: var(--gold); stroke-opacity: 0.9; }
}
.rebuild-wrench { color: var(--gold); transform-box: fill-box; transform-origin: 50% 50%; animation: rebuild-wrench-turn 3.2s ease-in-out infinite; }
@keyframes rebuild-wrench-turn { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) {
  .rebuild-bar-fix, .rebuild-cta, .rebuild-wrench { animation: none; }
}

.pricing-page {
  background: var(--ink-950) url('../images/texture-dark.webp') repeat;
  background-size: 640px auto;
  padding-top: var(--space-6);
  padding-bottom: var(--section-pad);
}
@media (min-width: 64em) {
  .pricing-page-grid { gap: var(--space-6); }
  .pricing-page-grid .price-card { padding: var(--space-7); }
  .pricing-page-grid .price-card--headline { grid-row: span 1; }
}

/* ============================================================
   "Holder det ikke med Facebook?" - homepage teaser + full page
   ============================================================ */

.dh-teaser {
  background: var(--cream) url('../images/texture-light.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--cream-border);
}
.dh-teaser-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 56em) {
  .dh-teaser-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); }
}
.dh-teaser .section-heading { margin-bottom: var(--space-5); }
.dh-takeaway {
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--cream-ink);
}
.dh-takeaway strong { font-weight: 700; }
.dh-teaser-art { max-width: 32rem; width: 100%; justify-self: center; }

/* The hand-drawn "profile -> digital home" figure. Colours come from
   custom properties so it works on cream and on navy. */
.dh-graphic {
  --dh-stroke: #CFC5AD;
  --dh-fill: #E4DCC8;
  --dh-fill-strong: #D3C7AA;
  --dh-accent: #C98A35;
  --dh-home: var(--cream-ink);
}
.page-hero .dh-graphic {
  --dh-stroke: rgba(244, 246, 245, 0.22);
  --dh-fill: rgba(244, 246, 245, 0.12);
  --dh-fill-strong: rgba(244, 246, 245, 0.2);
  --dh-accent: var(--gold);
  --dh-home: var(--mist);
}
.dh-graphic svg { width: 100%; height: auto; overflow: visible; }
.dh-frame { stroke: var(--dh-stroke); stroke-width: 1.5; }
.dh-frame--home { stroke: var(--dh-home); stroke-opacity: 0.7; }
.dh-avatar { fill: var(--dh-fill-strong); }
.dh-line { fill: var(--dh-fill-strong); }
.dh-line--dim { fill: var(--dh-fill); }
.dh-media { fill: var(--dh-fill); }
.dh-ridge { stroke: var(--dh-stroke); stroke-width: 1.5; }
.dh-reactions circle { fill: var(--dh-fill-strong); }
.dh-roof { stroke: var(--dh-accent); stroke-width: 2; }
.dh-dot { fill: var(--dh-stroke); }
.dh-bar, .dh-tile { fill: var(--dh-fill-strong); }
.dh-bar--1 { fill: var(--dh-accent); opacity: 0.85; }
.dh-link { stroke: var(--dh-accent); stroke-width: 1.5; stroke-dasharray: 3 6; }
.dh-link-dot { fill: var(--dh-accent); }
@media (prefers-reduced-motion: no-preference) {
  .dh-link { animation: dh-flow 1.8s linear infinite; }
  .dh-bar--2, .dh-bar--3, .dh-tile { animation: dh-fill 6s var(--ease-soft) infinite; }
  .dh-bar--3 { animation-delay: 0.35s; }
  .dh-tile--1 { animation-delay: 0.8s; }
  .dh-tile--2 { animation-delay: 1.1s; }
  .dh-tile--3 { animation-delay: 1.4s; }
  .dh-reactions circle { animation: dh-react 6s var(--ease-soft) infinite; }
  .dh-reactions circle:nth-child(2) { animation-delay: 0.2s; }
  .dh-reactions circle:nth-child(3) { animation-delay: 0.4s; }
  .dh-graphic:not(.is-inview) * { animation-play-state: paused !important; }
}
@keyframes dh-flow { to { stroke-dashoffset: -18; } }
@keyframes dh-fill {
  0%, 8% { fill: var(--dh-fill); }
  28%, 72% { fill: var(--dh-accent); fill-opacity: 0.55; }
  92%, 100% { fill: var(--dh-fill); }
}
@keyframes dh-react {
  0%, 40%, 100% { opacity: 1; }
  60% { opacity: 0.35; }
}

.dh-compare {
  background: var(--cream) url('../images/texture-light.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--space-8) var(--section-pad);
}
.dh-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--cream-text); }
.dh-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--cream-ink);
  max-width: 22ch;
  text-wrap: balance;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.dh-table thead th {
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-kicker);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--cream-ink);
}
.dh-table thead td { border-bottom: 1px solid var(--cream-ink); }
.dh-table tbody th {
  text-align: left;
  vertical-align: top;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--cream-ink);
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
  border-bottom: 1px solid var(--cream-border);
  width: 22%;
}
.dh-table tbody td {
  vertical-align: top;
  padding: var(--space-5);
  border-bottom: 1px solid var(--cream-border);
  font-size: 1rem;
  line-height: 1.6;
}
.dh-table .dh-col-web { background: rgba(232, 168, 85, 0.12); color: var(--cream-ink); }
.dh-table thead .dh-col-web { border-radius: var(--radius-md) var(--radius-md) 0 0; color: #6E4512; }
.dh-table tbody tr:last-child .dh-col-web { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.digital-home-plus { color: var(--cream-kicker); font-weight: 800; }
.dh-mobile-label { display: none; }
@media (max-width: 47.9375em) {
  .dh-table, .dh-table tbody, .dh-table tr, .dh-table th, .dh-table td { display: block; width: auto; }
  .dh-table caption { display: block; }
  .dh-table thead { display: none; }
  .dh-table tbody tr { padding: var(--space-5) 0; border-bottom: 1px solid var(--cream-border); }
  .dh-table tbody th, .dh-table tbody td { border: none; padding: 0; }
  .dh-table tbody th { width: auto; margin-bottom: var(--space-3); font-size: 1.125rem; }
  .dh-table tbody td + td { margin-top: var(--space-3); }
  .dh-table tbody td.dh-col-web { padding: var(--space-4); border-radius: var(--radius-sm) !important; }
  .dh-mobile-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream-kicker);
    margin-bottom: var(--space-1);
  }
}

.dh-details {
  background: var(--ink-950) url('../images/texture-dark.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--section-pad);
}
.dh-details-grid { display: grid; gap: var(--space-7); }
@media (min-width: 56em) { .dh-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
.dh-subheading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--mist);
  margin-bottom: var(--space-4);
  max-width: 24ch;
  text-wrap: balance;
}
.dh-details .prose { color: rgba(244, 246, 245, 0.74); }
.dh-takeaway--lg {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-left: var(--space-6);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--mist);
}

/* ============================================================
   Article (page.php - Personvern and other plain pages)
   ============================================================ */

.article {
  background: var(--cream) url('../images/texture-light.webp') repeat;
  background-size: 640px auto;
  padding-block: var(--space-7) var(--section-pad);
  color: var(--cream-text);
}
.article-body { max-width: 44rem; margin-inline: auto; font-size: 1.0625rem; line-height: 1.75; }
.article-body > * + * { margin-top: var(--space-4); }
.article-body h2 {
  margin-top: var(--space-7);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--cream-ink);
}
.article-body h3 {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cream-ink);
}
.article-body h2 + *, .article-body h3 + * { margin-top: var(--space-3); }
.article-body > p:first-child { font-size: 0.9375rem; color: var(--cream-kicker); letter-spacing: 0.02em; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul > li { position: relative; padding-left: 1.4em; }
.article-body ul > li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.7em; height: 1px; background: var(--cream-kicker); }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: var(--space-2); }
.article-body a { color: var(--cream-ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease-out); }
.article-body a:hover { color: var(--cream-kicker); }
.article-body strong { color: var(--cream-ink); font-weight: 700; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.article-body th, .article-body td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--cream-border); vertical-align: top; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.article-body .table-wrap, .article-body figure.wp-block-table { overflow-x: auto; }

/* ============================================================
   Final CTA - the fjord at dusk, closing every page.
   ============================================================ */

.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(7rem, 5rem + 9vw, 13rem);
  background: var(--ink-950);
}
.final-cta-art { position: absolute; inset: 0; }
.final-cta-art img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center 60%;
}
.final-cta-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 26, 40, 1) 0%, rgba(8, 15, 24, 0.55) 22%, rgba(8, 15, 24, 0.66) 60%, rgba(8, 15, 24, 0.92) 100%);
}
.final-cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 50rem;
  margin-inline: auto;
}
.final-cta-inner .section-kicker { justify-content: center; }
.final-cta-inner .section-kicker::after {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.final-cta-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--mist);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.final-cta-lede {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: rgba(244, 246, 245, 0.8);
  max-width: 44ch;
  margin-inline: auto;
  margin-bottom: var(--space-7);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background-color: var(--ink-950);
  background-image:
    repeating-linear-gradient(to right, var(--border) 0 6px, transparent 6px 14px),
    url('../images/texture-dark.webp');
  background-repeat: no-repeat, repeat;
  background-position: top left, top left;
  background-size: 100% 1px, 640px auto;
}
.site-footer-grid { display: grid; gap: var(--space-7); }
@media (min-width: 48em) {
  .site-footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.footer-brand-link { display: inline-flex; align-items: center; gap: var(--space-3); }
.footer-brand .brand-mark { color: var(--gold); }
.site-footer .tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  color: var(--mist);
}
.footer-nav, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); font-size: 0.9375rem; }
.footer-nav a, .footer-contact a { color: rgba(244, 246, 245, 0.78); position: relative; transition: color var(--dur-fast) var(--ease-out); }
.footer-contact span { color: var(--muted); }
.footer-nav a:hover, .footer-contact a:hover,
.footer-nav a:focus-visible, .footer-contact a:focus-visible { color: var(--gold-soft); }
.footer-nav a[aria-current="page"] { color: var(--gold-soft); }
.footer-base {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.footer-meta { font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }


/* ============================================================
   Contact modal — kept as a terminal window on purpose: a small,
   deliberate callback to the hero's own terminal rather than an
   inconsistency, and it's a utility overlay rather than a page section
   people judge the site's "premium-ness" by.
   ============================================================ */

body:has(.contact-modal[open]) {
  overflow: hidden;
}

.contact-modal {
  width: min(34rem, calc(100vw - 2rem));
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
}

.contact-modal::backdrop {
  background: rgba(5, 10, 16, 0.72);
}

@media (prefers-reduced-motion: no-preference) {
  .contact-modal {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .contact-modal.is-open {
    opacity: 1;
    transform: none;
  }
  .contact-modal::backdrop {
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .contact-modal.is-open::backdrop {
    opacity: 1;
  }
}

.term-window {
  display: flex;
  flex-direction: column;
  max-height: min(40rem, calc(100vh - 4rem));
  background: var(--ink-900) url('../images/texture-dark.webp') repeat;
  background-size: 480px auto;
  border: 1px solid rgba(244, 246, 245, 0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(3, 8, 14, 0.5);
  overflow: hidden;
}

.term-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 4px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.term-close svg { width: 16px; height: 16px; }

.term-close:hover {
  color: var(--mist);
  background: rgba(244, 246, 245, 0.08);
}

.contact-body {
  padding: var(--space-6);
  overflow-y: auto;
}

.contact-body form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.term-line {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.term-field {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.term-field label {
  flex-shrink: 0;
  color: var(--gold-soft);
}

.term-optional {
  color: var(--muted);
  font-weight: 400;
}

.term-field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-2) 0;
  font: inherit;
  color: var(--mist);
}

.term-field input:focus-visible {
  border-bottom-color: var(--gold);
}

.term-field input:-webkit-autofill,
.term-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mist);
  -webkit-box-shadow: 0 0 0px 1000px var(--ink-900) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.term-field--block {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.term-field--block textarea {
  background: rgba(244, 246, 245, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font: inherit;
  color: var(--mist);
  resize: vertical;
  min-height: 6em;
}

.term-field--block textarea:focus-visible {
  border-color: var(--gold);
}

@media (max-width: 40em) {
  .term-field input,
  .term-field--block textarea {
    font-size: 16px;
  }
}

.contact-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.term-submit {
  background: var(--gold);
  color: var(--ink-950);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.term-submit:hover { background: var(--gold-soft); }
.term-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.contact-status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.contact-status[data-state="loading"] { color: var(--muted); }
.contact-status[data-state="success"] { color: var(--gold-soft); }
.contact-status[data-state="error"] { color: var(--error); }

.contact-success {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
}
.contact-success > div { min-height: 1.5em; }

@media (min-width: 90em) {
  :root { --gutter: max(3rem, calc((100vw - 90rem) / 2 + 3rem)); }
}

/* Nettsidesjekk - the second free tool, a quiet outline sibling of the
   gold "Gratis demo" button so the two read as one pair and the demo
   stays the primary action. Header button on desktop only; on smaller
   screens it lives as the last row of the mobile menu instead. */
.site-header .btn--nettsjekk {
  background: transparent;
  color: var(--mist);
  box-shadow: inset 0 0 0 1px rgba(232, 168, 85, 0.55);
  padding-inline: var(--space-4);
  margin-inline-end: calc(var(--space-1) * -1);
}
.site-header .btn--nettsjekk:hover,
.site-header .btn--nettsjekk:focus-visible,
.site-header .btn--nettsjekk[aria-current="page"] {
  background: rgba(232, 168, 85, 0.12);
  color: var(--gold-soft);
}
@media (max-width: 67.99em) {
  .site-header .btn--nettsjekk { display: none; }
}
.mobile-nav a.mobile-nav-tool { color: var(--gold-soft); }