/* Motion Graphics — kun på motion-graphics.html, efter adlure.css.
   Lavet ud fra Gustavs stylesheet (motion graphics/motion-graphics-page).
   Sitets egen ramme — header, footer, html/body og skrifttyper — kommer fra
   adlure.css og er taget ud her. Hans formular-styling gælder kun formularen
   i hero'en (.pcard), så booking-vinduet ser ud som på resten af sitet. */

/* ==========================================================================
   Adlure — Motion Graphic Ads

   A standalone page. Tokens, type and components follow adlure.css, so the
   page can be moved into the site later. No inline styles in the HTML, so it
   works under the site's Content-Security-Policy (style-src 'self').
   ========================================================================== */

:root { --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

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

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

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.3s;
}

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

.btn .i--play { width: 14px; height: 14px; }

.btn:hover .i--play { transform: scale(1.15); }

.btn:disabled { opacity: 0.5; cursor: progress; transform: none; }

/* ==========================================================================
   Header
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 7.5vw, 104px) clamp(64px, 8vw, 112px);
  background: var(--dark);
  color: #fff;
}

.phero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: #111a22;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 14px, transparent 14px 28px);
  background-position: center;
  background-size: cover;
}

.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, rgba(9, 13, 18, 0.95) 0%, rgba(9, 13, 18, 0.87) 38%, rgba(9, 13, 18, 0.66) 72%, rgba(9, 13, 18, 0.6) 100%),
    linear-gradient(180deg, rgba(9, 13, 18, 0.55) 0%, rgba(9, 13, 18, 0) 28%, rgba(9, 13, 18, 0) 62%, rgba(9, 13, 18, 0.75) 100%);
}

/* Soft blue glow behind the headline, as on adlure.dk */

.phero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -35%;
  left: -10%;
  width: min(1000px, 120vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(15, 160, 226, 0.26) 0%, rgba(15, 160, 226, 0.08) 40%, rgba(15, 160, 226, 0) 66%);
}

/* Placeholder label for the background image — delete with the span */

.phero__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

@keyframes ping { 70%, 100% { transform: scale(2.8); opacity: 0; } }

@keyframes blink { 50% { opacity: 0.25; } }

.phero h1 {
  margin-bottom: 22px;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.phero h1 em { display: block; color: var(--blue-light); }

.phero__lead {
  max-width: 31em;
  margin-bottom: 36px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.72);
}

.phero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__trust li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ---------- Hero with a form (as on the AI Webdesign page) ---------- */

.phero--form .phero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }

.ppoints { display: grid; gap: 10px; margin-top: 40px; }

.ppoints--stak { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 36px; max-width: 460px; }

.ppoint {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.pcard .field label { font-size: 13.5px; }

.pcard .form__fejl { margin: 16px 0 0; }

.pcard .form__send { margin-top: 18px; }

.pcard .form__tak { display: flex; flex-direction: column; padding-block: 48px; }

/* ==========================================================================
   Placeholder slots — where media goes later
   ========================================================================== */

.ar-916 { aspect-ratio: 9 / 16; }

.ar-45 { aspect-ratio: 4 / 5; }

.ar-11 { aspect-ratio: 1 / 1; }

.ar-169 { aspect-ratio: 16 / 9; }

.ar-43 { aspect-ratio: 4 / 3; }

/* Dashed inner frame = "safe title area" */

/* File name in the corner */

/* Crop marks in each corner */

.slot__marks { position: absolute; inset: 0; pointer-events: none; }

.slot__marks i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--slot-c);
}

.slot__marks i:nth-child(1) { top: 4px; left: 4px; border-top-width: 2px; border-left-width: 2px; }

.slot__marks i:nth-child(2) { top: 4px; right: 4px; border-top-width: 2px; border-right-width: 2px; }

.slot__marks i:nth-child(3) { bottom: 4px; left: 4px; border-bottom-width: 2px; border-left-width: 2px; }

.slot__marks i:nth-child(4) { bottom: 4px; right: 4px; border-bottom-width: 2px; border-right-width: 2px; }

.slot__body {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 30ch;
  padding: 36px 22px;
  text-align: center;
}

.slot__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slot__type .i { width: 14px; height: 14px; stroke-width: 2; }

.slot__name { font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.01em; }

.slot__spec { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.slot__note { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* Running timecode, top right (filled in by the script) */

.slot__tc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff5a52; animation: blink 1.2s steps(2, jump-none) infinite; }

/* Kinds */

/* Dark variant for the hero */

/* Compact and mini versions drop the details that don't fit */

/* ---------- Small loops in the cards ---------- */

.loop {
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: var(--r);
  background: #000;
}

/* Square videos are cropped to 4:3 from the middle */

.loop video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Code loops (HTML/CSS) ----------
   Small animations built in code, in the look of the original kinetic type video.
   Everything inside is sized in cqw (1% of the card's width), so they scale
   with the card. Each loop runs 6 s and only plays while it has .is-playing
   (set by the script when it's on screen). The plain styles are the finished
   frame, which is what visitors who prefer reduced motion see. */

.mgl {
  --t: 6s;
  position: relative;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(rgba(15, 160, 226, 0.06) 1px, transparent 1px) 0 0 / 10% 13.333%,
    linear-gradient(90deg, rgba(15, 160, 226, 0.06) 1px, transparent 1px) 0 0 / 10% 13.333%,
    #f3f7fb;
  color: #0f1b2d;
  container-type: inline-size;
}

.mgl * { animation-duration: var(--t); animation-iteration-count: infinite; animation-timing-function: var(--ease); animation-fill-mode: both; animation-play-state: paused; }

.mgl.is-playing * { animation-play-state: running; }

/* ===== Product & offer: product slides in, tag drops, button pulses ===== */

.pr__tekst { position: absolute; left: 7cqw; top: 13cqw; display: grid; justify-items: start; gap: 1.6cqw; }

.pr__eyebrow { font-size: 2.6cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); animation-name: prOp1; }

.pr__h { font-size: 8.6cqw; line-height: 0.95; letter-spacing: -0.04em; animation-name: prOp1; }

.pr__sub { font-size: 3.6cqw; font-weight: 700; color: #4b5563; animation-name: prOp2; }

.pr__knap {
  margin-top: 1.6cqw;
  padding: 1.8cqw 4cqw;
  border-radius: 99px;
  background: var(--blue);
  font-size: 3.2cqw;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1.5cqw 3cqw rgba(15, 160, 226, 0.35);
  animation-name: prKnap;
}

.pr__pose {
  position: absolute;
  right: 12cqw;
  top: 13cqw;
  width: 24cqw;
  height: 36cqw;
  border-radius: 3cqw 3cqw 2cqw 2cqw;
  background: linear-gradient(160deg, #1d2b3d, #0f1b2d);
  box-shadow: inset -2cqw 0 0 rgba(255, 255, 255, 0.05);
  animation-name: prInd;
}

.pr__top { position: absolute; inset: 0 0 auto; height: 6cqw; border-radius: 3cqw 3cqw 0 0; background: repeating-linear-gradient(90deg, #2a3b50 0 1.2cqw, #22324a 1.2cqw 2.4cqw); }

.pr__label { position: absolute; left: 3cqw; right: 3cqw; top: 12cqw; display: grid; justify-items: center; gap: 1.2cqw; padding: 2.4cqw 0; border-radius: 1.5cqw; background: #fff; }

.pr__label i { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--blue); }

.pr__label b { font-size: 2.6cqw; letter-spacing: 0.18em; }

.pr__skygge { position: absolute; right: 13cqw; top: 50cqw; width: 22cqw; height: 3cqw; border-radius: 50%; background: rgba(15, 27, 45, 0.14); animation-name: prSkygge; }

.pr__pris {
  position: absolute;
  right: 7cqw;
  top: 9cqw;
  display: grid;
  place-items: center;
  width: 13cqw;
  height: 13cqw;
  border-radius: 50%;
  background: #ffc94d;
  font-size: 3.6cqw;
  font-weight: 700;
  color: #0f1b2d;
  transform: rotate(-12deg);
  box-shadow: 0 1.2cqw 2.4cqw rgba(15, 27, 45, 0.18);
  animation-name: prPris;
}

@keyframes prInd { 0% { opacity: 0; transform: translateX(30cqw) rotate(8deg); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-6cqw); } }

@keyframes prSkygge { 0% { opacity: 0; transform: scaleX(0.3); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@keyframes prOp1 { 0%, 14% { opacity: 0; transform: translateY(3cqw); } 24%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@keyframes prOp2 { 0%, 38% { opacity: 0; transform: translateY(3cqw); } 46%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@keyframes prPris {
  0%, 26% { opacity: 0; transform: translateY(-40cqw) rotate(-40deg); }
  32% { opacity: 1; transform: translateY(2cqw) rotate(-6deg); }
  36%, 90% { opacity: 1; transform: rotate(-12deg); }
  98%, 100% { opacity: 0; transform: rotate(-12deg) scale(0.6); }
}

@keyframes prKnap {
  0%, 48% { opacity: 0; transform: scale(0.7); }
  54% { opacity: 1; transform: none; }
  62%, 74% { transform: scale(1.08); }
  68%, 80%, 90% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}

/* ===== Explainer: three steps appear and connect ===== */

.fk__h { position: absolute; left: 0; right: 0; top: 9cqw; font-size: 5.6cqw; letter-spacing: -0.03em; text-align: center; animation-name: fkH; }

.fk__linjer { position: absolute; inset: 0; width: 100%; height: 100%; }

.fk__l { fill: none; stroke: var(--blue); stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

.fk__l--1 { animation-name: fkL1; }

.fk__l--2 { animation-name: fkL2; }

.fk__trin { position: absolute; top: 27cqw; display: grid; justify-items: center; gap: 2cqw; width: 22cqw; margin-left: -11cqw; }

.fk__trin--1 { left: 22cqw; animation-name: fkPop1; }

.fk__trin--2 { left: 50cqw; animation-name: fkPop2; }

.fk__trin--3 { left: 78cqw; animation-name: fkPop3; }

.fk__trin small { font-size: 3cqw; font-weight: 700; color: #4b5563; white-space: nowrap; }

.fk__rund {
  display: grid;
  place-items: center;
  width: 14cqw;
  height: 14cqw;
  border: 0.5cqw solid #d6e4ef;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  box-shadow: 0 1.5cqw 3cqw rgba(15, 27, 45, 0.08);
}

.fk__rund .i { width: 6cqw; height: 6cqw; stroke-width: 2; }

.fk__trin--3 .fk__rund { border-color: var(--blue); background: var(--blue); color: #fff; animation-name: fkDone; }

@keyframes fkH { 0% { opacity: 0; transform: translateY(-2cqw); } 8%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@keyframes fkPop1 { 0%, 4% { opacity: 0; transform: scale(0.4); } 10% { opacity: 1; transform: scale(1.1); } 14%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@keyframes fkPop2 { 0%, 26% { opacity: 0; transform: scale(0.4); } 32% { opacity: 1; transform: scale(1.1); } 36%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@keyframes fkPop3 { 0%, 48% { opacity: 0; transform: scale(0.4); } 54% { opacity: 1; transform: scale(1.1); } 58%, 90% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@keyframes fkL1 { 0%, 14% { stroke-dashoffset: 1; opacity: 1; } 26%, 90% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }

@keyframes fkL2 { 0%, 36% { stroke-dashoffset: 1; opacity: 1; } 48%, 90% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }

@keyframes fkDone {
  0%, 60% { border-color: #d6e4ef; background: #fff; color: var(--blue); box-shadow: 0 0 0 0 rgba(15, 160, 226, 0.4); }
  64% { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 0 rgba(15, 160, 226, 0.4); }
  78%, 100% { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 4cqw rgba(15, 160, 226, 0); }
}

/* ===== Captions & footage: a branded clip, captions pop in word by word ===== */

.kl__klip {
  position: absolute;
  left: 50%;
  top: 7cqw;
  width: 34cqw;
  height: 61cqw;
  margin-left: -17cqw;
  overflow: hidden;
  border-radius: 2.6cqw;
  box-shadow: 0 2cqw 5cqw rgba(15, 27, 45, 0.2);
}

/* The "footage": soft moving light behind a talking head */

.kl__optagelse {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 20%, #7cc4ec 0, transparent 45%),
    radial-gradient(circle at 80% 70%, #2a6f97 0, transparent 50%),
    linear-gradient(170deg, #4a90b8, #1d3c55);
  background-size: 160% 160%;
  animation-name: klLys, klZoom;
  animation-timing-function: linear, var(--ease);
}

.kl__hoved,
.kl__krop { position: absolute; left: 50%; background: #0f2233; }

.kl__hoved { top: 16cqw; width: 12cqw; height: 14cqw; margin-left: -6cqw; border-radius: 50%; }

.kl__krop { top: 32cqw; width: 26cqw; height: 32cqw; margin-left: -13cqw; border-radius: 13cqw 13cqw 0 0; }

.kl__ramme { position: absolute; inset: 0; border: 1cqw solid var(--blue); border-radius: inherit; }

.kl__tekst { position: absolute; left: 2cqw; right: 2cqw; bottom: 8cqw; font-size: 4cqw; line-height: 1.35; text-align: center; }

.kl__ord { display: inline-block; padding: 0.3cqw 1.1cqw; border-radius: 1cqw; background: #0f1b2d; color: #fff; }

.kl__ord--fremh { background: #ffc94d; color: #0f1b2d; }

.kl__tekst--2 { opacity: 0; }

.kl__ord--1 { animation-name: klOrd1; }

.kl__ord--2 { animation-name: klOrd2; }

.kl__ord--3 { animation-name: klOrd3; }

.kl__ord--4 { animation-name: klOrd4; }

.kl__ord--5 { animation-name: klOrd5; }

.kl__tekst--1 { animation-name: klSaet1; }

.kl__tekst--2 { animation-name: klSaet2; }

.kl__bar { position: absolute; left: 2.4cqw; right: 2.4cqw; bottom: 3cqw; height: 0.8cqw; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.3); }

.kl__bar i { display: block; height: 100%; background: #fff; transform-origin: left; animation-name: klBar; animation-timing-function: linear; }

@keyframes klLys { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }

/* A small punch-in on the highlighted words, like an editor's cut */

@keyframes klZoom { 0%, 30% { transform: none; } 32%, 46% { transform: scale(1.07); } 48%, 76% { transform: none; } 78%, 94% { transform: scale(1.07); } 100% { transform: none; } }

@keyframes klSaet1 { 0%, 46% { opacity: 1; } 49%, 100% { opacity: 0; } }

@keyframes klSaet2 { 0%, 50% { opacity: 0; } 51%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }

@keyframes klOrd1 { 0%, 4% { opacity: 0; transform: translateY(2cqw); } 8%, 100% { opacity: 1; transform: none; } }

@keyframes klOrd2 { 0%, 14% { opacity: 0; transform: translateY(2cqw); } 18%, 100% { opacity: 1; transform: none; } }

@keyframes klOrd3 { 0%, 28% { opacity: 0; transform: translateY(2cqw) scale(0.8); } 32% { opacity: 1; transform: scale(1.12); } 36%, 100% { opacity: 1; transform: none; } }

@keyframes klOrd4 { 0%, 52% { opacity: 0; transform: translateY(2cqw); } 56%, 100% { opacity: 1; transform: none; } }

@keyframes klOrd5 { 0%, 74% { opacity: 0; transform: translateY(2cqw) scale(0.8); } 78% { opacity: 1; transform: scale(1.12); } 82%, 100% { opacity: 1; transform: none; } }

@keyframes klBar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* ===== Variations: one ad, three hooks, a winner ===== */

.va__ad {
  position: absolute;
  left: 7cqw;
  top: 8cqw;
  width: 38cqw;
  padding: 2cqw;
  border-radius: 3cqw;
  background: #fff;
  box-shadow: 0 2cqw 5cqw rgba(15, 27, 45, 0.12);
}

.va__billede { position: relative; display: block; height: 20cqw; border-radius: 1.8cqw; background: #0f1b2d; animation-name: vaFarve; }

.va__billede i { position: absolute; left: 50%; top: 50%; width: 10cqw; height: 10cqw; margin: -5cqw 0 0 -5cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.85); transform: rotate(12deg); }

.va__hooks { position: relative; display: grid; min-height: 12cqw; margin: 2.4cqw 0.6cqw 2cqw; }

.va__hook { grid-area: 1 / 1; font-size: 4.4cqw; line-height: 1.15; letter-spacing: -0.02em; }

.va__hook--a { opacity: 0; animation-name: vaA; }

.va__hook--b { animation-name: vaB; }

.va__hook--c { opacity: 0; animation-name: vaC; }

.va__knap { display: block; width: 20cqw; height: 5cqw; margin-left: 0.6cqw; border-radius: 99px; background: var(--blue); }

.va__res { position: absolute; left: 53cqw; right: 6cqw; top: 15cqw; display: grid; gap: 4.4cqw; }

.va__r { position: relative; display: flex; align-items: center; gap: 2cqw; }

.va__r span { display: grid; flex: none; place-items: center; width: 6cqw; height: 6cqw; border-radius: 1.6cqw; background: #e4edf4; font-size: 3cqw; font-weight: 700; color: #4b5563; }

.va__r i { flex: 1; height: 2.4cqw; overflow: hidden; border-radius: 99px; background: #e4edf4; }

.va__r em { display: block; height: 100%; border-radius: inherit; background: #9fc9e3; transform-origin: left; }

.va__r--a em { transform: scaleX(0.45); animation-name: vaBarA; }

.va__r--b em { transform: scaleX(0.88); background: var(--blue); animation-name: vaBarB; }

.va__r--c em { transform: scaleX(0.6); animation-name: vaBarC; }

.va__r--b span { background: var(--blue); color: #fff; animation-name: vaBadge; }

.va__vinder {
  position: absolute;
  right: 0;
  top: -4.6cqw;
  padding: 0.6cqw 1.6cqw;
  border-radius: 99px;
  background: #ffc94d;
  font-size: 2.3cqw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation-name: vaVinder;
}

@keyframes vaFarve { 0%, 30% { background: var(--blue); } 32%, 60% { background: #0f1b2d; } 62%, 80% { background: #2fa36b; } 82%, 100% { background: #0f1b2d; } }

@keyframes vaA { 0% { opacity: 0; transform: translateY(2cqw); } 4%, 26% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: translateY(-2cqw); } }

@keyframes vaB { 0%, 28% { opacity: 0; transform: translateY(2cqw); } 34%, 56% { opacity: 1; transform: none; } 60%, 80% { opacity: 0; transform: translateY(-2cqw); } 81% { opacity: 0; transform: translateY(2cqw); } 85%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }

@keyframes vaC { 0%, 58% { opacity: 0; transform: translateY(2cqw); } 64%, 78% { opacity: 1; transform: none; } 82%, 100% { opacity: 0; transform: translateY(-2cqw); } }

@keyframes vaBarA { 0% { transform: scaleX(0); } 24%, 94% { transform: scaleX(0.45); } 100% { transform: scaleX(0); } }

@keyframes vaBarB { 0%, 30% { transform: scaleX(0); background: #9fc9e3; } 54%, 80% { transform: scaleX(0.88); background: #9fc9e3; } 84%, 94% { transform: scaleX(0.88); background: var(--blue); } 100% { transform: scaleX(0); } }

@keyframes vaBarC { 0%, 60% { transform: scaleX(0); } 78%, 94% { transform: scaleX(0.6); } 100% { transform: scaleX(0); } }

@keyframes vaBadge { 0%, 80% { background: #e4edf4; color: #4b5563; } 84%, 94% { background: var(--blue); color: #fff; } 100% { background: #e4edf4; color: #4b5563; } }

@keyframes vaVinder { 0%, 80% { opacity: 0; transform: translateY(1.5cqw) scale(0.6); } 85% { opacity: 1; transform: scale(1.1); } 88%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* ===== Kinetic type: Stop the scroll. / Say more with less. / Make it MOVE. ===== */

.kt__s { position: absolute; left: 8cqw; right: 6cqw; display: grid; justify-items: start; font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; }

.kt__o,
.kt__less { display: inline-block; }

.kt__s1 { top: 7cqw; font-size: 15.5cqw; animation-name: ktS1; }

.kt__s2 { top: 15cqw; font-size: 13.5cqw; opacity: 0; animation-name: ktS2; }

.kt__s3 { top: 9cqw; opacity: 0; animation-name: ktS3; }

.kt__scroll { margin-left: 0.6cqw; color: var(--blue); }

.kt__linje { display: inline-flex; align-items: baseline; gap: 2.4cqw; margin-top: 1.4cqw; }

.kt__less { position: relative; padding: 0 1.6cqw 0.8cqw; color: #fff; }

.kt__boks { position: absolute; inset: 0.6cqw 0 -0.4cqw; z-index: -1; border-radius: 1.4cqw; background: var(--blue); transform-origin: left; animation-name: ktBoks; }

.kt__less span { position: relative; display: inline-block; animation-name: ktLess; }

.kt__less { isolation: isolate; }

.kt__dot { margin-left: -2cqw; color: var(--blue); }

.kt__make { font-size: 12.5cqw; }

.kt__move { font-size: 25cqw; letter-spacing: -0.03em; color: var(--blue); transform-origin: left bottom; }

.kt__move i { font-style: normal; }

/* Scenes: each is on screen for its own part of the 6 s */

@keyframes ktS1 { 0% { opacity: 1; transform: none; } 26% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: translateY(-4cqw); } }

@keyframes ktS2 { 0%, 30% { opacity: 0; transform: none; } 31%, 58% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(-4cqw); } }

@keyframes ktS3 { 0%, 62% { opacity: 0; transform: none; } 63%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4cqw); } }

/* Words: snap up into place one after another */

.kt__stop { animation-name: ktStop; }

.kt__the { animation-name: ktThe; }

.kt__scroll { animation-name: ktScroll; }

.kt__say { animation-name: ktSay; }

.kt__with { animation-name: ktWith; }

.kt__dot { animation-name: ktDot; }

.kt__make { animation-name: ktMake; }

.kt__move { animation-name: ktMove; }

@keyframes ktStop { 0% { opacity: 0; transform: translateY(5cqw); } 5%, 100% { opacity: 1; transform: none; } }

@keyframes ktThe { 0%, 5% { opacity: 0; transform: translateY(5cqw); } 10%, 100% { opacity: 1; transform: none; } }

@keyframes ktScroll { 0%, 10% { opacity: 0; transform: translateY(5cqw) scale(0.9); } 15% { opacity: 1; transform: scale(1.06); } 18%, 100% { opacity: 1; transform: none; } }

@keyframes ktSay { 0%, 31% { opacity: 0; transform: translateY(5cqw); } 37%, 100% { opacity: 1; transform: none; } }

@keyframes ktWith { 0%, 40% { opacity: 0; transform: translateY(5cqw); } 44%, 100% { opacity: 1; transform: none; } }

@keyframes ktBoks { 0%, 44% { transform: scaleX(0); } 50%, 100% { transform: none; } }

@keyframes ktLess { 0%, 46% { opacity: 0; transform: translateY(3cqw); } 51%, 100% { opacity: 1; transform: none; } }

@keyframes ktDot { 0%, 50% { opacity: 0; transform: scale(0); } 53%, 100% { opacity: 1; transform: none; } }

@keyframes ktMake { 0%, 63% { opacity: 0; transform: translateY(5cqw); } 69%, 100% { opacity: 1; transform: none; } }

@keyframes ktMove {
  0%, 69% { opacity: 0; transform: translateY(6cqw) scale(0.85); }
  74% { opacity: 1; transform: scale(1.08); }
  78% { opacity: 1; transform: none; }
  84% { transform: scale(1.04); }
  88%, 100% { opacity: 1; transform: none; }
}

/* ===== Lion: the outline draws itself, then fills in ===== */

.lv__svg { position: absolute; left: 50%; top: 50%; width: 52cqw; height: auto; transform: translate(-50%, -50%); overflow: visible; }

.lv__del {
  fill: #0f1b2d;
  fill-opacity: 1;
  stroke: var(--blue);
  stroke-opacity: 0;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation-name: lvTegn;
}

/* Each shape starts a moment after the one before */

.lv__del--1 { animation-delay: 0.12s; }

.lv__del--2 { animation-delay: 0.24s; }

.lv__del--3 { animation-delay: 0.36s; }

.lv__del--4 { animation-delay: 0.48s; }

.lv__del--5 { animation-delay: 0.6s; }

.lv__del--6 { animation-delay: 0.72s; }

.lv__del--7 { animation-delay: 0.84s; }

@keyframes lvTegn {
  0% { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 1; opacity: 1; }
  38% { stroke-dashoffset: 0; fill-opacity: 0; stroke-opacity: 1; }
  52% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
  84% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; opacity: 0; }
}

/* Reduced motion: no animation, just the finished frame */

@media (prefers-reduced-motion: reduce) {
  .mgl * { animation: none !important; }
}

/* ---------- Showreel ---------- */

.reel {
  position: relative;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: #0e0f11;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-lg);
}

.reel video { width: 100%; height: 100%; object-fit: cover; }

.reel__knap {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(13, 19, 25, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0.75;
  transition: opacity 0.25s, background-color 0.25s, transform 0.25s var(--ease);
}

.reel:hover .reel__knap,
.reel__knap:focus-visible { opacity: 1; }

.reel__knap:hover { background: var(--blue); transform: scale(1.06); }

.reel__knap .i { width: 16px; height: 16px; }

.reel__pause { stroke-width: 3; }

.reel__play { display: none; margin-left: 2px; }

.reel.is-paused .reel__pause { display: none; }

.reel.is-paused .reel__play { display: block; }

/* Small frames: hide the note first, then the spec */

@container (max-width: 260px) {
  .slot__note { display: none; }
}

@container (max-width: 170px) {
  .slot__spec { display: none; }
  .slot::after { display: none; }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

.sec__head .lead { max-width: 34em; }

/* ---------- Why motion ---------- */

.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.why__head .h2 { margin-bottom: 18px; }

.whybox {
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid rgba(15, 160, 226, 0.25);
  border-radius: var(--r-xl);
  background: var(--blue-tint);
}

.whybox__label {
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

.whybox__tekst {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.whybox__liste {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(15, 160, 226, 0.22);
}

.whybox__liste li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; line-height: 1.5; color: var(--muted); }

.whybox__liste .i { width: 16px; height: 16px; margin-top: 4px; stroke-width: 2.6; color: var(--blue); }

.whybox__liste strong { color: var(--ink); }

/* ---------- Work ---------- */

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.seg button {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.seg button:not([aria-pressed="true"]):hover { color: var(--ink); }

/* ---------- Cards ---------- */

.fcard {
  padding: 12px 12px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s, opacity 0.8s var(--ease);
}

.fcard h3 { margin: 0 14px 8px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }

.fcard p { margin-inline: 14px; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- Formats ---------- */

.fmt {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.fmt__copy .h2 { margin-bottom: 18px; }

.fmt__copy .lead { margin-bottom: 30px; }

.fmt__info {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}

.fmt__info div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }

.fmt__info dt {
  padding-top: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.fmt__info dd { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }

.fmt__info dd.is-new { animation: swap 0.5s var(--ease); }

@keyframes swap { from { opacity: 0; transform: translateY(6px); } }

/* The frame morphs between formats. One unit scales the whole stage down on
   small screens, so the numbers below are the desktop sizes in pixels. */

.fmt__stage {
  --u: min(1px, calc((100vw - 2 * var(--gutter)) / 600));
  justify-self: center;
  width: 100%;
  display: grid;
  place-items: center;
  gap: 16px;
  min-height: calc(520 * var(--u));
}

.fmt__frame {
  position: relative;
  width: calc(var(--fw) * var(--u));
  height: calc(var(--fh) * var(--u));
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line), var(--shadow-lg);
  transition: width 0.7s var(--ease), height 0.7s var(--ease);
}

.fmt__frame.is-916 { --fw: 270; --fh: 480; }

.fmt__frame.is-45 { --fw: 384; --fh: 480; }

.fmt__frame.is-11 { --fw: 440; --fh: 440; }

.fmt__frame.is-169 { --fw: 580; --fh: 326; }

/* The ad is drawn live at full size (e.g. 1080 × 1920) and scaled to cover
   the frame by formats-ad.js, so it follows the frame while it morphs. */

.fmt__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #fff;
}

.fmt__live {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  user-select: none;
}

.fmt__poster { width: 100%; height: 100%; object-fit: cover; }

.fmt__media.is-live .fmt__poster { display: none; }

.fmt__dim { font-family: var(--mono); font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------- Process timeline ---------- */

.tl {
  --p: 0;
  position: relative;
  padding: 26px 26px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.tl__ruler {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 2.5%) bottom / 100% 6px no-repeat;
}

.tl__clips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 14px 0 6px;
}

.tl__clip {
  position: relative;
  height: 30px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--blue-tint);
}

/* Each clip fills up as the playhead passes over it */

.tl__clip::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(clamp(0, calc(var(--p) * 4 - var(--n)), 1));
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
}

.tl__clip--1 { --n: 0; }

.tl__clip--2 { --n: 1; }

.tl__clip--3 { --n: 2; }

.tl__clip--4 { --n: 3; }

.tl__head {
  position: absolute;
  top: 18px;
  height: 90px;
  left: calc(26px + (100% - 52px) * var(--p));
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--ink);
  pointer-events: none;
}

.tl__head::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -5px;
  width: 12px;
  height: 10px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--ink);
}

.tl__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

.tl__step {
  padding: 18px 16px 24px 0;
  opacity: 0.45;
  transition: opacity 0.5s var(--ease);
}

.tl__step.is-on { opacity: 1; }

.tl__tc {
  display: block;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--blue-dark);
}

.tl__step h3 { margin-bottom: 8px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }

.tl__step p { font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- Budget ---------- */

.budget {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 5vw, 60px);
  overflow: clip;
  border-radius: var(--r-xl);
  background: var(--dark);
  color: #fff;
}

.budget::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  left: -15%;
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(15, 160, 226, 0.3) 0%, rgba(15, 160, 226, 0) 65%);
}

.budget .eyebrow { color: var(--blue-light); }

.budget .h2 { margin-bottom: 16px; }

.budget h2 em { color: var(--blue-light); }

/* These headings read best with the blue half on its own line */

.budget h2 em,
.fmt__copy h2 em,
.faq__head h2 em { display: block; }

.budget__copy > p:not(.eyebrow) { max-width: 32em; margin-bottom: 28px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }

.budget__label {
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.scopes { display: grid; gap: 10px; }

.scope {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  transition: background-color 0.3s, border-color 0.3s;
}

.scope:hover { border-color: rgba(46, 179, 239, 0.45); background: rgba(46, 179, 239, 0.08); }

.scope h3 { margin-bottom: 4px; font-size: 1.1rem; }

.scope h3 small { margin-left: 6px; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, 0.5); }

.scope p { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); }

/* A little level meter: more bars = bigger scope */

.scope__bar {
  position: relative;
  display: block;
  height: 38px;
  margin-top: 3px;
  border-radius: 8px;
  background:
    linear-gradient(var(--blue-light), var(--blue-light)) 8px 100% / 6px 40% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) 19px 100% / 6px 70% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) 30px 100% / 6px 100% no-repeat;
}

.scope__bar--2 {
  background:
    linear-gradient(var(--blue-light), var(--blue-light)) 8px 100% / 6px 40% no-repeat,
    linear-gradient(var(--blue-light), var(--blue-light)) 19px 100% / 6px 70% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)) 30px 100% / 6px 100% no-repeat;
}

.scope__bar--3 {
  background:
    linear-gradient(var(--blue-light), var(--blue-light)) 8px 100% / 6px 40% no-repeat,
    linear-gradient(var(--blue-light), var(--blue-light)) 19px 100% / 6px 70% no-repeat,
    linear-gradient(var(--blue-light), var(--blue-light)) 30px 100% / 6px 100% no-repeat;
}

.budget__note { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.45); }

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

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.faq__head { position: sticky; top: calc(var(--hdr-h) + 24px); }

.faq__head .h2 { margin-bottom: 16px; }

.faq__list { display: grid; gap: 10px; }

.faq details {
  border: 1px solid transparent;
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s;
}

.faq details[open] { border-color: rgba(15, 160, 226, 0.3); box-shadow: var(--shadow); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

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

.faq summary .i { color: var(--faint); transition: transform 0.3s var(--ease), color 0.3s; }

.faq details[open] summary .i { transform: rotate(180deg); color: var(--blue); }

.faq details p { padding: 0 22px 22px; line-height: 1.7; color: var(--muted); }

.faq details[open] p { animation: swap 0.4s var(--ease); }

/* ---------- Contact ---------- */

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pcard .field { display: grid; gap: 7px; }

.pcard .field label,
.valggruppe legend { font-size: 14.5px; font-weight: 700; color: var(--ink-soft); }

.field__opt { margin-left: 4px; font-weight: 400; color: var(--faint); }

.pcard .field input,
.pcard .field select,
.pcard .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.pcard .field textarea { resize: vertical; line-height: 1.55; }

.pcard .field input::placeholder,
.pcard .field textarea::placeholder { color: #a3a9b0; }

.pcard .field input:focus,
.pcard .field select:focus,
.pcard .field textarea:focus {
  border-color: var(--blue);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(15, 160, 226, 0.14);
}

.pcard .field.is-fejl input,
.pcard .field.is-fejl select,
.pcard .field.is-fejl textarea { border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1); }

.form__fejl { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fdecee; color: #a4202e; font-size: 14.5px; }

.form__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--faint); }

.form__note .i { width: 15px; height: 15px; margin-top: 2px; }

.form__tak { justify-content: center; align-items: center; padding: 20px 10px; text-align: center; outline: none; }

.form__tak-ico {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue);
}

.form__tak-ico .i { width: 30px; height: 30px; stroke-width: 2.4; }

.form__tak h3 { margin-bottom: 8px; font-size: 1.4rem; }

.form__tak p { max-width: 28em; margin-inline: auto; color: var(--muted); }

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

/* ==========================================================================
   Entrances
   ========================================================================== */

.js .reveal:not(.is-in) .eyebrow::before,
.js .reveal.eyebrow:not(.is-in)::before { transform: scaleX(0); }

.js .fmt__copy.reveal:not(.is-in) { transform: translateX(-36px); }

.js .whybox.reveal:not(.is-in),
.js .fmt__stage.reveal:not(.is-in) { transform: translateX(36px); }

.js .budget.reveal:not(.is-in),
.js .reel.reveal:not(.is-in),
.js .pcard.reveal:not(.is-in) { transform: translateY(28px) scale(0.97); }

.fcard.reveal.is-in { transition-delay: 0s; }

/* The hero is the first thing you see: it fades in on load without JS */

.phero .reveal,
.js .phero .reveal:not(.is-in) {
  opacity: 1;
  transform: none;
  transition: none;
  animation: heroIn 0.9s var(--ease) var(--d, 0s) backwards;
}

@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
  .phero__grid,
  .fmt,
  .budget,
  .faq,
  .why { grid-template-columns: minmax(0, 1fr); }
  .phero--form .phero__grid { grid-template-columns: minmax(0, 1fr); }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__head { position: static; }
  .tl__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}

@media (max-width: 640px) {
  .phero__cta { flex-direction: column; }
  .phero__cta .btn { width: 100%; }
  .cards--3 { grid-template-columns: minmax(0, 1fr); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .fmt__info div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* On a phone the timeline turns vertical */
  .tl { padding: 22px 20px 6px 42px; }
  .tl__ruler,
  .tl__clips { display: none; }
  .tl__head { top: 22px; bottom: 22px; left: 20px; width: 2px; height: auto; margin: 0; background: var(--line); }
  .tl__head::before { display: none; }
  .tl__head::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: calc(var(--p) * 100%);
      border-radius: 2px;
      background: var(--blue);
    }
  .tl__steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tl__step { padding: 0 0 26px; }
}

/* ---------- Tilføjet ved integrationen ---------- */

/* Hero-baggrund: mørk med et blåt skær i sitets farve. Skal der et billede
   ind senere: background-image: url("../img/hero-motion.jpg"), … */
.phero--motion .phero__bg {
  background-image:
    radial-gradient(55% 65% at 82% 18%, rgba(15, 160, 226, 0.26), transparent 62%),
    radial-gradient(45% 55% at 8% 92%, rgba(15, 160, 226, 0.14), transparent 60%);
}


/* ---------- Mobil: formularen åbnes fra en knap ----------
   På computer står formularen i hero'en. På mobil fylder den for meget, så den
   skjules dér, og knappen "Har I en idé?" åbner den samme formular i et vindue
   (sitets .modal). motion-graphics.js flytter kortet ind i vinduet og tilbage.
   Uden JavaScript står formularen bare i hero'en som før. */
.mg-ideknap { display: none; }

@media (max-width: 960px) {
  .js .phero__grid > .pcard { display: none; }
  .js .mg-ideknap { display: inline-flex; }
  .js .mg-cta-proces { display: none; }
  .js .mg-cta-arbejde {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
    color: #fff;
  }
}

.modal--ide .modal__box { padding: 0; }
.modal--ide .modal__luk { z-index: 2; }
.modal--ide .pcard { border-radius: 0; box-shadow: none; }
.modal--ide .pcard__titel { padding-right: 48px; }

/* ---------- Mobil: formatknapperne står lige over rammen ----------
   Så man ser skiftet uden at scrolle. Tekstblokken "opløses", så knapperne,
   rammen og oplysningerne kan stilles i den rækkefølge. */
@media (max-width: 960px) {
  .fmt { gap: 0; }
  .fmt__copy { display: contents; }
  .fmt .seg { order: 1; justify-self: start; margin-bottom: 22px; }
  .fmt__stage { order: 2; margin-bottom: 26px; }
  .fmt__info { order: 3; }
}

/* ---------- Mobil: budgeteksemplerne som karrusel ---------- */
@media (max-width: 767px) {
  .scopes {
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 300px);
    grid-template-columns: none;
    margin-inline: calc(clamp(28px, 5vw, 60px) * -1);
    padding: 2px clamp(28px, 5vw, 60px) 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(28px, 5vw, 60px);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .scopes::-webkit-scrollbar { display: none; }
  .scope { scroll-snap-align: start; }
}

/* ---------- Mobil: FAQ viser fire spørgsmål og en knap til resten ---------- */
.faq__flere { display: none; }

@media (max-width: 767px) {
  .faq.kan-folde:not(.er-udfoldet) [data-faq-ekstra] { display: none; }
  .faq.kan-folde:not(.er-udfoldet) .faq__flere { display: inline-flex; justify-self: start; margin-top: 4px; }
  .faq summary { padding: 16px 18px; font-size: 1rem; }
  .faq details p { padding: 0 18px 18px; }
}