/* ============================================================
   Kodelig — Studio 2.0
   A bright, calm "coastal journey". One fixed scene sits behind
   every page (sky, sun, Senja peaks, sea, our own shoreline) and
   drifts from morning light to golden hour as you scroll; one
   continuous gold line is drawn through the page and ends in the
   studio's own mountain mark. Palette and type come straight from
   Kodelig's logo (gold #E8A855 mark, #0B1A28 ink, Schibsted
   Grotesk). Effect level 2–3: everything moves slowly, nothing
   jumps, and all of it can be switched off by reduced motion.
   ============================================================ */

@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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans.woff2') format('woff2');
}

:root {
  --paper: #F6F7F4;
  --panel: #FFFFFF;
  --ink: #0B1A28;
  --ink-80: rgba(11,26,40,0.82);
  --ink-70: rgba(11,26,40,0.74);
  --ink-50: rgba(11,26,40,0.5);
  --fjord: #1F3A44;
  --gold: #E8A855;
  --gold-deep: #CF8A2E;
  --gold-soft: #F6E4C4;
  --stone: #5E6A71;
  --mist: #C9D0CE;
  --line: rgba(11,26,40,0.1);

  --font-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;

  --wrap: 74rem;
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-calm: cubic-bezier(.22,.61,.36,1);
  --dur: 700ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
#main { flex: 1 0 auto; position: relative; z-index: 1; }
.site-footer { flex-shrink: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-4); }
@media (max-width: 30em) { .wrap { padding-inline: 1.5rem; } }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--fjord); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* ============================================================
   The world — one fixed coastal scene behind every page.
   main.js writes the --w-* colors (interpolated between five
   times of day) and the transforms; these are the morning values
   so the first paint and the no-JS view already look finished.
   ============================================================ */
.world {
  --w-sky-top: #CFE6F0; --w-sky-bottom: #F4F1E8;
  --w-far: #C3D2DA; --w-mid: #ADBFC8; --w-near: #B7C6BB;
  --w-sea-top: #C9DCE2; --w-sea-bottom: #B6CCD3;
  --w-sun: #F4CD8A; --w-glow: rgba(244,205,138,0.42);
  --w-window: 0; --w-glitter: 0.25;
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.world-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--w-sky-top) 0%, var(--w-sky-bottom) 78%); }

.world-sun {
  position: absolute; left: 0; top: 0; width: 70px; height: 70px;
  transform: translate3d(calc(66vw - 35px), 30vh, 0);
  will-change: transform;
}
.world-sun-glow {
  position: absolute; inset: -260%; border-radius: 50%;
  background: radial-gradient(circle, var(--w-glow) 0%, rgba(255,255,255,0) 62%);
}
.world-sun-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--w-sun); box-shadow: 0 0 36px 8px var(--w-glow); }

/* Clouds: flat white puffs merged into one silhouette, opacity on the
   wrapper (never on puffs, which would show seams where they overlap). */
.world-clouds { position: absolute; inset: 0; }
.world-cloud { position: absolute; will-change: transform; }
.cloud-bob { position: relative; width: 6em; height: 2.6em; animation: cloud-bob 11s ease-in-out infinite; }
.puff { position: absolute; background: #FFFFFF; border-radius: 999px; }
.puff-body { left: 0.6em; bottom: 0; width: 4.8em; height: 1.4em; border-radius: 0.7em; }
.puff-1 { left: 0; bottom: 0.5em; width: 1.6em; height: 1.6em; }
.puff-2 { left: 1.1em; bottom: 1em; width: 2.4em; height: 2.4em; }
.puff-3 { left: 3.1em; bottom: 0.7em; width: 1.9em; height: 1.9em; }
.puff-4 { left: 4.3em; bottom: 0.35em; width: 1.3em; height: 1.3em; }
@keyframes cloud-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.35em); } }
.world-cloud-a { top: 13%; left: 6%; font-size: 1.35rem; opacity: 0.9; }
.world-cloud-b { top: 24%; left: 56%; font-size: 1rem; opacity: 0.72; }
.world-cloud-b .cloud-bob { animation-duration: 13.5s; animation-delay: -3.5s; }
.world-cloud-c { top: 8%; left: 78%; font-size: 0.75rem; opacity: 0.58; }
.world-cloud-c .cloud-bob { animation-duration: 9s; animation-delay: -1.5s; }

/* Two gulls gliding across very slowly, wings flexing. */
.world-gulls { position: absolute; inset: 0; }
.gull { position: absolute; left: 0; width: 22px; height: 10px; overflow: visible; fill: none; stroke: rgba(11,26,40,0.42); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gull path { transform-box: fill-box; transform-origin: 50% 100%; animation: gull-flap 2.6s ease-in-out infinite; }
.gull-a { top: 21%; animation: gull-glide 84s linear infinite; animation-delay: -30s; }
.gull-b { top: 27%; width: 15px; animation: gull-glide 110s linear infinite; animation-delay: -78s; }
.gull-b path { animation-duration: 3.1s; animation-delay: -1s; }
@keyframes gull-glide {
  0%   { transform: translate3d(-40px, 0, 0); }
  25%  { transform: translate3d(25vw, -14px, 0); }
  50%  { transform: translate3d(50vw, 6px, 0); }
  75%  { transform: translate3d(75vw, -10px, 0); }
  100% { transform: translate3d(calc(100vw + 40px), 0, 0); }
}
@keyframes gull-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }

/* Land: bottom-anchored bands. Each layer is wider than the viewport by a
   different amount; main.js slides it across that extra width over the whole
   scroll, so far peaks drift slowly and the near shore faster (parallax). */
.world-land { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(220px, 40vh, 470px); }
.world-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(180deg, var(--w-sea-top), var(--w-sea-bottom)); overflow: hidden; }
.world-sea::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0)); }
.world-layer { position: absolute; left: 0; will-change: transform; }
.world-layer > svg:first-child { display: block; width: 100%; height: 100%; }
.world-layer--far { bottom: calc(52% - 1px); height: 46%; width: 124vw; }
.world-layer--far path { fill: var(--w-far); }
.world-layer--mid { bottom: calc(52% - 1px); height: 26%; width: 142vw; }
.world-layer--mid path { fill: var(--w-mid); }
.world-layer--near { bottom: 0; height: 17%; width: 176vw; }
.world-layer--near > svg:first-child path { fill: var(--w-near); }

.world-cabin { position: absolute; left: 33.6%; bottom: 82%; width: 30px; height: 26px; overflow: visible; }
.cabin-wall { fill: #D9AE9F; }
.cabin-roof { fill: none; stroke: #7C8790; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cabin-door { fill: #C4917F; }
.cabin-window {
  fill: var(--gold);
  fill-opacity: calc(0.18 + var(--w-window) * 0.82);
  filter: drop-shadow(0 0 3px rgba(232,168,85, var(--w-window)));
}

/* Sun glitter on the water, following the sun's x (set by JS). */
.world-glitter { position: absolute; top: 6%; left: 0; width: 180px; height: 70%; opacity: var(--w-glitter); will-change: transform; }
.world-glitter i { position: absolute; height: 2px; border-radius: 2px; background: rgba(255,251,240,0.95); animation: glint 4.2s ease-in-out infinite; }
.world-glitter i:nth-child(1) { top: 4%;  left: 38%; width: 40px; }
.world-glitter i:nth-child(2) { top: 16%; left: 22%; width: 64px; animation-delay: -1.1s; }
.world-glitter i:nth-child(3) { top: 30%; left: 46%; width: 52px; animation-delay: -2.3s; }
.world-glitter i:nth-child(4) { top: 44%; left: 14%; width: 80px; animation-delay: -0.6s; }
.world-glitter i:nth-child(5) { top: 58%; left: 40%; width: 70px; animation-delay: -3.1s; }
.world-glitter i:nth-child(6) { top: 72%; left: 8%;  width: 96px; animation-delay: -1.7s; }
.world-glitter i:nth-child(7) { top: 86%; left: 34%; width: 84px; animation-delay: -2.8s; }
@keyframes glint { 0%, 100% { opacity: 0.25; transform: scaleX(0.8); } 50% { opacity: 1; transform: scaleX(1); } }

.world-boat { position: absolute; top: 12%; left: 0; width: 30px; will-change: transform; }
.world-boat svg { display: block; width: 100%; overflow: visible; }
.boat-bob { animation: boat-bob 6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes boat-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(1.5px) rotate(1.5deg); } }
.boat-sail { fill: #FFFFFF; stroke: rgba(11,26,40,0.45); stroke-width: 0.8; stroke-linejoin: round; }
.boat-sail--jib { fill: #FBF3E6; }
.boat-hull { fill: #2C3B46; }

@media (max-width: 48em) {
  .world-sun { width: 46px; height: 46px; transform: translate3d(calc(74vw - 23px), 12vh, 0); }
  .world-land { height: clamp(190px, 31vh, 300px); }
  .world-layer--far { width: 170vw; }
  .world-layer--mid { width: 200vw; }
  .world-layer--near { width: 260vw; height: 15%; }
  .world-cabin { width: 24px; height: 21px; }
  .world-cloud-a { font-size: 1rem; left: 4%; }
  .world-cloud-b { font-size: 0.8rem; }
  .world-cloud-c { display: none; }
  .gull-b { display: none; }
  .world-glitter { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-sun { transform: translate3d(calc(86vw - 35px), 14vh, 0); }
  .cloud-bob, .boat-bob, .gull path, .world-glitter i { animation: none; }
  .gull-a { animation: none; transform: translate3d(62vw, 0, 0); }
  .gull-b { display: none; }
}

/* ============================================================
   The journey line (built by main.js inside #main)
   ============================================================ */
.journey { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.journey-guide { fill: none; stroke: rgba(11,26,40,0.16); stroke-width: 1.25; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.journey-line, .journey-mark { fill: none; stroke: var(--gold-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.journey-mark { stroke-width: 2.6; }
.journey-dot { fill: var(--paper); stroke: rgba(11,26,40,0.28); stroke-width: 1.5; transition: fill 900ms var(--ease-calm), stroke 900ms var(--ease-calm); }
.journey-dot.is-reached { fill: var(--gold); stroke: var(--gold-deep); }
.journey-tip { fill: var(--gold); transition: opacity 600ms var(--ease-calm); }
.journey-tip-halo { fill: var(--gold); opacity: 0.22; transition: opacity 600ms var(--ease-calm); }
.journey.is-idle .journey-tip, .journey.is-idle .journey-tip-halo { opacity: 0; }
.journey-end { display: block; width: 96px; height: 54px; margin: 0 auto var(--space-4); }
.journey-end--quiet { width: 60px; height: 34px; margin: var(--space-6) auto 0; }

/* ---------- nav ---------- */
.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-block: var(--space-3);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.nav-bar.is-scrolled, .nav-bar.is-open {
  background: rgba(246,247,244,0.86);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
  padding-block: var(--space-2);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { width: 28px; height: 28px; color: var(--gold-deep); }
.brand-mark path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .brand-mark path { animation: mark-draw 1.8s var(--ease-calm) 0.2s both; }
@keyframes mark-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.main-nav { display: none; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.main-nav a { font-size: 0.9375rem; font-weight: 500; color: var(--ink-80); transition: color 200ms; position: relative; padding-block: 0.25rem; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
@media (min-width: 64em) { .main-nav { display: flex; } }
@media (max-width: 63.99em) { .nav-actions .btn-primary { display: none; } }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 2.75rem; height: 2.75rem; border: none; background: none; padding: 0;
}
.nav-toggle-bar { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); margin-inline: auto; transition: transform 350ms var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 64em) { .nav-toggle { display: none; } }
.mobile-nav {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: var(--space-3) var(--space-4) var(--space-4); margin-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.mobile-nav a { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; padding-block: 0.5rem; }
.mobile-nav a[aria-current="page"] { color: var(--gold-deep); }
.mobile-nav .btn { margin-top: var(--space-2); align-self: flex-start; }
.mobile-nav[hidden] { display: none; }
.js .mobile-nav:not([hidden]) { animation: nav-in 450ms var(--ease) both; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Without JS there is no scroll state or menu toggle: keep the bar solid
   and let the footer navigation carry the links on small screens. */
html:not(.js) .nav-bar { background: rgba(246,247,244,0.92); box-shadow: 0 1px 0 var(--line); }
html:not(.js) .nav-toggle { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px; border: 1.5px solid transparent;
  padding: 0.8rem 1.6rem; font-weight: 600; font-size: 0.9375rem;
  transition: transform 400ms var(--ease), background 300ms, border-color 300ms, color 300ms, box-shadow 400ms var(--ease);
}
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 0 10px 24px -14px rgba(11,26,40,0.55); }
.btn-primary:hover { background: var(--fjord); transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(11,26,40,0.6); }
.btn-ghost { background: var(--panel); border-color: var(--line); color: var(--ink); box-shadow: 0 1px 2px rgba(11,26,40,0.06), 0 12px 24px -16px rgba(11,26,40,0.25); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-lg { padding: 1.05rem 2.1rem; font-size: 1.0625rem; }
.text-link {
  font-weight: 600; color: var(--fjord);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 3px; transition: background-size 400ms var(--ease), color 200ms;
}
.text-link:hover { color: var(--ink); background-size: 100% 100%; background-image: linear-gradient(var(--gold-soft), var(--gold-soft)); }

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 6.5rem; padding-bottom: 8rem;
}
.hero-inner { width: 100%; }
.hero-inner > * { max-width: 62rem; }
.kicker {
  font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--fjord);
  margin: 0 0 var(--space-3);
}
.hero-heading {
  font-size: clamp(2.6rem, 5.7vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.hero-heading em { font-style: normal; color: var(--fjord); }
.hero-lede {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  color: var(--ink-80);
  max-width: 36rem !important;
  margin: var(--space-4) 0 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.scroll-cue {
  position: absolute; left: max(var(--space-4), calc((100vw - var(--wrap)) / 2 + var(--space-4))); bottom: var(--space-4);
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.scroll-cue-dot {
  position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(232,168,85,0.25);
}
.scroll-cue-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--gold);
  animation: cue-ring 2.8s var(--ease-calm) infinite;
}
@keyframes cue-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue-dot::after { animation: none; opacity: 0; } }
@media (max-width: 30em) { .scroll-cue { left: 1.5rem; } }

/* ---------- reveal ----------
   Hidden only under html.js (set in <head> before first paint, so nothing
   flashes in finished and then animates). The head script adds .reveal-all
   after 3.2 s if main.js never runs; main.js cancels that timer. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1100ms var(--ease-calm), transform 1300ms var(--ease); }
.js .reveal { transition-delay: calc(var(--reveal-i, 0) * 90ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .rise .w { display: inline-block; opacity: 0; transform: translateY(0.42em); transition: opacity 1100ms var(--ease-calm), transform 1300ms var(--ease); transition-delay: calc(var(--w, 0) * 75ms + 150ms); }
.js .rise.is-visible .w { opacity: 1; transform: none; }
.js .hero-kicker { transition-delay: 60ms; }
.js .hero-lede { transition-delay: 650ms; }
.js .hero-actions { transition-delay: 820ms; }
.reveal-all .reveal, .reveal-all .rise .w { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .rise .w { opacity: 1; transform: none; transition: none; }
  .js .brand-mark path { animation: none; }
}

/* ---------- sections ----------
   Transparent: the world stays visible behind everything. Legibility is
   handled at the source — every tone the scene can take is light, so
   --ink / --ink-80 text keeps AA contrast wherever it lands. */
.section { position: relative; z-index: 1; padding-block: var(--space-8); }
@media (max-width: 40em) { .section { padding-block: 4.5rem; } }
.section--about .statement { max-width: 50rem; }
.statement { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.45; color: var(--ink); margin: 0; letter-spacing: -0.005em; }
.statement--lg { font-size: clamp(1.5rem, 2.8vw, 2.125rem); max-width: 54rem; }
.section-heading { font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.1; margin-bottom: var(--space-5); max-width: 36rem; }

/* ---------- why grid ---------- */
.why-grid {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 48em) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-6); } }
.why-icon { width: 32px; height: 32px; color: var(--gold-deep); margin-bottom: var(--space-3); }
.why-icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .reveal .why-icon [pathLength] { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-calm) 0.35s; }
.js .reveal.is-visible .why-icon [pathLength], .reveal-all .why-icon [pathLength] { stroke-dashoffset: 0; }
.why-item h3 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.why-item p { margin: 0; color: var(--ink-80); max-width: 28rem; }
.why-grid--offer { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .js .reveal .why-icon [pathLength] { stroke-dashoffset: 0; transition: none; } }

/* ---------- process ---------- */
.process-list { list-style: none; margin: 0; padding: 0; }
.process-item { display: flex; gap: var(--space-4); padding-block: var(--space-3); }
.process-marker { display: flex; flex-direction: column; align-items: center; flex: none; }
.process-num {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--panel);
  box-shadow: inset 0 0 0 1.5px var(--line), 0 10px 22px -16px rgba(11,26,40,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--fjord); font-size: 1.0625rem;
  transition: box-shadow 900ms var(--ease-calm);
}
.process-item.is-visible .process-num { box-shadow: inset 0 0 0 1.5px var(--gold), 0 10px 22px -16px rgba(11,26,40,0.4); }
.process-line { width: 1.5px; flex: 1; background: linear-gradient(var(--gold), rgba(232,168,85,0.15)); margin-top: var(--space-2); min-height: 2.5rem; transform-origin: top; }
.js .process-item .process-line { transform: scaleY(0); transition: transform 1.6s var(--ease-calm) 0.5s; }
.js .process-item.is-visible .process-line, .reveal-all .process-line { transform: none; }
.process-body { padding-top: 0.5rem; max-width: 36rem; }
.process-body h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.process-desc { color: var(--ink-80); }
.process-desc p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .js .process-item .process-line { transform: none; transition: none; } }

/* ---------- pricing ---------- */
.pricing-grid {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 48em) { .pricing-grid { grid-template-columns: repeat(2,1fr); max-width: 58rem; } }
.pricing-card {
  position: relative;
  background: var(--panel); border-radius: 22px; padding: clamp(1.75rem, 3.5vw, var(--space-5));
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(11,26,40,0.04), 0 28px 56px -36px rgba(11,26,40,0.28);
}
.pricing-card::before {
  content: ""; position: absolute; left: clamp(1.75rem, 3.5vw, var(--space-5)); top: 0; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold);
}
.js .pricing-card { transition: opacity 1100ms var(--ease-calm), transform 1300ms var(--ease), box-shadow 500ms var(--ease); }
.pricing-card.is-visible:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(11,26,40,0.04), 0 36px 64px -32px rgba(11,26,40,0.32); }
.pricing-card h3 { font-size: 1.375rem; }
.pricing-amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.02em; margin: var(--space-3) 0 0; }
.pricing-vat { color: var(--stone); font-size: 0.8125rem; margin: 0.2rem 0 0; }
.pricing-desc { display: flex; flex-direction: column; color: var(--ink-80); margin-top: var(--space-3); flex: 1; }
.pricing-desc p { margin: 0; }
.pricing-desc p + p { margin-top: var(--space-2); }
.pricing-desc ul { list-style: none; padding: 0; margin: var(--space-3) 0; }
.pricing-desc li { position: relative; padding-left: 1.5em; }
.pricing-desc li + li { margin-top: 0.5rem; }
.pricing-desc li::before { content: "＋"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 700; }
.refurb-graphic { margin: auto 0 0; padding-top: var(--space-4); }
.refurb-graphic svg { display: block; width: 100%; height: auto; aspect-ratio: 200 / 170; margin: 0 auto; }
.refurb-frame { stroke: var(--line); }
.refurb-dot { fill: var(--line); stroke: none; }
.refurb-bar { fill: var(--line); stroke: none; }
@keyframes refurb-pulse-seq { 0%, 8% { fill: var(--gold); } 20%, 100% { fill: var(--line); } }
.refurb-bar-active-1 { animation: refurb-pulse-seq 7s ease-in-out infinite; }
.refurb-bar-active-2 { animation: refurb-pulse-seq 7s ease-in-out infinite; animation-delay: -2.33s; }
.refurb-bar-active-3 { animation: refurb-pulse-seq 7s ease-in-out infinite; animation-delay: -4.66s; }
.refurb-cursor { fill: var(--gold); stroke: var(--panel); stroke-width: 1.5; opacity: 0.95; animation: refurb-cursor-move 7s ease-in-out infinite; }
@keyframes refurb-cursor-move {
  0%, 6% { transform: translate(118px, 61.5px); }
  27%, 39% { transform: translate(98px, 93.5px); }
  60%, 72% { transform: translate(128px, 125.5px); }
  94%, 100% { transform: translate(118px, 61.5px); }
}
.refurb-refresh { color: var(--fjord); transform-box: fill-box; transform-origin: 50% 50%; animation: refurb-spin 6s linear infinite; }
@keyframes refurb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .refurb-bar-active-1, .refurb-bar-active-2, .refurb-bar-active-3, .refurb-cursor, .refurb-refresh { animation: none; }
  .refurb-cursor { transform: translate(118px, 61.5px); }
}

/* ---------- portfolio ---------- */
.portfolio-grid { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 40em) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); } }
.portfolio-grid > li { display: flex; }
.portfolio-card {
  display: flex; flex-direction: column; width: 100%; border-radius: 22px; overflow: hidden; background: var(--panel);
  box-shadow: 0 1px 2px rgba(11,26,40,0.04), 0 28px 56px -36px rgba(11,26,40,0.28);
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(11,26,40,0.04), 0 36px 64px -32px rgba(11,26,40,0.32); }
.portfolio-media { aspect-ratio: 8/5; overflow: hidden; background: var(--mist); }
.portfolio-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.portfolio-card:hover .portfolio-media img { transform: scale(1.04); }
.portfolio-body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.portfolio-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #9A6116; font-weight: 700; margin: 0 0 0.5rem; }
.portfolio-body h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.portfolio-body p { color: var(--ink-80); margin: 0; font-size: 0.9375rem; }
.portfolio-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: var(--space-3); font-weight: 600; font-size: 0.875rem; color: var(--fjord); }
.portfolio-link svg { width: 14px; height: 14px; transition: transform 400ms var(--ease); }
.portfolio-card:hover .portfolio-link svg { transform: translate(2px, -2px); }
.portfolio-intro { margin-bottom: var(--space-2); max-width: 44rem; }

/* ---------- "Holder det ikke med Facebook?" ---------- */
.why-web { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 56em) { .why-web { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); } }
.why-web .section-heading { margin-bottom: var(--space-3); }
.why-web-lede { font-size: 1.1875rem; color: var(--ink-80); max-width: 36rem; margin: 0; }
.why-web-link { margin: var(--space-4) 0 0; }
.why-web .takeaway { grid-column: 1 / -1; }
.takeaway { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.25; letter-spacing: -0.02em; }
.takeaway strong { font-weight: 700; }
.takeaway--lg { margin-top: var(--space-7); font-size: clamp(1.75rem, 3.8vw, 3rem); max-width: 50rem; }

/* hand-drawn harbour illustration */
.harbour { display: block; width: 100%; height: auto; aspect-ratio: 400 / 260; overflow: hidden; }
.harbour path, .harbour rect { stroke: var(--ink); stroke-width: 1.7; }
.h-ridge { stroke: var(--gold-deep) !important; stroke-width: 2.2 !important; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .reveal .h-ridge { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-calm) 0.4s; }
.js .reveal.is-visible .h-ridge, .reveal-all .h-ridge { stroke-dashoffset: 0; }
.h-rock { fill: rgba(255,255,255,0.65); }
.h-house { fill: #FFFFFF; }
.h-roof { fill: none; }
.h-window { fill: var(--gold); animation: window-glow 7s ease-in-out infinite; }
@keyframes window-glow { 0%, 100% { fill-opacity: 0.75; } 50% { fill-opacity: 1; } }
.h-door { fill: none; }
.h-flag { fill: var(--gold); stroke-width: 1.2 !important; transform-box: fill-box; transform-origin: 0 50%; animation: flag 4.5s ease-in-out infinite; }
@keyframes flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(0.92); } }
.h-raft { animation: raft 7s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes raft { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(-8px, 3px) rotate(2.5deg); } }
.h-raft-deck { fill: #FFFFFF; }
.h-raft-sail { fill: #FFFFFF; }
.h-waves path { stroke: var(--fjord) !important; stroke-width: 1.4 !important; opacity: 0.45; }
.h-waves { animation: waves 9s linear infinite; }
.h-waves path:last-child { opacity: 0.25; }
@keyframes waves { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.h-sun { fill: var(--gold); stroke: none; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .h-window, .h-flag, .h-raft, .h-waves { animation: none; }
  .js .reveal .h-ridge { stroke-dashoffset: 0; transition: none; }
}

/* comparison table */
.compare { background: rgba(255,255,255,0.9); border-radius: 26px; padding: clamp(1.25rem, 3vw, 2.75rem); box-shadow: 0 1px 2px rgba(11,26,40,0.04), 0 28px 56px -36px rgba(11,26,40,0.28); }
@supports (backdrop-filter: blur(1px)) { .compare { background: rgba(255,255,255,0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-caption { caption-side: top; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.15; padding-bottom: var(--space-4); max-width: 32rem; color: var(--ink); }
.compare-table thead th { text-align: left; font-family: var(--font-display); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; padding: 0 var(--space-3) var(--space-3); color: var(--stone); vertical-align: bottom; }
.compare-table thead .compare-col--to { color: var(--fjord); }
.compare-plus { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 700; margin-right: 0.35em; }
.compare-table tbody th, .compare-table tbody td { padding: var(--space-3); border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.compare-table tbody th { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; width: 22%; padding-left: 0; }
.compare-from { color: var(--ink-70); width: 34%; }
.compare-to { color: var(--ink); position: relative; }
.compare-to::before { content: ""; position: absolute; left: 0; top: var(--space-3); bottom: var(--space-3); width: 2px; border-radius: 2px; background: var(--gold); transform-origin: top; }
.js .compare-row .compare-to::before { transform: scaleY(0); transition: transform 1.2s var(--ease-calm) 0.4s; }
.js .compare-row.is-visible .compare-to::before, .reveal-all .compare-to::before { transform: none; }
.compare-label { display: none; }
@media (max-width: 47.99em) {
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto !important; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table caption { display: block; }
  .compare-row { border-top: 1px solid var(--line); padding-block: var(--space-3); }
  .compare-table tbody th, .compare-table tbody td { border: 0; padding: 0.35rem 0; }
  .compare-to { padding-left: 1rem !important; margin-top: 0.4rem; }
  .compare-to::before { top: 0.35rem; bottom: 0.35rem; }
  .compare-label { display: block; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--stone); margin-bottom: 0.15rem; }
}
@media (prefers-reduced-motion: reduce) { .js .compare-row .compare-to::before { transform: none; transition: none; } }
.compare-details { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .compare-details { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.compare-subheading { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; margin-bottom: var(--space-3); }
.compare-details p { color: var(--ink-80); margin: 0 0 var(--space-2); max-width: 34rem; }
.section--compare { padding-top: var(--space-4); }
.section--compare-details { padding-top: var(--space-4); }

/* ---------- inner pages ---------- */
.page-hero { position: relative; z-index: 1; padding: clamp(8rem, 18vh, 11rem) 0 var(--space-5); }
.page-hero-inner { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 60em) { .page-hero--art .page-hero-inner { grid-template-columns: 1.25fr 0.75fr; gap: var(--space-6); } }
.page-crumb a { color: var(--fjord); background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1.5px no-repeat; transition: background-size 400ms var(--ease); }
.page-crumb a:hover { background-size: 100% 1.5px; }
.page-crumb span { color: var(--stone); }
.page-title { font-size: clamp(2.5rem, 5.4vw, 4.75rem); line-height: 1.03; letter-spacing: -0.032em; max-width: 50rem; }
.page-lede { margin-top: var(--space-4); max-width: 42rem; font-size: clamp(1.125rem, 1.4vw, 1.25rem); color: var(--ink-80); }
.page-lede p { margin: 0 0 var(--space-2); }
.page-lede p:first-child { font-size: 1.12em; color: var(--ink); }
.page-hero-art { max-width: 28rem; width: 100%; justify-self: center; }
.subpage .section:first-of-type { padding-top: var(--space-5); }
.section--offer { padding-top: var(--space-4) !important; }
.section--pricing-page { padding-top: var(--space-4) !important; }
.section--pricing-page .pricing-grid { margin-top: 0; }

/* reading pages (Personvern …): editor content on a soft paper sheet */
.section--prose { padding-top: var(--space-3) !important; }
.prose {
  max-width: 48rem; background: rgba(255,255,255,0.92); border-radius: 26px;
  padding: clamp(1.5rem, 5vw, 3.75rem);
  box-shadow: 0 1px 2px rgba(11,26,40,0.04), 0 28px 56px -36px rgba(11,26,40,0.28);
  line-height: 1.75; color: var(--ink-80);
  overflow-wrap: anywhere;
}
@supports (backdrop-filter: blur(1px)) { .prose { background: rgba(255,255,255,0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.375rem, 2.2vw, 1.625rem); margin: 2.5rem 0 0.9rem; line-height: 1.25; color: var(--ink); }
.prose h3 { font-size: 1.1875rem; margin: 2rem 0 0.6rem; }
.prose p { margin: 0 0 1.15rem; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--gold-deep); }
.prose a { color: var(--fjord); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose figure { margin: 1.5rem 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--font-display); color: var(--ink); }
.prose img { height: auto; border-radius: 12px; }

/* ---------- cta ---------- */
.section--cta { text-align: center; padding-bottom: var(--space-7); }
.cta-heading { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em; margin: var(--space-2) auto var(--space-3); max-width: 44rem; }
.section--cta .statement { margin: 0 auto var(--space-5); color: var(--ink-80); max-width: 42rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---------- footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  background: var(--ink); color: rgba(246,247,244,0.78);
  padding: 2.6rem 0 1.8rem;
}
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 0.875rem; }
.tagline { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); color: #fff; font-weight: 600; }
.footer-mark { width: 22px; height: 22px; color: var(--gold); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-4); margin-top: 1.25rem; font-size: 0.875rem; }
.footer-nav a, .footer-contact a { transition: color 200ms; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-contact { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12); display: flex; gap: 0.5rem var(--space-4); flex-wrap: wrap; font-size: 0.875rem; }

/* ---------- contact modal ---------- */
.contact-modal { border: none; padding: 0; border-radius: 22px; width: min(30rem, calc(100vw - 2rem)); color: inherit; background: var(--panel); box-shadow: 0 40px 80px -30px rgba(11,26,40,0.45); }
.contact-modal[open] { animation: modal-in 500ms var(--ease) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
.contact-modal::backdrop { background: rgba(11,26,40,0.45); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: reduce) { .contact-modal[open] { animation: none; } }
.contact-window-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) 0; }
.contact-window-title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0; }
.contact-close { border: none; background: none; padding: 0.4rem; border-radius: 50%; color: var(--stone); width: 2.25rem; height: 2.25rem; }
.contact-close svg { width: 100%; height: 100%; }
.contact-close:hover { background: var(--paper); color: var(--ink); }
.contact-body { padding: var(--space-4); }
.form-field { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: 0.4rem; }
.form-field label { font-size: 0.875rem; font-weight: 600; }
.field-optional { font-weight: 400; color: var(--stone); }
.form-field input, .form-field textarea {
  border: 1.5px solid rgba(11,26,40,0.18); border-radius: 12px; padding: 0.75rem 0.9rem; font: inherit; background: var(--paper); color: var(--ink);
  transition: border-color 250ms, box-shadow 250ms;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--fjord); box-shadow: 0 0 0 4px rgba(232,168,85,0.25); }
.contact-form-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.contact-status { margin: 0; font-size: 0.875rem; color: var(--stone); }
.contact-status[data-state="error"] { color: #A63B30; }
.contact-status[data-state="ok"] { color: #2A6F53; }