/* Transport 4 Kids: one stylesheet for every page. Colours and type come from the approved mockup. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --teal-900: #0b3a40;
  --teal-600: #0a8b9b;
  --hivis: #d9f24a;
  --paper: #f5f3ec;
  --surface: #fbfaf6;
  --ink: #0e1f22;
  --ink-2: #2c3b36;
  --field: #5f706b;
  --error: #a4231a;
  --line: rgba(14, 31, 34, .1);
  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1280px;
  --header-h: 92px;
  --col-gap: clamp(20px, 3vw, 48px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* Aspect of every frame; turntable.js and viewer.js overwrite it from the manifest. */
  --frame-ar: 2224 / 1486;
  --vh-s: 100vh;
  --vh-l: 100vh;
  --toolbar: 0px;
}
/* On phones the browser toolbar makes the small and large viewport differ; the pinned stage uses both. */
@supports (height: 100svh) {
  :root { --vh-s: 100svh; --vh-l: 100lvh; --toolbar: calc(100lvh - 100svh); }
}

@media (max-width: 700px) {
  :root { --header-h: 76px; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  :root { --header-h: 64px; }
}

/* html gets no scroll-behavior: smooth on purpose; Lenis scrolls and it would fight the pinned hero. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class], .nav ul, .tips ul, .good-to-know ul, .footer__col ul { list-style: none; padding: 0; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .12em; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }
/* Sections that motion.js focuses after a keyboard-followed link: the focus moves, no ring around the section. */
[tabindex="-1"]:focus { outline: none; }

:focus-visible { outline: 3px solid var(--teal-600); outline-offset: 3px; }

.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 {
  position: fixed; left: 16px; top: 16px; z-index: 100;
  padding: 12px 20px; border-radius: 999px;
  background: var(--teal-900); color: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus { transform: none; outline-color: var(--hivis); }

/* Text that rises from behind its own edge. The padding keeps accents and descenders inside the clip. */
.mask { display: block; overflow: hidden; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.mask__in { display: block; }

/* Header: transparent over the hero, paper once the hero is done. Only opacity and transform change. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h);
  padding: 0 var(--gutter);
  color: var(--teal-900);
  transition: transform .35s var(--ease-out);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(14, 31, 34, .08);
  opacity: 0;
  transition: opacity .3s ease;
}
.site-header.is-solid::before { opacity: 1; }
/* The extra 2px takes the bottom line out of view too. */
.site-header.is-hidden:not(:focus-within) { transform: translateY(calc(-100% - 2px)); }
.site-header :focus-visible { outline-color: currentColor; }
.brand { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.nav ul { display: flex; align-items: center; gap: 32px; margin: 0; font-weight: 500; font-size: 16px; }
.nav a { text-decoration: none; }
.nav a:not(.pill):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pill {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--hivis); color: var(--teal-900);
  font-weight: 700; white-space: nowrap;
  transition: background-color .2s ease;
}
.pill:hover { background: #e5f878; }
.site-header .pill:focus-visible { outline-color: var(--teal-900); }

@media (max-width: 700px) {
  .brand { font-size: 17px; }
  .nav .hide-sm { display: none; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .pill { padding: 9px 18px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.btn--primary { background: var(--teal-900); color: #fff; }
.btn--primary:hover { background: #0f4c53; }
.btn--primary:focus-visible { outline-color: var(--teal-900); }
.btn--ghost { color: var(--teal-900); padding-left: 16px; padding-right: 16px; }
.btn--ghost:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- Hero: the turning bus ---------- */

/* Static by default (reduced motion, no script): the first screen is the headline beside the bus,
   the end panel follows as ordinary content. html.film-live turns it into the pinned stage below. */
.hero {
  --pad-b: clamp(16px, 3vh, 40px);
  --area-h: calc(var(--vh-s) - var(--header-h) - var(--pad-b));
  position: relative;
  background: var(--paper);
}
.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 36%) minmax(0, 1fr) var(--gutter);
  grid-template-rows: var(--header-h) minmax(var(--area-h), auto) auto;
  background: var(--paper);
}

/* The bus box keeps the frame aspect; canvas and poster fill it with the same contain fit. */
.hero__media {
  position: relative; z-index: 1;
  grid-column: 3; grid-row: 2;
  align-self: center; justify-self: center;
  width: min(100%, calc(var(--area-h) * var(--frame-ar)));
  aspect-ratio: var(--frame-ar);
  background: var(--paper);
}
.hero__canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster { position: absolute; inset: 0; }
.hero__poster img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero__poster.is-gone { visibility: hidden; }

.hero__intro { position: relative; z-index: 3; grid-column: 2; grid-row: 2; align-self: center; }
.hero__title {
  font-weight: 800;
  font-size: clamp(36px, min(5.1vw, 10.5vh), 104px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--teal-900);
  white-space: nowrap;
}
.line { display: inline-block; vertical-align: top; overflow: hidden; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.line > span { display: inline-block; }
.hero__proof { margin-top: 28px; overflow: hidden; }
.proof {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(11, 58, 64, .07);
  color: var(--teal-900);
  font-size: 15px; font-weight: 500; line-height: 1.35;
}
.proof__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hivis); box-shadow: inset 0 0 0 2px var(--teal-900); }

.hero__callouts { display: none; }
/* The scroll hint exists only where the bus turns. */
.hero__cue { display: none; }

.hero__end {
  position: relative; z-index: 3;
  grid-column: 2 / 4; grid-row: 3;
  max-width: 880px;
  padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 112px);
}
.hero__end h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; color: var(--teal-900); }
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin-top: 32px; }
.points li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: baseline; }
.points li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-600); transform: translateY(-1px); }
.points b { display: block; font-size: 18px; font-weight: 700; color: var(--teal-900); }
.points span { display: block; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 30px; }
.price strong { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: var(--teal-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price > span { font-size: 15px; color: var(--ink-2); }
/* "eks. mva." sits next to the figure. It is a small, not a span, so turntable.js still animates the note. */
.price small { margin-left: -6px; font-size: 15px; font-weight: 600; color: var(--teal-900); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }

/* The odometer that turntable.js builds from the price: one clipped column of digits per figure. */
.odo__col { display: inline-block; vertical-align: top; height: 1.1em; overflow: hidden; }
.odo__strip, .odo__strip > span { display: block; }
.odo__strip > span { height: 1.1em; }

/* ---------- Live hero (motion allowed): one pinned screen, the text column swaps its contents ---------- */

.film-live .hero { overflow: hidden; }
.film-live .hero__stage {
  height: 100vh; height: var(--vh-l);
  grid-template-rows: var(--header-h) minmax(0, 1fr) calc(var(--pad-b) + var(--toolbar));
}
.film-live .hero__canvas { display: block; }
.film-live .hero__intro,
.film-live .hero__callouts,
.film-live .hero__end { grid-column: 2; grid-row: 2; align-self: center; }
.film-live .hero__intro { pointer-events: none; }
.film-live .hero__callouts { display: grid; pointer-events: none; }
.film-live .hero__end { visibility: hidden; max-width: none; padding: 0; }
.film-live .hero__end h2 { font-size: clamp(28px, 2.8vw, 44px); }
.film-live .hero__end .points { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 28px; margin-top: 24px; }
.film-live .hero__end .points li { grid-template-columns: 8px 1fr; gap: 10px; }
.film-live .hero__end .points li::before { width: 8px; height: 8px; }
.film-live .hero__end .points b { font-size: 17px; }
/* The one-line descriptions stay in the page for screen readers. */
.film-live .hero__end .points span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.film-live .hero__end .price { margin-top: 26px; }

/* Start positions for the headline, before turntable.js takes over. If the script never runs, the failsafe
   animation shows it after 3 s. 140%, because the accents on É and å reach well above the tight line box and
   would otherwise peek out of the mask. */
.film-live .hero__title .line > span { transform: translateY(140%); }
.film-live .hero__proof .proof { transform: translateY(110%); }
.film-live .hero:not(.is-ready) .hero__title .line > span,
.film-live .hero:not(.is-ready) .hero__proof .proof { animation: hero-failsafe .6s var(--ease-out) 3s both; }
@keyframes hero-failsafe { to { transform: none; } }
/* The bus fades up from first paint, without waiting for a script. No fill: it ends on the box's own style. */
.film-live .hero__media { animation: hero-bus-in .7s var(--ease-out); }
@keyframes hero-bus-in { from { opacity: 0; transform: translateY(3.5%); } }

/* The scroll hint sits at the bottom middle, or on portrait screens centred in the space under the text. Out of the
   flow, it never moves the headline or the bus; above --toolbar, it stays clear of Safari's bottom bar at first.
   turntable.js shows it (is-on), bounces it more later (is-nudge) and lets it go at the first scroll (is-gone). */
.film-live .hero__cue {
  --cue-pad: 10px;
  position: absolute; left: 0; right: 0; bottom: calc(var(--toolbar) + var(--pad-b) - var(--cue-pad)); z-index: 4;
  width: max-content; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: var(--cue-pad) 14px; border: 0; border-radius: 14px;
  background: none; color: var(--teal-900);
  font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
  transition: opacity .3s ease, visibility 0s .3s;
}
.film-live .hero__cue svg { flex: none; width: 20px; height: 20px; }
.film-live .hero__cue:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.film-live .hero__cue.is-on {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
/* Leaving, it only fades: back at its start offset it would drop 6px at once. */
.film-live .hero__cue.is-gone { transform: none; }
.film-live .hero__cue.is-on svg { animation: cue-bob 1.8s ease-in-out .5s infinite; }
.film-live .hero__cue.is-nudge svg { animation: cue-hop 2.4s ease-in-out infinite; }
@keyframes cue-bob { 50% { transform: translateY(3px); } }
/* Two quick hops, 7 then 4 px, in the first 0.7 s of each cycle, then rest. */
@keyframes cue-hop {
  0%, 17%, 29%, 100% { transform: none; }
  8% { transform: translateY(7px); }
  23% { transform: translateY(4px); }
}

/* Callouts: text in the text column, leader line and dot on an SVG over the whole stage. */
.callout { grid-area: 1 / 1; align-self: center; width: fit-content; max-width: 100%; }
.callout__title {
  font-size: min(clamp(34px, 3.4vw, 56px), calc(36vw / 9.8));
  font-weight: 800; line-height: 1.02; letter-spacing: -0.025em;
  color: var(--teal-900);
}
.callout__title .mask__in { display: inline-block; }
.callout__text { margin-top: 12px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--ink-2); }

.hero__lines { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pin__line, .pin__halo {
  fill: none; stroke: var(--teal-900); stroke-opacity: .7; stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; visibility: hidden;
}
.pin__halo { stroke: var(--paper); stroke-opacity: .85; stroke-width: 5; }
.pin__start { fill: var(--teal-900); fill-opacity: .7; opacity: 0; }
.pin__core { fill: var(--hivis); stroke: var(--teal-900); stroke-width: 2; }
.pin__pulse { fill: var(--hivis); opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin.is-on .pin__pulse { animation: pin-pulse 1.6s cubic-bezier(.2, .6, .35, 1) infinite; }
@keyframes pin-pulse {
  from { transform: scale(1); opacity: .45; }
  to { transform: scale(2.4); opacity: 0; }
}
/* turntable.js turns a pin on only while the bus on show is at its part's pose. */
.hero__lines .pin:not(.is-on) { display: none; }

/* ---------- Portrait: header, the bus full width, the text below ---------- */

@media (max-aspect-ratio: 1/1) {
  .hero__stage {
    grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter);
    grid-template-rows: var(--header-h) auto auto auto;
  }
  .hero__media { grid-column: 2; grid-row: 2; width: 100%; margin-top: 12px; }
  .hero__intro { grid-column: 2; grid-row: 3; margin-top: clamp(20px, 3vh, 36px); }
  .hero__end { grid-column: 2; grid-row: 4; }
  .hero__title { font-size: min(10.6vw, 80px); white-space: normal; }
  .callout__title { font-size: min(clamp(34px, 3.4vw, 56px), calc((100vw - 2 * var(--gutter)) / 9.4)); }

  /* Live: the bus and the text area sit together in the middle of the screen, a little above centre. */
  .film-live .hero__stage {
    grid-template-rows: var(--header-h) minmax(0, 1fr) auto clamp(16px, 3vh, 32px) auto minmax(0, 1.5fr) calc(var(--pad-b) + var(--toolbar));
  }
  .film-live .hero__media { grid-row: 3; margin-top: 0; }
  .film-live .hero__intro,
  .film-live .hero__callouts,
  .film-live .hero__end { grid-column: 2; grid-row: 5; align-self: start; margin-top: 0; }
  .film-live .callout { align-self: start; }
  .film-live .hero__cue { grid-row: 6 / auto; grid-column: 1 / -1; top: 0; bottom: var(--toolbar); margin: auto; height: max-content; }
}

@media (max-width: 700px) {
  .proof { font-size: 13px; align-items: flex-start; padding: 8px 14px 8px 10px; }
  .proof__dot { margin-top: 3px; }
  .hero__proof { margin-top: 18px; }
  .points { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .hero__end h2 { font-size: 30px; }
  .film-live .hero__end h2 { font-size: 26px; }
  .film-live .hero__end .points { margin-top: 16px; gap: 8px 20px; }
  .film-live .hero__end .points b { font-size: 16px; }
  .price strong { font-size: 32px; }
  /* On one line the note would wrap and push the buttons down, so it stacks under "eks. mva." beside the figure. */
  .price { display: grid; grid-template-columns: max-content max-content; gap: 0 8px; align-items: baseline; }
  .price strong { grid-row: 1 / 3; align-self: center; }
  .price small { margin-left: 0; align-self: end; line-height: 1.2; }
  .price > span { line-height: 1.2; }
  .film-live .hero__end .price { margin-top: 18px; }
  .ctas { margin-top: 14px; }
  .callout__text { font-size: 17px; margin-top: 8px; }
}

/* Phones: the bus box is 1.1 screen widths and centred, the most the widest poses allow, and on short screens leaves
   260px for the gap and the end panel. The slot is just the headline's height, so the space above the bus and below
   it is even; the tighter end panel reaches into the space below, which with the padding never drops under 68px. */
@media (max-aspect-ratio: 1/1) and (max-width: 700px) {
  .film-live .hero__stage {
    grid-template-rows: var(--header-h) minmax(0, 1fr) auto clamp(16px, 3vh, 32px) auto minmax(calc(68px - var(--pad-b)), 1fr) calc(var(--pad-b) + var(--toolbar));
  }
  .film-live .hero__media {
    --bus-w: min(calc(110% + 2.2 * var(--gutter)), calc((var(--vh-s) - var(--header-h) - 260px) * var(--frame-ar)));
    width: var(--bus-w); margin: 0 calc((100% - var(--bus-w)) / 2);
  }
  .film-live .hero__end { height: 0; }
  .film-live .hero__end .points { margin-top: 12px; column-gap: 12px; }
  .film-live .hero__end .points li { line-height: 1.3; }
  .film-live .hero__end .price { margin-top: 14px; }
  .film-live .hero__end .ctas { margin-top: 12px; }
  .film-live .hero__cue { flex-direction: row; gap: 6px; font-size: 13px; }
  .film-live .hero__cue svg { width: 16px; height: 16px; }
}

/* Short landscape screens: everything in the text column still fits inside the pinned stage. */
@media (max-height: 640px) and (min-aspect-ratio: 1/1) {
  .hero__title { font-size: clamp(30px, min(5.1vw, 11vh), 72px); }
  .hero__proof { margin-top: 14px; }
  .proof { font-size: 13px; padding: 7px 12px 7px 9px; }
  .film-live .hero__cue { flex-direction: row; gap: 6px; font-size: 13px; }
  .film-live .hero__cue svg { width: 16px; height: 16px; }
  .callout__title { font-size: clamp(24px, min(3.4vw, 7.5vh), 48px); }
  .callout__text { font-size: 15px; margin-top: 6px; }
  .film-live .hero__end h2 { font-size: clamp(20px, min(2.6vw, 5.5vh), 32px); }
  .film-live .hero__end .points { margin-top: 10px; gap: 4px 18px; }
  .film-live .hero__end .points b { font-size: 14px; }
  .film-live .hero__end .price { margin-top: 10px; }
  .film-live .hero__end .price strong { font-size: 26px; }
  .film-live .hero__end .ctas { margin-top: 8px; }
  .film-live .hero__end .btn { padding: 10px 18px; font-size: 14px; }
}

/* ---------- Page sections ---------- */

.section { padding: clamp(80px, 10vw, 144px) var(--gutter); scroll-margin-top: var(--header-h); }
.section + .section { padding-top: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }

.h2 {
  font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -0.03em;
  font-weight: 800; color: var(--teal-900);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: var(--teal-900); }
.lead { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; }
.lead + .lead { margin-top: 1em; }
.body-copy p + p { margin-top: 1em; }
.muted { color: var(--ink-2); }
[id] { scroll-margin-top: var(--header-h); }

/* Vognen is a sheet: with the pinned hero it slides up over the stage's last screen. */
.sheet {
  position: relative; z-index: 2;
  background: var(--surface);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -24px 60px rgba(14, 31, 34, .1);
}
.film-pinned .sheet { margin-top: -100vh; margin-top: calc(-1 * var(--vh-l)); }
.sheet + .section { padding-top: clamp(80px, 10vw, 144px); }
/* The rest of the page is the sheet too, so it never ends in an edge of its own; later sections cover its shadow. */
.sheet ~ .section { position: relative; z-index: 2; background: var(--surface); }

.vognen__title { grid-column: 1 / -1; }
.viewer { grid-column: 1 / span 7; margin-top: clamp(32px, 4vw, 56px); }
.facts { grid-column: 9 / span 4; align-self: start; margin-top: clamp(32px, 4vw, 56px); }
.vognen__leads { grid-column: 1 / span 7; margin-top: clamp(48px, 6vw, 88px); }
.vognen__buy { grid-column: 9 / span 4; align-self: start; margin-top: clamp(48px, 6vw, 88px); }
.vognen__buy .price { margin-top: 0; }
.vognen__buy .btn { margin-top: 20px; }
.tips { grid-column: 1 / -1; margin-top: clamp(72px, 9vw, 120px); }
.tips ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--col-gap); margin-top: 32px; }
.tips h4 { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: var(--teal-900); }
.tips h4::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-600); }
.tips p { margin-top: 10px; font-size: 17px; }

/* Facts: one row per pair, hairlines between them. */
.facts dl { margin-top: 18px; border-bottom: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 14fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--ink-2); }
.facts dd { font-weight: 700; color: var(--ink); }
/* Only the counted numbers: this font's tabular figures also widen commas and full stops. */
.facts dd[data-count] { font-variant-numeric: tabular-nums; }
.fact__dim {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.fact__dim span { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.fact__dim svg { flex: none; width: 16px; height: 16px; color: var(--teal-600); }
.fact__dim:hover, .fact__dim.is-active { color: var(--teal-900); }

/* Viewer: the stage is the slider. Without script it is just the poster. */
.viewer__stage { position: relative; aspect-ratio: var(--frame-ar); background: var(--surface); border-radius: 20px; }
.viewer__canvas, .viewer__poster, .viewer__dims { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.viewer__poster { object-fit: contain; mix-blend-mode: multiply; }
.viewer__canvas { display: none; }
.viewer__dims { overflow: visible; pointer-events: none; }
/* The hint keeps its space before the viewer goes live, so nothing below moves when it appears. */
.viewer__hint {
  display: flex; align-items: center; gap: 8px;
  width: fit-content; margin: 14px auto 0; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgba(11, 58, 64, .06); color: var(--teal-900);
  font-size: 14px; font-weight: 500; line-height: 1.3;
  visibility: hidden;
}
.viewer.is-live .viewer__hint { visibility: visible; }
.viewer.is-live .viewer__stage { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.viewer.is-live .viewer__stage.is-dragging { cursor: grabbing; }
.viewer.is-live .viewer__canvas { display: block; }
.viewer.is-live .viewer__poster.is-gone { visibility: hidden; }
.viewer__hint svg { flex: none; }
.dim__line, .dim__tick { fill: none; stroke: var(--teal-900); stroke-width: 1.5; stroke-linecap: round; }
.dim__line { stroke-dasharray: 1 1; }
/* Guides from the measured points to the line: thin and half strength, so the line still leads. */
.dim__guide { fill: none; stroke: var(--teal-900); stroke-opacity: .5; stroke-width: 1; }
.viewer__label {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  padding: 4px 10px; border-radius: 999px;
  background: var(--teal-900); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* I bruk: the photos are taller than their frames so the parallax never shows an edge.
   motion.js moves them 5% of their own height each way, which is 5.6% of the frame: hence 12% taller. */
.photos {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(32px, 4vw, 56px);
}
.photos figure { position: relative; overflow: hidden; border-radius: 20px; background: #dcd8cc; }
.photos figure:first-child { grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.photos img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; }

/* Dokumenter */
.docs__head { grid-column: 1 / span 5; }
.docs__list { grid-column: 7 / span 6; display: grid; gap: 28px; }
.docs__list a { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; }
.docs__list .doc__name { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.015em; color: var(--teal-900); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.docs__list a:hover .doc__name { text-decoration-thickness: 3px; }
.docs__list .doc__meta { color: var(--ink-2); font-size: 16px; }

/* Reservedeler */
.parts__head { grid-column: 1 / span 5; }
.parts__head .body-copy { margin-top: 28px; }
.parts__head .btn { margin-top: 32px; }
.parts__table { grid-column: 7 / span 6; align-self: start; }
.parts__table table { width: 100%; border-collapse: collapse; font-size: 18px; }
.parts__table th, .parts__table td { padding: 11px 0; text-align: left; vertical-align: baseline; }
.parts__table thead th { padding-top: 0; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.parts__table td:last-child, .parts__table th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 24px; }
.parts__table tbody th { font-weight: 500; }
.parts__table td:last-child { font-weight: 700; color: var(--ink); }

/* Bestill */
.order__head { grid-column: 1 / span 4; }
.order__head .lead { margin-top: 28px; }
.order__head .body-copy { margin-top: 24px; }
.order__main { grid-column: 6 / span 7; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 700; font-size: 16px; color: var(--teal-900); }
.field .hint { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 13px 16px;
  font-size: 18px; line-height: 1.4;
  background: #fff; border: 2px solid var(--field); border-radius: 14px;
  transition: border-color .15s ease;
}
.field textarea { min-height: 112px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230b3a40' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--teal-900); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--teal-900); outline-offset: 2px; }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--error); }
.check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 14px; font-size: 17px; }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--teal-900); }
.check a { font-weight: 700; color: var(--teal-900); }
.form__submit { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 17px 34px; font-size: 17px; }
.hp { display: none; }
.good-to-know { margin-top: 48px; }
.good-to-know h3 { font-size: 20px; font-weight: 700; color: var(--teal-900); }
.good-to-know ul { display: grid; gap: 10px; margin-top: 14px; }
.good-to-know li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: baseline; }
.good-to-know li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-600); transform: translateY(-2px); }
.good-to-know p { margin-top: 18px; color: var(--ink-2); }

/* Footer */
.site-footer {
  scroll-margin-top: var(--header-h);
  background: var(--teal-900); color: #fff;
  padding: clamp(64px, 8vw, 104px) var(--gutter) clamp(16px, 2vw, 28px);
}
.site-footer :focus-visible { outline-color: #fff; }
.site-footer .grid { row-gap: 40px; }
.footer__brand { grid-column: 1 / span 5; }
.footer__brand .brand { display: inline-block; font-size: 28px; }
.footer__brand p { margin-top: 16px; max-width: 30em; }
.footer__col { grid-column: span 3; }
.footer__brand + .footer__col { grid-column: 7 / span 3; }
.footer__col h2 { font-size: 16px; font-weight: 700; color: #fff; }
.footer__col ul { display: grid; gap: 6px; margin-top: 12px; }
.footer__col a { text-decoration: underline; text-decoration-thickness: 1.5px; }
.footer__legal { grid-column: 1 / -1; margin-top: 24px; font-size: 15px; }
/* The wordmark is sized to the wrap width: 7.95 is its width in em, plus a little room for the split letters.
   The mark clips the letters' rise; the word's bottom padding keeps the descender of the p inside it. */
.footer__mark { grid-column: 1 / -1; container-type: inline-size; overflow: hidden; margin-top: -8px; }
.footer__word {
  display: block; padding: .04em 0 .14em;
  font-size: calc(min(100vw - 2 * var(--gutter), var(--maxw)) / 7.95);
  font-weight: 800; line-height: .9; letter-spacing: -0.04em; white-space: nowrap;
  color: var(--paper);
}
@supports (width: 1cqw) {
  .footer__word { font-size: calc(100cqw / 7.95); }
}
.footer__char { display: inline-block; }

/* Plain pages: terms, thanks, not found */
.page { padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) var(--gutter) clamp(80px, 10vw, 144px); }
.page .wrap { max-width: 760px; margin: 0; }
.page h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -0.035em; font-weight: 800; color: var(--teal-900); overflow-wrap: break-word; }
.page .lead { margin-top: 28px; }
.page .btn { margin-top: 36px; }
.page-wide .wrap { max-width: var(--maxw); margin: 0 auto; }
.legal { max-width: 44em; margin-top: 48px; }
.legal h2 { margin-top: 56px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: var(--teal-900); }
.legal h3 { margin-top: 32px; font-size: 20px; font-weight: 700; color: var(--teal-900); }
.legal h2 + p, .legal h3 + p { margin-top: 12px; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 1em; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: .5em; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .viewer, .facts, .vognen__leads, .vognen__buy { grid-column: 1 / -1; }
  .facts { margin-top: 48px; max-width: 640px; }
  .vognen__leads { margin-top: 56px; }
  .vognen__buy { margin-top: 32px; }
  .tips ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs__head { grid-column: 1 / -1; }
  .docs__list { grid-column: 1 / -1; margin-top: 32px; }
  .parts__head { grid-column: 1 / -1; }
  .parts__table { grid-column: 1 / -1; margin-top: 48px; max-width: 640px; }
  .order__head { grid-column: 1 / -1; }
  .order__main { grid-column: 1 / -1; margin-top: 40px; max-width: 760px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col, .footer__brand + .footer__col { grid-column: span 6; }
}

@media (max-width: 700px) {
  body { font-size: 17px; }
  .sheet { border-radius: 24px 24px 0 0; }
  .viewer__stage { border-radius: 14px; }
  .tips ul { grid-template-columns: 1fr; gap: 28px; }
  .photos { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .photos figure:first-child { grid-row: auto; grid-column: 1 / -1; }
  .photos figure:not(:first-child) { aspect-ratio: 1 / 1; }
  .form { grid-template-columns: 1fr; }
  .form__submit { justify-self: stretch; }
  .footer__col, .footer__brand + .footer__col { grid-column: 1 / -1; }
}

/* Phones: the viewer stage runs edge to edge for a bigger bus. Its focus ring moves inside, clear of the screen edge,
   and onto a layer of its own, since the canvas would cover an outline drawn there. */
@media (max-aspect-ratio: 1/1) and (max-width: 700px) {
  .viewer__stage { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
  .viewer__stage:focus-visible { outline: none; }
  .viewer__stage:focus-visible::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--teal-600); pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header::before, .btn, .pill { transition: none; }
  .film-live .hero__cue, .film-live .hero__cue.is-on { transform: none; transition: none; }
  .film-live .hero__cue.is-on svg, .film-live .hero__cue.is-nudge svg { animation: none; }
  .film-live .hero__media { animation: none; }
}