/* ============ Tokens ============ */
:root {
  --primary: #3B82F6;
  --primary-hover: #2563EB;
  --primary-soft: rgba(59, 130, 246, 0.08);

  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-muted: #F3F4F7;

  --ink: #0B0D12;
  --text-primary: #0B0D12;
  --text-secondary: #5A6170;
  --text-muted: #8B91A0;

  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);

  --success: #10B981;
  --error: #EF4444;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px -8px rgba(15, 23, 42, 0.10);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.03), 0 20px 44px -18px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 32px 72px -28px rgba(15, 23, 42, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-display: 'General Sans', 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 520px at 50% -4%, rgba(59, 130, 246, 0.10), transparent 70%),
    radial-gradient(640px 420px at 88% 6%, rgba(96, 165, 250, 0.08), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}

/* Very fine grain so large white areas don't read as flat */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ Typography ============ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: 72px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(2rem, 1.15rem + 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head p {
  font-size: 1.125rem;
  margin: 0 auto;
}

.text-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.3s var(--ease);
}

.text-link:hover {
  background-size: 100% 1px;
}

/* ============ Buttons ============ */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

button:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(37, 99, 235, 0.30),
    0 8px 20px -8px rgba(37, 99, 235, 0.55);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 4px rgba(37, 99, 235, 0.30),
    0 14px 28px -10px rgba(37, 99, 235, 0.60);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-xs);
}

.btn-secondary:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.22), var(--shadow-sm);
}

.cta-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 32px 0;
}

/* ============ Sections ============ */
section {
  position: relative;
  padding: 112px 0;
  background: var(--surface);
}

.section--tint {
  background: var(--bg);
}

/* Dark sections re-point the tokens, so cards, text and borders inside
   them follow without per-component overrides */
.section--dark {
  --ink: #F5F6F8;
  --text-primary: #F5F6F8;
  --text-secondary: rgba(245, 246, 248, 0.64);
  --text-muted: rgba(245, 246, 248, 0.44);
  --surface: #25262C;
  --surface-muted: #2C2D34;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  background: #1C1D22;
  color: var(--ink);
}

.section--dark .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.section--dark .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

/* ============ Reveal on scroll ============ */
/* Uses the individual `translate` property + an animation, so it never
   fights the `transform` transitions that hover states rely on. */
@keyframes reveal {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

.js [data-reveal]:not(.is-in) {
  opacity: 0;
}

.js [data-reveal].is-in {
  animation: reveal 0.7s var(--ease) var(--d, 0s) both;
}

/* ============ Cards (generic) ============ */
.card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* ============ Nav ============ */
.site-nav {
  position: sticky;
  top: 20px;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.07), var(--shadow-sm);
}

.nav-pill a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}

.nav-pill a:hover {
  color: var(--ink);
}

/* Brand mark: always one tap back to home */
.nav-pill .nav-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: -14px;
  padding-right: 24px;
  color: var(--ink);
  font-family: 'Outfit', var(--font-display, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav-pill .nav-brand::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 20px;
  translate: 0 -50%;
  background: rgba(15, 23, 42, 0.1);
}

.nav-brand-name {
  display: inline-flex;
  align-items: center;
}

.nav-brand-name img {
  display: block;
  height: 24px;
  width: auto;
}

.nav-brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 4px 8px rgba(21, 101, 216, 0.35));
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.nav-brand-mark svg {
  width: 100%;
  height: 100%;
}

.nav-brand:hover .nav-brand-mark {
  transform: rotate(-8deg) scale(1.06);
}

.nav-brand:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ============ Hero ============ */
.hero {
  padding: 44px 0 80px;
  overflow: hidden;
  background: transparent;
}

.hero .container {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  text-align: center;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  margin-bottom: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
}

.live-badge span {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
  50% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.8); }
}

.delivery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: blink 2s infinite, glow 2s infinite;
}

.hero h1 {
  margin-bottom: 12px;
}

.hero-tagline {
  max-width: 640px;
  margin: 0 auto 16px;
  font-size: clamp(1.2rem, 1.02rem + 0.7vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-sub {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.hero-sub:last-of-type {
  margin-bottom: 32px;
}

.hero .cta-group {
  justify-content: center;
}

/* ============ Hero: hand-off between the three pieces ============ */
/* Rides on the existing timing (left 0s, asset 2s, right 4s) without
   touching it: line A draws just before the asset lands, line B just
   before Mickey's reply appears. */
.hero-composition {
  position: relative;
}

.hero-flow {
  display: none;
}

@media (min-width: 901px) {
  .hero-flow {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 917px;
    height: 314px;
    margin-left: -458.5px;
    pointer-events: none;
  }
}

.hero-flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flow-line {
  stroke: rgba(59, 130, 246, 0.6);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
}

/* A solid stroke in the mask reveals the dashed line as it "draws" */
.flow-draw {
  stroke: #fff;
  stroke-width: 6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.flow-draw--a { animation: flowDraw 0.7s var(--ease) 1.3s forwards; }
.flow-draw--b { animation: flowDraw 0.8s var(--ease) 3s forwards; }

.flow-arrow {
  stroke: rgba(59, 130, 246, 0.75);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.flow-arrow--a { animation: fadeIn 0.2s ease-out 1.95s forwards; }
.flow-arrow--b { animation: fadeIn 0.2s ease-out 3.75s forwards; }

@keyframes flowDraw {
  to { stroke-dashoffset: 0; }
}

/* Small captions above the bubbles: who delivers, who picks it up */
.flow-tag {
  position: absolute;
  top: 58px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  opacity: 0;
}

.flow-tag--in {
  left: 34px;
  animation: flowTagIn 0.5s var(--ease) 0.6s forwards;
}

.flow-tag--out {
  right: 52px;
  top: 68px;
  animation: flowTagIn 0.5s var(--ease) 4.2s forwards;
}

.flow-tag-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary-hover);
}

.flow-tag-icon--ok {
  background: rgba(34, 197, 94, 0.14);
  color: #16A34A;
}

.flow-tag-icon svg {
  width: 10px;
  height: 10px;
}

/* The file itself, attached to Sophie's message — same name as the asset */
.flow-attachment {
  position: absolute;
  left: 34px;
  top: 234px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  animation: flowTagIn 0.5s var(--ease) 1s forwards;
}

.flow-attachment svg {
  width: 12px;
  height: 12px;
  color: var(--primary-hover);
}

.flow-attachment-extra {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--primary-soft);
  font-weight: 600;
  color: var(--primary-hover);
}

@keyframes flowTagIn {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-draw {
    animation: none;
    stroke-dashoffset: 0;
  }

  .flow-arrow,
  .flow-tag,
  .flow-attachment {
    animation: none;
    opacity: 1;
  }
}

/* ============ Hero: floating work examples ============ */
/* Own layer and own animations: the hero composition's timing is untouched.
   Individual transform properties (translate / rotate / scale) keep the
   entrance, the idle float and the tilt from overriding each other. */
.hero-floats {
  display: none;
}

/* From 1300px the side margins fit every card fully on screen */
@media (min-width: 1300px) {
  .hero-floats {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
}

.hero-float {
  position: absolute;
  opacity: 0;
  animation:
    floatIn 0.9s var(--ease) var(--in, 0.3s) forwards,
    floatBob var(--bob, 7s) ease-in-out var(--in, 0.3s) infinite;
}

img.hero-float {
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.14));
}

/* Positions are measured from the center, so they stay in the side margins
   next to the composition instead of drifting to the screen edges */
.hero-float--1 { width: 124px; left: calc(50% - 624px); top: 110px; rotate: -5deg; --in: 0.3s; --bob: 7s; }
.hero-float--2 { width: 96px; left: calc(50% - 548px); bottom: 64px; rotate: 4deg; --in: 0.45s; --bob: 8.5s; }
.hero-float--3 { width: 112px; right: calc(50% - 616px); top: 150px; rotate: 6deg; --in: 0.6s; --bob: 6.5s; }
.hero-float--4 { width: 128px; right: calc(50% - 584px); bottom: 104px; rotate: -3deg; --in: 0.75s; --bob: 9s; }
.hero-float--5 { right: calc(50% - 540px); top: 92px; rotate: -4deg; --in: 0.9s; --bob: 7.5s; }
.hero-float--6 { left: calc(50% - 596px); bottom: 210px; rotate: 3deg; --in: 1.05s; --bob: 8s; }

.hero-float-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

@keyframes floatIn {
  from { opacity: 0; scale: 0.92; }
  to { opacity: 1; scale: 1; }
}

@keyframes floatBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float {
    opacity: 1;
    animation: none;
  }
}

/* ============ Interactive gradient background ============ */
.has-gradient {
  isolation: isolate;
  overflow: hidden;
}

.has-gradient .container {
  position: relative;
  z-index: 1;
}

.gradient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Soft radial blobs orbiting at different speeds. Multiply tints the light
   ground and deepens gently where blobs overlap.
   Blobs are squares with a closest-side gradient that reaches zero exactly
   at the edge, so no edge can ever show — whatever the section's shape.
   Only transforms animate, which keeps it on the compositor. */
.blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  aspect-ratio: 1;
  margin: -35% 0 0 -35%;
  mix-blend-mode: multiply;
  will-change: transform;
  background: radial-gradient(circle closest-side, rgba(var(--c), 0.6), rgba(var(--c), 0));
}

.blob--1 {
  --c: 147, 197, 253;
  animation: blobVertical 30s ease infinite;
}

.blob--2 {
  --c: 191, 219, 254;
  transform-origin: calc(50% - 400px);
  animation: blobCircle 20s reverse infinite;
}

.blob--3 {
  --c: 125, 211, 252;
  margin: calc(-35% + 120px) 0 0 calc(-35% - 300px);
  transform-origin: calc(50% + 400px);
  animation: blobCircle 40s linear infinite;
}

.blob--4 {
  --c: 186, 230, 253;
  opacity: 0.6;
  transform-origin: calc(50% - 200px);
  animation: blobHorizontal 40s ease infinite;
}

.blob--5 {
  --c: 165, 200, 250;
  width: 110%;
  margin: -55% 0 0 -55%;
  transform-origin: calc(50% - 800px) calc(50% + 800px);
  animation: blobCircle 20s ease infinite;
}

/* Centered on 0,0 so translate() in the script puts it right under the cursor */
.blob--pointer {
  --c: 147, 197, 253;
  top: 0;
  left: 0;
  width: 55%;
  margin: -27.5% 0 0 -27.5%;
  opacity: 0.7;
}

/* Calms the edges and blends the top into the white section above,
   so the headline and buttons always sit on a quiet ground */
.gradient-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 55%, transparent 50%, rgba(247, 248, 250, 0.75) 100%),
    linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0) 28%);
}

@keyframes blobCircle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes blobVertical {
  0% { transform: translateY(-50%); }
  50% { transform: translateY(50%); }
  100% { transform: translateY(-50%); }
}

@keyframes blobHorizontal {
  0% { transform: translateX(-50%) translateY(-10%); }
  50% { transform: translateX(50%) translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}


/* Hero composition — sizes and timing tuned by hand, keep as-is */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Height comes from the middle asset; the two animations center against it */
.hero-composition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 17px;
  height: 314px;
}

.hero-animation {
  width: 288px;
  height: 187px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

#lottie-left {
  animation: fadeIn 0.4s ease-out forwards;
}

#lottie-right {
  animation: fadeIn 0.4s ease-out 4s forwards;
}

.hero-asset {
  width: 293px;
  height: 314px;
  flex-shrink: 0;
  margin: 0;
  opacity: 0;
  animation: slideInUp 0.6s ease-out 2s forwards;
}

.hero-asset img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============ Asset types ============ */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: left;
}

.asset-card {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.asset-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
}

/* Placeholder now, looping preview later — hence the fixed ratio */
.asset-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--surface-muted);
  overflow: hidden;
}

/* A hairline ring on top of the media itself: an edge-to-edge white or
   near-white video would otherwise hide an inset border painted on the
   card, since box-shadow paints behind child content. */
.asset-preview::after,
.example-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  pointer-events: none;
}

.asset-preview img,
.asset-preview video,
.portfolio-item img,
.portfolio-item video,
.example-media video,
.step-visual img,
.brand-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.asset-card:hover .asset-preview img,
.asset-card:hover .asset-preview video,
.portfolio-item:hover img,
.portfolio-item:hover video,
.example-card:hover .example-media video {
  transform: scale(1.045);
}

.asset-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  padding: 0 8px;
}

.asset-types {
  margin: 0;
  padding: 0 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.asset-note {
  margin: 40px 0 0;
  text-align: center;
  font-size: 0.95rem;
}

/* ============ Comparison ============ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.compare {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 1px var(--border), var(--shadow-lg);
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  text-align: left;
}

.compare-table thead td:first-child,
.compare-table tbody th {
  width: 19%;
}

.compare-table th,
.compare-table td {
  padding: 18px 22px;
  vertical-align: middle;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.compare-table thead th {
  padding-top: 30px;
  padding-bottom: 22px;
  vertical-align: bottom;
}

.col-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.col-name img {
  display: block;
  height: 30px;
  width: auto;
}

.col-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}

.compare-table tbody th {
  font-weight: 600;
  color: var(--ink);
}

.compare-table tbody tr > * {
  border-top: 1px solid var(--border);
  transition: background-color 0.2s var(--ease);
}

/* Row highlight helps the eye track one criterion across columns */
.compare-table tbody tr:hover > * {
  background: rgba(15, 23, 42, 0.02);
}

.compare-table tbody td {
  line-height: 1.4;
}

.compare-table tbody td > .rate {
  margin-right: 10px;
}

/* The MakeItMove lane: one continuous tinted column, rounded top and bottom */
.compare-table .is-us {
  background: rgba(59, 130, 246, 0.06);
  box-shadow: inset 1px 0 0 rgba(59, 130, 246, 0.18), inset -1px 0 0 rgba(59, 130, 246, 0.18);
  color: var(--ink);
}

.compare-table tbody tr:hover > .is-us {
  background: rgba(59, 130, 246, 0.09);
}

.compare-table thead .is-us {
  border-radius: 16px 16px 0 0;
  box-shadow:
    inset 1px 0 0 rgba(59, 130, 246, 0.18),
    inset -1px 0 0 rgba(59, 130, 246, 0.18),
    inset 0 1px 0 rgba(59, 130, 246, 0.18);
}

.compare-table thead .is-us .col-name {
  color: var(--primary-hover);
}

.compare-table tfoot td {
  padding-top: 20px;
  padding-bottom: 26px;
}

.compare-table tfoot .is-us {
  border-radius: 0 0 16px 16px;
  box-shadow:
    inset 1px 0 0 rgba(59, 130, 246, 0.18),
    inset -1px 0 0 rgba(59, 130, 246, 0.18),
    inset 0 -1px 0 rgba(59, 130, 246, 0.18);
}

.compare-table tfoot .btn-primary {
  width: 100%;
}

.rate {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: -4px;
  font-size: 11px;
  font-weight: 700;
}

.rate--good { background: rgba(34, 197, 94, 0.14); color: #16A34A; }
.rate--mid { background: rgba(245, 158, 11, 0.16); color: #B45309; }
.rate--poor { background: rgba(239, 68, 68, 0.12); color: #DC2626; }

/* Rows settle in one after another once the table is revealed; the button row comes last */
.js .compare:not(.is-in) tbody tr,
.js .compare:not(.is-in) tfoot tr {
  opacity: 0;
}

.js .compare.is-in tbody tr,
.js .compare.is-in tfoot tr {
  animation: reveal 0.6s var(--ease) calc(0.2s + var(--i) * 0.07s) both;
}

/* Check icons in the pricing lists */
.why-ic {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.why-ic--yes {
  background: rgba(34, 197, 94, 0.14);
  color: #16A34A;
}

/* ============ Portfolio ============ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.portfolio-item {
  position: relative;
  aspect-ratio: 4 / 3; /* same export as the examples on the service pages */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-muted);
}

/* Second row: portrait social-ad format (1080x1350) instead of 4:3 */
.portfolio-item:nth-child(4),
.portfolio-item:nth-child(5),
.portfolio-item:nth-child(6) {
  aspect-ratio: 4 / 5;
}

/* Hairline ring (always on, so a white export still shows the card's edge)
   plus a bottom darken-on-hover so the tag stays readable on light footage.
   Both live in one box-shadow (an element gets only one ::after, and its
   opacity would fade the ring too), animating just the second layer's alpha. */
.portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.08),
    inset 0 -120px 80px -60px rgba(11, 13, 18, 0);
  transition: box-shadow 0.3s var(--ease);
  pointer-events: none;
}

.portfolio-item:hover::after,
.portfolio-item:focus-within::after {
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.08),
    inset 0 -120px 80px -60px rgba(11, 13, 18, 0.55);
}

/* Reveals which service the asset is, matching the frosted step-chip style */
.portfolio-tag {
  position: absolute;
  z-index: 1; /* paint above the ::after darkening overlay, which is last in DOM order */
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 24px -10px rgba(15, 23, 42, 0.45);
  font-size: 0.82rem;
  font-weight: 600;
  /* Fixed dark ink, not the --ink token: the pill is always a light glass
     surface, even inside a dark section where --ink flips to near-white */
  color: #0B0D12;
  white-space: nowrap;
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.3s var(--ease), translate 0.3s var(--ease);
}

.portfolio-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.portfolio-item:hover .portfolio-tag,
.portfolio-item:focus-within .portfolio-tag {
  opacity: 1;
  translate: 0 0;
}

@media (hover: none) {
  /* No hover on touch: show the tag and its backdrop right away instead of hiding info behind a gesture */
  .portfolio-item::after {
    box-shadow:
      inset 0 0 0 1px rgba(15, 23, 42, 0.08),
      inset 0 -120px 80px -60px rgba(11, 13, 18, 0.55);
  }

  .portfolio-tag {
    opacity: 1;
    translate: 0 0;
  }
}

/* ============ How it works (stacked steps) ============ */
/* No overflow on this section: it would make the section the scroll
   container and switch off the sticky stacking */
/* Bright brand blue, lit from within: soft cyan and white light drifting
   around, plus a glow that follows the cursor. The moving layer clips itself,
   so the section keeps overflow visible for the sticky cards. */
.section--blue {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #3079F2 0%, #3B82F6 40%, #4A8EF8 100%);
}

.section--blue > .container {
  position: relative;
  z-index: 1;
}

.section-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.section--blue .section-eyebrow {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #fff;
}

.section--blue .section-head h2 {
  color: #fff;
}

.section--blue .section-head p {
  color: rgba(255, 255, 255, 0.82);
}

.step-block {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
  padding: 56px;
  margin-bottom: 28px;
  border-radius: 32px;
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 #fff,
    0 40px 80px -32px rgba(10, 20, 60, 0.5);
}

.step-block:last-child {
  margin-bottom: 0;
}

.step-eyebrow {
  display: inline-flex;
  gap: 4px;
  padding: 6px 14px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-hover);
}

.step-eyebrow span {
  font-weight: 500;
  color: rgba(37, 99, 235, 0.6);
}

.step-heading {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}

.step-body {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

.step-body + .step-body {
  margin-bottom: 32px;
}

.step-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  background: var(--surface-muted);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border);
}

.step-block:hover .step-visual img {
  transform: scale(1.03);
}

/* Small glass status chip on each step's image — the order's story in UI */
.step-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 28px -10px rgba(15, 23, 42, 0.4);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.step-chip small {
  font-size: inherit;
  font-weight: 500;
  color: var(--text-secondary);
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.chip-dot--live {
  background: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  animation: livePulse 1.8s ease-out infinite;
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}

.chip-ok {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.16);
  color: #16A34A;
}

.chip-ok svg {
  width: 11px;
  height: 11px;
}

.chip-bar {
  width: 56px;
  height: 4px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.chip-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

/* Desktop only: each step sticks below the nav so the next one slides
   up over it, leaving a visible sliver of the cards underneath.
   Sticky is capped by .steps-stack, so the stack releases with the section.
   The blocks live in their own wrapper so nth-of-type counts only them. */
@media (min-width: 901px) {
  /* Frosted glass: whatever sits behind a card — the card it slides over,
     or the blue section — is blurred through it, so the covered card recedes */
  .step-block {
    position: sticky;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      inset 0 1px 0 #fff,
      0 -16px 40px -8px rgba(10, 20, 60, 0.28),
      0 40px 80px -32px rgba(10, 20, 60, 0.5);
  }

  .step-block:nth-of-type(1) { top: 100px; z-index: 1; }
  .step-block:nth-of-type(2) { top: 124px; z-index: 2; }
  .step-block:nth-of-type(3) { top: 148px; z-index: 3; }
  .step-block:nth-of-type(4) { top: 172px; z-index: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .chip-dot--live {
    animation: none;
  }
}

/* ============ Pricing ============ */
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
  text-align: left;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.price-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
}

.price-card--featured {
  position: relative;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35), var(--shadow-lg);
}

.price-card--featured:hover {
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.5), var(--shadow-lg);
}

.price-pill {
  align-self: flex-start;
  padding: 5px 12px;
  margin-bottom: 24px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.price-pill--accent {
  background: var(--primary);
  box-shadow: none;
  color: #fff;
}

.price-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.price-tagline {
  font-size: 0.95rem;
  margin-bottom: 28px;
}

.price-amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.price-unit {
  font-size: 0.875rem;
  margin: 8px 0 28px;
}

.price-list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.price-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

/* Buttons align along one line regardless of card content */
.price-card button {
  margin-top: auto;
  width: 100%;
}

/* ============ Intro call ============ */
.meet-card {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
}

.meet-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.meet-card:hover .meet-photo {
  transform: scale(1.03);
}

/* Darkens the top-left where the text sits, so any photo stays readable */
.meet-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(11, 13, 18, 0.72) 0%, rgba(11, 13, 18, 0.45) 45%, rgba(11, 13, 18, 0) 75%),
    linear-gradient(180deg, rgba(11, 13, 18, 0.25) 0%, rgba(11, 13, 18, 0) 50%);
}

.meet-content {
  max-width: 520px;
  padding: 64px;
}

.meet-content h2 {
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 1.8vw, 2.75rem);
  margin-bottom: 16px;
}

.meet-content p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 36px;
}

a.btn-meet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.7);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

a.btn-meet:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(37, 99, 235, 0.75);
}

a.btn-meet svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}

a.btn-meet:hover svg {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .meet-card {
    min-height: 420px;
  }

  .meet-content {
    padding: 36px 24px;
  }

  .meet-card::before {
    background: linear-gradient(180deg, rgba(11, 13, 18, 0.72) 0%, rgba(11, 13, 18, 0.4) 55%, rgba(11, 13, 18, 0.1) 100%);
  }
}

/* ============ Order flow ============ */
.order-flow {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-lg);
  text-align: left;
}

/* Progress */
.order-progress {
  list-style: none;
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.order-progress li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
}

.order-progress li:last-child {
  flex: 0 0 auto;
}

.order-progress li:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-strong);
  transition: background-color 0.3s var(--ease);
}

.order-progress-dot {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-muted);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.order-progress [data-state="current"] {
  color: var(--ink);
}

.order-progress [data-state="current"] .order-progress-dot {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.order-progress [data-state="done"] {
  color: var(--text-secondary);
}

.order-progress [data-state="done"] .order-progress-dot {
  background: rgba(34, 197, 94, 0.14);
  color: #16A34A;
}

.order-progress [data-state="done"]::after {
  background: rgba(34, 197, 94, 0.45);
}

/* Steps */
.order-step {
  min-width: 0;
  border: 0;
}

.order-step:not([hidden]) {
  animation: stepIn 0.4s var(--ease) both;
}

@keyframes stepIn {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

.order-step-title {
  padding: 0;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  outline: none;
}

.order-step-type {
  color: var(--primary-hover);
}

.order-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.field-error {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #DC2626;
}



.icon-bubble {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--primary-soft);
  color: var(--primary);
  transition: transform 0.35s var(--ease);
}

.icon-bubble svg {
  width: 24px;
  height: 24px;
}




.format-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.format-chips span {
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}










/* Type choice */
.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.type-card {
  position: relative;
  display: flex;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

.type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.type-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.24), var(--shadow-sm);
}

.type-card:has(input:checked) {
  background: rgba(59, 130, 246, 0.04);
  box-shadow: inset 0 0 0 2px var(--primary), var(--shadow-sm);
}

.type-card:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.type-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 28px;
}

.type-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.type-card-desc {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.type-card-price {
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.type-card-price small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

.type-card-check {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
  color: transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.type-card-check svg {
  width: 13px;
  height: 13px;
}

.type-card:has(input:checked) .type-card-check {
  background: var(--primary);
  box-shadow: none;
  color: #fff;
}

/* Fields */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

.brief-group[hidden] {
  display: none;
}

.field {
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field--group {
  border: 0;
}

.field label,
.field legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.field-hint {
  margin-left: 4px;
  font-weight: 400;
  color: var(--text-muted);
}

.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  appearance: none;
  transition: box-shadow 0.2s var(--ease);
}

.field select {
  padding-right: 40px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B91A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  cursor: pointer;
}

.field textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.5;
}

.field ::placeholder {
  color: var(--text-muted);
}

.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.field.is-invalid input:not([type="radio"]):not([type="checkbox"]),
.field.is-invalid select,
.field.is-invalid textarea {
  box-shadow: inset 0 0 0 1.5px #EF4444;
}

.field-section-label {
  margin: 28px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pill-style radios and checkboxes */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-check {
  position: relative;
  cursor: pointer;
}

.field .chip-check {
  margin: 0;
  font-weight: 500;
}

.chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip-check span {
  display: inline-flex;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: 0.9rem;
  color: var(--text-secondary);
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.chip-check:hover span {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.28);
  color: var(--ink);
}

.chip-check input:checked + span {
  background: rgba(59, 130, 246, 0.08);
  box-shadow: inset 0 0 0 1.5px var(--primary);
  color: var(--primary-hover);
}

.chip-check input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.chip-check input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}

.chip-check:hover input:disabled + span {
  box-shadow: inset 0 0 0 1px var(--border-strong);
  color: inherit;
}

.field.is-invalid .chip-check span {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.6);
}

/* Review */
.order-summary-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.order-summary-row dt {
  color: var(--text-secondary);
}

.order-summary-row dd {
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--bg);
}

.order-total span {
  font-weight: 600;
  color: var(--ink);
}

.order-total small {
  margin-left: 4px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}

.order-total strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Done */
/* ---- Order flow: more assets of one kind ---- */
.order-note {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.order-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--primary);
}

.order-note strong {
  color: var(--ink);
  font-weight: 600;
}

.asset-list {
  display: grid;
  gap: 12px;
}

.asset-card {
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: box-shadow 0.25s var(--ease);
}

.asset-card.is-open {
  box-shadow: inset 0 0 0 1.5px var(--primary), var(--shadow-sm);
}

.asset-card-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 10px 8px;
}

.asset-card-toggle {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.asset-card-toggle:focus-visible,
.asset-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.asset-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.asset-card-title {
  display: grid;
  min-width: 0;
}

.asset-card-title strong {
  font-size: 0.98rem;
  color: var(--ink);
}

.asset-card-title small {
  overflow: hidden;
  font-size: 0.84rem;
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.asset-card-title small.is-missing {
  color: #B45309;
}

.asset-chevron svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform 0.25s var(--ease);
}

.asset-card.is-open .asset-chevron svg {
  transform: rotate(180deg);
}

.asset-card-price {
  padding: 0 8px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.asset-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.asset-icon:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.asset-icon svg {
  width: 18px;
  height: 18px;
}

.asset-card-body {
  padding: 8px 20px 22px;
}

.asset-card:not(.is-open) .asset-card-body {
  display: none;
}

/* One asset: the card looks like the plain briefing it always was */
.asset-list.is-single .asset-card {
  background: none;
  box-shadow: none;
}

.asset-list.is-single .asset-card-head {
  display: none;
}

.asset-list.is-single .asset-card-body {
  padding: 0;
}

.asset-add {
  margin-top: 16px;
  padding: 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
}

.asset-add-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.asset-add-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.asset-add-actions .btn-secondary svg {
  width: 16px;
  height: 16px;
}

.asset-add-actions .text-link {
  border: 0;
  background-color: transparent;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.asset-add-note {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.order-summary-asset {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.order-summary-asset:first-of-type {
  margin-top: 8px;
}

.order-done p.order-done-more {
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .asset-card-head {
    flex-wrap: wrap;
  }
  .asset-card-toggle {
    flex-basis: 100%;
  }
  .asset-card-price {
    margin-right: auto;
    padding-left: 48px;
  }
  .asset-card-body {
    padding: 4px 14px 18px;
  }
}

.order-done {
  padding: 32px 8px 16px;
  text-align: center;
  outline: none;
  animation: stepIn 0.4s var(--ease) both;
}

.order-done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  color: #16A34A;
}

.order-done-icon svg {
  width: 30px;
  height: 30px;
}

.order-done p {
  max-width: 420px;
  margin: 0 auto 24px;
}

@media (max-width: 760px) {
  .order-flow {
    padding: 20px;
  }

  .type-grid,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .order-summary-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  /* Only the current step keeps its label on small screens */
  .order-progress li:not([data-state="current"]) .order-progress-label {
    display: none;
  }
}

/* ============ Chat + contact ============ */
.chat-row {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 20px 20px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.chat-row:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
}

.chat-row p {
  margin: 0;
}

.chat-message {
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}

.chat-time {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.arrow-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6);
  transition: transform 0.3s var(--ease);
}

.arrow-btn svg {
  width: 20px;
  height: 20px;
}

.chat-row:hover .arrow-btn,
.contact-card:hover .arrow-btn {
  transform: translateX(3px);
}

.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 24px 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
}

.contact-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  text-align: left;
}

.contact-left > div:last-child {
  min-width: 0;
}

.contact-status::before {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  /* The mail address wraps instead of pushing the card past the screen edge */
  .contact-status {
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  .avatar-stack span {
    width: 38px;
    height: 38px;
  }
}

.avatar-stack {
  display: flex;
}

.avatar-stack span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: linear-gradient(160deg, #60A5FA, var(--primary-hover));
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}

.avatar-stack span:first-child {
  margin-left: 0;
}

.contact-title {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}

.contact-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 0.9rem;
}

.contact-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* ============ Testimonials ============ */
.quote {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 24px;
}

.quote-author {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.quote-name {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.quote-role {
  font-size: 0.875rem;
  margin: 0;
}

.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

/* ============ Brand personality ============ */
.brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1040px;
}

.brand-grid h2 {
  margin-bottom: 16px;
}

.brand-grid .brand-copy {
  font-size: 1.125rem;
  margin-bottom: 28px;
}

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

.brand-visual {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.brand-visual:hover img {
  transform: scale(1.04);
}

.brand-label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

.brand-label strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand-label span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ============ FAQ ============ */
.faq-list {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}

.faq-q {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 8px;
}

.faq-a {
  margin: 0;
}

/* ============ Final CTA ============ */
.final-cta {
  padding: 136px 0;
  text-align: center;
  background:
    radial-gradient(760px 420px at 50% 110%, rgba(59, 130, 246, 0.14), transparent 70%),
    var(--bg);
  overflow: hidden;
}

.final-cta.has-gradient {
  background: var(--bg);
}

.final-cta .container {
  max-width: 720px;
}

.final-cta p {
  font-size: 1.125rem;
  margin-bottom: 8px;
}

.final-cta .cta-group {
  justify-content: center;
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .asset-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .asset-grid {
    grid-template-columns: 1fr;
  }
}

/* Small screens: each criterion becomes its own card, MakeItMove first */
@media (max-width: 760px) {
  .compare {
    padding: 6px;
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td,
  .compare-table tfoot {
    display: block;
    width: 100%;
  }

  .compare-table thead {
    display: none;
  }

  .compare-table tbody tr {
    padding: 18px 16px 14px;
  }

  .compare-table tbody tr + tr {
    border-top: 1px solid var(--border);
  }

  .compare-table tbody tr > * {
    border-top: 0;
  }

  .compare-table tbody th {
    width: auto;
    padding: 0 0 10px;
    font-size: 1rem;
  }

  .compare-table tbody td {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
  }

  .compare-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 92px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    padding-top: 1px;
  }

  .compare-table tbody td > .rate {
    margin-right: 0;
    flex-shrink: 0;
  }

  .compare-table .is-us,
  .compare-table tbody tr:hover > .is-us {
    box-shadow: none;
  }

  .compare-table tbody .is-us::before {
    color: var(--primary-hover);
  }

  .compare-table tfoot tr td:not(.is-us) {
    display: none;
  }

  .compare-table tfoot .is-us {
    padding: 6px 16px 16px;
    background: none;
    box-shadow: none;
  }
}

@media (max-width: 900px) {
  .price-grid {
    grid-template-columns: 1fr;
  }

  .step-block {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 24px;
  }

  .step-heading {
    font-size: 32px;
  }

  .brand-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Hero: scale the composition down, keep the same three pieces */
  .hero-composition {
    gap: 10px;
    height: 220px;
  }

  .hero-animation {
    width: 200px;
    height: 130px;
  }

  .hero-asset {
    width: 205px;
    height: 220px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }

  section {
    padding: 80px 0;
  }

  .final-cta {
    padding: 96px 0;
  }

  h1 {
    font-size: clamp(2.4rem, 9vw, 3.25rem);
  }

  .section-head {
    margin-bottom: 40px;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .contact-card {
    flex-direction: row;
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .asset-grid {
    grid-template-columns: 1fr;
  }

  .nav-pill {
    gap: 18px;
    padding: 0 20px;
    height: 50px;
  }

  .nav-pill a {
    font-size: 0.82rem;
  }

  .nav-pill .nav-brand {
    margin-left: -8px;
    padding-right: 16px;
  }

  .nav-brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .nav-brand-mark {
    width: 30px;
    height: 30px;
  }


  /* Asset on top, both chat bubbles side by side underneath */
  .hero-composition {
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
    row-gap: 4px;
  }

  .hero-asset {
    order: -1;
    width: 62vw;
    height: auto;
    aspect-ratio: 293 / 314;
    margin: 0 19vw;
  }

  .hero-animation {
    width: calc(50% - 4px);
    height: auto;
    aspect-ratio: 288 / 187;
  }

  .avatar-stack span {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal].is-in {
    animation: none;
  }

  .js [data-reveal]:not(.is-in) {
    opacity: 1;
  }

  .blob {
    animation: none;
  }
}

/* ============ Links styled as buttons ============ */
a.btn-primary,
a.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

a.btn-primary:active,
a.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

/* An SVG without a size fills its flex parent, so icons in buttons get one */
.btn-primary svg,
.btn-secondary svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}

.btn-primary:hover svg,
.btn-secondary:hover svg {
  transform: translateX(3px);
}

/* ============ Anchors ============ */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Keeps anchored sections clear of the sticky nav */
section[id] {
  scroll-margin-top: 88px;
}

/* ============ Asset cards as links ============ */
a.asset-card {
  color: inherit;
  text-decoration: none;
}

.asset-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 8px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-hover);
}

.asset-price svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease);
}

.asset-card:hover .asset-price svg {
  transform: translateX(3px);
}

.price-from {
  margin-right: 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
}

.price-card a.btn-primary,
.price-card a.btn-secondary {
  margin-top: auto;
  width: 100%;
}

/* ============ Service detail pages ============ */
.service-hero {
  padding: 32px 0 96px;
  background: transparent;
}

.service-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.back-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease);
}

.back-link:hover {
  color: var(--ink);
}

.back-link:hover svg {
  transform: translateX(-3px);
}

.service-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-hover);
}

.service-title {
  font-size: clamp(3rem, 2rem + 3.4vw, 4.5rem);
  margin-bottom: 20px;
}

.service-lead {
  max-width: 520px;
  font-size: 1.2rem;
  line-height: 1.55;
  margin-bottom: 28px;
}

.service-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 28px;
}

.service-price .price-amount {
  font-size: 2.5rem;
}

.service-price .price-note {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.service-hero .cta-group {
  margin: 0;
}

.service-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.service-visual img,
.service-visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Key facts */
.facts {
  padding: 0 0 96px;
  background: transparent;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.fact {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
}

.fact-label {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.fact-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Scope */
.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}

.scope-card {
  padding: 36px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}

.scope-card--out {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}

.scope-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.scope-intro {
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.scope-list {
  list-style: none;
  display: grid;
  gap: 14px;
}

.scope-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}

.scope-card--out .scope-list li {
  color: var(--text-secondary);
}

.scope-list .why-ic {
  margin-top: 1px;
}

.scope-no {
  background: rgba(15, 23, 42, 0.07);
  color: var(--text-muted);
}

.scope-note {
  margin: 32px 0 0;
  text-align: center;
  font-size: 0.95rem;
}

/* Examples */
.example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.example-card {
  padding: 10px 10px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.example-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-md);
}

.example-media {
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-muted);
}

.example-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.example-card:hover .example-media img {
  transform: scale(1.045);
}

.example-title {
  margin: 0 10px 2px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.example-meta {
  margin: 0 10px;
  font-size: 0.88rem;
}

/* Order */
.order-card {
  max-width: 560px;
  margin: 40px auto 0;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 0 1px var(--border), var(--shadow-lg);
  text-align: left;
}

.order-rows {
  margin-bottom: 24px;
}

.order-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.order-row dt {
  color: var(--text-secondary);
}

.order-row dd {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.order-card a.btn-primary {
  width: 100%;
}

.order-footnote {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .service-hero-grid,
  .scope-grid {
    grid-template-columns: 1fr;
  }

  .service-hero-grid {
    gap: 40px;
  }

  .fact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .example-grid {
    grid-template-columns: 1fr;
  }

  .scope-card {
    padding: 28px 24px;
  }
}

/* ============ Campaign extras (+€25 per format / variant) ============ */
.price-extra {
  margin: -16px 0 24px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.07);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.price-extra strong {
  color: var(--primary-hover);
}

.price-live {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.07);
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.price-live strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.price-live:empty {
  display: none;
}

.price-explain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}

.price-rules {
  list-style: none;
  display: grid;
  gap: 16px;
}

.price-rules li {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: baseline;
  gap: 12px;
}

.price-rule-amount {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--primary-hover);
  font-variant-numeric: tabular-nums;
}

.price-rules strong {
  display: block;
  color: var(--ink);
}

.price-rules li > span:last-child {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.price-calc > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.price-calc dt {
  color: var(--ink);
}

.price-calc dt small {
  margin-left: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.price-calc dd {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.price-calc .price-calc-total {
  border-bottom: 0;
  padding-top: 16px;
}

.price-calc-total dd {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}

@media (max-width: 900px) {
  .price-explain {
    grid-template-columns: 1fr;
  }
}

/* ============ Hero: delivery + flip to the animated version ============ */
/* After "Opgepakt" (4.2s): a line runs from Mickey back to the card,
   "Opgeleverd" appears, then the card turns over and stays on the
   animated side. The flip lives on an inner layer, so the card's own
   slide-in animation is untouched. */
.flow-line--back {
  stroke: rgba(34, 197, 94, 0.7);
}

.flow-draw--c { animation: flowDraw 0.7s var(--ease) 5.5s forwards; }

.flow-arrow--c {
  stroke: rgba(34, 197, 94, 0.85);
  animation: fadeIn 0.2s ease-out 6.15s forwards;
}

.flow-tag--done {
  top: 234px;
  right: 52px;
  animation: flowTagIn 0.5s var(--ease) 5.8s forwards;
}

.hero-asset {
  perspective: 1200px;
}

.asset-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: assetFlip 0.8s cubic-bezier(0.65, 0, 0.35, 1) 6.4s forwards;
}

@keyframes assetFlip {
  to { transform: rotateY(180deg); }
}

.asset-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.asset-face--back {
  transform: rotateY(180deg);
}

.asset-face video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sits inside the card's visible area (the PNG has a transparent margin) */
.asset-badge {
  position: absolute;
  top: 6%;
  right: 14%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(11, 13, 18, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
}

.asset-badge svg {
  width: 10px;
  height: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .asset-flip {
    animation: none;
    transform: rotateY(180deg);
  }
}

/* Four plans: two per row until there is room for all four */
@media (max-width: 1180px) and (min-width: 901px) {
  .price-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ Custom Motion: price slider ============ */
.calc-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-lg);
}

.calc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
}

.calc-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.calc-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.calc-top > div:last-child {
  text-align: right;
}

.calc-top > div:last-child .calc-value {
  color: var(--primary-hover);
}

/* The filled part of the track follows --fill, set by the script */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--primary) var(--fill, 0%), rgba(15, 23, 42, 0.1) var(--fill, 0%));
  cursor: pointer;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--primary), 0 4px 12px -2px rgba(37, 99, 235, 0.45);
  transition: transform 0.2s var(--ease);
}

.calc-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--primary), 0 4px 12px -2px rgba(37, 99, 235, 0.45);
}

.calc-range:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

.calc-range:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 6px;
}

.calc-ticks {
  position: relative;
  height: 20px;
  margin: 12px 13px 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.calc-ticks span {
  position: absolute;
  translate: -50% 0;
  font-variant-numeric: tabular-nums;
}

.calc-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.calc-option:has(input:checked) {
  background: rgba(59, 130, 246, 0.05);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.calc-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.calc-option strong {
  display: block;
  color: var(--ink);
}

.calc-option span span {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.calc-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.calc-total small {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .calc-card {
    padding: 28px 20px;
  }

  .calc-value {
    font-size: 1.75rem;
  }

  .calc-total {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============ Pricing: compact for four cards ============ */
/* Four cards leave ~270px each: less side padding, tighter lists,
   and taglines reserve two lines so every price sits at the same height */
.price-card {
  padding: 30px 24px 26px;
}

.price-pill {
  margin-bottom: 20px;
}

.price-tagline {
  min-height: 3em;
  margin-bottom: 18px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.price-amount {
  font-size: 2.6rem;
}

.price-unit {
  margin: 6px 0 20px;
}

.price-extra {
  margin: -8px 0 20px;
  font-size: 0.8rem;
}

.price-list {
  gap: 8px;
  padding-top: 20px;
  margin-bottom: 28px;
}

.price-list li {
  font-size: 0.92rem;
  line-height: 1.4;
}

.price-card a.btn-primary,
.price-card a.btn-secondary {
  padding: 12px 16px;
  white-space: nowrap;
}

/* Price line: labels stacked on the left, amount right-aligned */
.price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.price-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 5px;
}

.price-row .price-from {
  margin: 0;
  font-size: 0.88rem;
}

.price-row .price-unit {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.price-row .price-amount {
  text-align: right;
}

.price-row + .price-extra {
  margin-top: 0;
}

/* ============ Live delivery times ============ */
.live-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: blink 2s infinite, glow 2s infinite;
}

.asset-delivery,
.type-card-delivery {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.asset-delivery {
  margin: 12px 8px 0;
}

.asset-delivery + .asset-price {
  margin-top: 6px;
}

.type-card-delivery {
  margin-top: 8px;
}

.price-list .price-delivery {
  gap: 8px;
  color: var(--text-secondary);
}

.price-delivery [data-delivery] {
  font-weight: 600;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}

/* ============ Pricing perks: guarantee, rush, monthly plan ============ */
.perk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
  text-align: left;
}

.perk {
  display: flex;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--border);
}

.perk-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.perk-icon--green {
  background: rgba(34, 197, 94, 0.12);
  color: #16A34A;
}

.perk-icon svg {
  width: 20px;
  height: 20px;
}

.perk-title {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--ink);
}

.perk-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .perk-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Order flow additions ============ */
.order-step .calc-option {
  margin-top: 0;
}

.order-step .price-live {
  margin: 12px 0 0;
}

.order-guarantee {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #16A34A;
}

.order-next {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--border);
}

.order-next-title {
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--ink);
}

.order-next ol {
  display: grid;
  gap: 6px;
  padding-left: 20px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.field--terms {
  margin-top: 20px;
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}

.terms-check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.field--terms.is-invalid .terms-check {
  color: #DC2626;
}

/* Cards that became links */
a.chat-row,
a.contact-card {
  color: inherit;
  text-decoration: none;
}

/* ============ Footer ============ */
.site-footer {
  padding: 72px 0 32px;
  background: #1C1D22;
  color: rgba(245, 246, 248, 0.64);
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {
  margin: 0 0 10px;
  font-family: 'Outfit', var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #F5F6F8;
}

.footer-brand img {
  display: block;
  height: 34px;
  width: auto;
}

.footer-tagline {
  max-width: 280px;
  margin: 0 0 16px;
  color: rgba(245, 246, 248, 0.64);
}

.footer-heading {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 246, 248, 0.44);
}

.footer-links {
  list-style: none;
  display: grid;
  gap: 10px;
}

.site-footer a {
  color: rgba(245, 246, 248, 0.8);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-footer a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.82rem;
  color: rgba(245, 246, 248, 0.44);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ Legal and simple pages ============ */
.legal {
  padding: 48px 0 112px;
  background: transparent;
}

.legal .container {
  max-width: 760px;
}

.legal-note {
  margin: 0 0 32px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.1);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
  font-size: 0.9rem;
  color: #92400E;
}

.legal h1 {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  margin-bottom: 12px;
}

.legal h2 {
  font-size: 1.35rem;
  margin: 36px 0 10px;
}

.legal ul {
  padding-left: 20px;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.legal li {
  margin-bottom: 6px;
}

.not-found {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  background: transparent;
}

.not-found .cta-group {
  justify-content: center;
}

/* ============ Order flow: links, discount, payment ============ */
.link-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}

.link-intro .icon-bubble {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 12px;
}

.link-intro .icon-bubble svg {
  width: 20px;
  height: 20px;
}

.link-intro-title {
  margin: 0 0 2px;
  font-weight: 600;
  color: var(--ink);
}

.link-intro-text {
  margin: 0;
  font-size: 0.9rem;
}

.order-step[data-step="3"] .format-chips {
  justify-content: flex-start;
  margin-top: 16px;
}

.discount {
  margin-top: 20px;
}

.discount label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.discount-row {
  display: flex;
  gap: 8px;
}

.discount-row input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font: inherit;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.discount-row input::placeholder {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.discount-row input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.discount-message {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: #DC2626;
}

.discount-message.is-ok {
  color: #16A34A;
}

.pay-options {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  border: 0;
  min-width: 0;
}

.pay-options legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.pay-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  cursor: pointer;
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.pay-option[hidden] {
  display: none;
}

.pay-option:has(input:checked) {
  background: rgba(59, 130, 246, 0.05);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.pay-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.pay-option strong {
  display: block;
  color: var(--ink);
}

.pay-option span span {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.order-submit-error,
.order-notice {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25);
  font-size: 0.9rem;
  color: #B91C1C;
}

.order-notice {
  margin: 0 0 20px;
  background: rgba(245, 158, 11, 0.1);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
  color: #92400E;
}

/* ============ Thank-you page ============ */
.thanks {
  padding: 48px 0 112px;
  background: transparent;
}

.thanks-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 36px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-lg);
  text-align: center;
}

.thanks-card h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  margin-bottom: 12px;
}

.thanks-card .order-rows {
  margin: 24px 0;
  text-align: left;
}

.thanks-card .cta-group {
  justify-content: center;
  margin-bottom: 0;
}

.order-done-icon.is-warning {
  background: rgba(245, 158, 11, 0.14);
  color: #B45309;
}

/* ============ Delivery page (customer) ============ */
.delivery-top {
  padding: 22px 32px;
}

.delivery-top a {
  display: inline-block;
  line-height: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.delivery {
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 24px 96px;
}

.delivery-head {
  margin-bottom: 28px;
}

.delivery-head h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  margin-bottom: 6px;
}

.delivery-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}

.delivery-media {
  display: grid;
  gap: 20px;
}

.delivery-item {
  margin: 0;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}

.delivery-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  background: #0B0D12;
  object-fit: contain;
}

.delivery-lottie {
  background: var(--surface-muted);
}

.delivery-link {
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  color: var(--primary-hover);
  font-weight: 600;
  text-decoration: none;
}

.delivery-item figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 6px 4px;
  font-weight: 500;
  color: var(--ink);
}

.delivery-item figcaption .btn-primary,
.delivery-item figcaption .btn-secondary {
  padding: 10px 18px;
}

.delivery-side {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

.delivery-card,
.delivery-response {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}

.delivery-response-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--ink);
}

.delivery-notes,
.delivery-quote {
  margin: 0;
  white-space: pre-line;
}

.delivery-quote {
  margin: 10px 0;
  padding-left: 12px;
  box-shadow: inset 2px 0 0 var(--border-strong);
  color: var(--ink);
}

.delivery-response .field {
  margin: 16px 0;
}

.delivery-response .field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

.delivery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delivery-actions button {
  flex: 1;
  white-space: nowrap;
}

.delivery-response.is-done {
  box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, 0.45), var(--shadow-sm);
}

.muted {
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .delivery-grid {
    grid-template-columns: 1fr;
  }

  .delivery-side {
    position: static;
  }

  .delivery-top {
    padding: 18px 20px;
  }
}

/* ============ FAQ as accordion (all screens) ============ */
.faq-item {
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  transition: box-shadow 0.3s var(--ease);
}

.faq-item[open] {
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 22px 24px;
  list-style: none;
  cursor: pointer;
}

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

.faq-item summary svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.3s var(--ease);
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
}

.faq-item summary:focus-visible {
  border-radius: var(--radius-lg);
}

.faq-item .faq-a {
  margin: 0;
  padding: 0 24px 22px;
}

/* ============ Carousel dots + phone order bar (hidden on desktop) ============ */
.carousel-dots,
.mobile-cta {
  display: none;
}

/* Bigger tap area for inline links without changing the line height */
.text-link {
  padding-block: 10px;
  background-origin: content-box;
}

/* ============ Phones and small tablets ============ */
@media (max-width: 760px) {
  section {
    padding: 64px 0;
  }

  .section-head {
    margin-bottom: 32px;
  }

  .site-nav {
    top: 12px;
  }

  /* ---- Swipeable rows: the next card peeks in at the edge ---- */
  [data-carousel] {
    display: flex !important;
    gap: 12px;
    margin: 0 -20px;
    padding: 8px 20px 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  [data-carousel]::-webkit-scrollbar {
    display: none;
  }

  [data-carousel] > * {
    flex: 0 0 84%;
    margin: 0 !important;
    scroll-snap-align: center;
  }

  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: -8px;
  }

  .carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.18);
    transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
  }

  .carousel-dots button.is-active {
    width: 22px;
    background: var(--primary);
  }

  .section--blue .carousel-dots button,
  .section--dark .carousel-dots button {
    background: rgba(255, 255, 255, 0.3);
  }

  .section--blue .carousel-dots button.is-active,
  .section--dark .carousel-dots button.is-active {
    background: #fff;
  }

  /* Steps: image on top, compact card */
  .step-block {
    gap: 20px;
    padding: 12px 12px 24px;
    align-content: start;
  }

  .step-block > div:first-child {
    padding: 0 10px;
  }

  .step-visual {
    order: -1;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }

  .step-heading {
    font-size: 26px;
    margin-bottom: 14px;
  }

  .step-body {
    font-size: 0.98rem;
  }

  /* One paragraph per step keeps the cards scannable while swiping */
  .step-block .step-body + .step-body {
    display: none;
  }

  .step-block .btn-primary {
    width: 100%;
  }

  .step-chip {
    left: 10px;
    bottom: 10px;
    padding: 8px 12px 8px 10px;
    font-size: 0.8rem;
  }

  /* Detail pages: CTAs stacked full width, like the home hero */
  .service-hero .cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .service-hero .cta-group > a {
    justify-content: center;
    text-align: center;
  }

  /* Footer mail link gets a thumb-sized hit area */
  .site-footer a[href^="mailto:"] {
    display: inline-block;
    padding-block: 12px;
  }

  /* ---- Readable small text ---- */
  .live-badge span {
    font-size: 0.8rem;
  }

  .format-chips span,
  .asset-badge {
    font-size: 0.76rem;
  }

  .price-pill {
    font-size: 0.8rem;
  }

  /* ---- Footer: two columns, comfortable tap targets ---- */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .footer-links {
    gap: 0;
  }

  .footer-links a {
    display: inline-block;
    padding: 9px 0;
  }

  .footer-bottom {
    flex-direction: column;
  }

  /* ---- Phone order bar ---- */
  .mobile-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), var(--shadow-lg);
    opacity: 0;
    translate: 0 140%;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), translate 0.45s var(--ease);
  }

  .mobile-cta.is-visible {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }

  .mobile-cta-text {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-secondary);
  }

  .mobile-cta .btn-primary {
    flex-shrink: 0;
    padding: 11px 16px;
  }
}

/* ============ Phones: hero reads top to bottom ============ */
/* Headline and buttons first, then the story as a vertical thread:
   Sophie's message → "Aangeleverd" → the asset → "Opgepakt" → Mickey's reply */
@media (max-width: 600px) {
  .hero {
    padding-top: 28px;
  }

  .hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .live-badge { order: 1; margin-bottom: 20px; }
  .hero h1 { order: 2; font-size: clamp(2.5rem, 11.5vw, 3.1rem); }
  .hero-tagline { order: 3; font-size: 1.1rem; }
  .hero-sub { order: 4; }
  .hero .cta-group { order: 5; }
  .hero-composition { order: 6; }

  .hero .cta-group {
    width: 100%;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0 0;
  }

  .hero .cta-group > * {
    width: 100%;
  }

  .hero-composition {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    gap: 52px;
    margin: 52px 0 0;
  }

  .hero-animation {
    width: 100%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 2160 / 1400;
  }

  .hero-asset {
    position: relative;
    order: 0;
    width: 64%;
    max-width: 250px;
    height: auto;
    aspect-ratio: 293 / 314;
    margin: 0;
  }

  .hero-asset::before,
  .hero-asset::after {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--primary-hover);
  }

  .hero-asset::before {
    content: '↓  Aangeleverd';
    top: -40px;
  }

  .hero-asset::after {
    content: '↓  Opgepakt';
    bottom: -40px;
  }
}

@media (max-width: 760px) {
  .mobile-cta-text strong {
    display: block;
    font-size: 0.92rem;
    color: var(--ink);
  }
}

@media (max-width: 600px) {
  .hero-sub:last-of-type {
    margin-bottom: 0;
  }

  /* The delivery step: same moment as the green return line on desktop */
  .hero-composition::after {
    content: '✓  Opgeleverd';
    order: 6;
    margin-top: -34px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.3);
    font-size: 0.76rem;
    font-weight: 600;
    color: #15803D;
    opacity: 0;
    animation: flowTagIn 0.5s var(--ease) 5.8s forwards;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .hero-composition::after {
    opacity: 1;
    animation: none;
  }
}

/* ============ Support: a real message box that feels like a chat ============ */
.support {
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
  overflow: hidden;
}

.support-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.support-head p {
  margin: 0;
}

.support-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(160deg, #60A5FA, var(--primary-hover));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
}

.support-avatar img,
.consult-avatar img,
.order-help-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.support-avatar::after {
  content: '';
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--success);
  border: 2.5px solid var(--surface);
}

.support-name {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.support-status {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.support-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 18px;
}

.bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 20px;
  line-height: 1.5;
  animation: bubbleIn 0.45s var(--ease) both;
}

.bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble--in {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--surface-muted);
  color: var(--ink);
  transform-origin: bottom left;
}

.bubble--out {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--primary);
  color: #fff;
  transform-origin: bottom right;
}

.bubble-meta {
  align-self: flex-end;
  margin-top: -4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  animation: bubbleIn 0.45s var(--ease) 0.15s both;
}

.bubble--note {
  align-self: stretch;
  max-width: none;
  margin-top: 6px;
  border-radius: 16px;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
  color: var(--ink);
  font-size: 0.95rem;
  animation-delay: 0.5s;
}

.bubble--note strong {
  color: #047857;
}

.bubble--note button {
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--primary-hover);
  cursor: pointer;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.support-form {
  padding: 0 16px 16px;
}

.support.is-sent .support-form {
  display: none;
}

.support-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 6px 14px;
}

.support-suggest[hidden] {
  display: none;
}

.support-suggest button {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--primary-hover);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.support-suggest button:hover {
  background: rgba(59, 130, 246, 0.14);
  transform: translateY(-1px);
}

.support-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 6px 6px 6px 20px;
  border-radius: 26px;
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

.support-composer:focus-within {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.support-composer textarea {
  flex: 1;
  min-width: 0;
  max-height: 168px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  resize: none;
  outline: none;
}

.support-composer textarea::placeholder,
.support-fields input::placeholder {
  color: var(--text-muted);
}

.support-send {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
}

.support-send svg {
  width: 20px;
  height: 20px;
}

.support-send:hover {
  background: var(--primary-hover);
  transform: translateX(2px);
}

.support-send:focus-visible {
  outline: 2px solid var(--primary-hover);
  outline-offset: 3px;
}

.support-send[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.support-send[aria-busy="true"] svg {
  animation: sendPulse 0.8s ease-in-out infinite alternate;
}

@keyframes sendPulse {
  to { transform: translateX(4px); opacity: 0.4; }
}

/* Name + e-mail slide open once someone starts typing */
.support-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}

.support-details.is-open {
  grid-template-rows: 1fr;
}

.support-details-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.support-details.is-open .support-details-inner {
  opacity: 1;
}

.support-details-label {
  margin: 16px 6px 8px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.support-fields {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 8px;
  padding: 2px;
}

.support-fields input {
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

.support-fields input:focus {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.support-fields input.is-invalid {
  box-shadow: inset 0 0 0 1.5px var(--error);
}

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

.support-error {
  margin: 10px 6px 0;
  font-size: 0.88rem;
  color: #DC2626;
}

.support-error:empty {
  display: none;
}

@media (max-width: 600px) {
  .support {
    border-radius: var(--radius-lg);
  }

  .support-head {
    padding: 14px 16px;
  }

  .support-thread {
    padding: 18px 16px 14px;
  }

  .support-form {
    padding: 0 12px 12px;
  }

  .support-suggest {
    flex-wrap: nowrap;
    margin: 0 -12px 12px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .support-suggest::-webkit-scrollbar {
    display: none;
  }

  .support-suggest button {
    flex-shrink: 0;
  }

  .support-fields {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble,
  .bubble-meta {
    animation: none;
  }

  .support-details,
  .support-details-inner {
    transition: none;
  }
}

/* ============ Status pills (admin + project page) ============ */
.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-secondary);
}

.status--wacht_op_betaling,
.status--wacht_op_bevestiging { background: rgba(245, 158, 11, 0.14); color: #B45309; }
.status--betaald,
.status--op_factuur { background: rgba(34, 197, 94, 0.14); color: #15803D; }
.status--in_productie,
.status--eerste_versie,
.status--revisie { background: var(--primary-soft); color: var(--primary-hover); }
.status--opgeleverd { background: var(--ink); color: #fff; }
.status--wacht_op_acceptatie { background: var(--primary); color: #fff; }
.status--geannuleerd { background: rgba(239, 68, 68, 0.1); color: #B91C1C; }

/* ============ Project page (customer) ============ */
.portal-body {
  background: var(--bg);
}

.portal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 24px;
}

.portal-top a {
  display: inline-block;
  line-height: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.portal-top span {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.portal {
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px 24px 96px;
}

.portal-head {
  margin-bottom: 28px;
}

.portal-head h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  margin: 6px 0;
  text-wrap: balance;
}

.portal-head p {
  margin: 0;
}

.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.portal-main {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.portal-side {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

.portal-card {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}

.portal-card h2 {
  font-size: 1.3rem;
  margin: 0 0 8px;
}

.portal-card p:last-child {
  margin-bottom: 0;
}

.portal-narrow {
  max-width: 520px;
  margin: 40px auto;
}

.portal-now {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  color: inherit;
  text-decoration: none;
}

.portal-now > span:last-child {
  display: grid;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.portal-now strong {
  font-size: 0.95rem;
  color: var(--ink);
}

.portal-now-step {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

#tijdlijn {
  scroll-margin-top: 16px;
}

.portal-side-title {
  font-size: 1rem !important;
  margin-bottom: 18px !important;
}

.portal-section-title {
  font-size: 1.35rem;
  margin: 0;
}

.portal-flash {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
  color: #047857;
  font-weight: 500;
  animation: bubbleIn 0.45s var(--ease) both;
}

.portal-flash svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Intro above the contract */
.portal-intro {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #3B82F6, #1D4ED8);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.portal-intro h2 {
  color: #fff;
  font-size: 1.5rem;
  margin: 12px 0 8px;
}

.portal-intro p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  max-width: 60ch;
}

.portal-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.portal-step::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FDE68A;
  box-shadow: 0 0 0 3px rgba(253, 230, 138, 0.3);
}

/* The order confirmation reads like a document */
.contract {
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.contract-title {
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.contract-title h2 {
  font-size: 1.45rem;
  margin: 4px 0;
  color: var(--ink);
}

.contract-title p {
  margin: 0;
}

.contract-kicker,
.contract-label {
  margin: 0 0 4px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contract section {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.contract h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}

.contract section p {
  margin: 0;
}

.contract strong {
  color: var(--ink);
  font-weight: 600;
}

.contract-parties,
.contract-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contract-dl {
  display: grid;
  margin: 12px 0 0;
}

.contract-dl div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
}

.contract-dl div:first-child {
  border-top: 0;
}

.contract-dl dt {
  color: var(--text-muted);
}

.contract-dl dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.contract-signatures {
  padding-top: 22px;
}

.contract-signatures p {
  margin: 0;
}

.contract-sign {
  margin: 6px 0 4px !important;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
}

.contract-hash {
  margin: 20px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.contract-hash code {
  font-size: 0.74rem;
}

/* Sign form */
.portal-sign {
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--primary), var(--shadow-md);
}

.portal-sign h3 {
  margin: 0;
  font-size: 1.2rem;
}

.portal-sign .field {
  margin: 0;
}

.portal-sign .field input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
}

.portal-sign .field input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.portal-sign .terms-check {
  align-items: flex-start;
  line-height: 1.5;
}

.portal-sign .btn-primary {
  justify-self: start;
  margin-top: 4px;
}

.portal-fineprint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Waiting states */
.portal-pending,
.portal-due {
  position: relative;
}

.portal-pulse {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: portalPulse 1.8s ease-out infinite;
}

@keyframes portalPulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(59, 130, 246, 0); }
}

.portal-due {
  padding: 32px 28px;
}

.portal-due-date {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.portal-due-date::first-letter {
  text-transform: uppercase;
}

.portal-declined {
  box-shadow: inset 0 0 0 1.5px rgba(239, 68, 68, 0.35), var(--shadow-sm);
}

/* Versions */

/* Project page: a block per asset when an order has more */
.portal-asset {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  scroll-margin-top: 24px;
}

.portal-asset + .portal-asset {
  margin-top: 4px;
}

.portal-asset-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px;
}

.portal-asset-head > span:nth-child(2) {
  display: grid;
  flex: 1;
  min-width: 0;
}

.portal-asset-head strong {
  color: var(--ink);
}

.portal-asset-head small {
  color: var(--text-muted);
}

.portal-asset-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
}

.portal-asset-empty {
  padding: 0 4px 4px 46px;
}

.portal-version {
  display: grid;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  scroll-margin-top: 24px;
}

.portal-version-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
}

.portal-version-title {
  display: grid;
}

.portal-version-title strong {
  font-size: 1.05rem;
  color: var(--ink);
}

.portal-version-title small {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.portal-version .delivery-item {
  box-shadow: none;
  padding: 0;
}

.portal-version .delivery-response {
  box-shadow: none;
  background: var(--surface-muted);
}

.portal-notes {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface-muted);
  color: var(--ink);
}

.portal-version--old {
  gap: 0;
}

.portal-version--old[open] {
  gap: 16px;
}

.portal-version--old summary {
  list-style: none;
  cursor: pointer;
}

.portal-version--old summary::-webkit-details-marker {
  display: none;
}

/* Collapsible order confirmation */
.portal-contract {
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
}

.portal-contract summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  list-style: none;
  cursor: pointer;
}

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

.portal-contract summary > span:first-child {
  display: grid;
}

.portal-contract summary strong {
  color: var(--ink);
}

.portal-contract summary small {
  font-size: 0.86rem;
  color: var(--text-muted);
}

.portal-contract-toggle {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.25s var(--ease), translate 0.25s var(--ease);
}

.portal-contract[open] .portal-contract-toggle {
  rotate: 225deg;
  translate: 0 3px;
}

.portal-contract-body {
  display: grid;
  gap: 14px;
  padding: 0 12px 16px;
}

.portal-contract-body .contract {
  box-shadow: inset 0 0 0 1px var(--border);
}

.portal-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-left: 12px;
}

.portal-print svg {
  width: 18px;
  height: 18px;
}

/* Timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding-bottom: 20px;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: var(--border-strong);
}

.tl-item:last-child::before {
  display: none;
}

.tl-item.is-done::before {
  background: var(--primary);
}

.tl-marker {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--border-strong);
  color: #fff;
}

.tl-marker svg {
  width: 14px;
  height: 14px;
}

.tl-item.is-done .tl-marker {
  background: var(--primary);
  box-shadow: none;
}

.tl-item.is-current .tl-marker {
  box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 5px rgba(59, 130, 246, 0.14);
}

.tl-item.is-current .tl-marker::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.tl-item.is-stopped .tl-marker {
  background: #EF4444;
  box-shadow: none;
}

.tl-title {
  margin: 2px 0 2px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.tl-item.is-upcoming .tl-title {
  color: var(--text-secondary);
  font-weight: 500;
}

.tl-detail {
  margin: 0 !important;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.tl-item.is-current .tl-detail {
  color: var(--primary-hover);
  font-weight: 500;
}

@media (max-width: 900px) {
  .portal-grid {
    grid-template-columns: 1fr;
  }

  /* On phones the current step sits in the header; the full timeline follows the content */
  .portal-side {
    position: static;
  }

  .portal-now {
    display: flex;
  }
}

@media (max-width: 600px) {
  .portal-top,
  .portal {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contract-parties,
  .contract-signatures {
    grid-template-columns: 1fr;
  }

  .contract-dl div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .portal-sign,
  .portal-intro {
    padding: 22px;
  }

  .portal-sign .btn-primary {
    justify-self: stretch;
    justify-content: center;
  }

  .portal-version {
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-pulse,
  .portal-flash {
    animation: none;
  }
}

/* Printing or saving as pdf: just the order confirmation */
@media print {
  .portal-top,
  .portal-head,
  .portal-side,
  .portal-flash,
  .portal-intro,
  .portal-sign,
  .portal-section-title,
  .portal-version,
  .portal-due,
  .portal-pending,
  .portal-print,
  .portal-contract summary,
  .grain,
  .mobile-cta {
    display: none !important;
  }

  .portal-body {
    background: #fff;
  }

  .portal {
    padding: 0;
  }

  .portal-grid {
    display: block;
  }

  .portal-contract,
  .portal-contract-body,
  .contract,
  .portal-contract-body .contract {
    padding: 0;
    box-shadow: none !important;
  }

  .contract section {
    break-inside: avoid;
  }
}

/* ============ Expected delivery in the order form ============ */
.delivery-estimate {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: rgba(16, 185, 129, 0.06);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.22);
}

.delivery-estimate .live-dot {
  margin-top: 8px;
}

.delivery-estimate p {
  margin: 0;
}

.delivery-estimate-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.delivery-estimate-label span {
  color: #047857;
}

.delivery-estimate-value {
  margin: 2px 0 4px !important;
  color: var(--text-secondary);
}

.delivery-estimate-value strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.delivery-estimate-date {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.delivery-estimate-date:empty {
  display: none;
}

/* ============ Project page: payment, final files, personal help ============ */
.portal-top-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.portal-call svg,
.portal-helpline svg,
.portal-help-actions svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.portal-call svg {
  color: var(--primary);
}

.portal-helpline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0 !important;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.portal-helpline svg {
  margin-top: 3px;
  color: var(--primary);
}

.portal-helpline a {
  font-weight: 600;
  white-space: nowrap;
}

.portal-help {
  position: relative;
}

.portal-help-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: linear-gradient(160deg, #60A5FA, var(--primary-hover));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.portal-help-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.portal-help-actions .btn-primary,
.portal-help-actions .btn-secondary {
  justify-content: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.portal-help-actions .text-link {
  justify-self: center;
  font-size: 0.9rem;
}

/* Payment card */
.portal-pay {
  display: grid;
  gap: 10px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--primary), var(--shadow-md);
  scroll-margin-top: 24px;
}

.portal-pay h2 {
  margin: 0;
  font-size: 1.45rem;
}

.portal-pay > p {
  margin: 0;
  color: var(--text-secondary);
}

.portal-pay-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 10px 0 4px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--primary-soft);
}

.portal-pay-amount {
  display: grid;
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}

.portal-pay-amount small {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

.portal-pay form {
  margin: 0;
}

.portal-pay-note {
  font-size: 0.84rem;
  color: var(--text-muted) !important;
}

.portal-flash--wait {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
  color: var(--primary-hover);
}

/* Final files */
.final-files {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: rgba(16, 185, 129, 0.06);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.22);
}

.final-files.is-locked {
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}

.final-files ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.final-files > p.muted {
  margin: 12px 0 0;
  font-size: 0.88rem;
}

.final-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--ink);
  font-weight: 500;
}

.final-file svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #047857;
}

.final-file span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.final-file .btn-primary {
  padding: 9px 16px;
}

.final-file.is-locked {
  color: var(--text-secondary);
}

.final-file.is-locked svg {
  color: var(--text-muted);
}

.final-file small {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.delivery-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .portal-top-right > span {
    display: none;
  }

  .portal-pay {
    padding: 22px;
  }

  .portal-pay-row form,
  .portal-pay-row .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

@media print {
  .portal-pay,
  .portal-call,
  .portal-helpline {
    display: none !important;
  }
}

/* Personal help in the order form */
.order-help {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -8px 0 24px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.order-help-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(160deg, #60A5FA, var(--primary-hover));
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
}

.order-help a {
  font-weight: 600;
  white-space: nowrap;
}

.order-help[hidden] {
  display: none;
}

/* ============ Compare: the MakeItMove lane stands out ============ */
.compare-table thead .is-us {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(147, 197, 253, 0.55) 0%, transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(129, 140, 248, 0.45) 0%, transparent 60%),
    linear-gradient(150deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%);
  box-shadow: none;
}

.compare-table thead .is-us .col-name {
  color: #fff;
}

.compare-table thead .is-us .col-sub {
  color: rgba(255, 255, 255, 0.82);
}

.col-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
}

.col-badge svg {
  width: 12px;
  height: 12px;
  color: #FDE68A;
}

/* A single sheen across the header once the table comes into view */
.compare-table thead .is-us::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
  translate: -120% 0;
  pointer-events: none;
}

.js .compare.is-in thead .is-us::after {
  animation: compareSheen 1.3s var(--ease) 0.5s both;
}

@keyframes compareSheen {
  to { translate: 120% 0; }
}

/* The lane below the header: a clear blue edge instead of a faint tint */
.compare-table tbody .is-us,
.compare-table tfoot .is-us {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.05));
  box-shadow: inset 1.5px 0 0 rgba(37, 99, 235, 0.45), inset -1.5px 0 0 rgba(37, 99, 235, 0.45);
  font-weight: 500;
}

.compare-table tfoot .is-us {
  box-shadow:
    inset 1.5px 0 0 rgba(37, 99, 235, 0.45),
    inset -1.5px 0 0 rgba(37, 99, 235, 0.45),
    inset 0 -1.5px 0 rgba(37, 99, 235, 0.45);
}

.compare-table tbody tr:hover > .is-us {
  background: rgba(59, 130, 246, 0.11);
}

/* Solid checks in our lane */
.compare-table .is-us .rate--good {
  background: var(--success);
  color: #fff;
  box-shadow: 0 3px 8px -3px rgba(16, 185, 129, 0.7);
}

@media (max-width: 760px) {
  .compare-table tbody .is-us {
    background: rgba(59, 130, 246, 0.08);
    box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, 0.3);
  }

  .compare-table tfoot .is-us {
    background: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .compare.is-in thead .is-us::after {
    animation: none;
  }
}

/* Compare cells: icon and first line of text on one line, wrapped text aligned under the text */
.cmp-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.compare-table .cmp-cell .rate {
  flex-shrink: 0;
  margin: 0;
  vertical-align: 0;
  translate: 0 0.5px;
}

/* ============ How it works: luminous moving light ============ */
.gradient-bg--blue .blob {
  mix-blend-mode: screen;
  background: radial-gradient(circle closest-side, rgba(var(--c), 0.55), rgba(var(--c), 0));
}

.gradient-bg--blue .blob--1 { --c: 125, 211, 252; }
.gradient-bg--blue .blob--2 { --c: 186, 230, 253; opacity: 0.7; }
.gradient-bg--blue .blob--3 { --c: 129, 140, 248; opacity: 0.8; }
.gradient-bg--blue .blob--4 { --c: 255, 255, 255; opacity: 0.35; }

.gradient-bg--blue .blob--pointer {
  --c: 207, 236, 255;
  width: 45%;
  margin: -22.5% 0 0 -22.5%;
  opacity: 0.55;
}

/* A soft sheen at the top keeps the headline crisp; no whitening like the CTA */
.gradient-bg--blue::after {
  background:
    radial-gradient(900px 420px at 50% -6%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.25), transparent 30%);
}

@media (max-width: 760px) {
  /* Big drifting blobs cost battery on phones; keep a static glow */
  .gradient-bg--blue .blob {
    animation: none;
  }

  .gradient-bg--blue .blob--pointer {
    display: none;
  }
}

/* ============ Service pages: talk first (Custom Motion) ============ */
.service-help {
  margin: 18px 0 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.service-help a {
  font-weight: 600;
  white-space: nowrap;
}

.consult-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(147, 197, 253, 0.35), transparent 70%),
    radial-gradient(500px 300px at 100% 100%, rgba(125, 211, 252, 0.25), transparent 70%),
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
}

.consult-intro h2 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  text-wrap: balance;
}

.consult-intro p {
  margin: 0;
  max-width: 52ch;
  color: var(--text-secondary);
}

.consult-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(160deg, #60A5FA, var(--primary-hover));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 0 0 0 5px var(--primary-soft);
}

.consult-eyebrow {
  display: table;
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.consult-options {
  display: grid;
  gap: 10px;
}

.consult-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.consult-option:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35), var(--shadow-md);
}

.consult-option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.consult-option > span:last-child {
  display: grid;
}

.consult-option strong {
  color: var(--ink);
  font-weight: 600;
}

.consult-option small {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.consult-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.consult-icon svg {
  width: 20px;
  height: 20px;
}

.consult-option:first-child .consult-icon {
  background: var(--primary);
  color: #fff;
}

/* Two examples: a centered pair instead of a half-empty row of three */
.example-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 820px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .consult-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 24px;
  }
}

@media (max-width: 600px) {
  .example-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Phone numbers never break over two lines */
a[href^="tel:"] {
  white-space: nowrap;
}

/* Work videos: the exports have a hairline at the left edge, a hint of zoom crops it off */
video.lazy-video {
  display: block;
  background: #fff;
  scale: 1.012;
}

/* Example cards that open the full video */
.example-card--play {
  display: block;
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.example-card--play:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.example-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11, 13, 18, 0.15);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.example-play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  color: #0B0D12;
}

.example-play::before {
  content: '';
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-md);
  scale: 0.9;
  transition: scale 0.25s var(--ease);
}

.example-play svg {
  z-index: 1;
}

.example-card--play:hover .example-play,
.example-card--play:focus-visible .example-play {
  opacity: 1;
}

.example-card--play:hover .example-play::before,
.example-card--play:focus-visible .example-play::before {
  scale: 1;
}

.example-media {
  position: relative;
}

/* ============ Video lightbox ============ */
.video-lightbox {
  max-width: min(1040px, 92vw);
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  overflow: visible;
}

.video-lightbox::backdrop {
  background: rgba(8, 10, 15, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.video-lightbox-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}

.video-lightbox-video,
.video-lightbox-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-lightbox-video[hidden],
.video-lightbox-embed[hidden] {
  display: none;
}

.video-lightbox-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-lightbox-title {
  margin: 16px 4px 0;
  font-weight: 500;
  color: #fff;
}

.video-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}

.video-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.video-lightbox-close svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 600px) {
  .video-lightbox-close {
    top: -40px;
  }
}

/* ============ How it works: process visuals ============
   Four small UI scenes instead of photos, one per step. Everything is sized
   in cqw (1% of the visual's width), so a scene scales as one piece. The
   un-animated styles are the finished state (reduced motion / no JS); the
   loops only run while the visual is on screen (.is-playing, see site.js). */
.step-visual.pv {
  container-type: inline-size;
  background:
    radial-gradient(60% 70% at 10% 6%, rgba(59, 130, 246, 0.16), transparent 70%),
    radial-gradient(55% 60% at 96% 100%, rgba(125, 211, 252, 0.3), transparent 70%),
    linear-gradient(160deg, #F4F8FF, #E9F0FC);
}

.pv::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(37, 99, 235, 0.14) 1px, transparent 1.3px);
  background-size: 3.2cqw 3.2cqw;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(75% 75% at 50% 50%, #000 30%, transparent 100%);
}

.pv-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4cqw;
  font-family: var(--font-body);
  line-height: 1.2;
  color: #0B0D12;
}

.pv-panel {
  position: relative;
  width: 84cqw;
  padding: 3cqw;
  border-radius: 3cqw;
  background: #fff;
  box-shadow:
    0 0 0 0.2cqw rgba(15, 23, 42, 0.05),
    0 3cqw 6cqw -2.5cqw rgba(30, 58, 138, 0.3);
}

.pv b,
.pv em,
.pv i {
  font-style: normal;
}

.pv-live {
  flex-shrink: 0;
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: #10B981;
}

.pv-ext {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 4.6cqw;
  height: 3.2cqw;
  padding: 0 0.7cqw;
  border-radius: 0.8cqw;
  background: #3B82F6;
  color: #fff;
  font-size: 1.5cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pv-ext--fig { background: linear-gradient(135deg, #A259FF, #F24E1E); }
.pv-ext--svg { background: #F59E0B; }
.pv-ext--json { background: #10B981; }

/* --- 1. Choose a service --- */
.pv-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.2cqw;
  font-size: 1.9cqw;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8B91A0;
}

.pv-steps {
  display: flex;
  gap: 0.8cqw;
}

.pv-steps i {
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 1cqw;
  background: rgba(15, 23, 42, 0.1);
}

.pv-steps i.on {
  width: 3.6cqw;
  background: #3B82F6;
}

.pv-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8cqw;
}

.pv-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.6cqw;
  padding: 1.8cqw;
  border-radius: 2cqw;
  background: #fff;
  box-shadow: inset 0 0 0 0.22cqw rgba(15, 23, 42, 0.08);
}

.pv-ic {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 5.2cqw;
  height: 5.2cqw;
  border-radius: 1.4cqw;
  background: rgba(59, 130, 246, 0.1);
  color: #2563EB;
}

.pv-ic svg {
  width: 3cqw;
  height: 3cqw;
}

.pv-tile-text {
  display: grid;
  gap: 0.5cqw;
  min-width: 0;
}

.pv-tile b {
  font-size: 2.2cqw;
  font-weight: 600;
  white-space: nowrap;
}

.pv-tile em {
  font-family: var(--font-display);
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pv-tile em small {
  font-family: var(--font-body);
  font-size: 1.7cqw;
  font-weight: 500;
  letter-spacing: 0;
  color: #8B91A0;
}

.pv-meta {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  font-size: 1.8cqw;
  color: #5A6170;
  white-space: nowrap;
}

.pv-tile--pick {
  background: rgba(59, 130, 246, 0.06);
  box-shadow: inset 0 0 0 0.3cqw #3B82F6, 0 1.6cqw 3cqw -1.6cqw rgba(37, 99, 235, 0.45);
}

.pv-check {
  position: absolute;
  top: 1.2cqw;
  right: 1.2cqw;
  display: grid;
  place-items: center;
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background: #3B82F6;
  color: #fff;
}

.pv-check svg {
  width: 1.8cqw;
  height: 1.8cqw;
}

.pv-cursor {
  position: absolute;
  right: 4cqw;
  bottom: -1.4cqw;
  z-index: 2;
  width: 4.6cqw;
  height: 4.6cqw;
  opacity: 0;
  filter: drop-shadow(0 0.4cqw 0.6cqw rgba(0, 0, 0, 0.25));
}

.pv-summary {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  margin-top: 2.2cqw;
  padding: 1.3cqw 1.3cqw 1.3cqw 2.2cqw;
  border-radius: 2cqw;
  background: #F3F4F7;
  font-size: 2cqw;
  color: #5A6170;
}

.pv-summary strong {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 2.9cqw;
  color: #0B0D12;
}

.pv-btn {
  padding: 1.1cqw 2.4cqw;
  border-radius: 1.4cqw;
  background: #3B82F6;
  font-weight: 600;
  color: #fff;
}

.pv--choose .pv-tile--pick { animation: pvPick 7s var(--ease) infinite; }
.pv--choose .pv-check { animation: pvPop 7s var(--ease) infinite; }
.pv--choose .pv-cursor { animation: pvCursor 7s var(--ease) infinite; }
.pv--choose .pv-summary { animation: pvSummary 7s var(--ease) infinite; }

@keyframes pvPick {
  0%, 40%, 100% { background: #fff; box-shadow: inset 0 0 0 0.22cqw rgba(15, 23, 42, 0.08), 0 0 0 0 rgba(37, 99, 235, 0); }
  46%, 92% { background: rgba(59, 130, 246, 0.06); box-shadow: inset 0 0 0 0.3cqw #3B82F6, 0 1.6cqw 3cqw -1.6cqw rgba(37, 99, 235, 0.45); }
}

@keyframes pvPop {
  0%, 42% { opacity: 0; scale: 0; }
  48% { opacity: 1; scale: 1.18; }
  53%, 92% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 0; }
}

@keyframes pvCursor {
  0% { opacity: 0; translate: 24cqw 16cqw; scale: 1; }
  10% { opacity: 1; }
  36% { translate: 0 0; scale: 1; }
  40% { scale: 0.8; }
  45% { scale: 1; }
  78% { opacity: 1; translate: 0 0; }
  88%, 100% { opacity: 0; translate: 5cqw 9cqw; }
}

@keyframes pvSummary {
  0%, 44%, 100% { opacity: 0.4; }
  52%, 92% { opacity: 1; }
}

/* --- 2. Upload and brief --- */
.pv-form {
  display: grid;
  gap: 2.2cqw;
  width: 80cqw;
}

.pv-field {
  display: grid;
  gap: 1cqw;
}

.pv-label {
  font-size: 1.9cqw;
  font-weight: 600;
}

.pv-input {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: 6.2cqw;
  padding: 0 2cqw;
  border-radius: 1.6cqw;
  box-shadow: inset 0 0 0 0.3cqw #3B82F6, 0 0 0 0.9cqw rgba(59, 130, 246, 0.12);
  font-size: 2.1cqw;
}

.pv-input svg {
  flex-shrink: 0;
  width: 2.6cqw;
  height: 2.6cqw;
  color: #2563EB;
}

.pv-typed {
  display: inline-block;
  overflow: hidden;
  max-width: 44cqw;
  white-space: nowrap;
}

.pv-caret {
  width: 0.25cqw;
  height: 3cqw;
  background: #3B82F6;
  animation: pvBlink 1s steps(1) infinite;
}

@keyframes pvBlink {
  50% { opacity: 0; }
}

.pv-files {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4cqw;
}

.pv-file {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.9cqw 1.6cqw 0.9cqw 0.9cqw;
  border-radius: 1.4cqw;
  background: #F3F4F7;
  font-size: 1.8cqw;
  font-weight: 500;
  color: #5A6170;
}

.pv-chips {
  display: flex;
  gap: 1cqw;
}

.pv-chip {
  padding: 0.9cqw 1.9cqw;
  border-radius: 99px;
  box-shadow: inset 0 0 0 0.22cqw rgba(15, 23, 42, 0.1);
  font-size: 1.8cqw;
  font-weight: 600;
  color: #5A6170;
}

.pv-chip.is-on {
  background: rgba(59, 130, 246, 0.08);
  box-shadow: inset 0 0 0 0.3cqw #3B82F6;
  color: #2563EB;
}

.pv-textarea {
  display: grid;
  gap: 1.1cqw;
  padding: 1.8cqw 2cqw;
  border-radius: 1.6cqw;
  box-shadow: inset 0 0 0 0.22cqw rgba(15, 23, 42, 0.1);
}

.pv-textarea i {
  width: var(--w);
  height: 1.2cqw;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.1);
}

.pv-toast {
  position: absolute;
  right: 4.5cqw;
  bottom: 4.5cqw;
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.4cqw 2.2cqw 1.4cqw 1.4cqw;
  border-radius: 1.8cqw;
  background: #0B0D12;
  color: #fff;
  font-size: 2cqw;
  font-weight: 600;
  box-shadow: 0 2cqw 4cqw -1.5cqw rgba(11, 13, 18, 0.5);
}

.pv-ok {
  display: grid;
  place-items: center;
  width: 3cqw;
  height: 3cqw;
  border-radius: 50%;
  background: #10B981;
}

.pv-ok svg {
  width: 1.8cqw;
  height: 1.8cqw;
}

.pv--brief .pv-typed { animation: pvType 8s steps(26) infinite; }
.pv--brief .pv-file { animation: pvFileIn 8s var(--ease) calc(var(--i) * 0.35s) infinite backwards; }
.pv--brief .pv-chip.is-on { animation: pvChipOn 8s var(--ease) calc(var(--i) * 0.4s) infinite backwards; }
.pv--brief .pv-textarea i { animation: pvLine 8s var(--ease) calc(var(--i) * 0.25s) infinite backwards; }
.pv--brief .pv-toast { animation: pvToast 8s var(--ease) infinite; }

@keyframes pvType {
  0%, 4%, 100% { max-width: 0; }
  30%, 96% { max-width: 44cqw; }
}

@keyframes pvFileIn {
  0%, 32% { opacity: 0; translate: 0 1.5cqw; scale: 0.9; }
  38%, 94% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; }
}

@keyframes pvChipOn {
  0%, 50%, 100% { background: transparent; box-shadow: inset 0 0 0 0.22cqw rgba(15, 23, 42, 0.1); color: #5A6170; }
  54%, 94% { background: rgba(59, 130, 246, 0.08); box-shadow: inset 0 0 0 0.3cqw #3B82F6; color: #2563EB; }
}

@keyframes pvLine {
  0%, 62%, 100% { width: 0; }
  74%, 94% { width: var(--w); }
}

@keyframes pvToast {
  0%, 80% { opacity: 0; translate: 0 2cqw; scale: 0.94; }
  84%, 95% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 0 2cqw; }
}

/* --- 3. We animate it --- */
.pv-editor {
  width: 86cqw;
  padding: 0;
  overflow: hidden;
}

.pv-window {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  padding: 1.6cqw 2.2cqw;
  border-bottom: 0.2cqw solid rgba(15, 23, 42, 0.06);
  font-size: 1.8cqw;
  font-weight: 500;
  color: #8B91A0;
}

.pv-window i {
  width: 1.3cqw;
  height: 1.3cqw;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.12);
}

.pv-window span {
  margin-left: 1.2cqw;
}

.pv-canvas {
  display: grid;
  place-items: center;
  height: 23cqw;
  background:
    radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1.3px) 0 0 / 2.4cqw 2.4cqw,
    #F6F7FA;
}

.pv-art {
  position: relative;
  width: 15.2cqw;
  height: 19cqw;
  overflow: hidden;
  border-radius: 1.4cqw;
  background: linear-gradient(160deg, #60A5FA, #1D4ED8);
  box-shadow: 0 1.4cqw 3cqw -1.4cqw rgba(29, 78, 216, 0.55);
}

.pv-art-logo {
  position: absolute;
  top: 2.2cqw;
  left: 50%;
  width: 4.4cqw;
  height: 4.4cqw;
  margin-left: -2.2cqw;
  border-radius: 50%;
  background: #FDE68A;
}

.pv-art-title {
  position: absolute;
  top: 8.6cqw;
  left: 2cqw;
  right: 2cqw;
  height: 2.4cqw;
  border-radius: 0.6cqw;
  background: #fff;
  transform-origin: left;
}

.pv-art-sub {
  position: absolute;
  top: 12cqw;
  left: 2cqw;
  width: 8cqw;
  height: 1.3cqw;
  border-radius: 0.6cqw;
  background: rgba(255, 255, 255, 0.6);
  transform-origin: left;
}

.pv-art-cta {
  position: absolute;
  left: 2cqw;
  bottom: 2cqw;
  width: 6.4cqw;
  height: 2.6cqw;
  border-radius: 99px;
  background: #0B0D12;
}

.pv-timeline {
  display: grid;
  grid-template-columns: 12cqw 1fr;
  gap: 0 1.4cqw;
  padding: 2cqw 2.4cqw 2.4cqw;
  border-top: 0.2cqw solid rgba(15, 23, 42, 0.06);
}

.pv-names,
.pv-lanes {
  display: grid;
  gap: 1cqw;
}

.pv-names span {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  height: 2.8cqw;
  font-size: 1.7cqw;
  font-weight: 500;
  color: #5A6170;
}

.pv-names span::before {
  content: '';
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 0.3cqw;
  background: var(--c);
}

.pv-lanes {
  position: relative;
}

.pv-lane {
  position: relative;
  height: 2.8cqw;
  border-radius: 0.8cqw;
  background: rgba(15, 23, 42, 0.04);
}

.pv-bar {
  position: absolute;
  top: 0.5cqw;
  bottom: 0.5cqw;
  left: var(--s);
  right: calc(100% - var(--e));
  border-radius: 0.6cqw;
  background: var(--c);
  opacity: 0.85;
}

.pv-bar::before,
.pv-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1.3cqw;
  height: 1.3cqw;
  margin-top: -0.65cqw;
  border: 0.3cqw solid var(--c);
  border-radius: 0.2cqw;
  background: #fff;
  rotate: 45deg;
}

.pv-bar::before { left: -0.65cqw; }
.pv-bar::after { right: -0.65cqw; }

.pv-playhead {
  position: absolute;
  top: -1cqw;
  bottom: -1cqw;
  left: 64%;
  width: 0.3cqw;
  border-radius: 99px;
  background: #EF4444;
}

.pv-playhead::before {
  content: '';
  position: absolute;
  top: -0.8cqw;
  left: 50%;
  width: 1.8cqw;
  height: 1.8cqw;
  margin-left: -0.9cqw;
  border-radius: 50%;
  background: #EF4444;
}

.pv-status {
  position: absolute;
  top: 4cqw;
  right: 4cqw;
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  padding: 1.3cqw 1.9cqw;
  border-radius: 1.6cqw;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 0.2cqw rgba(15, 23, 42, 0.05), 0 1.6cqw 3cqw -1.4cqw rgba(30, 58, 138, 0.35);
  font-size: 1.9cqw;
  font-weight: 600;
}

.pv-live--amber {
  background: #F59E0B;
}

.pv-progress {
  width: 9cqw;
  height: 0.8cqw;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.08);
}

.pv-progress i {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: #3B82F6;
}

.pv--make .pv-playhead { animation: pvPlayhead 5s linear infinite; }
.pv--make .pv-art-logo { animation: pvArtLogo 5s linear infinite; }
.pv--make .pv-art-title { animation: pvArtTitle 5s linear infinite; }
.pv--make .pv-art-sub { animation: pvArtSub 5s linear infinite; }
.pv--make .pv-art-cta { animation: pvArtCta 5s linear infinite; }
.pv--make .pv-live--amber { animation: livePulse 1.8s ease-out infinite; }
.pv--make .pv-progress i { animation: pvProgress 5s var(--ease) infinite alternate; }

@keyframes pvPlayhead {
  from { left: 0%; }
  to { left: 100%; }
}

@keyframes pvArtLogo {
  0% { scale: 0; }
  16% { scale: 1.18; }
  25%, 92% { scale: 1; }
  100% { scale: 0; }
}

@keyframes pvArtTitle {
  0%, 18% { scale: 0 1; }
  45%, 92% { scale: 1 1; }
  100% { scale: 0 1; }
}

@keyframes pvArtSub {
  0%, 32% { scale: 0 1; }
  58%, 92% { scale: 1 1; }
  100% { scale: 0 1; }
}

@keyframes pvArtCta {
  0%, 52% { opacity: 0; translate: 0 2cqw; }
  64% { opacity: 1; translate: 0 -0.4cqw; }
  72%, 92% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 0; }
}

@keyframes pvProgress {
  from { width: 40%; }
  to { width: 86%; }
}

/* --- 4. Download and deliver --- */
.pv-delivery {
  display: grid;
  gap: 1.8cqw;
  width: 82cqw;
}

.pv-delivery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pv-delivery-head > span:first-child {
  display: grid;
  gap: 0.3cqw;
}

.pv-delivery-head b {
  font-size: 2.5cqw;
  font-weight: 600;
}

.pv-delivery-head small {
  font-size: 1.7cqw;
  color: #8B91A0;
}

.pv-approved {
  display: inline-flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.8cqw 1.6cqw 0.8cqw 1.1cqw;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.12);
  font-size: 1.8cqw;
  font-weight: 600;
  color: #047857;
}

.pv-approved svg {
  width: 1.9cqw;
  height: 1.9cqw;
}

.pv-player {
  position: relative;
  height: 15cqw;
  overflow: hidden;
  border-radius: 1.8cqw;
  background: linear-gradient(120deg, #1D4ED8, #60A5FA 60%, #7DD3FC);
}

.pv-player-art {
  position: absolute;
  top: -6cqw;
  right: 8cqw;
  width: 20cqw;
  height: 20cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FDE68A, rgba(253, 230, 138, 0) 70%);
  opacity: 0.8;
}

.pv-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 6cqw;
  height: 6cqw;
  margin: -3cqw 0 0 -3cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #2563EB;
  box-shadow: 0 1cqw 2cqw -0.8cqw rgba(11, 13, 18, 0.4);
}

.pv-play svg {
  width: 2.6cqw;
  height: 2.6cqw;
  margin-left: 0.4cqw;
}

.pv-scrub {
  position: absolute;
  left: 2cqw;
  right: 2cqw;
  bottom: 1.8cqw;
  height: 0.7cqw;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
}

.pv-scrub i {
  display: block;
  width: 60%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.pv-dl {
  display: grid;
  gap: 1cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-dl li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  overflow: hidden;
  padding: 1cqw 1cqw 1cqw 1.2cqw;
  border-radius: 1.4cqw;
  background: #F3F4F7;
  font-size: 1.9cqw;
  font-weight: 500;
}

.pv-dl-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-dl small {
  font-size: 1.7cqw;
  color: #8B91A0;
}

.pv-dl-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4.2cqw;
  height: 4.2cqw;
  border-radius: 1.1cqw;
  background: #fff;
  color: #2563EB;
  box-shadow: inset 0 0 0 0.2cqw rgba(15, 23, 42, 0.08);
}

.pv-dl-btn svg {
  grid-area: 1 / 1;
  width: 2.2cqw;
  height: 2.2cqw;
}

.pv-dl-btn--run {
  background: #10B981;
  color: #fff;
  box-shadow: none;
}

.pv-dl-btn--run .pv-down { opacity: 0; }

.pv-dl-row--run::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.4cqw;
  background: #10B981;
  opacity: 0;
}

.pv-whitelabel {
  position: absolute;
  top: 4.5cqw;
  left: 4.5cqw;
  padding: 1.2cqw 2cqw;
  border-radius: 99px;
  background: #0B0D12;
  color: #fff;
  font-size: 1.9cqw;
  font-weight: 600;
  rotate: -4deg;
  box-shadow: 0 1.6cqw 3cqw -1.4cqw rgba(11, 13, 18, 0.5);
}

.pv--deliver .pv-dl li { animation: pvRow 8s var(--ease) calc(0.2s + var(--i) * 0.25s) infinite backwards; }
.pv--deliver .pv-dl-btn--run { animation: pvDlBtn 8s var(--ease) infinite; }
.pv--deliver .pv-dl-btn--run .pv-down { animation: pvSwapOut 8s infinite; }
.pv--deliver .pv-dl-btn--run .pv-done { animation: pvSwapIn 8s var(--ease) infinite; }
.pv--deliver .pv-dl-row--run::after { animation: pvDlProgress 8s var(--ease) infinite; }
.pv--deliver .pv-scrub i { animation: pvScrub 8s linear infinite; }
.pv--deliver .pv-whitelabel { animation: pvBob 3s ease-in-out infinite alternate; }

@keyframes pvRow {
  0% { opacity: 0; translate: 0 1.5cqw; }
  8%, 94% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 0; }
}

@keyframes pvDlBtn {
  0%, 44%, 100% { background: #fff; color: #2563EB; box-shadow: inset 0 0 0 0.2cqw rgba(15, 23, 42, 0.08); scale: 1; }
  47% { scale: 0.86; }
  50%, 94% { background: #10B981; color: #fff; box-shadow: inset 0 0 0 0 transparent; scale: 1; }
}

@keyframes pvSwapOut {
  0%, 46%, 100% { opacity: 1; }
  48%, 94% { opacity: 0; }
}

@keyframes pvSwapIn {
  0%, 46%, 100% { opacity: 0; scale: 0.5; }
  52%, 94% { opacity: 1; scale: 1; }
}

@keyframes pvDlProgress {
  0%, 18% { width: 0; opacity: 1; }
  44% { width: 100%; opacity: 1; }
  56%, 100% { width: 100%; opacity: 0; }
}

@keyframes pvScrub {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes pvBob {
  from { translate: 0 0; }
  to { translate: 0 -1cqw; }
}

/* Only animate while on screen; paused before that (JS adds .is-playing) */
.js .pv:not(.is-playing) *,
.js .pv:not(.is-playing) *::before,
.js .pv:not(.is-playing) *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .pv *,
  .pv *::before,
  .pv *::after {
    animation: none !important;
  }
}

/* Phones: a 4:3 canvas and slightly larger UI, so the scene stays legible */
@media (max-width: 760px) {
  .step-visual.pv {
    aspect-ratio: 4 / 3;
  }

  .pv-stage {
    padding: 3cqw;
  }

  .pv-panel,
  .pv-toast,
  .pv-status,
  .pv-whitelabel {
    zoom: 1.08;
  }
}

/* ============ Product Motion example: dashboard walkthrough (pure CSS) ============
   A fictional SaaS, "Tempo": overview (numbers count up, chart draws) →
   Projects (rows stagger in, one is picked) → project detail (panel slides in,
   ring fills, tasks tick off) → back to the overview. 8s loop on a solid colour.
   Motion principles: ease-out entrances and ease-in-out moves, anticipation
   and follow-through (cursor press, panel overshoot), overlapping stagger,
   and one focus at a time: the cursor never moves while a screen changes.
   Sized in cqw so it scales as one piece. The un-animated styles show the
   finished overview (reduced motion). */
@property --aw-a { syntax: '<integer>'; initial-value: 48; inherits: false; }
@property --aw-b { syntax: '<integer>'; initial-value: 126; inherits: false; }
@property --aw-c { syntax: '<integer>'; initial-value: 98; inherits: false; }
@property --aw-d { syntax: '<integer>'; initial-value: 80; inherits: false; }

.example-media--aw {
  container-type: inline-size;
}

.aw {
  --aw-accent: #6D5DFC;
  --aw-soft: rgba(109, 93, 252, 0.1);
  --aw-ink: #16151F;
  --aw-muted: #8A8898;
  --aw-line: #ECEBF3;
  --aw-out: cubic-bezier(0.22, 1, 0.36, 1);
  --aw-io: cubic-bezier(0.65, 0, 0.35, 1);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #6D5DFC;
  font-family: var(--font-body);
  line-height: 1.2;
  color: var(--aw-ink);
}

.aw b,
.aw i,
.aw em {
  font-style: normal;
}

.aw-win {
  position: relative;
  width: 84cqw;
  height: 60cqw;
  overflow: hidden;
  border-radius: 2.2cqw;
  background: #fff;
  box-shadow: 0 0 0 0.2cqw rgba(255, 255, 255, 0.25), 0 4cqw 8cqw -3cqw rgba(30, 20, 110, 0.6);
}

.aw-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  height: 4cqw;
  padding: 0 1.8cqw;
  border-bottom: 0.2cqw solid var(--aw-line);
  background: #FAFAFC;
}

.aw-bar i {
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: #E2E1EA;
}

.aw-bar span {
  margin-left: 22cqw;
  padding: 0.5cqw 3cqw;
  border-radius: 99px;
  background: #F0EFF5;
  font-size: 1.3cqw;
  color: var(--aw-muted);
}

/* Sidebar */
.aw-side {
  position: absolute;
  top: 4cqw;
  left: 0;
  bottom: 0;
  width: 16cqw;
  padding: 2.2cqw 1.4cqw;
  border-right: 0.2cqw solid var(--aw-line);
  background: #FAFAFC;
}

.aw-brand {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  font-family: var(--font-display);
  font-size: 1.9cqw;
  font-weight: 600;
}

.aw-brand i {
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 0.8cqw;
  background: linear-gradient(145deg, #6D5DFC, #2DD4BF);
}

.aw-nav {
  position: absolute;
  top: 7cqw;
  left: 1.4cqw;
  right: 1.4cqw;
  display: grid;
  gap: 1.2cqw;
}

.aw-nav > span:not(.aw-nav-pill) {
  position: relative;
  display: flex;
  align-items: center;
  height: 4cqw;
  padding: 0 1.2cqw;
  font-size: 1.5cqw;
  font-weight: 500;
  color: #55535F;
}

.aw-nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4cqw;
  border-radius: 1cqw;
  background: var(--aw-soft);
  box-shadow: inset 0.35cqw 0 0 var(--aw-accent);
}

/* Main area and its views */
.aw-main {
  position: absolute;
  top: 4cqw;
  left: 16cqw;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.aw-main::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(22, 21, 31, 0.14);
  opacity: 0;
  pointer-events: none;
}

.aw-view {
  position: absolute;
  inset: 0;
  padding: 2.8cqw;
}

.aw-vB {
  opacity: 0;
}

.aw-h {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.aw small {
  font-size: 1.3cqw;
  color: var(--aw-muted);
}

/* View A: overview */
.aw-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6cqw;
  margin-top: 2.2cqw;
}

.aw-kpi {
  display: grid;
  gap: 0.6cqw;
  padding: 1.6cqw;
  border-radius: 1.4cqw;
  box-shadow: inset 0 0 0 0.2cqw var(--aw-line);
}

.aw-n {
  font-family: var(--font-display);
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.aw-kpi em {
  justify-self: start;
  padding: 0.2cqw 0.8cqw;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.12);
  font-size: 1.2cqw;
  font-weight: 600;
  color: #047857;
}

.aw-n--a span { counter-reset: a var(--aw-a); }
.aw-n--a span::after { content: counter(a); }
.aw-n--b span { counter-reset: b var(--aw-b); }
.aw-n--b span::after { content: counter(b); }
.aw-n--c span { counter-reset: c var(--aw-c); }
.aw-n--c span::after { content: counter(c); }
.aw-n--d span { counter-reset: d var(--aw-d); }
.aw-n--d span::after { content: counter(d); }

.aw-chart {
  position: absolute;
  left: 2.8cqw;
  right: 2.8cqw;
  bottom: 2.8cqw;
  height: 28cqw;
  padding: 1.6cqw;
  border-radius: 1.4cqw;
  box-shadow: inset 0 0 0 0.2cqw var(--aw-line);
}

.aw-chart svg {
  position: absolute;
  left: 1.6cqw;
  right: 1.6cqw;
  bottom: 1.6cqw;
  width: calc(100% - 3.2cqw);
  height: 20cqw;
  overflow: visible;
}

.aw-line {
  fill: none;
  stroke: var(--aw-accent);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.aw-area {
  fill: rgba(109, 93, 252, 0.12);
}

.aw-dot {
  position: absolute;
  right: 1.6cqw;
  bottom: calc(1.6cqw + 17cqw);
  width: 1.8cqw;
  height: 1.8cqw;
  margin: 0 -0.9cqw -0.9cqw 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.45cqw var(--aw-accent), 0 0 0 1.4cqw rgba(109, 93, 252, 0.18);
}

/* View B: projects */
.aw-table {
  display: grid;
  gap: 0.6cqw;
  margin-top: 2cqw;
}

.aw-thead,
.aw-row {
  display: grid;
  grid-template-columns: 2.4cqw 1fr 10cqw 11cqw;
  align-items: center;
  gap: 1.2cqw;
  padding: 0 1.2cqw;
}

.aw-thead {
  grid-template-columns: 1fr 10cqw 11cqw;
  height: 3.2cqw;
  padding-left: 4.8cqw;
  font-size: 1.2cqw;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aw-muted);
}

.aw-row {
  height: 5cqw;
  border-radius: 1.2cqw;
  font-size: 1.5cqw;
}

.aw-row b {
  font-weight: 600;
}

.aw-av {
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: var(--c);
}

.aw-pill {
  justify-self: start;
  padding: 0.4cqw 1cqw;
  border-radius: 99px;
  font-size: 1.2cqw;
  font-weight: 600;
}

.aw-pill--rv { background: rgba(109, 93, 252, 0.12); color: #5B4BE8; }
.aw-pill--lv { background: rgba(16, 185, 129, 0.12); color: #047857; }
.aw-pill--pr { background: rgba(245, 158, 11, 0.14); color: #B45309; }
.aw-pill--ok { background: #F0EFF5; color: #55535F; }

.aw-prog {
  height: 0.8cqw;
  overflow: hidden;
  border-radius: 99px;
  background: #F0EFF5;
}

.aw-prog i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--aw-accent);
}

/* Detail panel */
.aw-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 26cqw;
  padding: 2.8cqw 2.4cqw;
  background: #fff;
  box-shadow: -2cqw 0 4cqw -2cqw rgba(22, 21, 31, 0.3);
  translate: 105% 0;
}

.aw-panel .aw-h {
  margin-top: 0.4cqw;
}

.aw-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 13cqw;
  height: 13cqw;
  margin: 2.6cqw auto 2.4cqw;
}

.aw-ring svg {
  position: absolute;
  inset: 0;
  rotate: -90deg;
}

.aw-ring circle {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
}

.aw-ring-bg { stroke: #F0EFF5; }

.aw-ring-fg {
  stroke: var(--aw-accent);
  stroke-dasharray: 100;
  stroke-dashoffset: 20;
}

.aw-tasks {
  display: grid;
  gap: 1.3cqw;
}

.aw-task {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font-size: 1.45cqw;
  font-weight: 500;
}

.aw-task i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 0.6cqw;
  background: var(--aw-accent);
  color: #fff;
}

.aw-task svg {
  width: 1.4cqw;
  height: 1.4cqw;
}

/* A realistic system cursor: arrow by default, a hand over anything clickable.
   The hotspot (arrow tip) sits exactly on the translated point. */
.aw-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 3.4cqw;
  height: 3.4cqw;
  margin: -0.45cqw 0 0 -0.78cqw;
  opacity: 0;
  filter: drop-shadow(0 0.25cqw 0.35cqw rgba(0, 0, 0, 0.35));
  transform-origin: 0.78cqw 0.45cqw;
}

.aw-cursor svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aw-hand {
  left: -0.72cqw;
  opacity: 0;
}

/* ---- Choreography (8s; 1% = 80ms) ---- */
.aw-vA { animation: awA 8s var(--aw-io) infinite; }
.aw-vB { animation: awB 8s var(--aw-io) infinite; }
.aw-panel { animation: awPanel 8s var(--aw-out) infinite; }
.aw-main::after { animation: awScrim 8s ease infinite; }
.aw-nav-pill { animation: awNav 8s var(--aw-out) infinite; }

.aw-kpi { animation: awRise 8s var(--aw-out) calc(var(--i) * 0.08s) infinite backwards; }
.aw-n--a span { animation: awCountA 8s var(--aw-out) infinite; }
.aw-n--b span { animation: awCountB 8s var(--aw-out) infinite; }
.aw-n--c span { animation: awCountC 8s var(--aw-out) infinite; }
.aw-chart { animation: awRise 8s var(--aw-out) 0.24s infinite backwards; }
.aw-line { animation: awLine 8s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.aw-area { animation: awArea 8s ease infinite; }
.aw-dot { animation: awDot 8s var(--aw-out) infinite; }

.aw-row { animation: awRow 8s var(--aw-out) calc(var(--i) * 0.07s) infinite backwards; }
.aw-row:nth-child(2) { animation: awRow 8s var(--aw-out) 0s infinite backwards, awPick 8s ease infinite; }
.aw-prog i { animation: awFill 8s var(--aw-out) infinite; }

.aw-ring-fg { animation: awRing 8s var(--aw-out) infinite; }
.aw-n--d span { animation: awCountD 8s var(--aw-out) infinite; }
.aw-task i { animation: awTick 8s var(--aw-out) calc(var(--i) * 0.32s) infinite backwards; }
.aw-task svg { animation: awTickMark 8s var(--aw-out) calc(var(--i) * 0.32s) infinite backwards; }

.aw-cursor { animation: awCursor 8s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.aw-arrow { animation: awArrow 8s steps(1) infinite; }
.aw-hand { animation: awHand 8s steps(1) infinite; }

@keyframes awA {
  0% { opacity: 0; translate: 0 1.5cqw; }
  5%, 37% { opacity: 1; translate: 0 0; }
  43%, 100% { opacity: 0; translate: 0 -1.5cqw; }
}

@keyframes awB {
  0%, 39% { opacity: 0; translate: 0 1.5cqw; }
  44%, 92% { opacity: 1; translate: 0 0; }
  97%, 100% { opacity: 0; translate: 0 0; }
}

@keyframes awPanel {
  0%, 61% { translate: 105% 0; }
  67% { translate: -2% 0; }
  70%, 91% { translate: 0 0; }
  96%, 100% { translate: 105% 0; }
}

@keyframes awScrim {
  0%, 61%, 95%, 100% { opacity: 0; }
  67%, 91% { opacity: 1; }
}

@keyframes awNav {
  0%, 36% { translate: 0 0; }
  40% { translate: 0 5.7cqw; }
  42%, 90% { translate: 0 5.2cqw; }
  93.5% { translate: 0 -0.5cqw; }
  95.5%, 100% { translate: 0 0; }
}

@keyframes awRise {
  0%, 1% { opacity: 0; translate: 0 2cqw; }
  9%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes awCountA {
  0%, 3% { --aw-a: 0; }
  22%, 100% { --aw-a: 48; }
}

@keyframes awCountB {
  0%, 4% { --aw-b: 0; }
  23%, 100% { --aw-b: 126; }
}

@keyframes awCountC {
  0%, 5% { --aw-c: 0; }
  24%, 100% { --aw-c: 98; }
}

@keyframes awLine {
  0%, 7% { stroke-dashoffset: 100; }
  28%, 100% { stroke-dashoffset: 0; }
}

@keyframes awArea {
  0%, 14% { opacity: 0; }
  30%, 100% { opacity: 1; }
}

@keyframes awDot {
  0%, 27% { scale: 0; }
  30% { scale: 1.3; }
  33%, 100% { scale: 1; }
}

@keyframes awRow {
  0%, 42% { opacity: 0; translate: 0 1.6cqw; }
  49%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes awPick {
  0%, 54%, 95%, 100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
  56% { background: #F7F7FA; box-shadow: inset 0 0 0 0 transparent; }
  58.5%, 92% { background: var(--aw-soft); box-shadow: inset 0 0 0 0.2cqw rgba(109, 93, 252, 0.45); }
}

@keyframes awFill {
  0%, 44% { width: 0; }
  56%, 100% { width: var(--w); }
}

@keyframes awRing {
  0%, 67% { stroke-dashoffset: 100; }
  82%, 100% { stroke-dashoffset: 20; }
}

@keyframes awCountD {
  0%, 67% { --aw-d: 0; }
  82%, 100% { --aw-d: 80; }
}

@keyframes awTick {
  0%, 70% { background: #fff; box-shadow: inset 0 0 0 0.2cqw #D8D6E2; scale: 1; }
  71.5% { scale: 0.85; }
  73%, 100% { background: #6D5DFC; box-shadow: inset 0 0 0 0 transparent; scale: 1; }
}

@keyframes awTickMark {
  0%, 71% { scale: 0; }
  74% { scale: 1.3; }
  76%, 100% { scale: 1; }
}

/* Cursor: glide (ease-in-out), anticipate the click with a small press,
   and rest while a screen is changing */
@keyframes awCursor {
  0%, 20% { opacity: 0; translate: 60cqw 46cqw; scale: 1; }
  24% { opacity: 1; translate: 58cqw 44cqw; }
  34% { translate: 6cqw 18.2cqw; scale: 1; }
  35.5% { scale: 0.86; }
  37% { scale: 1; translate: 6cqw 18.2cqw; }
  44% { translate: 24cqw 32cqw; }
  52% { translate: 30cqw 27cqw; }
  56% { translate: 36cqw 23.5cqw; scale: 1; }
  57.5% { scale: 0.86; }
  59% { scale: 1; translate: 36cqw 23.5cqw; }
  66%, 84% { translate: 44cqw 42cqw; scale: 1; }
  90% { translate: 6cqw 13cqw; scale: 1; }
  91.5% { scale: 0.86; }
  93% { opacity: 1; scale: 1; }
  97%, 100% { opacity: 0; translate: 6cqw 13cqw; }
}

@keyframes awArrow {
  0%, 38%, 61%, 95% { opacity: 1; }
  32%, 54%, 88% { opacity: 0; }
}

@keyframes awHand {
  0%, 38%, 61%, 95% { opacity: 0; }
  32%, 54%, 88% { opacity: 1; }
}

/* Only animate while on screen (site.js adds .is-playing), never with reduced motion */
.js .aw:not(.is-playing) *,
.js .aw:not(.is-playing) *::before,
.js .aw:not(.is-playing) *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .aw *,
  .aw *::before,
  .aw *::after {
    animation: none !important;
  }
}

/* ============ Brand Motion example: chat icon (pure CSS) ============
   After tubik's "Animated Icons for Digital Products", told as a conversation,
   so there is always a speech bubble on screen. One 4s loop (keyframes were
   laid out on a millisecond timeline, 1% = 40ms):
     0-1040   the dots type two waves in the front bubble, which pulses along
     1040     the front bubble swells (anticipation), the dots crouch
     1220     it shrinks toward its tail tip (to 77%, it never disappears) and
              the dots take off at that exact moment, arcing into the back
              bubble, which grows from 85% to reach for them (lands 1480)
     1530     the back bubble catches them with a squash
     1760     two typing waves in the back bubble, which pulses along
     2880     they jump back (the back bubble is pressed down), land 3140;
              the back bubble recedes to 85% again
     3120     the front bubble grows out of its tail right under them: they are
              squashed by the hit, flung up left to right, ride its overshoot
              (which nudges the back bubble) and settle
   The back bubble layer is the full shape (unclipped), so it can move behind
   the front bubble without showing a cut edge. */
.example-media--ic {
  container-type: inline-size;
}

.ic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1C1529;
}

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

.ic-back,
.ic-front {
  position: absolute;
  inset: 0;
}

/* Tail tips, in % of the 4:3 frame */
.ic-back { transform-origin: 78.8% 54.4%; }
.ic-front { transform-origin: 32.5% 86.7%; }

/* The three dots, on a line along the front bubble's tilt, centred on the middle dot */
.ic-dots {
  position: absolute;
  top: 37.57cqw;
  left: 44.11cqw;
  width: 0;
  height: 0;
  rotate: -18.43deg;
  transform-origin: 0 0;
}

.ic-dots i {
  position: absolute;
  top: -3.08cqw;
  left: calc(-3.08cqw + (var(--i) - 1) * 13.12cqw);
  width: 6.16cqw;
  height: 6.16cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 16%, var(--c) 78%);
  box-shadow: 0 0 2.4cqw color-mix(in srgb, var(--c) 45%, transparent);
  transform-origin: 50% 100%;
}

.ic-dots i:nth-child(1) { --c: #8C93FF; }
.ic-dots i:nth-child(2) { --c: #C99BFF; }
.ic-dots i:nth-child(3) { --c: #F5A48E; }

.ic-back { animation: icBack 4s infinite; }
.ic-front { animation: icFront 4s infinite; }
.ic-dots { animation: icDots 4s infinite; }
.ic-dots i {
  animation:
    icHop 4s calc(var(--i) * 0.05s) infinite backwards,
    icLeap 4s infinite;
}

/* Front bubble: pulses with its typing, swells, shrinks toward its tail tip (to 77%, tilted 10deg clockwise, never gone) the moment the dots take off, grows back right under them */
@keyframes icFront {
  0% { scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  7% { scale: 1.025; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  11.25% { scale: 1.005; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  12.75% { scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  20.25% { scale: 1.025; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  24.5% { scale: 1.005; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  26% { scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  26% { scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  30.5% { scale: 1.05; rotate: 2deg; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.45); }
  39.25% { scale: 0.77; rotate: 10deg; }
  78% { scale: 0.77; rotate: 10deg; animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1.05); }
  86.75% { scale: 1.08; rotate: 3deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  92.25% { scale: 0.96; rotate: -1deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  97.75% { scale: 1; rotate: 0deg; }
  100% { scale: 1; rotate: 0deg; }
}

/* Back bubble: recedes (smaller) while the dots type in the front one, reaches out to catch them, pulses with their typing, is pressed down when they jump off and recedes again, nudged by the front bubble's overshoot */
@keyframes icBack {
  0% { scale: 0.85; rotate: 0deg; }
  30.5% { scale: 0.85; rotate: 0deg; animation-timing-function: cubic-bezier(0.3, 0.9, 0.4, 1); }
  37% { scale: 1.035; rotate: -1.5deg; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  38.25% { scale: 0.965; rotate: 0.5deg; animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1); }
  41.25% { scale: 1.015; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  44% { scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  51% { scale: 1.03; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  55.25% { scale: 1.005; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  56.75% { scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  64.25% { scale: 1.03; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  68.5% { scale: 1.005; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  70% { scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  72% { scale: 0.975; rotate: 0.5deg; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  75.25% { scale: 1.015; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  78% { scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  85% { scale: 0.82; rotate: 2deg; animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1); }
  92.5% { scale: 0.85; rotate: 0deg; }
  100% { scale: 0.85; rotate: 0deg; }
}

/* The dot row: front bubble -> arc -> back bubble (a touch smaller) -> arc -> front bubble. It follows the pulse of the bubble it sits in and rides the front bubble's overshoot */
@keyframes icDots {
  0% { translate: 0.0cqw 0.0cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  7% { translate: 0.29cqw -0.69cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  11.25% { translate: 0.06cqw -0.14cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  12.75% { translate: 0.0cqw 0.0cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  20.25% { translate: 0.29cqw -0.69cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  24.5% { translate: 0.06cqw -0.14cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  26% { translate: 0.0cqw 0.0cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  28.75% { translate: 0.0cqw 0.0cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  30.5% { translate: 0cqw 0.4cqw; rotate: -17deg; scale: 1; animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  33.75% { translate: 8.5cqw -18cqw; rotate: -25deg; scale: 0.95; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  37% { translate: 13.95cqw -13.04cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  38.25% { translate: 15.35cqw -11.94cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1); }
  41.25% { translate: 14.35cqw -12.73cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  44% { translate: 14.65cqw -12.49cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  51% { translate: 14.05cqw -12.96cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  55.25% { translate: 14.55cqw -12.57cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  56.75% { translate: 14.65cqw -12.49cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  64.25% { translate: 14.05cqw -12.96cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  68.5% { translate: 14.55cqw -12.57cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  70% { translate: 14.65cqw -12.49cqw; rotate: -18.43deg; scale: 0.9; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  72% { translate: 14.65cqw -12cqw; rotate: -20deg; scale: 0.9; animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  75.25% { translate: 6.5cqw -19cqw; rotate: -11deg; scale: 0.95; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  78.5% { translate: 0.0cqw 0.0cqw; rotate: -18.43deg; scale: 1; animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1.05); }
  85.5% { translate: 0.93cqw -2.2cqw; rotate: -15.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  92.25% { translate: -0.46cqw 1.1cqw; rotate: -19.43deg; scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  97.75% { translate: 0.0cqw 0.0cqw; rotate: -18.43deg; scale: 1; }
  100% { translate: 0.0cqw 0.0cqw; rotate: -18.43deg; scale: 1; }
}

/* Per dot, all together: squash and stretch for both leaps (transform, so it composes with icHop) */
@keyframes icLeap {
  0% { transform: none; }
  28.75% { transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  30.5% { transform: scale(1.18, 0.82); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  32.5% { transform: scale(0.86, 1.16); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  35% { transform: none; animation-timing-function: linear; }
  36.75% { transform: scale(0.94, 1.07); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  38.25% { transform: translateY(0.3cqw) scale(1.2, 0.8); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  40.5% { transform: translateY(-0.5cqw) scale(0.96, 1.04); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  42.25% { transform: none; }
  70% { transform: none; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  72% { transform: scale(1.16, 0.84); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  74% { transform: scale(0.87, 1.15); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  76.5% { transform: none; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  78.5% { transform: scale(1.1, 0.9); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  79.5% { transform: none; }
  100% { transform: none; }
}

/* Per dot, staggered left to right: two typing waves in each bubble and the reaction to the front bubble opening under them */
@keyframes icHop {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  1.75% { translate: 0 0; scale: 1.2 0.8; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  4.5% { translate: 0 -4cqw; scale: 0.86 1.16; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
  6.25% { translate: 0 -4.48cqw; scale: 1 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  9% { translate: 0 0; scale: 1.18 0.82; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  11.25% { translate: 0 -0.5cqw; scale: 0.96 1.04; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  13.25% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  15% { translate: 0 0; scale: 1.2 0.8; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  17.75% { translate: 0 -3.2cqw; scale: 0.86 1.16; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
  19.5% { translate: 0 -3.58cqw; scale: 1 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  22.25% { translate: 0 0; scale: 1.18 0.82; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  24.5% { translate: 0 -0.5cqw; scale: 0.96 1.04; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  26% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  44% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  45.75% { translate: 0 0; scale: 1.2 0.8; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  48.5% { translate: 0 -4cqw; scale: 0.86 1.16; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
  50.25% { translate: 0 -4.48cqw; scale: 1 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  53% { translate: 0 0; scale: 1.18 0.82; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  55.25% { translate: 0 -0.5cqw; scale: 0.96 1.04; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  57.25% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  59% { translate: 0 0; scale: 1.2 0.8; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  61.75% { translate: 0 -3.2cqw; scale: 0.86 1.16; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
  63.5% { translate: 0 -3.58cqw; scale: 1 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  66.25% { translate: 0 0; scale: 1.18 0.82; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  68.5% { translate: 0 -0.5cqw; scale: 0.96 1.04; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  70% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  78.5% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  80.25% { translate: 0 0.4cqw; scale: 1.32 0.7; animation-timing-function: cubic-bezier(0.15, 0.8, 0.3, 1); }
  83.25% { translate: 0 -3.6cqw; scale: 0.8 1.22; animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
  85.75% { translate: 0 -4.1cqw; scale: 1 1; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  89% { translate: 0 0; scale: 1.22 0.8; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  91.5% { translate: 0 -0.9cqw; scale: 0.94 1.06; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  93.5% { translate: 0 0; scale: 1.06 0.94; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  96% { translate: 0 0; scale: 1 1; }
  100% { translate: 0 0; scale: 1 1; }
}

.js .ic:not(.is-playing) *,
.js .ic:not(.is-playing) *::before,
.js .ic:not(.is-playing) *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .ic *,
  .ic *::before,
  .ic *::after {
    animation: none !important;
  }
}

/* Nav with brand mark: tighter on narrow phones (after the 600px rules) */
@media (max-width: 420px) {
  .nav-pill {
    gap: 14px;
    padding: 0 16px;
  }

  .nav-pill .nav-brand {
    margin-left: -6px;
    padding-right: 13px;
  }

  .nav-brand-mark {
    width: 28px;
    height: 28px;
  }
}

/* Campaign Motion examples are social/paid formats: show them in 4:5 */
.example-grid--portrait .example-media {
  aspect-ratio: 4 / 5;
}

/* Portfolio grid: the CSS-built examples (app walkthrough, chat icon) scale with their tile */
.portfolio-item--live {
  container-type: inline-size;
}

/* ============ Intro call: grows to full width as you scroll into it, parallax photo ============
   --grow (0..1) is set by site.js: 0 when the card enters the viewport (same width
   as the other sections' content), 1 once it is fully in view (edge to edge).
   --meet-shift (px, also from site.js) is how far the card edge moved out, so
   the text stays lined up with the content column while the card grows. */
.meet-wrap {
  --grow: 0;
  --meet-w0: min(100% - 48px, 1152px);
  width: calc(var(--meet-w0) + (100% - var(--meet-w0)) * var(--grow));
  margin: 0 auto;
}

.meet-wrap .meet-card {
  min-height: clamp(460px, 38vw, 640px);
  display: flex;
  align-items: center;
  border-radius: calc(var(--radius-xl) * (1 - var(--grow)));
}

/* Text keeps its place: lined up with the regular content column */
.meet-wrap .meet-content {
  --meet-inset: calc(var(--meet-shift, 0px) + 64px);
  max-width: calc(456px + var(--meet-inset));
  padding-left: var(--meet-inset);
}

/* Taller than the card, so it can drift while scrolling (translate is set by site.js) */
.meet-wrap .meet-photo {
  top: -14%;
  height: 128%;
  will-change: translate;
}

@media (max-width: 768px) {
  .meet-wrap .meet-card {
    align-items: flex-start;
  }

  .meet-wrap .meet-content {
    --meet-inset: calc(var(--meet-shift, 0px) + 24px);
    max-width: calc(496px + var(--meet-inset));
    padding: 36px var(--meet-inset);
  }
}

/* ======================================================================
   Hero v2: one story on one timeline (the previous hero with the Lottie
   messages and the card flip is kept in backups/hero-v1/).
     0.00  Sophie's message: typing pill, then it opens into her text; the two
           chats sit close together, like a conversation
     1.70  her attachment appears
     2.20  Mickey's reply, same rhythm
     4.10  his cursor goes to her attachment and clicks it (4.95)
     5.00  a block slides straight out of the attachment to the middle while
           both chats slide apart to make room (5.2 - 5.95)
     5.60  and unfolds right away into the design (a still of the social ad)
     6.50  he clicks the design: selection frame, a timeline slides up,
           keyframes pop in, he drags the playhead (7.05 - 7.85)
     7.85  render done ("Klaar"); the still holds a beat, then at 8.2 the
           design comes alive (site.js starts the video), "Opgeleverd"
     9.00  only then the work examples around it fade in
     loop  once the video has played through and starts over, Sophie reacts
           ("Wauw, top!", site.js adds .is-looped)
   ====================================================================== */

/* ---------- Chat messages (sizes in cqw, so they scale with the slot) ---------- */
.hero-animation.chat {
  position: relative;
  display: block;
  opacity: 1;
  animation: none;
  container-type: inline-size;
  text-align: left;
}

.chat--in { --t: 0s; }
.chat--out { --t: 2.2s; }

.chat-bubble {
  position: absolute;
  top: 3cqw;
  width: 88cqw;
  padding: 4.4cqw 5cqw;
  border-radius: 5.5cqw;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 32px -16px rgba(15, 23, 42, 0.22);
  animation:
    chatPop 0.5s cubic-bezier(0.3, 1.35, 0.5, 1) var(--t) both,
    chatExpand 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--t) + 1.15s) both;
}

.chat--in .chat-bubble {
  left: 1cqw;
  border-bottom-left-radius: 1.4cqw;
  transform-origin: 0 100%;
  --pill: inset(calc(100% - 11.5cqw) calc(100% - 21cqw) 0 0 round 5.5cqw 5.5cqw 5.5cqw 1.4cqw);
}

.chat--out .chat-bubble {
  top: auto;
  bottom: 21cqw; /* sits right above Mickey's profile, like Sophie's reply */
  right: 1cqw;
  border-bottom-right-radius: 1.4cqw;
  transform-origin: 100% 100%;
  --pill: inset(calc(100% - 11.5cqw) 0 0 calc(100% - 21cqw) round 5.5cqw 5.5cqw 1.4cqw 5.5cqw);
}

@keyframes chatPop {
  from { opacity: 0; scale: 0.6; translate: 0 4cqw; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}

/* The bubble is a small typing pill first, then opens up to the full message */
@keyframes chatExpand {
  from { clip-path: var(--pill); }
  to { clip-path: inset(0 0 0 0 round 5.5cqw); }
}

.chat-text {
  margin: 0;
  font-size: 4.15cqw;
  line-height: 1.42;
  color: var(--ink);
}

.chat-text span {
  display: block;
  animation: chatLine 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--t) + 1.2s + var(--l) * 0.07s) both;
}

.chat--out .chat-text span:first-child {
  margin-bottom: 0.7em;
}

@keyframes chatLine {
  from { opacity: 0; translate: 0 0.7em; filter: blur(2px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

.chat-typing {
  position: absolute;
  bottom: 4.1cqw;
  display: flex;
  gap: 1.3cqw;
  animation: chatTypingOut 0.2s ease-out calc(var(--t) + 1.1s) both;
}

.chat--in .chat-typing { left: 5.4cqw; }
.chat--out .chat-typing { right: 5.4cqw; }

.chat-typing i {
  width: 2.1cqw;
  height: 2.1cqw;
  border-radius: 50%;
  background: #9AA3B5;
  animation: chatDot 0.9s ease-in-out infinite;
}

.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatDot {
  0%, 60%, 100% { translate: 0 0; opacity: 0.5; }
  30% { translate: 0 -1.2cqw; opacity: 1; }
}

@keyframes chatTypingOut {
  to { opacity: 0; visibility: hidden; }
}

.chat-who {
  position: absolute;
  bottom: 5cqw;
  display: flex;
  align-items: center;
  gap: 3cqw;
  animation: chatWho 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--t) + 0.15s) both;
}

.chat--in .chat-who { left: 1cqw; }
.chat--out .chat-who { right: 1cqw; text-align: right; }

.chat-who b,
.chat-who small {
  display: block;
  line-height: 1.2;
}

.chat-who b {
  font-size: 4.6cqw;
  font-weight: 600;
  color: var(--ink);
}

.chat-who small {
  font-size: 3.6cqw;
  color: var(--text-secondary);
}

.chat-avatar {
  width: 12.5cqw;
  height: 12.5cqw;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 0.7cqw #fff, 0 4px 10px -4px rgba(15, 23, 42, 0.3);
  animation: chatAvatar 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--t) + 0.1s) both;
}

@keyframes chatWho {
  from { opacity: 0; translate: 0 2cqw; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes chatAvatar {
  from { scale: 0.4; }
  to { scale: 1; }
}

/* ---------- The design in the middle ---------- */
.hero-asset {
  position: relative;
  opacity: 1;
  animation: none;
  perspective: none;
}

.hero-card {
  position: absolute;
  top: 8%;
  left: 50%;
  height: 84%;
  aspect-ratio: 1 / 1;
  translate: -50% 0;
  container-type: inline-size;
}

/* Soft shadow of the card, fades in once it has opened */
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 30px 60px -24px rgba(15, 23, 42, 0.35);
  animation: fadeIn 0.6s var(--ease) 6s both;
}

.asset-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #8CA0FF;
  animation: fadeIn 0.01s linear 6.04s both;
}

.asset-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  pointer-events: none;
}

.asset-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Opens out of the file that just landed (a 44px tile in the middle) */
@keyframes assetOpen {
  0% { opacity: 0; clip-path: inset(41% 41% 41% 41% round 8px); }
  8% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0 round 14px); }
}

@keyframes assetSettle {
  from { scale: 1.12; }
  to { scale: 1; }
}

/* Like the frame name above a frame in a design tool */
.asset-frame-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  animation: flowTagIn 0.45s var(--ease) 6.1s both;
}

.asset-frame-label svg {
  width: 11px;
  height: 11px;
}

/* Selection frame with handles, while Mickey works on it */
.asset-select {
  position: absolute;
  inset: -5px;
  border: 1.5px solid #2563EB;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  animation:
    selectIn 0.25s var(--ease) 6.55s forwards,
    fadeOut 0.3s ease-out 7.9s forwards;
}

.asset-select i {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1.5px solid #2563EB;
  border-radius: 2px;
  background: #fff;
}

.asset-select i:nth-child(1) { top: -4.5px; left: -4.5px; }
.asset-select i:nth-child(2) { top: -4.5px; right: -4.5px; }
.asset-select i:nth-child(3) { bottom: -4.5px; left: -4.5px; }
.asset-select i:nth-child(4) { bottom: -4.5px; right: -4.5px; }

@keyframes selectIn {
  from { opacity: 0; scale: 1.03; }
  to { opacity: 1; scale: 1; }
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* Mini motion timeline: three layers, keyframes, a playhead */
.asset-timeline {
  --track: 30%;
  position: absolute;
  left: 3.5cqw;
  right: 3.5cqw;
  bottom: 3.5cqw;
  display: grid;
  gap: 2.6cqw;
  padding: 3.6cqw 4cqw;
  border-radius: 4.4cqw;
  background: rgba(15, 17, 24, 0.84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation:
    timelineIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) 6.65s forwards,
    timelineOut 0.35s cubic-bezier(0.5, 0, 0.75, 0) 7.9s forwards;
}

@keyframes timelineIn {
  from { opacity: 0; translate: 0 6cqw; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes timelineOut {
  from { opacity: 1; translate: 0 0; }
  to { opacity: 0; translate: 0 6cqw; }
}

.tl-row {
  position: relative;
  height: 3.2cqw;
}

.tl-row b {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  font-size: 3cqw;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}

/* The track line */
.tl-row::after {
  content: '';
  position: absolute;
  left: var(--track);
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}

/* Keyframe diamonds, placed along the track */
.tl-row i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(var(--track) + (100% - var(--track)) * var(--x));
  width: 2.8cqw;
  height: 2.8cqw;
  margin: -1.4cqw 0 0 -1.4cqw;
  border-radius: 0.5cqw;
  background: #60A5FA;
  rotate: 45deg;
  opacity: 0;
  animation: keyPop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) calc(6.75s + var(--k) * 0.07s) forwards;
}

.tl-row:nth-child(2) i { background: #F59E0B; }
.tl-row:nth-child(3) i { background: #F472B6; }

@keyframes keyPop {
  from { opacity: 0; scale: 0.2; }
  to { opacity: 1; scale: 1; }
}

.tl-playhead {
  position: absolute;
  top: 2.4cqw;
  bottom: 2.4cqw;
  left: calc(4cqw + (100% - 8cqw) * 0.3);
  width: 1.5px;
  background: #fff;
  animation: playhead 0.8s cubic-bezier(0.45, 0, 0.55, 1) 7.05s forwards;
}

.tl-playhead::before {
  content: '';
  position: absolute;
  top: -1.2cqw;
  left: 50%;
  width: 2.8cqw;
  height: 2.8cqw;
  translate: -50% 0;
  border-radius: 0.8cqw 0.8cqw 50% 50%;
  background: #fff;
}

/* From the start of the track to its end (70% of the inner width) */
@keyframes playhead {
  to { translate: calc((100cqw - 7cqw - 8cqw) * 0.7) 0; }
}

/* ---------- Hand-off, retimed to the new story ---------- */
.flow-tag--in { animation-delay: 0.7s; }
.flow-draw--a { animation: flowDraw 0.5s var(--ease) 5.95s forwards; }
.flow-arrow--a { animation: fadeIn 0.2s ease-out 6.4s forwards; }
.flow-draw--b { animation: flowDraw 0.5s var(--ease) 6.15s forwards; }
.flow-arrow--b { animation: fadeIn 0.2s ease-out 6.6s forwards; }
.flow-tag--out { animation-delay: 2.6s; }
.flow-draw--c { animation: flowDraw 0.6s var(--ease) 8.25s forwards; }
.flow-arrow--c { animation: fadeIn 0.2s ease-out 8.8s forwards; }
.flow-tag--done { animation-delay: 8.55s; }

/* Mickey clicks the attachment (4.95s): it gives a little press */
.flow-attachment {
  animation:
    flowTagIn 0.5s var(--ease) 1.7s forwards,
    chipPress 0.35s var(--ease) 4.92s;
}

@keyframes chipPress {
  40% { scale: 0.95; }
}

/* The file: a block slides straight out of the attachment to the middle and
   unfolds into the design card (its exact size and spot), then hands over to
   the real card underneath. Coordinates in the 917 x 314 frame; the
   attachment sits at x 164 while the chats are close together. */
.flow-file {
  position: absolute;
  overflow: hidden;
  background: #FCEFE3;
  opacity: 0;
  animation: fileOpen 1.1s linear 5s both;
}

.flow-file img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow-file b {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: linear-gradient(135deg, #A259FF, #F24E1E);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  animation: fadeOut 0.15s ease-out 5.55s forwards;
}

@keyframes fileOpen {
  0% {
    left: 170px; top: 227px; width: 40px; height: 40px; border-radius: 6px;
    opacity: 0; scale: 0.6;
    box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(15, 23, 42, 0.4);
    animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  9% {
    left: 170px; top: 227px; width: 40px; height: 40px; border-radius: 6px;
    opacity: 1; scale: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  55% {
    left: 438.5px; top: 137px; width: 40px; height: 40px; border-radius: 6px;
    opacity: 1; scale: 1;
    box-shadow: 0 0 0 2px #fff, 0 10px 22px -8px rgba(15, 23, 42, 0.45);
    animation-timing-function: cubic-bezier(0.2, 0.85, 0.25, 1);
  }
  95.5% {
    left: 326.6px; top: 25.12px; width: 263.8px; height: 263.8px; border-radius: 14px;
    opacity: 1; scale: 1;
    box-shadow: 0 0 0 0 #fff, 0 30px 60px -24px rgba(15, 23, 42, 0.35);
  }
  100% {
    left: 326.6px; top: 25.12px; width: 263.8px; height: 263.8px; border-radius: 14px;
    opacity: 0; scale: 1;
  }
}

/* Mickey's cursor: comes over, clicks the design, drags the playhead, leaves */
.flow-cursor {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  animation: cursorTrip 4.35s linear 4.1s both;
}

.flow-cursor svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.3));
}

.flow-cursor span {
  margin: 16px 0 0 -4px;
  padding: 2px 8px;
  border-radius: 999px 999px 999px 4px;
  background: #2563EB;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(37, 99, 235, 0.6);
}

/* Timing (4.1s = 0%, 4.35s long, positions in the 917 x 314 frame; the arrow
   tip is 5,3 into the svg):
   4.2 visible under Mickey's avatar, 4.9 on Sophie's attachment (paperclip at
   180,247 while the chats sit close), 4.95 click, waits while the file opens,
   then goes to the design and clicks it at 6.5, 7.0 on the playhead (x 414, y 228), 7.05 grab,
   7.85 drop at the end (x 566), 8.45 gone. */
@keyframes cursorTrip {
  0% { translate: 760px 262px; scale: 0.8; opacity: 0; animation-timing-function: var(--ease); }
  2.3% { translate: 748px 255px; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  18.4% { translate: 175px 244px; scale: 1; opacity: 1; animation-timing-function: var(--ease); }
  19.5% { translate: 175px 244px; scale: 0.84; opacity: 1; animation-timing-function: var(--ease); }
  23% { translate: 175px 244px; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  38% { translate: 186px 236px; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  54% { translate: 472px 172px; scale: 1; opacity: 1; animation-timing-function: var(--ease); }
  55.2% { translate: 472px 172px; scale: 0.84; opacity: 1; animation-timing-function: var(--ease); }
  58% { translate: 472px 172px; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  66.7% { translate: 409px 225px; scale: 1; opacity: 1; animation-timing-function: var(--ease); }
  67.8% { translate: 409px 225px; scale: 0.84; opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  86.2% { translate: 561px 225px; scale: 0.84; opacity: 1; animation-timing-function: var(--ease); }
  87.8% { translate: 561px 225px; scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  100% { translate: 640px 300px; scale: 0.9; opacity: 0; }
}

/* ---------- Close together while they chat, apart once the file opens ----------
   Only on the full row (from 901px); the chats and their captions start 150px
   toward the middle and slide out as the file flies in. transform is used here
   so it stacks with the translate of their own entrance animations. */
@media (min-width: 901px) {
  .chat--in,
  .flow-tag--in,
  .flow-attachment { --spread: 150px; }

  .chat--out,
  .flow-tag--out { --spread: -150px; }

  .hero-animation.chat {
    animation: heroSpread 0.75s cubic-bezier(0.65, 0, 0.35, 1) 5.2s both;
  }

  .flow-tag--in {
    animation:
      flowTagIn 0.5s var(--ease) 0.7s forwards,
      heroSpread 0.75s cubic-bezier(0.65, 0, 0.35, 1) 5.2s both;
  }

  .flow-tag--out {
    animation:
      flowTagIn 0.5s var(--ease) 2.6s forwards,
      heroSpread 0.75s cubic-bezier(0.65, 0, 0.35, 1) 5.2s both;
  }

  .flow-attachment {
    animation:
      flowTagIn 0.5s var(--ease) 1.7s forwards,
      chipPress 0.35s var(--ease) 4.92s,
      heroSpread 0.75s cubic-bezier(0.65, 0, 0.35, 1) 5.2s both;
  }
}

@keyframes heroSpread {
  from { transform: translateX(var(--spread, 0px)); }
  to { transform: translateX(0); }
}

/* ---------- Work examples around it: fewer, real, calm; they arrive once the
   motion scene is done (9s) ---------- */
.hero-float {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85), 0 1px 2px rgba(15, 23, 42, 0.05), 0 24px 44px -20px rgba(15, 23, 42, 0.22);
  opacity: 0;
  animation:
    floatIn 1.2s var(--ease) var(--in, 0.4s) forwards,
    floatBob var(--bob, 12s) ease-in-out var(--in, 0.4s) infinite;
}

.hero-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-float--1 { width: 128px; aspect-ratio: 4 / 3; left: calc(50% - 628px); top: 132px; rotate: -2deg; --in: 9s; --bob: 13s; }
.hero-float--2 { width: 92px; aspect-ratio: 4 / 5; left: calc(50% - 596px); top: 322px; rotate: 1.5deg; --in: 9.3s; --bob: 11s; }
.hero-float--3 { width: 128px; aspect-ratio: 4 / 3; right: calc(50% - 628px); top: 168px; rotate: 2deg; --in: 9.15s; --bob: 12s; }
.hero-float--4 { width: 104px; aspect-ratio: 4 / 3; right: calc(50% - 606px); top: 352px; rotate: -1.5deg; --in: 9.45s; --bob: 14s; }

/* Quiet: slightly muted until you look at them */
.hero-float {
  filter: saturate(0.85);
}

.hero-float img {
  opacity: 0.92;
}

@keyframes floatBob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes floatIn {
  from { opacity: 0; scale: 0.94; }
  to { opacity: 1; scale: 1; }
}

/* ---------- Reduced motion: the finished state, no story ---------- */
@media (prefers-reduced-motion: reduce) {
  .chat-bubble,
  .chat-text span,
  .chat-who,
  .chat-avatar,
  .hero-card::before,
  .asset-media,
  .asset-media video,
  .asset-frame-label {
    animation: none;
    opacity: 1;
  }

  .chat-typing,
  .asset-select,
  .asset-timeline,
  .flow-file,
  .flow-cursor {
    display: none;
  }
}

/* Reduced motion: the chats in their final spot, captions simply shown */
@media (prefers-reduced-motion: reduce) {
  .hero-animation.chat,
  .flow-tag--in,
  .flow-tag--out,
  .flow-attachment {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* Captions sit right above their bubble, lined up with its outer edge */
.hero-flow .flow-tag--in { top: 50px; left: 14px; }
.hero-flow .flow-tag--out { top: 50px; right: 14px; }
.hero-flow .flow-attachment { top: 240px; left: 14px; }
.hero-flow .flow-tag--done { top: 244px; right: 14px; }

/* ---------- Work around it: real, moving, and they lean toward your mouse ---------- */
.hero-float video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-float--ic {
  container-type: inline-size;
}

.hero-float--1 { width: 150px; aspect-ratio: 4 / 3; left: calc(50% - 630px); top: 120px; rotate: -2deg; }
.hero-float--2 { width: 132px; aspect-ratio: 4 / 3; left: calc(50% - 610px); top: 318px; rotate: 1.5deg; }
.hero-float--3 { width: 172px; aspect-ratio: 4 / 3; right: calc(50% - 634px); top: 132px; rotate: 2deg; }
.hero-float--4 { width: 132px; aspect-ratio: 4 / 3; right: calc(50% - 612px); top: 330px; rotate: -1.5deg; }

.hero-float[data-tilt] {
  pointer-events: auto;
  cursor: default;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--hs, 1));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s var(--ease), filter 0.4s var(--ease);
}

.hero-float[data-tilt].is-hover {
  --hs: 1.07;
  filter: saturate(1);
  transition-duration: 0.15s, 0.4s, 0.4s;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95), 0 2px 4px rgba(15, 23, 42, 0.06), 0 34px 60px -22px rgba(15, 23, 42, 0.35);
}

/* A soft light that follows the mouse across the card */
.hero-float[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.hero-float[data-tilt].is-hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-float[data-tilt] {
    transform: none;
  }
}

/* ---------- Work examples: pushed back into the scene ----------
   They hang behind the story in soft 3D: turned slightly toward the middle,
   set back in depth, a little out of focus and muted, so the hero reads calm.
   They arrive by pulling into (soft) focus; hovering brings one to the front,
   sharp and in full colour. */
.hero-float {
  --blur: 1.4px;
  --z: -50px;
  --turn: 16deg;
  opacity: 0.78;
  filter: blur(var(--blur)) saturate(0.7);
  animation:
    floatFocus 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--in, 9s) backwards,
    floatBob var(--bob, 12s) ease-in-out var(--in, 9s) infinite;
}

.hero-float--1,
.hero-float--2 { --turn: 16deg; }
.hero-float--3,
.hero-float--4 { --turn: -16deg; }

/* The lower pair sits further back */
.hero-float--2,
.hero-float--4 { --blur: 2.2px; --z: -110px; }

.hero-float[data-tilt] {
  transform:
    perspective(800px)
    rotateY(var(--turn))
    translateZ(var(--z))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    scale(var(--hs, 1));
  transition:
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.6s var(--ease),
    opacity 0.6s var(--ease),
    box-shadow 0.4s var(--ease);
}

.hero-float[data-tilt].is-hover {
  --turn: 0deg;
  --z: 0px;
  --hs: 1.08;
  opacity: 1;
  filter: blur(0) saturate(1);
  z-index: 3;
  transition-duration: 0.5s, 0.35s, 0.35s, 0.4s;
}

@keyframes floatFocus {
  from { opacity: 0; filter: blur(10px) saturate(0.7); scale: 0.96; }
  to { opacity: 0.78; filter: blur(var(--blur)) saturate(0.7); scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float {
    animation: none;
  }
}

/* No blur after all: depth comes from the 3D turn, the distance and a light
   mute; the images themselves stay sharp */
.hero-float,
.hero-float--2,
.hero-float--4 {
  --blur: 0px;
}

.hero-float {
  filter: saturate(0.8);
}

@keyframes floatFocus {
  from { opacity: 0; filter: blur(8px) saturate(0.8); scale: 0.96; }
  to { opacity: 0.85; filter: blur(0) saturate(0.8); scale: 1; }
}

.hero-float {
  opacity: 0.85;
}

/* Soft light in the middle, a touch darker toward the edges: the story sits
   in the light, the work around it falls back */
.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 48% at 50% 40%, #FFFFFF 0%, rgba(255, 255, 255, 0.8) 35%, rgba(255, 255, 255, 0.3) 65%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 95% 85% at 50% 42%, rgba(15, 23, 42, 0.012) 20%, rgba(15, 23, 42, 0.05) 50%, rgba(15, 23, 42, 0.16) 100%);
}

/* Floating work: no white haze (full opacity, no white ring), no hover glow,
   a smaller hover lift */
.hero-float,
.hero-float[data-tilt].is-hover {
  opacity: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 22px 40px -20px rgba(15, 23, 42, 0.3);
}

.hero-float img {
  opacity: 1;
}

.hero-float[data-tilt]::after {
  display: none;
}

.hero-float[data-tilt].is-hover {
  --hs: 1.03;
}

@keyframes floatFocus {
  from { opacity: 0; filter: blur(8px) saturate(0.8); scale: 0.96; }
  to { opacity: 1; filter: blur(0) saturate(0.8); scale: 1; }
}

/* Calmer: the whole story row (messages, design, lines, cursor) at 90%.
   Scaled from the top; the negative margin gives back the 31px the smaller
   row no longer uses, so the headline moves up with it. */
@media (min-width: 901px) {
  .hero .hero-composition {
    scale: 0.9;
    transform-origin: 50% 0;
    margin-bottom: -14px;
  }
}

/* Chat bubbles and the attachment: solid white */
.chat-bubble {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.flow-attachment {
  background: #FFFFFF;
}

/* The hero's ground (vignette) runs up behind the nav, so there is no seam at
   the top: pull the section up by the nav's height and pad it back down */
.hero {
  margin-top: -56px;
  padding-top: 100px;
}

@media (max-width: 600px) {
  .hero {
    margin-top: -50px;
    padding-top: 78px;
  }
}

/* The hero now starts behind the nav (56px higher), so the work examples keep
   their spot next to the story */
.hero-float--1 { top: 176px; }
.hero-float--2 { top: 374px; }
.hero-float--3 { top: 188px; }
.hero-float--4 { top: 386px; }

/* ---------- Hero ends just above the fold: section 2 peeks in ----------
   The hero fills the screen minus 56px; "Wat wij in beweging brengen" rises
   as a white sheet with rounded top corners and a small grab handle, a quiet
   hint that there is more below. (The floating work examples were removed
   for a calmer hero; they are in backups/hero-v2d/.) */
.hero {
  min-height: calc(100svh - 56px);
}

#diensten {
  z-index: 1;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -18px 40px -28px rgba(15, 23, 42, 0.22);
}

#diensten::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
}

@media (max-width: 600px) {
  #diensten {
    border-radius: 24px 24px 0 0;
  }
}

/* ======================================================================
   Hero v2: small chat-UI details (times, online status, delivery time,
   render progress, formats, Sophie's reaction, canvas grid)
   ====================================================================== */

/* Online status on both avatars */
.chat-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.chat-online {
  position: absolute;
  right: 0.2cqw;
  bottom: 0.2cqw;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 0.7cqw #fff;
  animation: onlinePop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--t) + 0.45s) both;
}

@keyframes onlinePop {
  from { scale: 0; }
  to { scale: 1; }
}

/* Sent time, shows up with the message text */
.chat-time {
  animation: fadeIn 0.4s var(--ease) calc(var(--t) + 1.55s) both;
}

/* Mickey's promise: the live delivery time for Campaign Motion (from the admin) */
.chat-eta {
  position: absolute;
  left: 1cqw;
  bottom: 7.8cqw;
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.3cqw 2.8cqw 1.3cqw 2.2cqw;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs);
  font-size: 3.3cqw;
  font-weight: 600;
  color: var(--primary-hover);
  white-space: nowrap;
  animation: flowTagIn 0.45s var(--ease) 3.85s both;
}

.chat-eta svg {
  width: 3.6cqw;
  height: 3.6cqw;
}

/* Above the card, right: render progress while he animates, then the formats */
.asset-status {
  position: absolute;
  left: 2px;
  bottom: calc(100% + 6px);
  display: grid;
  justify-items: start;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.asset-status > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.st-progress {
  opacity: 0;
  animation:
    fadeIn 0.25s var(--ease) 6.95s forwards,
    fadeOut 0.2s ease-out 7.9s forwards;
}

.st-bar {
  width: 52px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.1);
}

.st-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transform-origin: 0 50%;
  animation: stBar 0.8s cubic-bezier(0.45, 0, 0.55, 1) 7.05s both;
}

@keyframes stBar {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@property --st-pct {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.st-pct {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  counter-reset: st var(--st-pct);
  animation: stPct 0.8s cubic-bezier(0.45, 0, 0.55, 1) 7.05s both;
}

.st-pct::after {
  content: counter(st);
}

@keyframes stPct {
  from { --st-pct: 0; }
  to { --st-pct: 100; }
}

.st-done {
  color: #16A34A;
  opacity: 0;
  animation:
    fadeIn 0.2s var(--ease) 7.9s forwards,
    fadeOut 0.25s ease-out 8.4s forwards;
}

.st-done svg {
  width: 12px;
  height: 12px;
}

.st-formats {
  gap: 4px;
}

.st-formats i {
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
  color: var(--text-secondary);
  animation: flowTagIn 0.35s var(--ease) calc(8.5s + var(--f) * 0.07s) both;
}

/* Sophie's reaction, as a notification on Mickey's side (full row only) */
.hero-toast {
  display: none;
}

@media (min-width: 901px) {
  .hero-toast {
    position: absolute;
    top: -66px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
    color: var(--text-secondary);
    animation: toastIn 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) 8.9s both;
  }
}

.hero-toast img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.hero-toast b {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.hero-toast small {
  margin-left: 4px;
  font-weight: 500;
  color: var(--text-muted);
}

@keyframes toastIn {
  from { opacity: 0; translate: 0 -10px; scale: 0.96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-online,
  .chat-time,
  .chat-eta,
  .st-formats i {
    animation: none;
  }

  .st-progress,
  .st-done {
    display: none;
  }
}

/* One slot above the card, left: frame name -> render progress -> done ->
   the delivered formats */
.asset-frame-label {
  animation:
    flowTagIn 0.45s var(--ease) 6.1s both,
    fadeOut 0.2s ease-out 6.8s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .asset-frame-label {
    display: none;
  }
}

/* Sophie's reaction once the video has played and looped (site.js adds
   .is-looped to the hero): a new message right above her profile, like a real
   chat; her first message moves up to make room and the "Aangeleverd" caption
   steps aside */
.chat-reply {
  position: absolute;
  left: 1cqw;
  bottom: 21cqw;
  margin: 0;
  padding: 2.6cqw 4.4cqw;
  border-radius: 5.5cqw 5.5cqw 5.5cqw 1.4cqw;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 32px -16px rgba(15, 23, 42, 0.22);
  font-size: 4.15cqw;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
  transform-origin: 0 100%;
  opacity: 0;
}

.is-looped .chat-reply {
  animation: chatPop 0.5s cubic-bezier(0.3, 1.35, 0.5, 1) 0.15s both;
}

.is-looped .chat--in .chat-bubble {
  animation:
    chatPop 0.5s cubic-bezier(0.3, 1.35, 0.5, 1) var(--t) both,
    chatExpand 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--t) + 1.15s) both,
    chatMakeRoom 0.45s cubic-bezier(0.45, 0, 0.2, 1) 0s both;
}

@keyframes chatMakeRoom {
  from { transform: translateY(0); }
  to { transform: translateY(-12cqw); }
}

@media (min-width: 901px) {
  .is-looped .flow-tag--in {
    animation:
      flowTagIn 0.5s var(--ease) 0.7s forwards,
      heroSpread 0.75s cubic-bezier(0.65, 0, 0.35, 1) 5.2s both,
      fadeOut 0.3s ease-out 0s forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-reply,
  .is-looped .chat-reply {
    animation: none;
    opacity: 1;
  }

  .chat--in .chat-bubble,
  .is-looped .chat--in .chat-bubble {
    animation: none;
    transform: translateY(-12cqw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flow .flow-tag--in {
    animation: none;
    opacity: 0;
  }
}

/* ======================================================================
   Illustrated loops (portfolio): flat isometric geometry, smooth and
   minimal. Every move is a keyframe with its own easing: in-out for
   travel, a sine ease for the idle float, a small settle when something
   lands. They only play while on screen (site.js adds .is-playing).
   ====================================================================== */
.geo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.geo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.geo polygon {
  stroke-linejoin: round;
}

/* ---------- 1. Layers: a coral plane opens up into its layers ---------- */
.geo--layers { background: #4B00FF; }

.gl {
  translate: 0 var(--y0);
  animation: glSplit 4.4s calc(var(--i) * 0.09s) infinite backwards;
}

@keyframes glSplit {
  0%, 12% { translate: 0 var(--y0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  44% { translate: 0 var(--y1); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  55% { translate: 0 calc(var(--y1) - 5px); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  66% { translate: 0 var(--y1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  88% { translate: 0 calc(var(--y0) + 2px); animation-timing-function: cubic-bezier(0.33, 0, 0.3, 1); }
  94%, 100% { translate: 0 var(--y0); }
}

.gl-shadow {
  fill: #1A0060;
  opacity: 0.35;
  transform-box: fill-box;
  transform-origin: center;
  animation: glShadow 4.4s infinite;
}

@keyframes glShadow {
  0%, 12% { opacity: 0.35; scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  44%, 66% { opacity: 0.2; scale: 0.88; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  90%, 100% { opacity: 0.35; scale: 1; }
}

/* ---------- 2. Orbit: cubes circle a glowing sphere ---------- */
.geo--orbit { background: #1E0A4E; }

.go-c {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.go-ring {
  fill: none;
  stroke: rgba(203, 195, 255, 0.28);
  stroke-width: 1;
}

.go-halo {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 22 78;
  transform-box: fill-box;
  transform-origin: center;
  animation: goHalo 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes goHalo {
  0% { rotate: 0deg; }
  76%, 100% { rotate: 180deg; }
}

/* The sphere takes a breath while the cubes rest */
.go-sphere {
  transform-box: fill-box;
  transform-origin: center;
  animation: goSphere 6s infinite;
}

@keyframes goSphere {
  0%, 70% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  86% { scale: 1.045; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  100% { scale: 1; }
}

.go-shadow {
  fill: #0E0330;
  opacity: 0.55;
}

.go-k0 { animation-name: goK0; }
@keyframes goK0 {
  0.00% { translate: 340.0px 250.0px; }
  3.80% { translate: 340.0px 250.1px; }
  7.60% { translate: 340.0px 250.5px; }
  11.40% { translate: 340.0px 251.7px; }
  15.20% { translate: 339.8px 254.1px; }
  19.00% { translate: 339.3px 258.0px; }
  22.80% { translate: 338.0px 263.7px; }
  26.60% { translate: 335.0px 271.6px; }
  30.40% { translate: 328.8px 281.8px; }
  34.20% { translate: 317.7px 294.0px; }
  38.00% { translate: 299.0px 307.4px; }
  41.80% { translate: 275.8px 318.3px; }
  45.60% { translate: 254.8px 324.7px; }
  49.40% { translate: 237.3px 328.3px; }
  53.20% { translate: 223.6px 330.0px; }
  57.00% { translate: 213.7px 330.8px; }
  60.80% { translate: 207.0px 331.1px; }
  64.60% { translate: 203.0px 331.2px; }
  68.40% { translate: 200.9px 331.2px; }
  72.20% { translate: 200.1px 331.2px; }
  76.00% { translate: 200.0px 331.2px; }
  100% { translate: 200.0px 331.2px; }
}
.go-k1 { animation-name: goK1; }
@keyframes goK1 {
  0.00% { translate: 299.0px 307.4px; }
  3.80% { translate: 298.9px 307.5px; }
  7.60% { translate: 298.4px 307.8px; }
  11.40% { translate: 296.9px 308.6px; }
  15.20% { translate: 293.9px 310.2px; }
  19.00% { translate: 288.8px 312.8px; }
  22.80% { translate: 280.9px 316.3px; }
  26.60% { translate: 269.1px 320.6px; }
  30.40% { translate: 252.4px 325.3px; }
  34.20% { translate: 229.6px 329.4px; }
  38.00% { translate: 200.0px 331.2px; }
  41.80% { translate: 170.4px 329.4px; }
  45.60% { translate: 147.6px 325.3px; }
  49.40% { translate: 130.9px 320.6px; }
  53.20% { translate: 119.1px 316.3px; }
  57.00% { translate: 111.2px 312.8px; }
  60.80% { translate: 106.1px 310.2px; }
  64.60% { translate: 103.1px 308.6px; }
  68.40% { translate: 101.6px 307.8px; }
  72.20% { translate: 101.1px 307.5px; }
  76.00% { translate: 101.0px 307.4px; }
  100% { translate: 101.0px 307.4px; }
}
.go-k2 { animation-name: goK2; }
@keyframes goK2 {
  0.00% { translate: 200.0px 331.2px; }
  3.80% { translate: 199.9px 331.2px; }
  7.60% { translate: 199.1px 331.2px; }
  11.40% { translate: 197.0px 331.2px; }
  15.20% { translate: 193.0px 331.1px; }
  19.00% { translate: 186.3px 330.8px; }
  22.80% { translate: 176.4px 330.0px; }
  26.60% { translate: 162.7px 328.3px; }
  30.40% { translate: 145.2px 324.7px; }
  34.20% { translate: 124.2px 318.3px; }
  38.00% { translate: 101.0px 307.4px; }
  41.80% { translate: 82.3px 294.0px; }
  45.60% { translate: 71.2px 281.8px; }
  49.40% { translate: 65.0px 271.6px; }
  53.20% { translate: 62.0px 263.7px; }
  57.00% { translate: 60.7px 258.0px; }
  60.80% { translate: 60.2px 254.1px; }
  64.60% { translate: 60.0px 251.7px; }
  68.40% { translate: 60.0px 250.5px; }
  72.20% { translate: 60.0px 250.1px; }
  76.00% { translate: 60.0px 250.0px; }
  100% { translate: 60.0px 250.0px; }
}
.go-k3 { animation-name: goK3; }
@keyframes goK3 {
  0.00% { translate: 101.0px 307.4px; }
  3.80% { translate: 100.9px 307.4px; }
  7.60% { translate: 100.4px 307.1px; }
  11.40% { translate: 98.9px 306.2px; }
  15.20% { translate: 96.2px 304.5px; }
  19.00% { translate: 91.8px 301.5px; }
  22.80% { translate: 85.7px 296.9px; }
  26.60% { translate: 78.2px 290.1px; }
  30.40% { translate: 70.2px 280.4px; }
  34.20% { translate: 63.2px 267.2px; }
  38.00% { translate: 60.0px 250.0px; }
  41.80% { translate: 63.2px 232.8px; }
  45.60% { translate: 70.2px 219.6px; }
  49.40% { translate: 78.2px 209.9px; }
  53.20% { translate: 85.7px 203.1px; }
  57.00% { translate: 91.8px 198.5px; }
  60.80% { translate: 96.2px 195.5px; }
  64.60% { translate: 98.9px 193.8px; }
  68.40% { translate: 100.4px 192.9px; }
  72.20% { translate: 100.9px 192.6px; }
  76.00% { translate: 101.0px 192.6px; }
  100% { translate: 101.0px 192.6px; }
}
.go-k4 { animation-name: goK4; }
@keyframes goK4 {
  0.00% { translate: 60.0px 250.0px; }
  3.80% { translate: 60.0px 249.9px; }
  7.60% { translate: 60.0px 249.5px; }
  11.40% { translate: 60.0px 248.3px; }
  15.20% { translate: 60.2px 245.9px; }
  19.00% { translate: 60.7px 242.0px; }
  22.80% { translate: 62.0px 236.3px; }
  26.60% { translate: 65.0px 228.4px; }
  30.40% { translate: 71.2px 218.2px; }
  34.20% { translate: 82.3px 206.0px; }
  38.00% { translate: 101.0px 192.6px; }
  41.80% { translate: 124.2px 181.7px; }
  45.60% { translate: 145.2px 175.3px; }
  49.40% { translate: 162.7px 171.7px; }
  53.20% { translate: 176.4px 170.0px; }
  57.00% { translate: 186.3px 169.2px; }
  60.80% { translate: 193.0px 168.9px; }
  64.60% { translate: 197.0px 168.8px; }
  68.40% { translate: 199.1px 168.8px; }
  72.20% { translate: 199.9px 168.8px; }
  76.00% { translate: 200.0px 168.8px; }
  100% { translate: 200.0px 168.8px; }
}
.go-k5 { animation-name: goK5; }
@keyframes goK5 {
  0.00% { translate: 101.0px 192.6px; }
  3.80% { translate: 101.1px 192.5px; }
  7.60% { translate: 101.6px 192.2px; }
  11.40% { translate: 103.1px 191.4px; }
  15.20% { translate: 106.1px 189.8px; }
  19.00% { translate: 111.2px 187.2px; }
  22.80% { translate: 119.1px 183.7px; }
  26.60% { translate: 130.9px 179.4px; }
  30.40% { translate: 147.6px 174.7px; }
  34.20% { translate: 170.4px 170.6px; }
  38.00% { translate: 200.0px 168.8px; }
  41.80% { translate: 229.6px 170.6px; }
  45.60% { translate: 252.4px 174.7px; }
  49.40% { translate: 269.1px 179.4px; }
  53.20% { translate: 280.9px 183.7px; }
  57.00% { translate: 288.8px 187.2px; }
  60.80% { translate: 293.9px 189.8px; }
  64.60% { translate: 296.9px 191.4px; }
  68.40% { translate: 298.4px 192.2px; }
  72.20% { translate: 298.9px 192.5px; }
  76.00% { translate: 299.0px 192.6px; }
  100% { translate: 299.0px 192.6px; }
}
.go-k6 { animation-name: goK6; }
@keyframes goK6 {
  0.00% { translate: 200.0px 168.8px; }
  3.80% { translate: 200.1px 168.8px; }
  7.60% { translate: 200.9px 168.8px; }
  11.40% { translate: 203.0px 168.8px; }
  15.20% { translate: 207.0px 168.9px; }
  19.00% { translate: 213.7px 169.2px; }
  22.80% { translate: 223.6px 170.0px; }
  26.60% { translate: 237.3px 171.7px; }
  30.40% { translate: 254.8px 175.3px; }
  34.20% { translate: 275.8px 181.7px; }
  38.00% { translate: 299.0px 192.6px; }
  41.80% { translate: 317.7px 206.0px; }
  45.60% { translate: 328.8px 218.2px; }
  49.40% { translate: 335.0px 228.4px; }
  53.20% { translate: 338.0px 236.3px; }
  57.00% { translate: 339.3px 242.0px; }
  60.80% { translate: 339.8px 245.9px; }
  64.60% { translate: 340.0px 248.3px; }
  68.40% { translate: 340.0px 249.5px; }
  72.20% { translate: 340.0px 249.9px; }
  76.00% { translate: 340.0px 250.0px; }
  100% { translate: 340.0px 250.0px; }
}
.go-k7 { animation-name: goK7; }
@keyframes goK7 {
  0.00% { translate: 299.0px 192.6px; }
  3.80% { translate: 299.1px 192.6px; }
  7.60% { translate: 299.6px 192.9px; }
  11.40% { translate: 301.1px 193.8px; }
  15.20% { translate: 303.8px 195.5px; }
  19.00% { translate: 308.2px 198.5px; }
  22.80% { translate: 314.3px 203.1px; }
  26.60% { translate: 321.8px 209.9px; }
  30.40% { translate: 329.8px 219.6px; }
  34.20% { translate: 336.8px 232.8px; }
  38.00% { translate: 340.0px 250.0px; }
  41.80% { translate: 336.8px 267.2px; }
  45.60% { translate: 329.8px 280.4px; }
  49.40% { translate: 321.8px 290.1px; }
  53.20% { translate: 314.3px 296.9px; }
  57.00% { translate: 308.2px 301.5px; }
  60.80% { translate: 303.8px 304.5px; }
  64.60% { translate: 301.1px 306.2px; }
  68.40% { translate: 299.6px 307.1px; }
  72.20% { translate: 299.1px 307.4px; }
  76.00% { translate: 299.0px 307.4px; }
  100% { translate: 299.0px 307.4px; }
}

/* ---------- 3. Grid: one coral block lifts out of its slot and returns ---------- */
.geo--grid { background: #F4F1EC; }

.gg-c {
  animation: ggRipple 4.6s calc(var(--d) * 0.07s) infinite backwards;
}

@keyframes ggRipple {
  0%, 18% { translate: 0 0; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  26% { translate: 0 -6px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  36%, 86% { translate: 0 0; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  92% { translate: 0 -5px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  100% { translate: 0 0; }
}

.gg-hero {
  animation: ggLift 4.6s infinite;
}

@keyframes ggLift {
  0%, 16% { translate: 0 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  42% { translate: 0 -58px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  54% { translate: 0 -64px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  64% { translate: 0 -58px; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  86% { translate: 0 2px; animation-timing-function: cubic-bezier(0.33, 0, 0.3, 1); }
  92%, 100% { translate: 0 0; }
}

.gg-wire line {
  stroke: #4B00FF;
  stroke-width: 1.1;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}

.gg-wire {
  opacity: 0;
  animation: ggWire 4.6s infinite;
}

@keyframes ggWire {
  0%, 20% { opacity: 0; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  36%, 70% { opacity: 0.7; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  84%, 100% { opacity: 0; }
}

.gg-guide {
  stroke: #FF5A4E;
  stroke-width: 1.2;
  stroke-dasharray: 2 4;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  scale: 1 0;
  animation: ggGuide 4.6s infinite;
}

@keyframes ggGuide {
  0%, 18% { scale: 1 0; opacity: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  42%, 64% { scale: 1 1; opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  84%, 100% { scale: 1 0; opacity: 0; }
}

/* ---------- Play only on screen, and never with reduced motion ---------- */
.js .geo:not(.is-playing) * {
  animation-play-state: paused !important;
}

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

  .gg-guide,
  .gg-wire {
    opacity: 0;
  }
}

/* Illustrated loops: no drop shadow under the layers, and a fine grain over
   all of them (static noise, so it reads as print texture, not flicker) */
.gl-shadow {
  display: none;
}

.geo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.geo--grid::after {
  opacity: 0.16;
  mix-blend-mode: multiply;
}

/* ======================================================================
   Product Motion example: "Digitale betaling" (layered isometric SVG).
   Calm 7s loop:
     0.0  the reminder comes out of the screen in depth (along the phone's
          normal, no rotation; smaller while inside, never fades) and the
          screen lights up; its bell rings
     1.2  a light reflection glides over the reminder, later over each coin
     4.8  the receipt is pulled back into the slot
     5.0  the reminder sinks back into the screen and rests there
   Both coins hover up and down out of phase, their floor shadows shrink
   and fade as they rise. The receipt tail waves (SVG filter in the file).
   Transform origins are in drawing units (viewBox space).
   ====================================================================== */
.pay {
  position: absolute;
  inset: 0;
  background: #fff;
}

.pay svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pay-nbell > g,
.pay-shadow {
  transform-box: view-box;
}

/* ---------- Reminder: out of the screen and back, in depth only ---------- */
.pay-notif {
  animation:
    payNotif 7s infinite,
    payDepth 2.6s cubic-bezier(0.37, 0, 0.63, 1) 1s infinite alternate;
}

/* The phone's screen faces along (0.87, 0.5): that is the depth axis */
/* Out of the screen and back into it, a little smaller while inside; it never fades */
.pay-notif {
  transform-box: view-box;
  transform-origin: 861px 375px;
}

/* 7s: out 0-1s, in again 5.0-5.6s, then it rests inside until the loop starts */
@keyframes payNotif {
  0% { transform: translate(-38px, -22px) scale(0.88); animation-timing-function: cubic-bezier(0.3, 1.25, 0.5, 1); }
  14%, 71% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.3); }
  80%, 100% { transform: translate(-38px, -22px) scale(0.88); }
}

@keyframes payDepth {
  from { translate: 0 0; }
  to { translate: 7px 4px; }
}

.pay-nbell > g {
  transform-origin: 785px 405px;
  animation: payRing 7s 0.45s infinite backwards;
}

@keyframes payRing {
  0% { rotate: 0deg; animation-timing-function: cubic-bezier(0.33, 0, 0.3, 1); }
  4% { rotate: -16deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  9% { rotate: 11deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  14% { rotate: -6deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  19% { rotate: 3deg; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  24%, 100% { rotate: 0deg; }
}

.pay-screen {
  animation: payScreen 7s infinite;
}

@keyframes payScreen {
  0%, 2% { fill: #FFFFFF; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  9% { fill: #EFFFC4; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  26%, 100% { fill: #FFFFFF; }
}

/* ---------- Coins hover, shadows follow ---------- */
.pay-float--c { animation: payHover 3.4s cubic-bezier(0.37, 0, 0.63, 1) var(--fd) infinite alternate; }
.pay-float--b { animation: payHover 3.9s cubic-bezier(0.37, 0, 0.63, 1) var(--fd) infinite alternate; }

@keyframes payHover {
  from { translate: 0 0; }
  to { translate: 0 -24px; }
}

.pay-shadow {
  fill: #0B2A05;
}

.pay-shadow--c { animation: payShadow 3.4s cubic-bezier(0.37, 0, 0.63, 1) var(--fd) infinite alternate; }
.pay-shadow--b { animation: payShadow 3.9s cubic-bezier(0.37, 0, 0.63, 1) var(--fd) infinite alternate; }

@keyframes payShadow {
  from { opacity: 0.11; scale: 1; }
  to { opacity: 0.06; scale: 0.8; }
}

/* ---------- Light reflections glide over the surface ---------- */
/* Each shine glides out one side and comes back in from the other, clipped
   to its face; once per loop, one surface after the other */
.pay-shine {
  animation: payShine 7s var(--sd) infinite backwards;
}

.pay-shine--n { --sd: 1.2s; --ex: 250px; --ey: -144px; --nx: -330px; --ny: 190px; }
.pay-shine--c { --sd: 2.2s; --ex: 170px; --ey: -60px; --nx: -190px; --ny: 66px; }
.pay-shine--b { --sd: 3s; --ex: 200px; --ey: -70px; --nx: -220px; --ny: 77px; }

@keyframes payShine {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  12% { translate: var(--ex) var(--ey); animation-timing-function: steps(1, end); }
  12.01% { translate: var(--nx) var(--ny); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  30%, 100% { translate: 0 0; }
}

.js .pay:not(.is-playing) * {
  animation-play-state: paused !important;
}

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

/* ======================================================================
   Campaign Motion example: burger paid ad (layered SVG). Concept "Growl":
   fast, punchy, 7s loop. Every segment has its own speed curve:
     0.0  checker tiles slide in, the headline pops up letter by letter
          (overshoot and settle), then rumbles like a growling stomach;
          the yellow dashes burst out as sound lines
     1.0  "WE HEAR IT FROM HERE" settles in like a sticker (0.45s, eased out)
     1.5  the card slides up; 1.7 the burger drops (accelerating), lands
          with a squash, rebounds and settles; camera shake on the hit
     2.0  sauce squiggles swing in from the edges and keep swaying
     2.4  "OUR SIGNATURE BURGER IS", 2.9 the green pill stamps in (shake),
          "THE ONLY CURE" pops letter by letter, 3.6 the call to action
     4.4  a second growl; 4.95 the cure letters hop
     6.2  everything leaves fast with a little anticipation, loop
   ====================================================================== */
.ba {
  position: absolute;
  inset: 0;
  background: #EE1C25;
}

.ba svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes baCheckTop {
  0% { translate: 0 -150px; opacity: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  7.143% { translate: 0 0; opacity: 1; }
  90.714% { translate: 0 0; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  95.714% { translate: 0 -150px; opacity: 0; }
  100% { translate: 0 -150px; opacity: 0; }
}
@keyframes baCheckL {
  0% { translate: -280px 0; }
  1.143% { translate: -280px 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  8.571% { translate: 0 0; }
  91.429% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  96% { translate: -280px 0; }
  100% { translate: -280px 0; }
}
@keyframes baCheckR {
  0% { translate: 280px 0; }
  1.143% { translate: 280px 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  8.571% { translate: 0 0; }
  91.429% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  96% { translate: 280px 0; }
  100% { translate: 280px 0; }
}
.ba-checker-top { animation: baCheckTop 7.0s infinite backwards; }
.ba-checker-l { animation: baCheckL 7.0s infinite backwards; }
.ba-checker-r { animation: baCheckR 7.0s infinite backwards; }
@keyframes baHead {
  0% { opacity: 0; scale: 0.15; translate: 0 80px; rotate: var(--r); }
  2.143% { opacity: 0; scale: 0.15; translate: 0 80px; rotate: var(--r); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  5.429% { opacity: 1; scale: 1.18; translate: 0 -12px; rotate: calc(var(--r) * -0.4); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  7.143% { opacity: 1; scale: 0.95; translate: 0 3px; rotate: calc(var(--r) * 0.15); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  8.571% { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; }
  88.857% { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  90% { opacity: 1; scale: 1.08; translate: 0 -6px; rotate: 0deg; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  93.143% { opacity: 0; scale: 0; translate: 0 30px; rotate: calc(var(--r) * -1); }
  100% { opacity: 0; scale: 0; translate: 0 30px; rotate: 0deg; }
}
.ba-head { transform-box: fill-box; transform-origin: 50% 100%; animation: baHead 7s calc(var(--k) * 0.035s) infinite backwards; }
@keyframes baGrowl {
  0% { translate: 0 0; rotate: 0deg; scale: 1 1; }
  12.143% { translate: 0.0px 0.0px; rotate: 1.00deg; scale: 1 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  12.857% { translate: -6.0px 2.0px; rotate: -1.60deg; scale: 1.025 0.97; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  13.571% { translate: 5.0px -2.0px; rotate: 1.40deg; scale: 1.025 0.97; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  14.429% { translate: -4.0px 1.0px; rotate: -1.10deg; scale: 1.025 0.97; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  15.286% { translate: 3.0px -1.0px; rotate: 0.80deg; scale: 1.025 0.97; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  16.286% { translate: -2.0px 0.0px; rotate: -0.50deg; scale: 1.025 0.97; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  17.429% { translate: 1.0px 0.0px; rotate: 0.20deg; scale: 1 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  18.571% { translate: 0.0px 0.0px; rotate: 0.00deg; scale: 1 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  62.857% { translate: 0.0px 0.0px; rotate: 1.20deg; scale: 1 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  63.571% { translate: -7.2px 2.4px; rotate: -1.92deg; scale: 1.03 0.964; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  64.286% { translate: 6.0px -2.4px; rotate: 1.68deg; scale: 1.03 0.964; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  65.143% { translate: -4.8px 1.2px; rotate: -1.32deg; scale: 1.03 0.964; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  66% { translate: 3.6px -1.2px; rotate: 0.96deg; scale: 1.03 0.964; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  67% { translate: -2.4px 0.0px; rotate: -0.60deg; scale: 1.03 0.964; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  68.143% { translate: 1.2px 0.0px; rotate: 0.24deg; scale: 1 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  69.286% { translate: 0.0px 0.0px; rotate: 0.00deg; scale: 1 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { translate: 0 0; rotate: 0deg; scale: 1 1; }
}
.ba-headline { transform-box: fill-box; transform-origin: 50% 60%; animation: baGrowl 7s infinite; }
@keyframes baSpark {
  0% { opacity: 0; scale: 0.2; translate: calc(var(--dx) * -40px) calc(var(--dy) * -40px); }
  13.571% { opacity: 0; scale: 0.2; translate: calc(var(--dx) * -40px) calc(var(--dy) * -40px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  16.857% { opacity: 1; scale: 1.2; translate: calc(var(--dx) * 14px) calc(var(--dy) * 14px); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  20% { opacity: 1; scale: 1; translate: 0 0; }
  63.143% { opacity: 1; scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  65.714% { opacity: 1; scale: 1.25; translate: calc(var(--dx) * 18px) calc(var(--dy) * 18px); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  70% { opacity: 1; scale: 1; translate: 0 0; }
  89.286% { opacity: 1; scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  92.143% { opacity: 0; scale: 0; translate: calc(var(--dx) * -30px) calc(var(--dy) * -30px); }
  100% { opacity: 0; scale: 0; translate: 0 0; }
}
.ba-spark { transform-box: fill-box; transform-origin: center; animation: baSpark 7s calc(var(--k) * 0.04s) infinite backwards; }
.ba-spark:nth-child(1) { --dx: -0.9; --dy: 0.45; } .ba-spark:nth-child(2) { --dx: -0.9; --dy: -0.45; } .ba-spark:nth-child(3) { --dx: 0.9; --dy: -0.45; } .ba-spark:nth-child(4) { --dx: 0.9; --dy: 0.45; }
@keyframes baPill {
  0% { opacity: 0; scale: 1.5; rotate: 8deg; }
  14.286% { opacity: 0; scale: 1.5; rotate: 8deg; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  20.714% { opacity: 1; scale: 0.97; rotate: -1deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  22.857% { opacity: 1; scale: 1.03; rotate: 0.5deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  24.857% { opacity: 1; scale: 1; rotate: 0deg; }
  89.429% { opacity: 1; scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  90.429% { opacity: 1; scale: 1.06; rotate: 0deg; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  92.857% { opacity: 0; scale: 0; rotate: -10deg; }
  100% { opacity: 0; scale: 0; rotate: 0deg; }
}
.ba-pill { transform-box: fill-box; transform-origin: center; animation: baPill 7s infinite backwards; }
@keyframes baSub {
  0% { opacity: 0; translate: 0 26px; scale: 0.6; }
  20% { opacity: 0; translate: 0 26px; scale: 0.6; animation-timing-function: cubic-bezier(0.2, 1.35, 0.4, 1); }
  23.429% { opacity: 1; translate: 0 0; scale: 1; }
  90% { opacity: 1; translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  92.571% { opacity: 0; translate: 0 -12px; scale: 0.8; }
  100% { opacity: 0; translate: 0 -12px; scale: 0.8; }
}
.ba-sub { transform-box: fill-box; transform-origin: 50% 100%; animation: baSub 7s calc(var(--k) * 0.018s) infinite backwards; }
@keyframes baCard {
  0% { translate: 0 800px; scale: 1 1; }
  21.143% { translate: 0 800px; scale: 1 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  27.143% { translate: 0 -14px; scale: 1.01 0.99; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  28.857% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  29.714% { translate: 0 10px; scale: 1.02 0.97; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  32.571% { translate: 0 0; scale: 1 1; }
  91.429% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  96.429% { translate: 0 800px; scale: 1 1; }
  100% { translate: 0 800px; scale: 1 1; }
}
.ba-card { transform-box: fill-box; transform-origin: 50% 100%; animation: baCard 7s infinite backwards; }
@keyframes baBurger {
  /* rest position 18 units above the card, so the burger sits a little higher once it has landed */
  0% { translate: 0 -1300px; scale: 0.92 1.1; }
  24% { translate: 0 -1300px; scale: 0.92 1.1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.35); }
  28.857% { translate: 0 -18px; scale: 1.12 0.86; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  31.143% { translate: 0 -48px; scale: 0.97 1.05; animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); }
  33.143% { translate: 0 -18px; scale: 1.04 0.96; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  35.143% { translate: 0 -18px; scale: 1 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  60.714% { translate: 0 -30px; scale: 1 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  87.143% { translate: 0 -18px; scale: 1 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  88.857% { translate: 0 -10px; scale: 1.05 0.94; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  93.143% { translate: 0 -1300px; scale: 0.9 1.12; }
  100% { translate: 0 -1300px; scale: 0.9 1.12; }
}
.ba-burger { transform-box: fill-box; transform-origin: 50% 100%; animation: baBurger 7s infinite backwards; }
@keyframes baSqL {
  0% { translate: -470px 0; rotate: -25deg; }
  28.571% { translate: -470px 0; rotate: -25deg; animation-timing-function: cubic-bezier(0.2, 1.3, 0.4, 1); }
  35.714% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  52.857% { translate: 0 0; rotate: -3.0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  70% { translate: 0 0; rotate: 2.0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  87.143% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  91.429% { translate: -470px 0; rotate: -25deg; }
  100% { translate: -470px 0; rotate: -25deg; }
}
.ba-sq-l { transform-box: fill-box; transform-origin: 0% 50%; animation: baSqL 7s infinite backwards; }
@keyframes baSqR {
  0% { translate: 340px 0; rotate: 25deg; }
  28.571% { translate: 340px 0; rotate: 25deg; animation-timing-function: cubic-bezier(0.2, 1.3, 0.4, 1); }
  35.714% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  52.857% { translate: 0 0; rotate: 3.0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  70% { translate: 0 0; rotate: -2.0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  87.143% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  91.429% { translate: 340px 0; rotate: 25deg; }
  100% { translate: 340px 0; rotate: 25deg; }
}
.ba-sq-r { transform-box: fill-box; transform-origin: 100% 50%; animation: baSqR 7s infinite backwards; }
@keyframes baSig {
  0% { opacity: 0; translate: 0 32px; }
  34.571% { opacity: 0; translate: 0 32px; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  38.286% { opacity: 1; translate: 0 0; }
  90.571% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  93.143% { opacity: 0; translate: 0 -14px; }
  100% { opacity: 0; translate: 0 -14px; }
}
.ba-sig { transform-box: fill-box; animation: baSig 7s calc(var(--k) * 0.016s) infinite backwards; }
@keyframes baGreen {
  0% { opacity: 0; scale: 2; rotate: -6deg; }
  41.714% { opacity: 0; scale: 2; rotate: -6deg; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  44% { opacity: 1; scale: 0.88; rotate: 1deg; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  45.714% { opacity: 1; scale: 1.05; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  47.429% { opacity: 1; scale: 1; rotate: 0deg; }
  90% { opacity: 1; scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  90.857% { opacity: 1; scale: 1.05; rotate: 0deg; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  93.429% { opacity: 0; scale: 0; rotate: 6deg; }
  100% { opacity: 0; scale: 0; rotate: 0deg; }
}
.ba-greenpill { transform-box: fill-box; transform-origin: center; animation: baGreen 7s infinite backwards; }
@keyframes baCure {
  0% { scale: 0; translate: 0 22px; }
  44.286% { scale: 0; translate: 0 22px; animation-timing-function: cubic-bezier(0.2, 1.35, 0.4, 1); }
  46.857% { scale: 1.25; translate: 0 -12px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  48.571% { scale: 0.95; translate: 0 2px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  50% { scale: 1; translate: 0 0; }
  70.714% { scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  72.286% { scale: 1.08; translate: 0 -12px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  74.286% { scale: 1; translate: 0 0; }
  90.857% { scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  93.429% { scale: 0; translate: 0 10px; }
  100% { scale: 0; translate: 0 10px; }
}
.ba-cure { transform-box: fill-box; transform-origin: 50% 100%; animation: baCure 7s calc(var(--k) * 0.035s) infinite backwards; }
@keyframes baCta {
  0% { opacity: 0; translate: 0 18px; }
  51.143% { opacity: 0; translate: 0 18px; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  54.571% { opacity: 1; translate: 0 0; }
  91.429% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  94% { opacity: 0; translate: 0 12px; }
  100% { opacity: 0; translate: 0 12px; }
}
.ba-cta { transform-box: fill-box; animation: baCta 7s calc(var(--k) * 0.012s) infinite backwards; }
@keyframes baCam {
  0% { translate: 0 0; }
  28.857% { translate: 0 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  29.286% { translate: 0 9px; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  29.857% { translate: 0 -5px; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  30.571% { translate: 0 3px; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  31.429% { translate: 0 0; }
  44% { translate: 0 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  44.429% { translate: -5px 5px; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  45% { translate: 4px -3px; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  45.714% { translate: -2px 1px; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  46.571% { translate: 0 0; }
  100% { translate: 0 0; }
}
.ba-cam { animation: baCam 7s infinite; }

.js .ba:not(.is-playing) * {
  animation-play-state: paused !important;
}

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

/* Burger ad: the bottom line is live text ("Now available at all our
   restaurants"), tracking in from wide to tight */
.ba-cta-line {
  font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 41px;
  letter-spacing: 1.5px;
  fill: #FFFAE6;
  animation: baCtaLine 7s infinite backwards;
}

@keyframes baCtaLine {
  0%, 51.143% { opacity: 0; translate: 0 18px; letter-spacing: 12px; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  56.429% { opacity: 1; translate: 0 0; letter-spacing: 1.5px; }
  91.429% { opacity: 1; translate: 0 0; letter-spacing: 1.5px; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  94%, 100% { opacity: 0; translate: 0 12px; letter-spacing: 1.5px; }
}

/* ======================================================================
   Campaign Motion example: burger paid ad 2 ("Fresh"), same bold style as
   ad 1, opening with an epic zoom. 7s loop:
     0.95 the burger rises from under the camera together with the rest:
          huge and low, it pulls back into place (ease-out), lands at 1.5,
          overshoots and settles (camera shake)
     1.0  checkers and the white heart outlines slide in from the sides,
          "FRESH INGREDIENTS" pops up letter by letter
     1.5  "EVERY SINGLE DAY"; 1.75 a sauce drop falls, splats into the red
          blob (splash drops, jelly wobble, camera bump), then "WE ONLY
          SERVE" and "WHAT WE LOVE TO EAT" rise out of it (masked to its shape)
     3.55 once the red line has landed, four heart bubbles pop onto the bun
     4.4  the headline hops in a wave; 4.95 the red line hops
     6.1  everything leaves, the burger drops back under the camera; loop
   ====================================================================== */
.bb {
  position: absolute;
  inset: 0;
  background: #FFFAE6;
}

.bb svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes bbBurger {
  0% { translate: 0 1100px; scale: 5.5; rotate: 6deg; }
  13.571% { translate: 0 1100px; scale: 5.5; rotate: 6deg; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  21.429% { translate: 0 -95px; scale: 2.48; rotate: -1.5deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  24% { translate: 0 -64px; scale: 2.64; rotate: 0.5deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  26.286% { translate: 0 -72px; scale: 2.58; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  28.571% { translate: 0 -70px; scale: 2.6; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  60% { translate: 0 -76px; scale: 2.64; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  86.429% { translate: 0 -70px; scale: 2.6; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  88% { translate: 0 -90px; scale: 2.56; rotate: 0deg; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  94.286% { translate: 0 1100px; scale: 5.5; rotate: 6deg; }
  100% { translate: 0 1100px; scale: 5.5; rotate: 6deg; }
}
.bb-burger { transform-box: view-box; transform-origin: 530px 630px; animation: bbBurger 7s infinite backwards; }
@keyframes bbCam {
  0% { translate: 0 0; scale: 1; }
  21.286% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  21.714% { translate: 0 -9px; scale: 1.015; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  22.429% { translate: 0 6px; scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  23.143% { translate: 0 -3px; scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  24.143% { translate: 0 0; scale: 1; }
  29.143% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  29.571% { translate: 0 6px; scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  30.143% { translate: 0 -3px; scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  31% { translate: 0 0; scale: 1; }
  100% { translate: 0 0; scale: 1; }
}
.bb-cam { transform-box: view-box; transform-origin: 540px 675px; animation: bbCam 7s infinite; }
@keyframes bbCheckL {
  0% { translate: -320px 0; }
  14.286% { translate: -320px 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  20.714% { translate: 0 0; }
  90.857% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  95.143% { translate: -320px 0; }
  100% { translate: -320px 0; }
}
.bb-check-l { animation: bbCheckL 7s infinite backwards; }
@keyframes bbCheckR {
  0% { translate: 320px 0; }
  14.286% { translate: 320px 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  20.714% { translate: 0 0; }
  90.857% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  95.143% { translate: 320px 0; }
  100% { translate: 320px 0; }
}
.bb-check-r { animation: bbCheckR 7s infinite backwards; }
@keyframes bbHlineL {
  0% { translate: -240px 0; scale: 1; }
  15% { translate: -240px 0; scale: 1; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  22.143% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  45.714% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  47.429% { translate: 0 0; scale: 1.07; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  49.143% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  50.857% { translate: 0 0; scale: 1.05; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  53.143% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  72.857% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  74.571% { translate: 0 0; scale: 1.07; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  76.286% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  78% { translate: 0 0; scale: 1.05; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  80.286% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  90% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  94.286% { translate: -240px 0; scale: 1; }
  100% { translate: -240px 0; scale: 1; }
}
.bb-hline-l { transform-box: fill-box; transform-origin: 0% 50%; animation: bbHlineL 7s infinite backwards; }
@keyframes bbHlineR {
  0% { translate: 240px 0; scale: 1; }
  15% { translate: 240px 0; scale: 1; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  22.143% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  45.714% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  47.429% { translate: 0 0; scale: 1.07; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  49.143% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  50.857% { translate: 0 0; scale: 1.05; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  53.143% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  72.857% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  74.571% { translate: 0 0; scale: 1.07; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  76.286% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  78% { translate: 0 0; scale: 1.05; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  80.286% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  90% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  94.286% { translate: 240px 0; scale: 1; }
  100% { translate: 240px 0; scale: 1; }
}
.bb-hline-r { transform-box: fill-box; transform-origin: 100% 50%; animation: bbHlineR 7s infinite backwards; }
@keyframes bbHead {
  0% { opacity: 0; scale: 0.15; translate: 0 80px; rotate: var(--r); }
  14.571% { opacity: 0; scale: 0.15; translate: 0 80px; rotate: var(--r); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  17.857% { opacity: 1; scale: 1.18; translate: 0 -12px; rotate: calc(var(--r) * -0.4); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  19.571% { opacity: 1; scale: 0.95; translate: 0 3px; rotate: calc(var(--r) * 0.15); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  21% { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; }
  62.857% { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  64.571% { opacity: 1; scale: 1.08; translate: 0 -16px; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  66.857% { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; }
  88.857% { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  90% { opacity: 1; scale: 1.08; translate: 0 -6px; rotate: 0deg; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  92.857% { opacity: 0; scale: 0; translate: 0 30px; rotate: calc(var(--r) * -1); }
  100% { opacity: 0; scale: 0; translate: 0 30px; rotate: 0deg; }
}
.bb-head { transform-box: fill-box; transform-origin: 50% 100%; animation: bbHead 7s calc(var(--k) * 0.03s) infinite backwards; }
@keyframes bbDay {
  0% { opacity: 0; translate: 0 34px; }
  21.714% { opacity: 0; translate: 0 34px; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  25.429% { opacity: 1; translate: 0 0; }
  90.286% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  92.857% { opacity: 0; translate: 0 -14px; }
  100% { opacity: 0; translate: 0 -14px; }
}
.bb-day { transform-box: fill-box; animation: bbDay 7s calc(var(--k) * 0.02s) infinite backwards; }
@keyframes bbCloud {
  0% { opacity: 0; translate: 0 -420px; scale: 0.1 0.26; rotate: 0deg; }
  24.571% { opacity: 0; translate: 0 -420px; scale: 0.1 0.26; rotate: 0deg; animation-timing-function: linear; }
  25.143% { opacity: 1; translate: 0 -400px; scale: 0.1 0.26; rotate: 0deg; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.35); }
  29.143% { opacity: 1; translate: 0 0; scale: 0.3 0.62; rotate: 0deg; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  30.571% { opacity: 1; translate: 0 10px; scale: 1.3 0.5; rotate: -1.5deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  32.429% { opacity: 1; translate: 0 -8px; scale: 0.88 1.16; rotate: 1.2deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  34.143% { opacity: 1; translate: 0 3px; scale: 1.07 0.93; rotate: -0.6deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  35.714% { opacity: 1; translate: 0 -1px; scale: 0.97 1.03; rotate: 0.3deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  37.429% { opacity: 1; translate: 0 0; scale: 1 1; rotate: 0deg; }
  88.857% { opacity: 1; translate: 0 0; scale: 1 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  90% { opacity: 1; translate: 0 6px; scale: 1.08 0.9; rotate: 0deg; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  92.857% { opacity: 0; translate: 0 0; scale: 0 0; rotate: 0deg; }
  100% { opacity: 0; translate: 0 0; scale: 0 0; rotate: 0deg; }
}
.bb-cloud { transform-box: fill-box; transform-origin: 50% 70%; animation: bbCloud 7s infinite backwards; }
@keyframes bbServe {
  0% { opacity: 0; translate: 0 96px; }
  35.714% { opacity: 0; translate: 0 96px; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  40% { opacity: 1; translate: 0 -6px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  41.714% { opacity: 1; translate: 0 0; }
  88.857% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  91.429% { opacity: 0; translate: 0 96px; }
  100% { opacity: 0; translate: 0 96px; }
}
.bb-serve { transform-box: fill-box; animation: bbServe 7s infinite backwards; }
@keyframes bbLove {
  0% { opacity: 0; translate: 0 150px; scale: 1; }
  38% { opacity: 0; translate: 0 150px; scale: 1; animation-timing-function: cubic-bezier(0.2, 1.35, 0.4, 1); }
  42% { opacity: 1; translate: 0 -10px; scale: 1.08; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  43.714% { opacity: 1; translate: 0 0; scale: 1; }
  70.714% { opacity: 1; translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  72.286% { opacity: 1; translate: 0 -12px; scale: 1.08; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  74.286% { opacity: 1; translate: 0 0; scale: 1; }
  89.143% { opacity: 1; translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  91.714% { opacity: 0; translate: 0 150px; scale: 1; }
  100% { opacity: 0; translate: 0 150px; scale: 1; }
}
.bb-love { transform-box: fill-box; transform-origin: 50% 100%; animation: bbLove 7s calc(var(--k) * 0.03s) infinite backwards; }
@keyframes bbBub {
  0% { scale: 0; rotate: -20deg; }
  50.714% { scale: 0; rotate: -20deg; animation-timing-function: cubic-bezier(0.2, 1.35, 0.4, 1); }
  53.857% { scale: 1.15; rotate: 8deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  55.857% { scale: 0.95; rotate: -4deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  57.857% { scale: 1; rotate: 0deg; }
  63.571% { scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  67.857% { scale: 1.04; rotate: 3deg; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  72.143% { scale: 1; rotate: 0deg; }
  81.714% { scale: 1; rotate: 0deg; animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }
  84.286% { scale: 0; rotate: 15deg; }
  100% { scale: 0; rotate: 15deg; }
}
.bb-bub { transform-box: fill-box; transform-origin: 50% 100%; animation: bbBub 7s var(--bd, 0s) infinite backwards; }
@keyframes bbHeart {
  0% { scale: 1; }
  51.429% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  53.143% { scale: 1.07; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  54.857% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  56.571% { scale: 1.05; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  58.857% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  77.143% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  78.857% { scale: 1.07; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  80.571% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  82.286% { scale: 1.05; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  84.571% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  100% { scale: 1; }
}
.bb-heart { transform-box: fill-box; transform-origin: center; animation: bbHeart 7s infinite; }

.js .bb:not(.is-playing) * {
  animation-play-state: paused !important;
}

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

  .bb-burger {
    scale: 2.6;
    translate: 0 -70px;
  }
}

/* Burger ad 2: liquid splash. Drops start inside the blob's edge and pull out
   of it: the goo filter (blur + alpha threshold) melts them together, so each
   one leaves with a neck and a trail of smaller drops, then arcs down and
   shrinks away */
@keyframes bbLiq {
  0% { translate: 0 0; scale: 0; }
  29% { translate: 0 0; scale: 0; animation-timing-function: steps(1, end); }
  29.286% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  33.429% { translate: calc(var(--dx) * 0.72) calc(var(--dy) * 0.72); scale: 0.85; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  38.286% { translate: var(--dx) calc(var(--dy) + 80px); scale: 0; }
  100% { translate: var(--dx) calc(var(--dy) + 80px); scale: 0; }
}
.bb-liq { transform-box: fill-box; transform-origin: center; animation: bbLiq 7s var(--dd) infinite backwards; }

/* Chat icon: soft blue light from the front bubble, seen only where the back
   bubble is (tuned in After Effects: a frozen glow frame on the front bubble,
   with the blurred back bubble as its matte). The light sits still on the
   front bubble; the matte follows the back bubble. site.js moves the wrapper
   with the back bubble and the image back onto the front bubble every frame. */
.ic-spill {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  -webkit-mask: url("media/icon-chat-spill-mask.png") 0 0 / 100% 100% no-repeat;
  mask: url("media/icon-chat-spill-mask.png") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.ic .ic-spill img {
  transform-origin: 0 0;
}


/* ======================================================================
   Product Motion examples: two fictional SaaS explainers (own use cases;
   only the soft visual style is borrowed: light blue ground, white cards,
   violet accents, calm eased timing with small offsets). 12s loops.
   ====================================================================== */

.rt {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #DDEBFA;
  container-type: inline-size;
  font-family: var(--font-body);
  color: #1D2240;
}

.rt p { margin: 0; }

/* ---------- Routa: a parcel tracked live across the city ---------- */
.rt-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-blocks rect { fill: #EAF1FC; }
.rt-road { fill: none; stroke: #CBD8EE; stroke-width: 11; stroke-linecap: round; }
.rt-route { fill: none; stroke: #5B3FD9; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: rtDraw 12s infinite backwards; }
.rt-van-halo { fill: rgba(91, 63, 217, 0.18); transform-box: fill-box; transform-origin: center; animation: rtHalo 1.4s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
.rt-van-dot { fill: #5B3FD9; stroke: #fff; stroke-width: 3; }
.rt-van { opacity: 0; }

.rt-stop { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; display: grid; justify-items: center; gap: 0.6cqw; }
.rt-pin { display: grid; place-items: center; width: 6cqw; aspect-ratio: 1; border-radius: 50%; background: #fff; color: #5B3FD9; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(40, 60, 140, 0.4); scale: 0; }
.rt-pin svg { width: 2.8cqw; height: 2.8cqw; }
.rt-stop em { position: absolute; top: 100%; margin-top: 0.8cqw; padding: 0.3cqw 1cqw; border-radius: 99cqw; background: #fff; font-size: 1.3cqw; font-style: normal; font-weight: 600; white-space: nowrap; color: #4A5270; opacity: 0; }
.rt-stop--1 .rt-pin, .rt-stop--1 em { animation: rtPin1 12s infinite backwards; }
.rt-stop--2 .rt-pin, .rt-stop--2 em { animation: rtPin2 12s infinite backwards; }
.rt-stop--3 .rt-pin, .rt-stop--3 em { animation: rtPin3 12s infinite backwards; }
.rt-stop--2 .rt-pin { animation: rtPin2 12s infinite backwards, rtArrive2 12s infinite backwards; }
.rt-stop--3 .rt-pin { animation: rtPin3 12s infinite backwards, rtArrive3 12s infinite backwards; }

@property --rt-min { syntax: '<integer>'; initial-value: 14; inherits: false; }

.rt-eta { position: absolute; left: 4cqw; top: 4cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2cqw 1.4cqw 1.4cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 1.4cqw 3.6cqw -2cqw rgba(40, 60, 140, 0.35); animation: rtEta 12s infinite backwards; }
.rt-eta-ic { display: grid; place-items: center; width: 4.4cqw; aspect-ratio: 1; border-radius: 1.2cqw; background: #EEE9FF; color: #5B3FD9; }
.rt-eta-ic svg { width: 2.4cqw; height: 2.4cqw; }
.rt-eta small { display: block; font-size: 1.25cqw; color: #8A93A8; }
.rt-eta b { display: block; font-size: 2.2cqw; font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-min { counter-reset: rtmin var(--rt-min); animation: rtMin 12s infinite backwards; }
.rt-min::after { content: counter(rtmin); }
.rt-eta > span:nth-child(2) { animation: rtEtaText 12s infinite backwards; }
.rt-done { position: absolute; left: 7.2cqw; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 0.6cqw; font-size: 2cqw; font-weight: 700; color: #16A34A; opacity: 0; animation: rtDone 12s infinite backwards; }
.rt-done svg { width: 2.4cqw; height: 2.4cqw; stroke-width: 3; }

.rt-toast { position: absolute; right: 4cqw; bottom: 4cqw; display: flex; align-items: center; gap: 1.2cqw; width: 38cqw; padding: 1.4cqw; border-radius: 1.6cqw; background: #1B1147; color: #fff; font-size: 1.4cqw; line-height: 1.35; box-shadow: 0 1.4cqw 3.6cqw -1.6cqw rgba(27, 17, 71, 0.55); opacity: 0; animation: rtToast 12s infinite backwards; }
.rt-toast b { display: block; font-size: 1.35cqw; opacity: 0.7; }
.rt-toast-ic { display: grid; place-items: center; flex-shrink: 0; width: 4cqw; aspect-ratio: 1; border-radius: 1cqw; background: #5B3FD9; }
.rt-toast-ic svg { width: 2.2cqw; height: 2.2cqw; }

@keyframes rtDraw {
  0% { stroke-dashoffset: 100; opacity: 1; }
  6.667% { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  18.333% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  95% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes rtHalo {
  from { scale: 0.8; }
  to { scale: 1.35; }
}

@keyframes rtPin1 {
  0% { scale: 0; opacity: 0; }
  2.5% { scale: 0; opacity: 0; animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  6.667% { scale: 1; opacity: 1; }
  90% { scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  94.167% { scale: 0; opacity: 0; }
  100% { scale: 0; opacity: 0; }
}

@keyframes rtPin2 {
  0% { scale: 0; opacity: 0; }
  3.75% { scale: 0; opacity: 0; animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  7.917% { scale: 1; opacity: 1; }
  90% { scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  94.167% { scale: 0; opacity: 0; }
  100% { scale: 0; opacity: 0; }
}

@keyframes rtPin3 {
  0% { scale: 0; opacity: 0; }
  5% { scale: 0; opacity: 0; animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  9.167% { scale: 1; opacity: 1; }
  90% { scale: 1; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  94.167% { scale: 0; opacity: 0; }
  100% { scale: 0; opacity: 0; }
}

@keyframes rtArrive2 {
  0% { background: #fff; color: #5B3FD9; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(40, 60, 140, 0.4); }
  35.833% { background: #fff; color: #5B3FD9; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(40, 60, 140, 0.4); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  38.333% { background: #5B3FD9; color: #fff; box-shadow: 0 0 0 1.4cqw rgba(91, 63, 217, 0.18); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  43.333% { background: #5B3FD9; color: #fff; box-shadow: 0 0 0 0 rgba(91, 63, 217, 0); }
  100% { background: #5B3FD9; color: #fff; box-shadow: 0 0 0 0 rgba(91, 63, 217, 0); }
}

@keyframes rtArrive3 {
  0% { background: #fff; color: #5B3FD9; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(40, 60, 140, 0.4); }
  62.5% { background: #fff; color: #5B3FD9; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(40, 60, 140, 0.4); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  65% { background: #5B3FD9; color: #fff; box-shadow: 0 0 0 1.4cqw rgba(91, 63, 217, 0.18); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  70% { background: #5B3FD9; color: #fff; box-shadow: 0 0 0 0 rgba(91, 63, 217, 0); }
  100% { background: #5B3FD9; color: #fff; box-shadow: 0 0 0 0 rgba(91, 63, 217, 0); }
}

@keyframes rtEta {
  0% { opacity: 0; translate: 0 -2cqw; }
  1.667% { opacity: 0; translate: 0 -2cqw; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  6.667% { opacity: 1; translate: 0 0; }
  90% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  94.167% { opacity: 0; translate: 0 -1cqw; }
  100% { opacity: 0; translate: 0 -1cqw; }
}

@keyframes rtMin {
  0% { --rt-min: 14; }
  18.333% { --rt-min: 14; animation-timing-function: linear; }
  63.333% { --rt-min: 0; }
  100% { --rt-min: 0; }
}

@keyframes rtEtaText {
  0% { opacity: 1; }
  64.167% { opacity: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  66.25% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes rtDone {
  0% { opacity: 0; scale: 0.8; }
  65.833% { opacity: 0; scale: 0.8; animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  69.167% { opacity: 1; scale: 1; }
  90% { opacity: 1; scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  94.167% { opacity: 0; scale: 1; }
  100% { opacity: 0; scale: 1; }
}

@keyframes rtToast {
  0% { opacity: 0; translate: 0 2.5cqw; }
  41.667% { opacity: 0; translate: 0 2.5cqw; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  46.667% { opacity: 1; translate: 0 0; }
  60.833% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  65% { opacity: 0; translate: 0 1cqw; }
  100% { opacity: 0; translate: 0 1cqw; }
}


.js .rt:not(.is-playing) * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .rt * { animation: none !important; }
  .rt-eta, .rt-stop em { opacity: 1; }
  .rt-pin { scale: 1; }
  .rt-route { stroke-dashoffset: 0; }
}

/* ---------- Notewise: a video call becomes a summary with action items ----------
   Cards grow in as shapes (clip + scale), content slides or pops in; no fades. */
.nw {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #DDEBFA;
  container-type: inline-size;
  font-family: var(--font-body);
  color: #1D2240;
}

.nw p, .nw ul { margin: 0; padding: 0; list-style: none; }

.nw-call, .nw-doc {
  position: absolute;
  overflow: hidden;
  border-radius: 2cqw;
  background: #fff;
  box-shadow: 0 1.6cqw 4cqw -2cqw rgba(40, 60, 140, 0.3);
}

.nw-call { left: 4cqw; top: 9cqw; width: 40cqw; height: 56cqw; padding: 1.8cqw; animation: nwCall 12s infinite backwards; }
.nw-call-head { display: flex; align-items: center; gap: 1cqw; font-size: 1.45cqw; animation: nwHead 12s infinite backwards; }
.nw-call-head b { font-weight: 600; }
.nw-rec { display: inline-flex; align-items: center; gap: 0.5cqw; padding: 0.3cqw 0.8cqw; border-radius: 99cqw; background: #FDE8EE; color: #E03565; font-size: 1.1cqw; font-weight: 700; letter-spacing: 0.04em; }
.nw-rec i { width: 0.9cqw; aspect-ratio: 1; border-radius: 50%; background: #F04770; animation: nwBlink 1.4s ease-in-out infinite; }
.nw-time { margin-left: auto; color: #8A93A8; font-variant-numeric: tabular-nums; }

.nw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; margin-top: 1.6cqw; }
.nw-tile { position: relative; display: grid; place-items: center; height: 13.6cqw; border-radius: 1.2cqw; background: linear-gradient(160deg, hsl(var(--h) 60% 94%), hsl(var(--h) 55% 86%)); scale: 0; animation: nwTile 12s calc(var(--k) * 0.08s) infinite backwards; }
.nw-face { display: grid; place-items: center; width: 5.6cqw; aspect-ratio: 1; border-radius: 50%; background: #fff; color: hsl(var(--h) 55% 45%); font-size: 2cqw; font-weight: 700; }
.nw-tile em { position: absolute; left: 0.8cqw; bottom: 0.7cqw; padding: 0.2cqw 0.7cqw; border-radius: 0.6cqw; background: rgba(20, 22, 50, 0.55); color: #fff; font-size: 1.05cqw; font-style: normal; font-weight: 600; }
.nw-tile--talk { animation: nwTile 12s calc(var(--k) * 0.08s) infinite backwards, nwTalk 12s infinite; }
.nw-speak { position: absolute; right: 0.8cqw; top: 0.8cqw; display: grid; place-items: center; width: 2.4cqw; aspect-ratio: 1; border-radius: 50%; background: #5B3FD9; color: #fff; }
.nw-speak svg { width: 1.5cqw; height: 1.5cqw; animation: nwSpeak 0.5s ease-in-out infinite alternate; }

.nw-cap { margin-top: 1.4cqw; padding: 1.1cqw 1.3cqw; border-radius: 1cqw; background: #F2F4FA; font-size: 1.2cqw; line-height: 1.35; overflow: hidden; animation: nwCapBox 12s infinite backwards; }
.nw-cap span { display: block; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); animation: nwType 12s infinite backwards; }
.nw-cap b { color: #5B3FD9; }

.nw-ctrl { position: absolute; left: 0; right: 0; bottom: 1.6cqw; display: flex; justify-content: center; gap: 1.2cqw; animation: nwCtrl 12s infinite backwards; }
.nw-btn { display: grid; place-items: center; width: 4.4cqw; aspect-ratio: 1; border-radius: 50%; background: #EEF1F8; color: #4A5270; }
.nw-btn svg { width: 2.1cqw; height: 2.1cqw; }
.nw-btn--on { background: #5B3FD9; color: #fff; }
.nw-btn--end { width: 6cqw; aspect-ratio: auto; height: 4.4cqw; border-radius: 99cqw; background: #F04770; color: #fff; }

/* words flowing from the call into the summary */
.nw-flow { position: absolute; left: 44.5cqw; top: 34cqw; animation: nwFlow 12s infinite backwards; }
.nw-flow i { position: absolute; width: 1.2cqw; aspect-ratio: 1; border-radius: 50%; background: #8C6BFF; scale: 0; animation: nwDot 1.35s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--k) * 0.15s) infinite; }

.nw-doc { left: 55cqw; top: 6cqw; width: 41cqw; height: 63cqw; padding: 2.1cqw; animation: nwDoc 12s infinite backwards; }
.nw-doc-head { display: flex; align-items: center; gap: 1cqw; font-size: 1.6cqw; animation: nwHead 12s 0.25s infinite backwards; }
.nw-ai { display: grid; place-items: center; width: 3.4cqw; aspect-ratio: 1; border-radius: 0.9cqw; background: linear-gradient(145deg, #8C6BFF, #5B3FD9); color: #fff; }
.nw-ai svg { width: 2cqw; height: 2cqw; }
.nw-date { margin-left: auto; padding: 0.3cqw 0.9cqw; border-radius: 99cqw; background: #F2F4FA; font-size: 1.1cqw; color: #6B7390; }

.nw-tabs { position: relative; display: flex; gap: 2cqw; margin: 1.8cqw 0 1.6cqw; padding-bottom: 0.8cqw; border-bottom: 0.15cqw solid #EEF1F7; font-size: 1.2cqw; color: #8A93A8; animation: nwHead 12s 0.4s infinite backwards; }
.nw-tab--on { color: #1D2240; font-weight: 600; }
.nw-tabs i { position: absolute; left: 0; bottom: -0.15cqw; width: 11.2cqw; height: 0.3cqw; border-radius: 1cqw; background: #5B3FD9; transform-origin: 0 50%; animation: nwUnder 12s infinite backwards; }

.nw-points { display: grid; gap: 0.9cqw; }
.nw-points li { position: relative; padding-left: 1.8cqw; font-size: 1.28cqw; line-height: 1.35; translate: -110% 0; animation: nwPoint 12s calc(var(--k) * 0.45s) infinite backwards; }
.nw-points li::before { content: ''; position: absolute; left: 0.3cqw; top: 0.55em; width: 0.8cqw; aspect-ratio: 1; border-radius: 50%; background: #8C6BFF; }

.nw .nw-sub { margin-top: 2.2cqw; font-size: 1.1cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8A93A8; }
.nw-items { display: grid; gap: 0.9cqw; margin-top: 1cqw !important; }
.nw-items li { display: flex; align-items: center; gap: 1cqw; padding: 0.9cqw 1.1cqw; border-radius: 1.1cqw; background: #F3F6FC; font-size: 1.28cqw; scale: 0; animation: nwItem 12s calc(var(--k) * 0.3s) infinite backwards; }
.nw-box { display: grid; place-items: center; flex-shrink: 0; width: 2.1cqw; aspect-ratio: 1; border-radius: 0.55cqw; box-shadow: inset 0 0 0 0.22cqw #C3CBE0; color: transparent; }
.nw-box svg { width: 1.5cqw; height: 1.5cqw; stroke-width: 3; }
.nw-items li:first-child .nw-box { animation: nwCheck 12s infinite backwards; }
.nw-items li:first-child .nw-it { animation: nwDone 12s infinite backwards; }
.nw-due { margin-left: auto; padding: 0.2cqw 0.7cqw; border-radius: 0.6cqw; background: #fff; font-size: 1.05cqw; color: #6B7390; }
.nw-items em { display: grid; place-items: center; width: 2.6cqw; aspect-ratio: 1; border-radius: 50%; background: hsl(var(--h) 80% 90%); color: hsl(var(--h) 55% 45%); font-size: 1.1cqw; font-style: normal; font-weight: 700; }

.nw-share { position: absolute; right: 2.1cqw; bottom: 1.8cqw; display: inline-flex; align-items: center; gap: 0.6cqw; padding: 0.8cqw 1.4cqw; border-radius: 0.9cqw; background: #5B3FD9; color: #fff; font-size: 1.2cqw; font-weight: 600; scale: 0; animation: nwShareBtn 12s infinite backwards; }
.nw-share svg { width: 1.5cqw; height: 1.5cqw; }

.nw-posted { position: absolute; left: 62cqw; top: 70.5cqw; display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.8cqw 1.5cqw; border-radius: 99cqw; background: #1B1147; color: #fff; font-size: 1.35cqw; font-weight: 600; translate: 0 6cqw; animation: nwPosted 12s infinite backwards; }
.nw-posted svg { width: 1.6cqw; height: 1.6cqw; }

@keyframes nwCall {
  0% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
  0.833% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  7.083% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; }
  89.167% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94.167% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
  100% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
}

@keyframes nwDoc {
  0% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
  2.917% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  9.167% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; }
  89.167% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94.167% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
  100% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
}

@keyframes nwHead {
  0% { translate: 0 -3cqw; }
  4.583% { translate: 0 -3cqw; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  9.583% { translate: 0 0; }
  89.167% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  92.5% { translate: 0 -3cqw; }
  100% { translate: 0 -3cqw; }
}

@keyframes nwTile {
  0% { scale: 0; }
  5% { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  8.75% { scale: 1; }
  89.167% { scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  92.083% { scale: 0; }
  100% { scale: 0; }
}

@keyframes nwTalk {
  0% { box-shadow: 0 0 0 0 rgba(91, 63, 217, 0); }
  10.833% { box-shadow: 0 0 0 0 rgba(91, 63, 217, 0); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  13.333% { box-shadow: 0 0 0 0.35cqw #5B3FD9; }
  43.333% { box-shadow: 0 0 0 0.35cqw #5B3FD9; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  46.667% { box-shadow: 0 0 0 0 rgba(91, 63, 217, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 63, 217, 0); }
}

@keyframes nwCapBox {
  0% { translate: -120% 0; }
  9.167% { translate: -120% 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  14.167% { translate: 0 0; }
  89.167% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  92.5% { translate: -120% 0; }
  100% { translate: -120% 0; }
}

@keyframes nwType {
  0% { clip-path: inset(0 100% 0 0); }
  12.5% { clip-path: inset(0 100% 0 0); animation-timing-function: linear; }
  38.333% { clip-path: inset(0 0% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

@keyframes nwCtrl {
  0% { translate: 0 9cqw; }
  7.917% { translate: 0 9cqw; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  12.917% { translate: 0 0; }
  89.167% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  92.5% { translate: 0 9cqw; }
  100% { translate: 0 9cqw; }
}

@keyframes nwFlow {
  0% { scale: 0; }
  10.833% { scale: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  13.333% { scale: 1; }
  41.667% { scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  45% { scale: 0; }
  100% { scale: 0; }
}

@keyframes nwDot {
  0% { scale: 0.2; translate: 0 0; }
  25% { scale: 1; }
  80% { scale: 1; }
  100% { scale: 0; translate: 10cqw calc(var(--y) * 1cqw - 4cqw); }
}

@keyframes nwBlink {
  50% { opacity: 0.3; }
}
@keyframes nwSpeak {
  from { scale: 0.75 0.6; }
  to { scale: 1 1.1; }
}

@keyframes nwUnder {
  0% { scale: 0 1; }
  8.333% { scale: 0 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  13.333% { scale: 1 1; }
  89.167% { scale: 1 1; }
  100% { scale: 1 1; }
}

@keyframes nwPoint {
  0% { translate: -110% 0; }
  15.833% { translate: -110% 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  21.667% { translate: 0 0; }
  89.167% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  92.5% { translate: -110% 0; }
  100% { translate: -110% 0; }
}

@keyframes nwItem {
  0% { scale: 0; }
  38.333% { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  42.083% { scale: 1; }
  89.167% { scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  92.083% { scale: 0; }
  100% { scale: 0; }
}

@keyframes nwCheck {
  0% { background: transparent; box-shadow: inset 0 0 0 0.22cqw #C3CBE0; color: transparent; scale: 1; }
  60% { background: transparent; box-shadow: inset 0 0 0 0.22cqw #C3CBE0; color: transparent; scale: 1; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  62.083% { background: #5B3FD9; box-shadow: inset 0 0 0 0.22cqw #5B3FD9; color: #fff; scale: 1.2; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  63.333% { background: #5B3FD9; box-shadow: inset 0 0 0 0.22cqw #5B3FD9; color: #fff; scale: 1; }
  100% { background: #5B3FD9; box-shadow: inset 0 0 0 0.22cqw #5B3FD9; color: #fff; scale: 1; }
}

@keyframes nwDone {
  0% { color: #1D2240; }
  61.667% { color: #1D2240; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  65% { color: #9AA3B8; }
  100% { color: #9AA3B8; }
}

@keyframes nwShareBtn {
  0% { scale: 0; }
  49.167% { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  52.5% { scale: 1; }
  66.667% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  67.5% { scale: 0.9; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  68.75% { scale: 1; }
  89.167% { scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  91.667% { scale: 0; }
  100% { scale: 0; }
}

@keyframes nwPosted {
  0% { translate: 0 6cqw; }
  69.167% { translate: 0 6cqw; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  73.333% { translate: 0 0; }
  89.167% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  92.5% { translate: 0 6cqw; }
  100% { translate: 0 6cqw; }
}

/* Routa, round 2: the road draws in with the route and out again at the end,
   blocks pop in and out, the ETA card and the notification sit next to the
   route (bigger), cards grow in as shapes instead of fading */
.rt-road { stroke-dasharray: 100; stroke-dashoffset: 100; animation: rtRoad 12s infinite backwards; }
.rt-blocks rect { transform-box: fill-box; transform-origin: center; scale: 0; animation: rtBlock 12s calc(var(--k) * 0.035s) infinite backwards; }

.rt-eta { left: 14cqw; top: 30cqw; padding: 1.8cqw 2.6cqw 1.8cqw 1.8cqw; gap: 1.8cqw; border-radius: 2cqw; animation: rtEtaIn 12s infinite backwards; }
.rt-eta-ic { width: 5.6cqw; border-radius: 1.5cqw; }
.rt-eta-ic svg { width: 3cqw; height: 3cqw; }
.rt-eta small { font-size: 1.6cqw; }
.rt-eta b { font-size: 3cqw; }
.rt-done { left: 9.2cqw; font-size: 2.7cqw; }
.rt-done svg { width: 3cqw; height: 3cqw; }

.rt-toast { right: auto; left: 50cqw; bottom: auto; top: 58cqw; width: 42cqw; padding: 1.7cqw; gap: 1.5cqw; border-radius: 2cqw; font-size: 1.75cqw; opacity: 1; animation: rtToastIn 12s infinite backwards; }
.rt-toast b { font-size: 1.6cqw; }
.rt-toast-ic { width: 5cqw; border-radius: 1.3cqw; }
.rt-toast-ic svg { width: 2.8cqw; height: 2.8cqw; }

@keyframes rtRoad {
  0% { stroke-dashoffset: 100; }
  1.25% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  9.167% { stroke-dashoffset: 0; }
  91.25% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96.667% { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}

@keyframes rtDraw {
  0% { stroke-dashoffset: 100; }
  6.667% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  18.333% { stroke-dashoffset: 0; }
  89.167% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94.583% { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}

@keyframes rtBlock {
  0% { scale: 0; }
  0.417% { scale: 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  5.417% { scale: 1; }
  91.667% { scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  94.583% { scale: 0; }
  100% { scale: 0; }
}

@keyframes rtEtaIn {
  0% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
  2.917% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  9.167% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; }
  89.167% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94.167% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
  100% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; }
}

@keyframes rtToastIn {
  0% { clip-path: inset(0 0 0 100% round 2cqw); translate: 3cqw 0; }
  41.667% { clip-path: inset(0 0 0 100% round 2cqw); translate: 3cqw 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  47.5% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 0; }
  60.833% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  65.833% { clip-path: inset(0 100% 0 0 round 2cqw); translate: -2cqw 0; }
  100% { clip-path: inset(0 100% 0 0 round 2cqw); translate: -2cqw 0; }
}


.js .nw:not(.is-playing) * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .nw * { animation: none !important; }
  .nw-tile, .nw-items li, .nw-share, .nw-flow i { scale: 1; }
  .nw-points li, .nw-posted { translate: 0 0; }
  .nw-cap span { clip-path: none; }
  .rt-blocks rect { scale: 1; }
  .rt-road { stroke-dashoffset: 0; }
  .rt-toast { display: none; }
}

/* Notewise, round 3: at the end everything slides down out of the frame,
   one part after the other (the posted pill first, then the summary, the
   flow and the call), so nothing is left behind. Content inside the cards
   simply rides along. */

@keyframes nwDoc {
  0% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
  2.917% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  9.167% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 0; }
  87.917% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  92.917% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 95cqw; animation-timing-function: steps(1, end); }
  93.083% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
  100% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
}

@keyframes nwCall {
  0% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
  0.833% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  7.083% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 0; }
  89.333% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  94.333% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 95cqw; animation-timing-function: steps(1, end); }
  94.5% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
  100% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
}

@keyframes nwPosted {
  0% { translate: 0 6cqw; }
  69.167% { translate: 0 6cqw; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  73.333% { translate: 0 0; }
  86.667% { translate: 0 0; animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  90.833% { translate: 0 12cqw; }
  100% { translate: 0 12cqw; }
}

@keyframes nwHead {
  0% { translate: 0 -3cqw; }
  4.583% { translate: 0 -3cqw; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  9.583% { translate: 0 0; }
  98.75% { translate: 0 0; animation-timing-function: steps(1, end); }
  99.167% { translate: 0 -3cqw; }
  100% { translate: 0 -3cqw; }
}

@keyframes nwTile {
  0% { scale: 0; }
  5% { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  8.75% { scale: 1; }
  98.75% { scale: 1; animation-timing-function: steps(1, end); }
  99.167% { scale: 0; }
  100% { scale: 0; }
}

@keyframes nwCapBox {
  0% { translate: -120% 0; }
  9.167% { translate: -120% 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  14.167% { translate: 0 0; }
  98.75% { translate: 0 0; animation-timing-function: steps(1, end); }
  99.167% { translate: -120% 0; }
  100% { translate: -120% 0; }
}

@keyframes nwCtrl {
  0% { translate: 0 9cqw; }
  7.917% { translate: 0 9cqw; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  12.917% { translate: 0 0; }
  98.75% { translate: 0 0; animation-timing-function: steps(1, end); }
  99.167% { translate: 0 9cqw; }
  100% { translate: 0 9cqw; }
}

@keyframes nwPoint {
  0% { translate: -110% 0; }
  15.833% { translate: -110% 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  21.667% { translate: 0 0; }
  98.75% { translate: 0 0; animation-timing-function: steps(1, end); }
  99.167% { translate: -110% 0; }
  100% { translate: -110% 0; }
}

@keyframes nwItem {
  0% { scale: 0; }
  38.333% { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  42.083% { scale: 1; }
  98.75% { scale: 1; animation-timing-function: steps(1, end); }
  99.167% { scale: 0; }
  100% { scale: 0; }
}

@keyframes nwShareBtn {
  0% { scale: 0; }
  49.167% { scale: 0; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  52.5% { scale: 1; }
  66.667% { scale: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  67.5% { scale: 0.9; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  68.75% { scale: 1; }
  98.75% { scale: 1; animation-timing-function: steps(1, end); }
  99.167% { scale: 0; }
  100% { scale: 0; }
}


/* Routa, round 3: the notification leaves by sliding down out of the frame */

@keyframes rtToastIn {
  0% { clip-path: inset(0 0 0 100% round 2cqw); translate: 3cqw 0; }
  41.667% { clip-path: inset(0 0 0 100% round 2cqw); translate: 3cqw 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  47.5% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 0; }
  60.833% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 0; animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  65.417% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 30cqw; }
  100% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 30cqw; }
}

/* Routa, round 4: the route and the road are drawn with a gap longer than the
   path and pushed fully past both ends when hidden, so their round line caps
   can never leave a dot behind. The notification stays until everything
   leaves, then drops away while shrinking. */
.rt-route { stroke-dasharray: 100 130; }
.rt-road { stroke-dasharray: 100 130; }

@keyframes rtDraw {
  0% { stroke-dashoffset: 104; }
  6.667% { stroke-dashoffset: 104; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  18.333% { stroke-dashoffset: 0; }
  89.167% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94.583% { stroke-dashoffset: -104; }
  100% { stroke-dashoffset: -104; }
}

@keyframes rtRoad {
  0% { stroke-dashoffset: 106; }
  1.25% { stroke-dashoffset: 106; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  9.167% { stroke-dashoffset: 0; }
  91.25% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  96.667% { stroke-dashoffset: -106; }
  100% { stroke-dashoffset: -106; }
}

@keyframes rtToastIn {
  0% { clip-path: inset(0 0 0 100% round 2cqw); translate: 3cqw 0; scale: 1; }
  41.667% { clip-path: inset(0 0 0 100% round 2cqw); translate: 3cqw 0; scale: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  47.5% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 0; scale: 1; }
  87.917% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  92.5% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 30cqw; scale: 0.6; }
  100% { clip-path: inset(0 0 0 0% round 2cqw); translate: 0 30cqw; scale: 0.6; }
}

.rt-toast { transform-origin: 50% 100%; }

/* Notewise: the drop-out also shrinks the cards */
@keyframes nwDoc {
  0% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
  2.917% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  9.167% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 0; }
  87.917% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  92.917% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 0.7; translate: 0 90cqw; animation-timing-function: steps(1, end); }
  93.083% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
  100% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
}
@keyframes nwCall {
  0% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
  0.833% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  7.083% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 0; }
  89.333% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  94.333% { clip-path: inset(0% 0% 0% 0% round 2cqw); scale: 0.7; translate: 0 90cqw; animation-timing-function: steps(1, end); }
  94.5% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
  100% { clip-path: inset(50% 50% 50% 50% round 2cqw); scale: 0.9; translate: 0 0; }
}

@keyframes nwPosted {
  0% { translate: 0 6cqw; scale: 1; }
  69.167% { translate: 0 6cqw; scale: 1; animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1); }
  73.333% { translate: 0 0; scale: 1; }
  86.667% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.3); }
  90.833% { translate: 0 12cqw; scale: 0.6; }
  100% { translate: 0 12cqw; scale: 0.6; }
}

/* ============ Order form: inspiration, AI add-on, briefing call ============ */
.field-section-label .field-hint {
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.order-step .field-section-label + .field-grid { margin-bottom: 4px; }

.calc-option--info {
  position: relative;
  padding: 0;
  cursor: default;
}
.calc-option--info .calc-option-main {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 52px 16px 18px;
  cursor: pointer;
}
.calc-option--info.is-off .calc-option-main { cursor: not-allowed; }
.calc-option--info.is-off strong { color: var(--text-muted); }

.info-tip {
  position: absolute;
  top: 12px;
  right: 12px;
}
.info-tip-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: help;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.info-tip-btn svg { width: 19px; height: 19px; }
.info-tip-btn:hover,
.info-tip-btn:focus-visible { color: var(--primary); background: rgba(59, 130, 246, 0.08); }
.info-tip-bubble {
  position: absolute;
  z-index: 5;
  right: -6px;
  bottom: calc(100% + 8px);
  width: min(300px, 78vw);
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.85rem !important;
  line-height: 1.5;
  box-shadow: 0 12px 30px -10px rgba(11, 13, 18, 0.45);
  opacity: 0;
  visibility: hidden;
  translate: 0 4px;
  transition: opacity 0.18s var(--ease), translate 0.18s var(--ease), visibility 0s linear 0.18s;
  pointer-events: none;
}
.info-tip-bubble strong { display: inline !important; color: inherit !important; }
.info-tip:hover .info-tip-bubble,
.info-tip:focus-within .info-tip-bubble {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

.brief-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg);
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.meeting {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.05);
  box-shadow: inset 0 0 0 1.5px rgba(59, 130, 246, 0.35);
}
.meeting.is-set { box-shadow: inset 0 0 0 1.5px var(--primary); }
.meeting[hidden] { display: none; }
.meeting-head { display: flex; gap: 12px; align-items: flex-start; }
.meeting-head .order-help-avatar { width: 40px; height: 40px; }
.meeting-title { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.meeting-text { margin: 0; font-size: 0.92rem; color: var(--text-secondary); }
.meeting-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.meeting-actions[hidden] { display: none; }
.meeting-confirm {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.meeting-confirm[hidden] { display: none; }
.meeting-confirm p { margin: 0; }
.meeting-confirm strong { color: var(--ink); }
.meeting-cancel {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.meeting-status {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #16A34A;
}

/* Homepage portfolio: rows 2 and 3 are portrait 4:5 */
.portfolio-item:nth-child(n+4):nth-child(-n+9) {
  aspect-ratio: 4 / 5;
}

/* Campaign Motion hero: the 4:5 burger ad instead of a 4:3 still */
.service-visual--portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  width: min(100%, 440px);
  justify-self: center;
  container-type: inline-size;
}

/* ======================================================================
   Mobile hero: the story as a chat on Sophie's phone, above the headline.
   Fixed height; new messages push the thread up like a real messenger.
   Desktop keeps the wide composition (this block only shows <= 600px).
   ====================================================================== */
.mchat { display: none; }

@media (max-width: 600px) {
  .hero .container { gap: 0; }
  .hero-composition { display: none !important; }
  .live-badge { display: none !important; }

  .mchat {
    order: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 26px;
    border-radius: 26px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border), 0 24px 48px -28px rgba(15, 23, 42, 0.32);
    overflow: hidden;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }

  .mchat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.96);
  }

  .mchat-avatars { position: relative; display: flex; flex-shrink: 0; }
  .mchat-avatars img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
  .mchat-avatars img + img { margin-left: -10px; }
  .mchat-avatars i {
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #22C55E; box-shadow: 0 0 0 2px #fff;
  }
  .mchat-avatar { position: relative; flex-shrink: 0; width: 36px; height: 36px; }
  .mchat-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  .mchat-avatar i {
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #22C55E; box-shadow: 0 0 0 2px #fff;
  }

  .mchat-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .mchat-who b { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
  .mchat-who small { font-size: 0.76rem; color: #16A34A; }

  .mchat-eta {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: auto; padding: 5px 9px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-hover);
    font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  }
  .mchat-eta svg { width: 13px; height: 13px; }

  /* the thread: fixed height, older messages fade out at the top */
  .mchat-body {
    position: relative;
    height: 286px;
    overflow: hidden;
    background: #F1F3F7;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
  }

  .mchat-track {
    position: absolute;
    left: 0; right: 0; top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px 14px;
    transition: translate 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s var(--ease);
  }
  .mchat-track.is-reset { transition: none; }
  .mchat-track.is-fading { opacity: 0; }

  .mchat-day {
    align-self: center;
    margin: 0 0 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
  }

  /* messages: hidden until site.js lets them in */
  .m {
    display: none;
    flex-direction: column;
    max-width: 80%;
    padding: 9px 13px 8px;
    border-radius: 19px;
    font-size: 0.95rem;
    line-height: 1.38;
    transform-origin: var(--from, 100% 100%);
  }
  .m.is-in { display: flex; animation: mIn 0.42s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
  .m p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
  .m time { align-self: flex-end; margin-top: 2px; font-size: 0.68rem; opacity: 0.75; }

  .m--me {
    --from: 100% 100%;
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 6px;
  }
  .m--them {
    --from: 0% 100%;
    align-self: flex-start;
    background: #fff;
    color: var(--ink);
    border-bottom-left-radius: 6px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.05);
  }

  /* attachment: the design Sophie sends */
  .m--file {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
  }
  .m--file img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
  .m--file span { display: flex; flex-direction: column; line-height: 1.25; }
  .m--file b { font-size: 0.86rem; font-weight: 600; }
  .m--file small { font-size: 0.72rem; opacity: 0.85; }

  .m-chip {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    margin-top: 7px; padding: 4px 9px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary-hover);
    font-size: 0.74rem; font-weight: 600;
  }
  .m-chip svg { width: 12px; height: 12px; }

  /* Mickey at work */
  .m--status { flex-direction: row; align-items: center; gap: 10px; min-width: 176px; }
  .m--status b { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .m--status em { font-style: normal; }
  .m-progress { position: relative; flex: 1; height: 6px; border-radius: 99px; background: rgba(59, 130, 246, 0.14); overflow: hidden; }
  .m-progress i { position: absolute; inset: 0; width: var(--p, 0%); border-radius: inherit; background: var(--primary); }
  .m--status.is-done b { color: #16A34A; }

  /* the animated asset as a video message */
  .m--video { padding: 5px; gap: 5px; width: 152px; }
  .m--video video { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 15px; object-fit: cover; background: #e9ecf2; }
  .m-done {
    display: inline-flex; align-items: center; gap: 4px; padding: 0 5px 3px;
    font-size: 0.7rem; font-weight: 600; color: #16A34A; white-space: nowrap;
  }
  .m-done svg { width: 12px; height: 12px; }

  /* typing indicator, on Mickey's side */
  .mchat-typing {
    display: none;
    align-self: flex-start;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 19px;
    border-bottom-left-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.05);
  }
  .mchat-typing.is-on { display: inline-flex; animation: mIn 0.3s var(--ease) both; }
  .mchat-typing i { width: 7px; height: 7px; border-radius: 50%; background: #A3AAB8; animation: mDot 1.1s ease-in-out infinite; }
  .mchat-typing i:nth-child(2) { animation-delay: 0.15s; }
  .mchat-typing i:nth-child(3) { animation-delay: 0.3s; }

  /* headline block under the chat */
  .hero h1 { order: 2; margin: 0 0 8px; font-size: clamp(2.3rem, 10.6vw, 2.9rem); line-height: 1.02; }
  .hero-tagline { order: 3; margin: 0 auto 10px; font-size: 1.04rem; }
  .hero-sub { order: 4; font-size: 0.98rem; line-height: 1.55; }
  .hero .cta-group {
    order: 5;
    flex-direction: row;
    gap: 8px;
    margin: 20px 0 0;
  }
  .hero .cta-group > * { width: auto; min-height: 50px; padding-left: 12px; padding-right: 12px; }
  .hero .cta-group .btn-primary { flex: 1.35; }
  .hero .cta-group .btn-secondary { flex: 1; }

  /* who speaks: a small name + photo above each turn, shown with its first message */
  .m-from {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 8px 4px 0;
    font-size: 0.74rem;
    line-height: 1;
    color: var(--text-muted);
  }
  .m-from b { font-weight: 600; color: var(--text-secondary); }
  .m-from img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
  .m-from--me { align-self: flex-end; }
  .m-from--them { align-self: flex-start; }
  .m-from:has(+ .m.is-in), .m-from:has(+ .mchat-typing.is-on) { display: flex; animation: mIn 0.3s var(--ease) both; }
  .mchat-day + .m-from { margin-top: 0; }

  /* the headline block: clear steps, room to breathe */
  .hero h1 { margin: 6px 0 14px; }
  .hero-tagline { max-width: 20em; margin: 0 auto 14px; line-height: 1.3; text-wrap: balance; }
  .hero-sub { max-width: 30em; padding: 0 6px; font-size: 0.96rem; line-height: 1.6; text-wrap: pretty; color: var(--text-secondary); }
  .hero .cta-group { margin-top: 24px; }
  /* on phones the chat already shows "easy, fixed price, fast": keep the intro to one sentence */
  .hero-sub-more { display: none; }
  .mchat-body { height: 262px; }
}

@keyframes mIn {
  from { opacity: 0; translate: 0 10px; scale: 0.92; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes mDot {
  0%, 60%, 100% { translate: 0 0; opacity: 0.55; }
  30% { translate: 0 -4px; opacity: 1; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .m.is-in, .mchat-typing.is-on { animation: none; }
  .mchat-track { transition: none; }
}



/* Phones (2 columns): pair examples of the same shape, so a 4:3 never sits
   next to a 4:5 and leaves a gap. Rows: 4:3, 4:5, 4:3, 4:5, 4:3, 4:5, 4:3, then one wide 4:3.
   The service tags shrink to fit the narrow tiles. */
@media (max-width: 600px) {
  .portfolio-item:nth-child(1) { order: 1; }
  .portfolio-item:nth-child(2) { order: 2; }
  .portfolio-item:nth-child(4) { order: 3; }
  .portfolio-item:nth-child(5) { order: 4; }
  .portfolio-item:nth-child(3) { order: 5; }
  .portfolio-item:nth-child(10) { order: 6; }
  .portfolio-item:nth-child(6) { order: 7; }
  .portfolio-item:nth-child(7) { order: 8; }
  .portfolio-item:nth-child(11) { order: 9; }
  .portfolio-item:nth-child(12) { order: 10; }
  .portfolio-item:nth-child(8) { order: 11; }
  .portfolio-item:nth-child(9) { order: 12; }
  .portfolio-item:nth-child(13) { order: 13; }
  .portfolio-item:nth-child(14) { order: 14; }
  /* the last explainer would sit alone: it closes the grid full width */
  .portfolio-item:nth-child(15) { order: 15; grid-column: 1 / -1; }

  .portfolio-tag {
    left: 8px;
    bottom: 8px;
    gap: 5px;
    padding: 5px 9px 5px 8px;
    font-size: 0.68rem;
  }
  .portfolio-tag-dot { width: 5px; height: 5px; }
}


/* Steps carousel (phones): every card's button on the same line. The text
   column fills the card and the button sits at its bottom; the "call us"
   hint in step 2 moves above its button so it doesn't push it up. */
@media (max-width: 760px) {
  .steps-stack .step-block { grid-template-rows: auto 1fr; }
  .steps-stack .step-block > div:first-child { display: flex; flex-direction: column; align-self: stretch; }
  .steps-stack .step-block > div:first-child > .btn-primary { margin-top: auto !important; }
  .steps-stack .step-block .service-help { order: 1; margin: auto 0 16px; }
  .steps-stack .step-block > div:has(.service-help) > .btn-primary { margin-top: 0 !important; }
  .steps-stack .step-block .btn-primary { order: 2; }
}





/* ▼ makeitmove-ae:orbit · uit After Effects, niet met de hand aanpassen ▼ */
.geo--orbit .go-halo {
  visibility: hidden !important;
}
/* ▲ makeitmove-ae:orbit ▲ */

/* Feature demo video: the tilted app window's own edges and rounded corners
   came into view near the card corners. A slight zoom, weighted to the
   bottom right, keeps the window filling the frame for the whole loop. */
video[data-src$="feature-demo-product-motion.mp4"] {
  scale: 1.3;
  transform-origin: 62% 62%;
}

/* Burger ad on the Campaign Motion service card: the cropped frame cut the
   yellow squiggles off at the edges, so this version goes without them */
.ba--card .ba-sq-l,
.ba--card .ba-sq-r {
  display: none;
}

/* Hero-intro: bij binnenkomst schuiven kop, tekst en knoppen zacht na elkaar in.
   Alleen CSS: zonder animatie-ondersteuning staat alles gewoon zichtbaar. */
@keyframes heroIntroFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-composition { animation: heroIntroFade 0.8s var(--ease) 0.05s both; }
  .hero h1 { animation: reveal 0.7s var(--ease) 0.15s both; }
  .hero .hero-tagline { animation: reveal 0.7s var(--ease) 0.27s both; }
  .hero .hero-sub { animation: reveal 0.7s var(--ease) 0.37s both; }
  .hero .cta-group { animation: reveal 0.7s var(--ease) 0.47s both; }
}

/* ▼ logo-hover: nav-logo met hover-animatie (tijdlijn 6s, JS speelt per zone een stuk af) ▼ */
.nav-logo { display: block; height: 25.65px; width: auto; overflow: visible; }
.nav-logo .lg-icon { transform-box: fill-box; transform-origin: 50% 50%; }
.nav-logo .lg-ruit { fill: url(#lg-fill); transform-box: fill-box; transform-origin: 50% 50%; }
.nav-logo .lg-glyph { fill: #fff; stroke: #fff; stroke-width: 4.2; stroke-linejoin: round; }
.nav-logo .lg-g-ease-in, .nav-logo .lg-g-ease-out, .nav-logo .lg-g-hold, .nav-logo .lg-g-lineair { opacity: 0; }
.nav-logo .lg-l, .nav-logo .lg-ball { fill: #0f172a; transform-box: fill-box; transform-origin: 50% 100%; }
.nav-logo .lg-ball { transform-origin: 50% 50%; }
.nav-logo .lg-hit { fill: transparent; pointer-events: all; }
.nav-logo .lg-hit-ball { cursor: pointer; }
.nav-brand-logo { display: grid; place-items: center; }
@media (max-width: 600px) { .nav-brand-logo { width: 32px; height: 32px; overflow: hidden; } .nav-brand-logo .nav-logo { height: 32px; } }
@media (prefers-reduced-motion: no-preference) {
  .nav-logo .lg-icon { animation: lg-icon 6s linear infinite paused; }
  .nav-logo .lg-g-ease { animation: lg-g-ease 6s linear infinite paused; }
  .nav-logo .lg-g-ease-in { animation: lg-g-ease-in 6s linear infinite paused; }
  .nav-logo .lg-g-ease-out { animation: lg-g-ease-out 6s linear infinite paused; }
  .nav-logo .lg-g-hold { animation: lg-g-hold 6s linear infinite paused; }
  .nav-logo .lg-g-lineair { animation: lg-g-lineair 6s linear infinite paused; }
  .nav-logo .lg-ball { animation: lg-ball 6s linear infinite paused; }
  .nav-logo .lg-l1 { animation: lg-l1 6s linear infinite paused; }
  .nav-logo .lg-l2 { animation: lg-l2 6s linear infinite paused; }
  .nav-logo .lg-l3 { animation: lg-l3 6s linear infinite paused; }
  .nav-logo .lg-l4 { animation: lg-l4 6s linear infinite paused; }
  .nav-logo .lg-l5 { animation: lg-l5 6s linear infinite paused; }
  .nav-logo .lg-l6 { animation: lg-l6 6s linear infinite paused; }
  .nav-logo .lg-l7 { animation: lg-l7 6s linear infinite paused; }
  .nav-logo .lg-l8 { animation: lg-l8 6s linear infinite paused; }
}
@keyframes lg-g-ease {
  0% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  2.492% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  2.5% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  19.158% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  19.167% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  100% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
}
@keyframes lg-g-ease-in {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  2.498% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  2.5% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  6.665% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  6.667% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  100% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
}
@keyframes lg-g-ease-out {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  6.665% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  6.667% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  10.831% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  10.833% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  100% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
}
@keyframes lg-g-hold {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  10.831% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  10.833% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  14.998% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  15.0% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  100% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
}
@keyframes lg-g-lineair {
  0% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  14.998% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  15.0% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  19.165000000000003% { opacity: 1; animation-timing-function: cubic-bezier(0,0,1,1); }
  19.167% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
  100% { opacity: 0; animation-timing-function: cubic-bezier(0,0,1,1); }
}
@keyframes lg-icon {
  0% { scale: 1; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  2.0% { scale: 1.14; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  2.5% { scale: 1.14; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  3.5% { scale: 1.24; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  5.833% { scale: 1.14; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  6.667% { scale: 1.14; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  7.667% { scale: 1.24; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  10.0% { scale: 1.14; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  10.833% { scale: 1.14; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  11.833% { scale: 1.24; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  14.167% { scale: 1.14; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  15.0% { scale: 1.14; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  16.0% { scale: 1.24; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  18.333% { scale: 1.14; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  19.167% { scale: 1.14; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  20.167% { scale: 1.24; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  22.5% { scale: 1.14; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  25.0% { scale: 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { scale: 1 }
}

@keyframes lg-l1 {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  30.0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  32.0% { translate: 0 0; scale: 1.14 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  35.0% { translate: 0 -22px; scale: .88 1.18; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  37.667% { translate: 0 -30px; scale: .96 1.05; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  40.667% { translate: 0 -8px; scale: .9 1.16; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  42.333% { translate: 0 0; scale: 1.16 .8; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  44.0% { translate: 0 0; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  45.0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; scale: 1 1 }
}
@keyframes lg-l2 {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  31.167% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  33.167% { translate: 0 0; scale: 1.14 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  36.167% { translate: 0 -22px; scale: .88 1.18; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  38.833% { translate: 0 -30px; scale: .96 1.05; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  41.833% { translate: 0 -8px; scale: .9 1.16; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  43.5% { translate: 0 0; scale: 1.16 .8; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  45.167% { translate: 0 0; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  46.167% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; scale: 1 1 }
}
@keyframes lg-l3 {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  32.333% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  34.333% { translate: 0 0; scale: 1.14 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  37.333% { translate: 0 -22px; scale: .88 1.18; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  40.0% { translate: 0 -30px; scale: .96 1.05; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  43.0% { translate: 0 -8px; scale: .9 1.16; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  44.667% { translate: 0 0; scale: 1.16 .8; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  46.333% { translate: 0 0; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  47.333% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; scale: 1 1 }
}
@keyframes lg-l4 {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  33.5% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  35.5% { translate: 0 0; scale: 1.14 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  38.5% { translate: 0 -22px; scale: .88 1.18; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  41.167% { translate: 0 -30px; scale: .96 1.05; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  44.167% { translate: 0 -8px; scale: .9 1.16; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  45.833% { translate: 0 0; scale: 1.16 .8; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  47.5% { translate: 0 0; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  48.5% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; scale: 1 1 }
}
@keyframes lg-l5 {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  34.667% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  36.667% { translate: 0 0; scale: 1.14 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  39.667% { translate: 0 -22px; scale: .88 1.18; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  42.333% { translate: 0 -30px; scale: .96 1.05; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  45.333% { translate: 0 -8px; scale: .9 1.16; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  47.0% { translate: 0 0; scale: 1.16 .8; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  48.667% { translate: 0 0; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  49.667% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; scale: 1 1 }
}
@keyframes lg-l6 {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  35.833% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  37.833% { translate: 0 0; scale: 1.14 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  40.833% { translate: 0 -22px; scale: .88 1.18; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  43.5% { translate: 0 -30px; scale: .96 1.05; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  46.5% { translate: 0 -8px; scale: .9 1.16; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  48.167% { translate: 0 0; scale: 1.16 .8; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  49.833% { translate: 0 0; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  50.833% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; scale: 1 1 }
}
@keyframes lg-l7 {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  37.0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  39.0% { translate: 0 0; scale: 1.14 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  42.0% { translate: 0 -22px; scale: .88 1.18; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  44.667% { translate: 0 -30px; scale: .96 1.05; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  47.667% { translate: 0 -8px; scale: .9 1.16; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  49.333% { translate: 0 0; scale: 1.16 .8; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  51.0% { translate: 0 0; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  52.0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; scale: 1 1 }
}
@keyframes lg-l8 {
  0% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  38.167% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  40.167% { translate: 0 0; scale: 1.14 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  43.167% { translate: 0 -22px; scale: .88 1.18; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  45.833% { translate: 0 -30px; scale: .96 1.05; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  48.833% { translate: 0 -8px; scale: .9 1.16; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  50.5% { translate: 0 0; scale: 1.16 .8; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  52.167% { translate: 0 0; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  53.167% { translate: 0 0; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; scale: 1 1 }
}
@keyframes lg-ball {
  0% { translate: 0 0; rotate: 0deg; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  65.0% { translate: 0 0; rotate: 0deg; scale: 1 1; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  67.5% { translate: 0 2px; rotate: 0deg; scale: 1.12 .84; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  72.5% { translate: 0 -46px; rotate: 160deg; scale: .9 1.12; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  77.5% { translate: -4px -62px; rotate: 300deg; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  80.833% { translate: 0 -30px; rotate: 360deg; scale: .95 1.08; animation-timing-function: cubic-bezier(0.42,0,1,1); }
  84.167% { translate: 0 0; rotate: 360deg; scale: 1.16 .82; animation-timing-function: cubic-bezier(0,0,0.58,1); }
  86.667% { translate: 0 0; rotate: 360deg; scale: .97 1.04; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  90.0% { translate: 0 0; rotate: 360deg; scale: 1 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); }
  100% { translate: 0 0; rotate: 360deg; scale: 1 1 }
}
/* ▲ logo-hover ▲ */

/* Hero: once the story has played (.is-ready), hovering the middle frame makes it
   grow, the rest of the hero reacts (chats part, the text below sinks a little,
   everything softens) and, in 4x3 mode, the frame also opens into its 4:3 variant.
   Switch in index.html on <section class="hero" data-hero-open="1x1 | 4x3">:
   - 1x1 (now): the frame only scales
   - 4x3: it also widens to 4:3 and the 4:3 Lumo video fades in (site.js keeps it on the 1:1 clock)
   Mouse devices on desktop only. */
.hero {
  --hero-scale: 1.16; /* frame grows */
  --hero-spread: 22px; /* chats and tags part by this much */
  --hero-sink: 16px; /* the text below moves down by this much */
}

.hero[data-hero-open="4x3"] {
  --hero-scale: 1.14;
  --hero-spread: 40px;
}

.hero-asset-wide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) and (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  .hero-composition.is-ready .hero-card {
    z-index: 6;
    cursor: zoom-in;
    transition: scale 0.8s cubic-bezier(0.22, 0.8, 0.28, 1);
  }

  .hero-composition.is-ready .hero-card:hover {
    scale: var(--hero-scale);
  }

  /* 4x3 mode: 237px square -> 316px wide at the same height */
  .hero[data-hero-open="4x3"] .hero-composition.is-ready .hero-card .asset-media,
  .hero[data-hero-open="4x3"] .hero-composition.is-ready .hero-card::before {
    transition: inset 0.8s cubic-bezier(0.22, 0.8, 0.28, 1);
  }

  .hero[data-hero-open="4x3"] .hero-composition.is-ready .hero-card:hover .asset-media,
  .hero[data-hero-open="4x3"] .hero-composition.is-ready .hero-card:hover::before {
    inset: 0 -16.667%;
  }

  .hero-composition.is-ready .hero-card:hover .asset-media.is-wide-ready .hero-asset-wide {
    opacity: 1;
    transition-delay: 0.15s;
  }

  /* The rest of the hero reacts to the frame: the chats and their tags part to
     either side, the text below sinks a little, then everything around the frame
     softens (the blur starts after the move). Only translate/margin/top/filter are
     used here, the intro animations keep their own properties. */
  .hero-composition.is-ready .hero-animation.chat,
  .hero-composition.is-ready .flow-tag,
  .hero-composition.is-ready .flow-attachment,
  .hero-composition.is-ready .hero-flow-lines,
  .hero.is-ready-hero .live-badge {
    transition: translate 0.8s cubic-bezier(0.22, 0.8, 0.28, 1), margin 0.8s cubic-bezier(0.22, 0.8, 0.28, 1),
      filter 0.5s var(--ease), opacity 0.4s var(--ease);
  }

  .hero.is-ready-hero h1,
  .hero.is-ready-hero .hero-tagline,
  .hero.is-ready-hero .hero-sub,
  .hero.is-ready-hero .cta-group {
    position: relative;
    top: 0;
    transition: top 0.8s cubic-bezier(0.22, 0.8, 0.28, 1);
  }

  .hero.is-ready-hero:has(.hero-card:hover) h1 { top: var(--hero-sink); }
  .hero.is-ready-hero:has(.hero-card:hover) .hero-tagline { top: calc(var(--hero-sink) * 0.94); transition-delay: 0.03s; }
  .hero.is-ready-hero:has(.hero-card:hover) .hero-sub { top: calc(var(--hero-sink) * 0.88); transition-delay: 0.06s; }
  .hero.is-ready-hero:has(.hero-card:hover) .cta-group { top: calc(var(--hero-sink) * 0.82); transition-delay: 0.09s; }

  .hero-composition.is-ready:has(.hero-card:hover) .hero-animation.chat--in { translate: calc(var(--hero-spread) * -1) 0; }
  .hero-composition.is-ready:has(.hero-card:hover) .hero-animation.chat--out { translate: var(--hero-spread) 0; }
  .hero-composition.is-ready:has(.hero-card:hover) .flow-tag--in,
  .hero-composition.is-ready:has(.hero-card:hover) .flow-attachment { margin-left: calc(var(--hero-spread) * -1); }
  /* anchored to the right edge: a negative right margin moves them outward */
  .hero-composition.is-ready:has(.hero-card:hover) .flow-tag--out,
  .hero-composition.is-ready:has(.hero-card:hover) .flow-tag--done { margin-right: calc(var(--hero-spread) * -1); }

  /* the connector arrows would no longer meet the chats: they fade while the frame is open */
  .hero-composition.is-ready:has(.hero-card:hover) .hero-flow-lines { opacity: 0; }

  .hero-composition.is-ready:has(.hero-card:hover) .hero-animation.chat,
  .hero-composition.is-ready:has(.hero-card:hover) .flow-tag,
  .hero-composition.is-ready:has(.hero-card:hover) .flow-attachment,
  .hero.is-ready-hero:has(.hero-card:hover) .live-badge {
    filter: blur(1.2px);
    transition-delay: 0s, 0s, 0s, 0.4s, 0s;
  }
}