/* ==========================================================================
   Nexus Vekst
   Black, white and one blue. Archivo carries everything from the condensed
   display cuts to body text; JetBrains Mono is used for small technical labels.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --ink: #0b0d10;
  --paper: #f3f4f6;
  --white: #fff;
  --stage: #e4e7eb;
  --line: rgb(11 13 16 / .16);
  --muted: #535a65;
  --blue: #1447E6;       /* the brand blue, on light backgrounds */
  --blue-ink: #1447E6;   /* blue text on light backgrounds */
  --blue-d: #4C7DFF;     /* the brand blue on dark backgrounds */
  --field: #838a95;
  --error: #b3001b;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(16px, 3.6vw, 56px);
  --section: clamp(72px, 10vw, 160px);
  --bar: 68px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --shadow: drop-shadow(0 1px 1px rgb(11 13 16 / .26)) drop-shadow(0 14px 14px rgb(11 13 16 / .16));
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 16px);
  -webkit-text-size-adjust: 100%;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

main { overflow-x: clip; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* On the dark sections the lighter blue is the one that shows */
.menu :focus-visible, .say :focus-visible, .sum :focus-visible, .foot :focus-visible { outline-color: var(--blue-d); }

.sprite { position: absolute; }
.sr, .hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--white);
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */

.mono {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.5;
  text-transform: uppercase;
}

h2 {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2.75rem, 7.4vw, 7rem);
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  touch-action: manipulation;
}
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .875rem; }
.btn--lg { min-height: 60px; padding: 0 32px; font-size: 1rem; }

.btn--blue { background: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--ink); color: var(--white); }
.btn--line { border-color: currentColor; background: transparent; }
.btn--line:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn:disabled { opacity: .55; cursor: progress; }
/* Without JavaScript there is no product to choose, so the order cannot be sent from the form */
html:not(.js) .form__end .btn { display: none; }

/* ---------- Logo ---------- */

/* The Nexus Vekst mark: two halves of an N. .nv--light is the version for dark backgrounds.
   .nv--play slides the halves together once; a short light in the slit marks the moment they meet. */
.nv { display: block; width: 100%; height: auto; overflow: visible; }
.nv__a { fill: var(--ink); }
.nv__b { fill: var(--blue); }
.nv__spark { fill: var(--blue-d); opacity: 0; }
.nv--light .nv__a { fill: var(--white); }
.nv--light .nv__b { fill: var(--blue-d); }
.nv--light .nv__spark { fill: var(--white); }
.nv--play > .nv__a:not(.nv__w) { animation: nv-a .95s cubic-bezier(.16, 1, .3, 1) both; }
.nv--play > .nv__b:not(.nv__w) { animation: nv-b .95s cubic-bezier(.16, 1, .3, 1) both; }
.nv--play > .nv__spark { animation: nv-spark .7s .5s ease-out both; }
.nv--play > .nv__w { animation: nv-word .7s .3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes nv-a { from { transform: translate(-10px, -10px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes nv-b { from { transform: translate(10px, 10px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes nv-spark { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; } }
@keyframes nv-word { from { transform: translateX(10px); opacity: 0; } to { transform: none; opacity: 1; } }
/* A logo that waits to be scrolled into view stays hidden until it plays */
.js [data-nv-inview]:not(.nv--play) > path { opacity: 0; }

/* ---------- Top bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--bar);
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar__menu {
  justify-self: start;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.bar__burger {
  width: 26px;
  height: 9px;
  border-block: 2px solid currentColor;
  transition: height .25s var(--ease);
}
.bar__menu:hover .bar__burger { height: 3px; }
.bar__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.bar__logo { gap: 12px; }
.bar__logo .nv { width: 40px; }
/* The wordmark keeps the size it has in the official horizontal logo: its height is 0.32 of the mark */
.bar__word { display: block; width: auto; height: 13px; animation: nv-word .7s .3s cubic-bezier(.16, 1, .3, 1) both; }
.bar > .btn { justify-self: end; }

/* ---------- Menu (full-screen dialog) ---------- */

.menu {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0 var(--gutter) var(--gutter);
  border: 0;
  background: var(--ink);
  color: var(--white);
}
.menu[open] {
  display: grid;
  grid-template-rows: var(--bar) 1fr auto;
  animation: menu-in .5s var(--ease);
}
.menu::backdrop { background: transparent; }
@keyframes menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu__close svg { width: 22px; height: 22px; }

.menu__nav { display: grid; align-content: center; gap: clamp(2px, .6vw, 10px); }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 32px);
  width: fit-content;
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2.75rem, min(11vw, 15dvh), 9rem);
  line-height: .95;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s ease, transform .35s var(--ease);
  animation: rise .6s var(--ease) both;
}
.menu__nav a:nth-child(1) { animation-delay: .12s; }
.menu__nav a:nth-child(2) { animation-delay: .18s; }
.menu__nav a:nth-child(3) { animation-delay: .24s; }
.menu__nav a:nth-child(4) { animation-delay: .3s; }
.menu__nav a:hover { color: var(--blue-d); transform: translateX(14px); }
.menu__nav .mono { color: rgb(255 255 255 / .55); font-size: .8125rem; }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / .2);
}
.menu__foot a { padding: 10px 0; font-weight: 600; }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

/* ---------- Hero ---------- */

.hero { container-type: inline-size; padding: clamp(28px, 4.5vw, 64px) var(--gutter) clamp(56px, 7vw, 104px); }
.hero__kicker { color: var(--muted); }

.hero__title {
  margin-top: clamp(14px, 1.6vw, 24px);
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2.75rem, 23cqi, 24rem);   /* the longer line spans the full width */
  line-height: .95;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
.hero__line { display: block; white-space: nowrap; animation: rise .9s var(--ease) both; }
.hero__line--blue { color: var(--blue); animation-delay: .1s; }

.hero__row {
  display: grid;
  gap: 28px;
  margin-top: clamp(24px, 3vw, 44px);
  animation: rise .9s .2s var(--ease) both;
}
.hero__lede { max-width: 46ch; font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Statement ---------- */

.say {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  background: var(--ink);
  color: var(--white);
}

/* Shortcuts: four light product tiles on the black band, right under the headline */
.jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
.jump__item { display: grid; gap: 6px; align-content: start; color: var(--white); text-decoration: none; }
.jump__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(180deg, #eceef1 0%, var(--stage) 62%, #d9dde3 100%);
}
.jump__stage img {
  width: auto;
  max-width: 66%;
  max-height: 60%;
  filter: var(--shadow);
  transition: transform .6s var(--ease);
}
.jump__item:hover .jump__stage img, .jump__item:focus-visible .jump__stage img { transform: translateY(-5%) rotate(-4deg) scale(1.06); }
.jump__n { position: absolute; top: 12px; left: 14px; color: var(--muted); }
.jump__go {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  transition: background-color .2s ease, transform .4s var(--ease);
}
.jump__go svg { width: 18px; height: 18px; transform: rotate(90deg); }
.jump__item:hover .jump__go, .jump__item:focus-visible .jump__go { background: var(--blue-d); color: var(--ink); transform: translateY(4px); }
.jump__title {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.6vw, 3.5rem);
  line-height: .95;
  text-transform: uppercase;
  transition: color .2s ease;
}
.jump__item:hover .jump__title { color: var(--blue-d); }
.jump__meta { color: rgb(255 255 255 / .7); }
.jump .reveal:nth-child(2) { transition-delay: .06s; }
.jump .reveal:nth-child(3) { transition-delay: .12s; }
.jump .reveal:nth-child(4) { transition-delay: .18s; }
@media (min-width: 820px) {
  .jump { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
}

/* The demo film: under the "Anmeldelser" heading, above the product cards */
.film { position: relative; margin: 0 0 clamp(32px, 4.5vw, 64px); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--ink); }
@media (max-width: 639px) {
  .film video { aspect-ratio: 9 / 16; }
  .film--wide video { aspect-ratio: 16 / 9; }
}
.film__toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid rgb(255 255 255 / .6);
  border-radius: 999px;
  background: rgb(11 13 16 / .6);
  color: var(--white);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.film__toggle:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* ---------- Products ---------- */

.shop { padding: var(--section) var(--gutter); }
.shop__head { display: grid; gap: 14px; margin-bottom: clamp(40px, 6vw, 88px); }
.shop__head .mono, .faq__head .mono, .order__head .mono { color: var(--blue-ink); }

.chapter { padding-block: clamp(28px, 3vw, 40px) clamp(56px, 7vw, 112px); border-top: 1px solid var(--ink); }
.chapter:last-of-type { padding-bottom: clamp(40px, 5vw, 72px); }
.chapter__head {
  display: grid;
  gap: 10px 32px;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.chapter__title {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: .88;
  text-transform: uppercase;
}
.chapter__opens { color: var(--blue-ink); }
.chapter__text { max-width: 42ch; color: var(--muted); }

.chapter__items { display: grid; gap: clamp(40px, 4vw, 56px) clamp(16px, 2vw, 28px); }

/* Studio stage: one backdrop and one light direction for every product */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  container-type: size;
  overflow: hidden;
  background: linear-gradient(180deg, #eceef1 0%, var(--stage) 62%, #d9dde3 100%);
  border-radius: 4px;
}
.card__stage {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.duo { position: relative; display: grid; place-items: center; }
.duo img {
  width: auto;
  max-width: min(58cqw, calc(var(--native) * 1.12));
  max-height: 70cqh;
  filter: var(--shadow);
  transition: transform .6s var(--ease);
}
.duo__front { position: relative; }
.duo__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  transform: translate(15%, 5%) rotate(9deg);
}
.duo--has-back .duo__front { transform: translate(-7%, -2%); }
.card__stage:hover .duo--has-back .duo__back, .card__stage:focus-visible .duo--has-back .duo__back { transform: translate(52%, 4%) rotate(13deg); }
.card__stage:hover .duo--has-back .duo__front, .card__stage:focus-visible .duo--has-back .duo__front { transform: translate(-26%, -2%) rotate(-3deg); }
/* A card without a back picture lifts off the backdrop: it rises, grows a little and its shadow falls further away */
.duo:not(.duo--has-back) img { transition: transform .6s var(--ease), filter .6s var(--ease); }
.card__stage:hover .duo:not(.duo--has-back) img, .card__stage:focus-visible .duo:not(.duo--has-back) img {
  transform: translateY(-5%) rotate(-4deg) scale(1.07);
  filter: drop-shadow(0 1px 1px rgb(11 13 16 / .26)) drop-shadow(0 30px 24px rgb(11 13 16 / .22));
}
/* A stand stays put: on hover the view moves in a little, the product itself does not lift or turn */
.card__stage--still .duo img, .jump__item--still .jump__stage img { transform-origin: 50% 100%; }
.card__stage--still:hover .duo:not(.duo--has-back) img, .card__stage--still:focus-visible .duo:not(.duo--has-back) img { transform: scale(1.04); filter: var(--shadow); }
.jump__item--still:hover .jump__stage img, .jump__item--still:focus-visible .jump__stage img { transform: scale(1.05); }

.trio { position: absolute; inset: 0; }
.trio__band {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: none;
  height: min(72cqh, calc(var(--native) * 1.6));
  filter: var(--shadow);
  transition: transform .65s var(--ease), opacity .4s ease;
}
.trio__band[data-pos="center"] { z-index: 2; transform: translate(-50%, -50%); }
.trio__band[data-pos="left"] { transform: translate(-128%, -47%) scale(.8) rotate(-6deg); opacity: .92; }
.trio__band[data-pos="right"] { transform: translate(28%, -47%) scale(.8) rotate(6deg); opacity: .92; }

.card { display: grid; gap: 20px; align-content: start; }
.card__info { display: grid; gap: 10px; justify-items: start; }
.card__variant { color: var(--muted); }
.card__name {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(1.875rem, 2.6vw, 2.5rem);
  line-height: .98;
  text-transform: uppercase;
}
.card__tag { max-width: 40ch; color: var(--muted); }
.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  width: 100%;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.card__price { font-weight: 800; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__price .mono { color: var(--muted); font-weight: 500; }
.card__actions { display: flex; gap: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.swatches { display: flex; gap: 2px; margin-left: -8px; }
.swatch {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.swatch::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line);
  transition: box-shadow .2s ease;
}
.swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }

/* ---------- How it works ---------- */

.how { padding: var(--section) var(--gutter); background: var(--blue); color: var(--white); }
.how :focus-visible { outline-color: var(--white); }
.how__head { display: grid; gap: 14px; margin-bottom: clamp(40px, 6vw, 88px); }
.how__steps { display: grid; gap: 40px clamp(20px, 3vw, 48px); }
.how__steps li { padding-top: 18px; border-top: 2px solid var(--white); }
.how__n {
  display: block;
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(6rem, 15vw, 14rem);
  line-height: .82;
}
.how__steps h3 { margin-top: 20px; font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 700; line-height: 1.2; }
.how__steps p { max-width: 34ch; margin-top: 8px; }

/* ---------- Customer reviews ---------- */

.voices { padding: var(--section) var(--gutter); background: var(--white); }
.voices__head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 72px); }
.voices__head .mono { color: var(--blue-ink); }
.voices__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px clamp(20px, 3vw, 48px); }
.voice { display: grid; gap: 18px; align-content: start; padding-top: 20px; border-top: 1px solid var(--ink); }
.voice__stars { display: flex; gap: 3px; color: var(--blue); }
.voice__stars svg { width: 18px; height: 18px; }
.voice__text {
  margin: 0;
  font-stretch: 82%;
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.voice__text::before { content: "«"; }
.voice__text::after { content: "»"; }
.voice__who { display: grid; gap: 2px; }
.voice__who .mono { color: var(--muted); }

/* ---------- Order ---------- */

.order { padding: var(--section) var(--gutter); }
.order__head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 72px); }
.order__intro { max-width: 56ch; margin-top: 6px; color: var(--muted); }
.order__grid { display: grid; gap: 24px; align-items: start; }

.form { display: grid; gap: clamp(40px, 5vw, 64px); min-width: 0; }
.form__step { display: grid; gap: 18px 16px; padding-top: 18px; border-top: 1px solid var(--ink); }
.form__step > * { grid-column: 1 / -1; }
.form__step legend {
  display: flex;
  align-items: baseline;
  gap: 14px;
  float: left;
  width: 100%;
  margin-bottom: 4px;
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1;
  text-transform: uppercase;
}
.form__step legend .mono { color: var(--muted); }
.form__sub { display: grid; gap: 10px; margin-top: 10px; }
.form__label, .field label { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.form__help { color: var(--muted); font-size: .875rem; }
.form__quote { padding: 16px 18px; border-left: 3px solid var(--blue); background: var(--white); }
.opt {
  margin-left: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Hidden native radios; the label is the control */
.chipradio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.pick {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* picture, name, quantity: the quantity sits on the bottom edge in every tile */
  gap: 2px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  transition: border-color .2s ease;
}
.pick.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick.is-on::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
}
.picks[aria-invalid="true"] .pick { border-color: var(--error); }
.chipradio:has(input:focus-visible) span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pick__img { display: grid; place-items: center; height: 88px; margin-bottom: 8px; }
.pick__img img { width: auto; max-height: 80px; filter: drop-shadow(0 6px 6px rgb(11 13 16 / .16)); }
.pick__text { display: grid; gap: 2px; align-content: start; }
.pick__name { font-weight: 700; font-size: .9375rem; line-height: 1.25; }
.pick__price { color: var(--muted); font-size: .6875rem; }
.pick__qty { display: grid; gap: 8px; align-self: end; margin-top: 10px; }

/* Quantity: minus, number, plus */
.qty { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; border: 1.5px solid var(--field); border-radius: 4px; background: var(--white); overflow: hidden; }
.qty__btn { min-height: 44px; padding: 0; border: 0; background: none; font-size: 1.25rem; font-weight: 600; line-height: 1; cursor: pointer; touch-action: manipulation; }
.qty__btn:hover { background: var(--stage); }
.qty__n {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.qty__n::-webkit-outer-spin-button, .qty__n::-webkit-inner-spin-button { appearance: none; margin: 0; }
.qty__n:focus-visible, .qty__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* The wristband takes a full row: one quantity per colour */
.pick--colors { grid-column: 1 / -1; grid-template-columns: auto 1fr; grid-template-rows: auto; align-items: center; gap: 4px 16px; }
.pick--colors .pick__img { width: 88px; margin: 0; }
.pick--colors .pick__qty { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.pick__color { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 8px; font-weight: 600; font-size: .875rem; }
.pick__color i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.pick__color .qty { grid-column: 1 / -1; }

/* Links: one block per product in the inquiry */
.lnks { display: grid; gap: 28px; }
.lnk { display: grid; gap: 12px; }
.lnk + .lnk { padding-top: 24px; border-top: 1px solid var(--line); }
.lnk__head { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.lnk__count { color: var(--muted); }
.lnk__count:empty { display: none; }
/* A pasted list stays compact however long it is */
.lnk__list { max-height: 232px; overflow-y: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--white); counter-reset: n; }
.lnk__list:empty { display: none; }
.lnk__list li { display: grid; grid-template-columns: 2.2em minmax(0, auto) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 12px; border-top: 1px solid var(--line); font-size: .875rem; counter-increment: n; }
.lnk__list li:first-child { border-top: 0; }
.lnk__list li::before { content: counter(n, decimal-leading-zero); color: var(--muted); font-family: var(--mono); font-size: .75rem; }
.lnk__label { color: var(--muted); }
.lnk__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnk__list li.is-bad .lnk__url { color: var(--error); font-weight: 600; }

/* A checkbox with its text */
.tick { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-weight: 500; font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.field .tick input { width: 24px; min-height: 24px; height: 24px; margin: 0; padding: 0; accent-color: var(--ink); }

.chips[role="radiogroup"] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chipradio { position: relative; cursor: pointer; }
.chipradio span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--field);
  border-radius: 999px;
  background: var(--white);
  font-weight: 600;
  font-size: .9375rem;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.chipradio i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--white); }
.chipradio input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }

.field { display: grid; gap: 7px; align-content: start; min-width: 0; }
.field input, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--field);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__error { color: var(--error); font-size: .875rem; font-weight: 600; }
.field--inline { grid-template-columns: auto 120px; align-items: center; justify-content: start; gap: 8px 14px; margin-top: 6px; }
.field--inline .field__error { grid-column: 1 / -1; }

.form__end { display: grid; gap: 18px; justify-items: start; padding-top: 22px; border-top: 1px solid var(--ink); }
.form__privacy { max-width: 46ch; color: var(--muted); font-size: .875rem; }
.form__status { padding: 22px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--white); }
.form__status > .mono { color: var(--blue-ink); margin-bottom: 6px; }
.form__status p + p { margin-top: 8px; }
.form__status--error { border-color: var(--error); }
.form__status--error > .mono { color: var(--error); }
.form__status dl { display: grid; margin-top: 14px; }
.form__status dl div { display: grid; grid-template-columns: 11em 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.form__status dt { color: var(--muted); }
.form__status dd { overflow-wrap: anywhere; }

/* Summary */
.sum {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
}
.sum > .mono { color: rgb(255 255 255 / .7); }
.sum__stage {
  display: grid;
  place-items: center;
  height: 190px;
  border-radius: 3px;
  background: linear-gradient(180deg, #eceef1 0%, var(--stage) 62%, #d9dde3 100%);
  color: var(--muted);
}
.sum__stage img { width: auto; max-height: 150px; filter: var(--shadow); }
.sum__stage svg { width: 36px; height: 36px; }
.sum__name { font-stretch: 62%; font-weight: 800; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.sum__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid rgb(255 255 255 / .18); }
.sum__rows dt { color: rgb(255 255 255 / .82); }
.sum__rows dd { font-weight: 600; text-align: right; }
.sum__price {
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / .18);
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(3.25rem, 5vw, 4.5rem);
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.sum__label { margin-bottom: -8px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .18); color: rgb(255 255 255 / .7); }
.sum__label:not([hidden]) + .sum__price { padding-top: 0; border-top: 0; }
.sum__price:empty { display: none; }
.sum__fine { color: rgb(255 255 255 / .72); font-size: .875rem; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: clamp(32px, 4vw, 64px); padding: var(--section) var(--gutter); background: var(--white); }
.faq__head { display: grid; gap: 14px; align-content: start; }
.faq__list { border-bottom: 1px solid var(--ink); }
.faq details { border-top: 1px solid var(--ink); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-weight: 600;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 22px; height: 22px; transition: transform .35s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue-ink); }
.faq details p { max-width: 62ch; padding-bottom: 26px; color: var(--muted); }

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

.foot { container-type: inline-size; padding: var(--section) var(--gutter) 24px; background: var(--ink); color: var(--white); overflow: hidden; }
.foot__top { display: grid; gap: 6px; }
.foot__line, .foot__mail {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
}
.foot__mail { width: fit-content; color: var(--blue-d); text-decoration-thickness: .06em; text-underline-offset: .12em; overflow-wrap: anywhere; }
.foot__mail:hover { color: var(--white); }
.foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: clamp(40px, 6vw, 88px);
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / .2);
}
.foot__nav a { padding: 13px 0; text-decoration: none; }
.foot__nav a:hover { color: var(--blue-d); }
.foot__logo { margin-top: clamp(32px, 5vw, 72px); }
.foot__legal { display: grid; gap: 4px; margin-top: 20px; color: rgb(255 255 255 / .6); }

/* The small footer on the text pages */
.minifoot { display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 18px var(--gutter) 28px; border-top: 1px solid var(--line); color: var(--muted); }
.minifoot a { padding: 10px 0; text-decoration: none; }
.minifoot a:hover { color: var(--blue-ink); }
.minifoot p { flex-basis: 100%; }

/* Text pages: terms, privacy, withdrawal */
.page__body h3 { margin-top: 6px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.page__body ul, .page__body ol { display: grid; gap: 8px; padding-left: 1.3em; }
.page__body ul { list-style: disc; }
.page__body ol { list-style: decimal; }
.page__note { padding: 14px 16px; border-left: 3px solid var(--blue); background: var(--white); }
.page__facts { display: grid; gap: 2px; }

/* The withdrawal form: lines to write on, and a clean print */
.slip { display: grid; gap: 18px; padding: 24px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--white); }
.slip__line { display: grid; gap: 6px; }
.slip__line span { font-weight: 600; font-size: .9375rem; }
.slip__line i { display: block; height: 34px; border-bottom: 1px solid var(--ink); }
.slip__line i.tall { height: 68px; }
@media print {
  .bar, .skip, .minifoot, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .page { min-height: 0; padding: 0; }
  .page h1 { font-size: 26pt; }
  .page__body { max-width: none; }
  .slip { break-inside: avoid; }
}


/* ---------- Product sheet (side dialog) ---------- */

.sheet {
  width: min(580px, 100vw);
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet[open] { animation: sheet-in .5s var(--ease); }
.sheet::backdrop { background: rgb(11 13 16 / .55); animation: fade .3s ease; }
@keyframes sheet-in { from { transform: translateX(100%); } }
@keyframes fade { from { opacity: 0; } }

.sheet__close {
  position: sticky;
  top: 14px;
  z-index: 3;
  float: right;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 14px 14px -58px 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}
.sheet__close svg { width: 18px; height: 18px; }
.sheet__body { display: grid; gap: 14px; padding: 0 clamp(18px, 4vw, 36px) 36px; }
.sheet__stage { aspect-ratio: 4 / 3; margin-inline: calc(clamp(18px, 4vw, 36px) * -1); border-radius: 0; }
.sheet__img {
  grid-area: 1 / 1;
  width: auto;
  max-width: min(62cqw, calc(var(--native) * 1.2));
  max-height: 76cqh;
  filter: var(--shadow);
  transition: opacity .35s ease, transform .5s var(--ease);
}
.sheet__stage[data-side="front"] .sheet__img--back,
.sheet__stage[data-side="back"] .sheet__img:not(.sheet__img--back) { opacity: 0; transform: scale(.94) rotate(-4deg); }

.sides { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--stage); width: fit-content; }
.side {
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.side[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.sheet__kicker { margin-top: 8px; color: var(--blue-ink); }
.sheet__title { font-stretch: 62%; font-weight: 800; font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: .95; text-transform: uppercase; }
.sheet__tag { font-size: 1.125rem; }
.sheet__note { padding: 12px 14px; border-left: 3px solid var(--blue); background: var(--white); font-size: .9375rem; }
.sheet__sub { margin-top: 14px; color: var(--muted); }
.sheet__fine { color: var(--muted); font-size: .9375rem; }
.sheet__cta { margin-top: 8px; }

/* Review before sending (uses the product sheet's panel) */
.review__body { padding-top: 64px; }
.review__parts { display: grid; gap: 4px; margin-top: 6px; }
.review__part { padding: 14px 0; border-top: 1px solid var(--line); }
.review__part header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.review__part h4 { font-size: 1.0625rem; font-weight: 700; }
.review__edit { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--field); border-radius: 999px; background: var(--white); font-weight: 600; font-size: .875rem; cursor: pointer; }
.review__edit:hover { border-color: var(--ink); }
.review__part dl div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 2px 14px; padding: 3px 0; }
/* The heading takes focus when the review opens (for screen readers); it needs no ring */
#review-title:focus { outline: none; }
.review__part dl div.review__line { grid-template-columns: minmax(0, 1fr); }
.review__part dt { color: var(--muted); font-size: .9375rem; }
.review__part dd { font-weight: 600; overflow-wrap: anywhere; }
.review__text { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; }
.review__part--address { margin: 6px -12px 0; padding: 14px 12px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--white); }
.review__tick { margin-top: 14px; font-weight: 600; }
.review__tick input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.review__actions { display: grid; gap: 10px; margin-top: 10px; }
.review__actions .btn { width: 100%; }

.specs { margin-top: 8px; border-bottom: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line); }
.specs dt { color: var(--muted); padding-top: 3px; }
.specs dd { font-weight: 600; text-align: right; }

.tiers { border-bottom: 1px solid var(--ink); }
.tiers li {
  display: grid;
  grid-template-columns: 1fr auto 7.5ch;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--ink);
  font-variant-numeric: tabular-nums;
}
.tiers .mono { color: var(--muted); }
.tiers strong { grid-column: 3; font-weight: 800; text-align: right; white-space: nowrap; }
.tiers li:last-child { grid-template-columns: 1fr auto; }
.tiers li:last-child strong { grid-column: 2; }

/* ---------- Simple pages (takk, personvern) ---------- */

.page { min-height: calc(100dvh - var(--bar)); padding: clamp(48px, 8vw, 120px) var(--gutter) var(--section); }
.page h1 {
  font-stretch: 62%;
  font-weight: 800;
  font-size: clamp(3rem, 11vw, 10rem);
  line-height: .9;
  text-transform: uppercase;
}
.page__body { display: grid; gap: 18px; max-width: 64ch; margin-top: clamp(24px, 4vw, 48px); }
.page__body h2 { margin-top: 18px; font-stretch: 100%; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.page__body .btn { justify-self: start; margin-top: 12px; }

/* ---------- Reveal on scroll ---------- */

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.chapter__items .reveal:nth-child(2), .how__steps .reveal:nth-child(2) { transition-delay: .08s; }
.chapter__items .reveal:nth-child(3), .how__steps .reveal:nth-child(3) { transition-delay: .16s; }

/* ---------- Breakpoints ---------- */

@media (max-width: 819px) {
  /* Leaves room for the summary bar, so a field the browser scrolls to is not hidden behind it */
  html { scroll-padding-bottom: 130px; }
  /* The summary rides along the bottom of the screen while the form is filled in */
  .sum {
    position: sticky;
    bottom: 10px;
    z-index: 5;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 16px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgb(11 13 16 / .3);
  }
  .sum > .mono, .sum__stage, .sum__rows, .sum__label { display: none !important; }
  .sum__name { font-size: 1.25rem; grid-column: 1; }
  .sum__price { grid-column: 2; grid-row: 1 / span 2; padding: 0; border: 0; font-size: 2.25rem; }
  .sum__fine { grid-column: 1; font-size: .75rem; line-height: 1.35; }
}

@media (max-width: 639px) {
  .card__stage { aspect-ratio: 4 / 3; }
}

@media (max-width: 519px) {
  .bar__word { display: none; }
  .card__actions { width: 100%; }
  .card__actions .btn { flex: 1; }
  .form__status dl div { grid-template-columns: 1fr; gap: 0; }
}

@media (min-width: 640px) {
  .form__step { grid-template-columns: 1fr 1fr; }
  .form__step > .field:not(.field--wide) { grid-column: auto; }
  .how__steps { grid-template-columns: repeat(3, 1fr); }
  .chapter--multi .chapter__items { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 820px) {
  .hero__row { grid-template-columns: 1fr auto; align-items: end; }
  .chapter__head { grid-template-columns: 1fr minmax(0, 30rem); align-items: end; }
  .chapter__title { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
  .chapter__opens { grid-column: 2; grid-row: 1; }
  .chapter__text { grid-column: 2; grid-row: 2; align-self: end; padding-bottom: .5em; }

  .chapter--solo .card { grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
  .chapter--solo .card__stage { aspect-ratio: 16 / 11; }
  .chapter--solo.chapter--flip .card__stage { order: 2; }
  .chapter--solo .card__name { font-size: clamp(2.5rem, 4.4vw, 4.25rem); }
  .chapter--solo .card__info { gap: 14px; }
  .chapter--solo .card__tag { font-size: 1.125rem; }

  .faq { grid-template-columns: 4fr 8fr; }
  .faq__head { position: sticky; top: calc(var(--bar) + 32px); }
}

@media (min-width: 1024px) {
  /* Headline left, pitch right, so the product row stays inside the first screen */
  .hero { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(32px, 4.5vw, 80px); }
  .hero__kicker { grid-column: 1 / -1; }
  .hero__title { font-size: clamp(6rem, 12.5cqi, 15.5rem); }
  .hero__row { grid-template-columns: 1fr; align-self: end; margin: 0 0 1.1cqi; }

  .chapter--multi .chapter__items { grid-template-columns: repeat(3, 1fr); }
  .order__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 4vw, 72px); }
  .sum { position: sticky; top: calc(var(--bar) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Scroll Craft layer: engine tokens and the layered hero
   ========================================================================== */

:root {
  --sc-canvas: #f3f4f6;
  --sc-surface: #ffffff;
  --sc-ink: #0b0d10;
  --sc-ink-soft: #535a65;
  --sc-accent: #1447E6;
  --sc-accent-ink: #0b0d10;
  --sc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
[data-sc-progress] { z-index: 60; }

/* ---------- Hero scene ---------- */

.hero__scene {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / .9;
  margin: clamp(32px, 6vw, 56px) auto 0;
}
.plane { position: absolute; }
.plane img {
  width: 100%;
  height: auto;
  filter: var(--shadow);
  transform: translate3d(calc(var(--mx, 0) * var(--d) * -1px), calc(var(--my, 0) * var(--d) * -1px), 0) rotate(var(--r, 0deg));
  transition: transform .7s var(--ease);
  animation: rise 1s var(--ease) both;
}
.plane--menu { left: 60%; top: 0; width: 30%; --d: 10; --r: 7deg; }
.plane--menu img { animation-delay: .25s; }
.plane--stand { left: 29%; top: 5%; width: 44%; --d: 18; }
.plane--stand img { animation-delay: .32s; }
.plane--band { left: 71%; top: 42%; width: 27%; --d: 30; --r: 9deg; }
.plane--band img { animation-delay: .4s; }
.plane--card { left: 0; top: 50%; width: 42%; --d: 44; --r: -7deg; }
.plane--card img { animation-delay: .48s; }

@media (min-width: 1024px) {
  /* headline and pitch on the left, the product planes on the right */
  .hero { grid-template-columns: max-content minmax(0, 1fr); }
  /* The column is as wide as the headline. The width is fixed here (the measured width of "til digitalt" in Archivo)
     so the layout does not jump when the font arrives on a slow connection. Measure again if the headline changes. */
  .hero__title { grid-column: 1; width: 4.2853em; }
  .hero__row { grid-column: 1; width: 0; min-width: 100%; grid-template-columns: 1fr auto; align-items: end; align-self: start; margin: clamp(20px, 2.2vw, 40px) 0 0; }
  .hero__scene { grid-column: 2; grid-row: 2 / span 2; align-self: center; justify-self: end; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .plane img { transform: rotate(var(--r, 0deg)); }
}