/* MOVERS AI. Every value comes from the design system tokens in /assets/movers-ui.css. */

/* Icons: one 24px grid, 1.75px round-cap strokes, sized by the text around them. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
/* Figures are read, not spoken: Outfit, one weight, digits of equal width. */
/* A figure and its unit are one thing; they never break across lines. */
.mv-figure { font-family: var(--mv-font-en); font-weight: var(--mv-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The number carries the weight and the unit stays quiet beside it (design system page 18). */
.mv-unit { margin-left: 0.12em; font-size: 0.42em; font-weight: var(--mv-weight-semibold); white-space: nowrap; }
/* A figure arrives by rolling its digits into place, once, when it comes into view. */
.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; font-size: inherit; line-height: 1; }
.odo-col { display: flex; flex-direction: column; }
.odo-col b { display: block; height: 1em; line-height: 1; font-weight: inherit; font-variant-numeric: tabular-nums; }
.odo-fixed { font-variant-numeric: tabular-nums; }

/* Layout shells */
/* Every section sits inside the same measure, so the left and right edges line up down the page. */
.container { width: 100%; max-width: calc(var(--mv-content-max) + var(--mv-margin) * 2); margin-inline: auto; padding-inline: var(--mv-margin); }
.section { padding-block: clamp(64px, 6vw, 112px); }
/* A section opening right under the hero reads as the same breath; it needs less air above. */
.section-snug { padding-top: clamp(28px, 2.6vw, 48px); }
.section-tinted { background: var(--mv-color-surface-sunken); }
.section-dark { background: var(--mv-color-surface-inverse); color: var(--mv-gray-300); }
.section-dark h2, .section-dark h3, .section-dark strong, .section-dark dt { color: var(--mv-white); }

/* The hero carries the largest type; every section title steps down one rung from it. */
.section-title { font-size: clamp(24px, 2.4vw, 42px); line-height: 1.3; font-weight: var(--mv-weight-bold); text-wrap: balance; }
.section-lead { margin-top: var(--mv-space-4); max-width: 60ch; color: var(--mv-color-text-secondary); }
.section-dark .section-lead { color: var(--mv-gray-300); }
/* Titles start at the left edge of the measure, the way the body text does. */
.section-head { margin-bottom: var(--mv-space-10); }
.eyebrow { margin-bottom: var(--mv-space-3); }
.accent { color: var(--mv-color-action-primary); }

/* Buttons: the design system sizes. md is 48px with 15px text, sm is 40px with 14px. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mv-space-2);
  min-height: var(--mv-control-height); padding-inline: var(--mv-space-5);
  border: var(--mv-border-strong) solid transparent; border-radius: var(--mv-radius-md);
  background: none; font-size: 15px; font-weight: var(--mv-weight-semibold); line-height: 1.3;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--mv-duration-fast) var(--mv-ease-standard),
              border-color var(--mv-duration-fast) var(--mv-ease-standard),
              color var(--mv-duration-fast) var(--mv-ease-standard);
}
.button .icon { width: 20px; height: 20px; }
.button-small { min-height: 40px; padding-inline: var(--mv-space-4); font-size: var(--mv-size-caption); }
.button-primary { background: var(--mv-color-action-primary); color: var(--mv-white); }
.button-primary:hover { background: var(--mv-color-action-primary-hover); }
.button-primary:active { background: var(--mv-color-action-primary-press); }
.button-tertiary { border-color: var(--mv-color-border-strong); color: var(--mv-color-text-primary); background: var(--mv-color-surface); }
.button-tertiary:hover { border-color: var(--mv-color-action-primary); color: var(--mv-color-action-primary); }
.button-inverse { background: var(--mv-white); color: var(--mv-navy); }
.button-inverse:hover { background: var(--mv-blue-50); }
.button-ghost { border-color: var(--mv-color-border-inverse); color: var(--mv-gray-300); }
.button-ghost:hover { border-color: var(--mv-gray-400); color: var(--mv-white); }

/* Header: the combined lockup of CI guideline page 17, then the menu, then one primary action. */
.site-header {
  position: sticky; top: 0; z-index: var(--mv-z-header);
  background: color-mix(in srgb, var(--mv-color-surface) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: var(--mv-border) solid var(--mv-color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mv-space-8); height: var(--mv-header-height); }
/* X is the logo height. Divider 1X, half of X of air on each side, business name at 1X in Outfit Medium. */
.brand { --x: 20px; display: inline-flex; align-items: center; flex: none; gap: calc(var(--x) * 0.5); }
.brand-logo { height: var(--x); width: calc(var(--x) * 6.27); }
.brand-rule { width: 1.5px; height: var(--x); background: var(--mv-color-border-strong); }
.brand-name { font-family: var(--mv-font-en); font-size: var(--x); font-weight: var(--mv-weight-medium); line-height: 1; color: var(--mv-color-text-primary); white-space: nowrap; }

#main-nav { display: flex; align-items: center; gap: var(--mv-space-6); }
/* The call to action in the menu stays a button; only the plain links take the link treatment. */
#main-nav > a:not(.button) {
  position: relative; display: inline-flex; align-items: center; height: var(--mv-header-height);
  font-family: var(--mv-font-en); font-size: var(--mv-size-body-sm); font-weight: var(--mv-weight-medium);
  color: var(--mv-color-text-secondary);
}
#main-nav > a:not(.button):hover, #main-nav > a:not(.button)[aria-current="page"] { color: var(--mv-color-text-primary); }
#main-nav > a:not(.button)[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--mv-color-action-primary); }
.menu-toggle { display: none; }

/* Hero */
.hero { padding-block: clamp(48px, 5vw, 96px) 0; }
/* The hero keeps the page measure so its title starts where every other title starts;
   the lines are held short by the text itself, not by narrowing the block. */
.hero h1 { max-width: 20ch; font-size: clamp(30px, 3.4vw, 60px); line-height: 1.18; font-weight: var(--mv-weight-bold); text-wrap: balance; }
.hero h1 b { color: var(--mv-color-action-primary); font-weight: inherit; }
.hero p { margin-top: var(--mv-space-5); max-width: 58ch; font-size: var(--mv-size-body); color: var(--mv-color-text-secondary); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--mv-space-3); margin-top: var(--mv-space-8); }
/* The headline results, set out plainly: a rule, the number, then what it counts. */
.hero-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--mv-space-8); margin-top: clamp(40px, 4vw, 64px); margin-bottom: clamp(56px, 6vw, 104px); }
.hero-figures > li { padding-top: var(--mv-space-5); border-top: 2px solid var(--mv-color-action-primary); }
.hero-figures .mv-figure { display: block; font-size: clamp(34px, 3.1vw, 54px); line-height: 1.05; color: var(--mv-color-action-primary); }
.hero-figures li > span { display: block; margin-top: var(--mv-space-3); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); }

/* The project strip the old hero had: thumbnails sliding right to left, without end.
   It is its own quiet band between the hero and the next section, and the cards fade out
   at both edges instead of being cut off against the window. */
.strip {
  margin-top: clamp(48px, 5vw, 88px);
  padding-block: clamp(28px, 3vw, 44px);
  overflow: hidden;
  background: var(--mv-color-surface-sunken);
  border-top: var(--mv-border) solid var(--mv-color-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.strip-track { display: flex; gap: var(--mv-space-5); width: max-content; }
.strip-card {
  position: relative; display: block; width: clamp(300px, 25vw, 380px); aspect-ratio: 5 / 4; flex: none;
  overflow: hidden; border-radius: var(--mv-radius-lg); background: var(--mv-gray-100);
  box-shadow: var(--mv-elevation-1);
}
.strip-card img, .strip-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.strip-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 15 45 / 0%) 38%, rgb(5 15 45 / 82%) 100%); }
.strip-text { position: absolute; inset: auto 0 0; z-index: 1; padding: var(--mv-space-5); color: var(--mv-white); }
.strip-text .mv-tag { margin-bottom: var(--mv-space-3); background: rgb(255 255 255 / 18%); color: var(--mv-white); border-color: transparent; }
.strip-text strong { display: block; font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); line-height: 1.4; }

/* Why: three vision tasks, each with its own picture. */
.task-grid { display: grid; gap: var(--mv-space-6); grid-template-columns: repeat(3, 1fr); margin-top: var(--mv-space-10); }
.task {
  display: flex; flex-direction: column; overflow: hidden;
  border: var(--mv-border) solid var(--mv-color-border-inverse); border-radius: var(--mv-radius-lg);
  background: rgb(255 255 255 / 4%);
}
.task img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--mv-gray-800); }
.task-body { padding: var(--mv-space-6); }
.task h3 { font-family: var(--mv-font-en); font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); }
.task p { margin-top: var(--mv-space-3); font-size: var(--mv-size-body-sm); color: var(--mv-gray-300); }
/* A pillar states its English name, then what it means in Korean. */
.task-sub { margin-top: var(--mv-space-2); font-size: var(--mv-size-caption); color: var(--mv-color-action-primary); }

/* Drawings we make ourselves: one line weight, the brand blue for what matters,
   a quieter grey for what is only there to be compared against. */
.task-art, .step-art { margin: 0; }
.task-art svg, .step-art svg { display: block; width: 100%; height: auto; }
.art-line, .art-dim, .art-arrow, .art-tick, .art-stroke, .art-track, .art-needle, .art-route {
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.art-line, .art-arrow, .art-needle, .art-route { stroke: var(--mv-color-text-secondary); }
.art-dim, .art-track { stroke: var(--mv-color-border); }
.art-track { stroke: none; fill: var(--mv-color-border); }
.art-fill { fill: var(--mv-color-action-primary); stroke: none; }
.art-stroke { stroke: var(--mv-color-action-primary); fill: none; stroke-width: 2.4; }
.task-art { padding: var(--mv-space-6) var(--mv-space-6) 0; }
.task-art .art-line, .task-art .art-arrow, .task-art .art-needle, .task-art .art-route { stroke: var(--mv-gray-400); }
.task-art .art-dim { stroke: var(--mv-gray-700); }
.step-art { padding-bottom: var(--mv-space-5); border-bottom: var(--mv-border) solid var(--mv-color-border); margin-bottom: var(--mv-space-5); }

/* Numbered steps, shared by the process, data and package sections. */
/* Every step stands in the same row, whether a process has four of them or five. */
.steps { display: grid; gap: var(--mv-space-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.step { padding: var(--mv-space-6); border: var(--mv-border) solid var(--mv-color-border); border-radius: var(--mv-radius-lg); background: var(--mv-color-surface); }
.step-mark { display: flex; align-items: center; gap: var(--mv-space-3); margin-bottom: var(--mv-space-4); }
.step-mark .icon { width: 24px; height: 24px; flex: none; color: var(--mv-color-action-primary); }
.step-mark span { font-family: var(--mv-font-en); font-size: var(--mv-size-caption); font-weight: var(--mv-weight-semibold); color: var(--mv-color-text-tertiary); }
.step h3 { font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); }
.step > p { margin-top: var(--mv-space-3); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); }
.step ul { margin-top: var(--mv-space-4); display: grid; gap: var(--mv-space-2); }
.step li { position: relative; padding-left: var(--mv-space-4); font-size: var(--mv-size-caption); color: var(--mv-color-text-secondary); line-height: 1.55; }
.step li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: var(--mv-radius-full); background: var(--mv-color-border-accent); }
.step li b { font-weight: var(--mv-weight-semibold); color: var(--mv-color-text-primary); }
/* The drawings are all 1024 square, so one shape fits them all and they fill the card edge to edge. */
.step figure { margin-top: var(--mv-space-5); border-radius: var(--mv-radius-md); overflow: hidden; }
.step figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* The step that is really the next move stands on its own line, across the measure. */
.step-last {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: var(--mv-space-8);
  margin-top: var(--mv-space-6); padding: var(--mv-space-6);
  border: var(--mv-border) solid var(--mv-color-border-accent); border-radius: var(--mv-radius-lg);
  background: var(--mv-color-surface-accent);
}
.step-last .step-mark { margin-bottom: var(--mv-space-3); }
.step-last .step-art { padding: 0; border: 0; margin: 0; }

/* Every step drawing keeps moving: each one loops the thing that step is about,
   and the row starts a beat apart once it is on screen. */
.steps[data-steps="ready"] .step-art svg * { animation-play-state: paused; }
.steps[data-steps="shown"] .step { --at: calc(var(--step) * 260ms); }

/* 01 두 말풍선이 번갈아 말하고, 점 세 개가 따라 깜빡입니다. */
.steps[data-steps="shown"] .art-say-a { animation: art-say 3.2s var(--mv-ease-standard) infinite; animation-delay: var(--at); }
.steps[data-steps="shown"] .art-say-b { animation: art-say 3.2s var(--mv-ease-standard) infinite; animation-delay: calc(var(--at) + 1.6s); }
.steps[data-steps="shown"] .art-beat circle { animation: art-beat 1.4s var(--mv-ease-standard) infinite; }
.steps[data-steps="shown"] .art-beat circle:nth-child(2) { animation-delay: .18s; }
.steps[data-steps="shown"] .art-beat circle:nth-child(3) { animation-delay: .36s; }

/* 02 템플릿이 물러나고 디자인된 화면이 올라오기를 되풀이합니다. */
.steps[data-steps="shown"] .art-fade { animation: art-fade 4s var(--mv-ease-standard) infinite; animation-delay: var(--at); }
.steps[data-steps="shown"] .art-push { animation: art-push 4s var(--mv-ease-standard) infinite; animation-delay: var(--at); }
.steps[data-steps="shown"] .art-rise { animation: art-rise 4s var(--mv-ease-standard) infinite; animation-delay: var(--at); }

/* 03 성능 막대가 끝까지 찼다가 다시 채워집니다. */
.steps[data-steps="shown"] .art-grow { animation: art-grow 2.6s var(--mv-ease-standard) infinite; animation-delay: var(--at); }

/* 04 체크가 차례로 그려지고 지워지며, 그 사이 로켓이 들썩입니다. */
.steps[data-steps="shown"] .art-stroke { stroke-dasharray: 44; animation: art-draw 3.6s var(--mv-ease-standard) infinite; }
.steps[data-steps="shown"] .art-tick .art-stroke:nth-child(1) { animation-delay: calc(var(--at) + 0ms); }
.steps[data-steps="shown"] .art-tick .art-stroke:nth-child(2) { animation-delay: calc(var(--at) + 260ms); }
.steps[data-steps="shown"] .art-tick .art-stroke:nth-child(3) { animation-delay: calc(var(--at) + 520ms); }
.steps[data-steps="shown"] .art-lift { animation: art-lift 3.6s var(--mv-ease-standard) infinite; animation-delay: var(--at); }
.steps[data-steps="shown"] .art-flame { animation: art-flame 3.6s var(--mv-ease-standard) infinite; animation-delay: var(--at); }

/* 05 지구가 돌고, 항로가 그려지고, 거점이 켜집니다. */
.steps[data-steps="shown"] .art-spin { transform-origin: 120px 84px; animation: art-spin 18s linear infinite; }
.steps[data-steps="shown"] .art-route { stroke-dasharray: 160; animation: art-draw-long 1400ms var(--mv-ease-standard) infinite alternate; animation-delay: var(--at); }
.steps[data-steps="shown"] .art-pop circle { animation: art-pop 2.2s var(--mv-ease-standard) infinite; transform-box: fill-box; transform-origin: center; }
.steps[data-steps="shown"] .art-pop circle:nth-child(2) { animation-delay: .5s; }
.steps[data-steps="shown"] .art-pop circle:nth-child(3) { animation-delay: 1s; }

@keyframes art-say { 0%, 44%, 100% { opacity: .35; } 12%, 32% { opacity: 1; } }
@keyframes art-beat { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes art-fade { 0%, 10% { opacity: 1; } 55%, 88% { opacity: .35; } 100% { opacity: 1; } }
@keyframes art-push { 0%, 10% { transform: translateX(0); opacity: .4; } 35% { transform: translateX(8px); opacity: 1; } 60%, 100% { transform: translateX(0); opacity: .4; } }
@keyframes art-rise { 0%, 20% { opacity: 0; transform: translateY(12px); } 50%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes art-grow { 0% { width: 0; } 60%, 88% { width: 282px; } 100% { width: 0; } }
@keyframes art-draw { 0%, 6% { stroke-dashoffset: 44; } 26%, 72% { stroke-dashoffset: 0; } 86%, 100% { stroke-dashoffset: 44; } }
@keyframes art-draw-long { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
@keyframes art-lift { 0%, 72%, 100% { transform: translateY(0); } 86% { transform: translateY(-10px); } }
@keyframes art-flame { 0%, 72%, 100% { opacity: .25; } 84% { opacity: 1; } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-pop { 0%, 100% { transform: scale(1); opacity: .5; } 30% { transform: scale(1.35); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .steps .step-art svg * { animation: none !important; }
}
.step-last h3 { font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); }
.step-last p { margin-top: var(--mv-space-2); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); }

/* The platforms a store can be built on, each with what it is good for. */
.platforms { display: grid; gap: var(--mv-space-5); grid-template-columns: repeat(3, 1fr); margin-bottom: var(--mv-space-10); }
.platforms > li { padding: var(--mv-space-6); border: var(--mv-border) solid var(--mv-color-border); border-radius: var(--mv-radius-lg); background: var(--mv-color-surface); }
/* The supplied marks carry their own uneven air inside a wide canvas, so each one gets a
   panel of its own and is centred in it. Trimming the files would be the other way, but
   then the panels would have to match by eye instead of by rule. */
/* The supplied marks sit small in the middle of a wide canvas with their own uneven air.
   The panel takes the full width and crops that air away, so every mark reads at the same
   size and lands on the same centre line. */
.platform-mark {
  display: block; height: 88px; overflow: hidden;
  border: var(--mv-border) solid var(--mv-color-border); border-radius: var(--mv-radius-md);
  background: var(--mv-color-surface-sunken);
}
.platform-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.platforms h3 { margin-top: var(--mv-space-5); font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); }
.platforms p:not(.platform-mark) { margin-top: var(--mv-space-3); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); }
.platform-tags { font-family: var(--mv-font-en); font-weight: var(--mv-weight-medium); color: var(--mv-color-action-primary); }
.platform-fit { margin-top: var(--mv-space-4); padding-top: var(--mv-space-4); border-top: var(--mv-border) solid var(--mv-color-border); font-size: var(--mv-size-caption); }

/* FAQ: one group at a time, the way the old page tabbed them. */
.faq-tabs { display: flex; flex-wrap: wrap; gap: var(--mv-space-2); margin-bottom: var(--mv-space-8); }
.faq-tab {
  min-height: 40px; padding-inline: var(--mv-space-4); border: var(--mv-border) solid var(--mv-color-border);
  border-radius: var(--mv-radius-full); background: var(--mv-color-surface);
  font-family: var(--mv-font-en); font-size: var(--mv-size-caption); font-weight: var(--mv-weight-medium);
  color: var(--mv-color-text-secondary); cursor: pointer;
  transition: background-color var(--mv-duration-fast) var(--mv-ease-standard), color var(--mv-duration-fast) var(--mv-ease-standard), border-color var(--mv-duration-fast) var(--mv-ease-standard);
}
.faq-tab:hover { border-color: var(--mv-color-border-strong); color: var(--mv-color-text-primary); }
.faq-tab[aria-selected="true"] { background: var(--mv-color-action-primary); border-color: transparent; color: var(--mv-white); }
.faq-item { border-bottom: var(--mv-border) solid var(--mv-color-border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mv-space-4);
  padding-block: var(--mv-space-5); font-size: var(--mv-size-body-sm); font-weight: var(--mv-weight-semibold);
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 20px; height: 20px; flex: none; color: var(--mv-color-text-tertiary); transition: transform var(--mv-duration-base) var(--mv-ease-standard); }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item > p { padding-bottom: var(--mv-space-5); max-width: 68ch; font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); white-space: pre-line; }

/* Team */
.team-grid { display: grid; gap: var(--mv-space-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.member { border: var(--mv-border) solid var(--mv-color-border); border-radius: var(--mv-radius-lg); overflow: hidden; background: var(--mv-color-surface); }
.member img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--mv-gray-100); }
.member-body { padding: var(--mv-space-5); }
.member h3 { font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); line-height: 1.3; }
.member .role { margin-top: var(--mv-space-1); font-size: var(--mv-size-caption); line-height: 1.5; color: var(--mv-gray-700); }
.member ul { margin-top: var(--mv-space-4); display: grid; gap: var(--mv-space-2); }
.member li { position: relative; padding-left: var(--mv-space-4); font-size: var(--mv-size-caption); color: var(--mv-color-text-secondary); line-height: 1.55; }
.member li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: var(--mv-radius-full); background: var(--mv-color-border-strong); }

/* Figures: the number large, the unit small, the label below. */
.figure-row { display: grid; gap: var(--mv-space-8); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.figure-row > li { padding-top: var(--mv-space-5); border-top: 2px solid var(--mv-color-action-primary); }
.figure-row .mv-figure { display: block; font-size: clamp(34px, 3.1vw, 54px); line-height: 1.05; color: var(--mv-color-action-primary); }
.figure-row li > span { display: block; margin-top: var(--mv-space-3); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); }
/* Next to the blue closing block, the home figures step back to the navy the footer uses. */
.figure-row--navy > li { border-top-color: var(--mv-navy); }
.figure-row--navy .mv-figure { color: var(--mv-navy); }

/* Closing band */
.closing { padding-block: clamp(72px, 7vw, 128px); background: var(--mv-color-action-primary); color: var(--mv-white); }
.closing h2 { max-width: 26ch; font-size: clamp(26px, 2.6vw, 46px); line-height: 1.25; font-weight: var(--mv-weight-bold); text-wrap: balance; }
.closing p { margin-top: var(--mv-space-4); max-width: 60ch; color: rgb(255 255 255 / 86%); }
.closing .button { margin-top: var(--mv-space-8); }

/* Footer */
.site-footer { padding-block: var(--mv-space-12); background: var(--mv-color-surface-inverse); color: var(--mv-gray-400); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--mv-space-6); flex-wrap: wrap; }
.brand-footer { --x: 24px; }
.brand-footer .brand-rule { background: var(--mv-gray-700); }
.brand-footer .brand-name { color: var(--mv-white); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--mv-space-5); margin-top: var(--mv-space-8); }
.footer-nav a { font-family: var(--mv-font-en); font-size: var(--mv-size-caption); color: var(--mv-gray-400); }
.footer-nav a:hover { color: var(--mv-white); }
.footer-info { display: flex; flex-wrap: wrap; gap: var(--mv-space-2) var(--mv-space-6); margin-top: var(--mv-space-6); font-size: var(--mv-size-caption); }
.footer-info > div { display: flex; gap: var(--mv-space-2); }
.footer-info dt { color: var(--mv-gray-600); }
.footer-info dd { color: var(--mv-gray-300); }
.footer-locations { margin-top: var(--mv-space-8); }
.footer-locations h2 { font-size: var(--mv-size-caption); color: var(--mv-gray-500); margin-bottom: var(--mv-space-3); }
.footer-locations dl { display: grid; gap: var(--mv-space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.footer-locations dt { font-size: var(--mv-size-caption); color: var(--mv-white); }
.footer-locations dd { font-size: var(--mv-size-caption); color: var(--mv-gray-400); }
.footer-bottom { margin-top: var(--mv-space-10); padding-top: var(--mv-space-6); border-top: var(--mv-border) solid var(--mv-gray-800); font-size: var(--mv-size-caption); color: var(--mv-gray-600); }

/* Use cases: the filter row and the case cards. */
.filters { display: flex; flex-wrap: wrap; gap: var(--mv-space-2); margin-bottom: var(--mv-space-8); }
.filter {
  min-height: 40px; padding-inline: var(--mv-space-4); border: var(--mv-border) solid var(--mv-color-border-inverse);
  border-radius: var(--mv-radius-full); background: transparent;
  font-size: var(--mv-size-caption); font-weight: var(--mv-weight-medium); color: var(--mv-gray-300); cursor: pointer;
  transition: background-color var(--mv-duration-fast) var(--mv-ease-standard), color var(--mv-duration-fast) var(--mv-ease-standard), border-color var(--mv-duration-fast) var(--mv-ease-standard);
}
.filter:hover { border-color: var(--mv-gray-500); color: var(--mv-white); }
.filter[aria-pressed="true"] { background: var(--mv-white); border-color: transparent; color: var(--mv-navy); }
.case-list { display: grid; gap: var(--mv-space-5); }
.case {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--mv-space-8);
  padding: var(--mv-space-5); border-radius: var(--mv-radius-xl); background: var(--mv-color-surface); color: var(--mv-color-text-primary);
}
.case:hover { box-shadow: var(--mv-elevation-2); }
.case-media { position: relative; overflow: hidden; border-radius: var(--mv-radius-lg); background: var(--mv-gray-100); aspect-ratio: 4 / 3; }
.case-media img, .case-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-body { display: flex; flex-direction: column; justify-content: center; gap: var(--mv-space-3); padding-block: var(--mv-space-4); }
/* The cards sit on the dark band but are light themselves, so they say their own colours. */
.case-body h3 { font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); color: var(--mv-color-text-primary); }
.case-body h3 a::after { content: ""; position: absolute; inset: 0; }
.case-body > p { font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); }
.case-metrics { display: flex; flex-wrap: wrap; gap: var(--mv-space-8); margin-top: var(--mv-space-2); }
.case-metrics .mv-figure { font-size: clamp(22px, 1.8vw, 30px); line-height: 1.1; color: var(--mv-color-action-primary); }
.case-metrics li > span { display: block; margin-top: var(--mv-space-1); font-size: var(--mv-size-caption); color: var(--mv-color-text-secondary); }
.case-empty { padding-block: var(--mv-space-12); text-align: center; color: var(--mv-gray-400); }

/* One use case in full. */
.detail-hero { padding-block: clamp(48px, 5vw, 88px) 0; }
.detail-hero h1 { max-width: 24ch; font-size: clamp(26px, 2.8vw, 48px); line-height: 1.22; font-weight: var(--mv-weight-bold); text-wrap: balance; }
.detail-hero p { margin-top: var(--mv-space-5); max-width: 70ch; color: var(--mv-color-text-secondary); }
.detail-cover { margin-top: clamp(32px, 3vw, 56px); overflow: hidden; border-radius: var(--mv-radius-xl); background: var(--mv-gray-100); }
.detail-cover img, .detail-cover video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); }
.detail-meta { display: grid; gap: var(--mv-space-6); align-content: start; }
.detail-meta dt { font-size: var(--mv-size-caption); color: var(--mv-color-text-tertiary); }
.detail-meta dd { margin-top: var(--mv-space-1); font-size: var(--mv-size-body-sm); font-weight: var(--mv-weight-semibold); }
.detail-body { display: grid; gap: var(--mv-space-10); }
.detail-body h2 { font-size: clamp(20px, 1.6vw, 28px); font-weight: var(--mv-weight-semibold); }
.detail-body p { margin-top: var(--mv-space-4); color: var(--mv-color-text-secondary); white-space: pre-line; }
/* Only the prose lists take a bullet; the figures above them are not a list of points. */
.detail-body section ul { margin-top: var(--mv-space-4); display: grid; gap: var(--mv-space-3); }
.detail-body section li { position: relative; padding-left: var(--mv-space-5); color: var(--mv-color-text-secondary); }
.detail-body section li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: var(--mv-radius-full); background: var(--mv-color-border-accent); }
.detail-gallery { display: grid; gap: var(--mv-space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.detail-gallery img, .detail-gallery video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mv-radius-lg); background: var(--mv-gray-100); }

/* Pricing */
/* Plans sit in one row so they can be read against each other. Three and a bit fit on a
   screen, the fourth fades out at the edge, and arrows above and below move the row along. */
.plans-rail { position: relative; }
.plans[data-rail] {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--mv-space-5) * 2.4) / 3.4);
  grid-template-rows: auto auto auto auto auto 1fr auto;
  column-gap: var(--mv-space-5); row-gap: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.plans[data-rail]::-webkit-scrollbar { width: 0; height: 0; }
/* The card at the edge thins out rather than being sliced through. */
.plans[data-rail][data-at=start] { -webkit-mask-image: var(--fade-right); mask-image: var(--fade-right); }
.plans[data-rail][data-at=middle] { -webkit-mask-image: var(--fade-both); mask-image: var(--fade-both); }
.plans[data-rail][data-at=end] { -webkit-mask-image: var(--fade-left); mask-image: var(--fade-left); }
.plans[data-rail] {
  --fade-right: linear-gradient(90deg, #000 calc(100% - 130px), transparent 100%);
  --fade-left: linear-gradient(90deg, transparent 0, #000 72px);
  --fade-both: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 130px), transparent 100%);
}
.plans[data-rail] > .plan { grid-row: span 7; scroll-snap-align: start; }
@supports (grid-template-rows: subgrid) {
  .plans[data-rail] > .plan { display: grid; grid-template-columns: 1fr; grid-template-rows: subgrid; align-items: start; }
}
.rail-nav { display: flex; gap: var(--mv-space-2); justify-content: flex-end; }
.rail-nav--top { margin-bottom: var(--mv-space-4); }
.rail-nav button {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: var(--mv-border) solid var(--mv-color-border-strong); border-radius: var(--mv-radius-full);
  background: var(--mv-color-surface); color: var(--mv-color-text-primary); cursor: pointer;
  transition: border-color var(--mv-duration-fast) var(--mv-ease-standard), color var(--mv-duration-fast) var(--mv-ease-standard);
}
.rail-nav button:hover:not(:disabled) { border-color: var(--mv-color-action-primary); color: var(--mv-color-action-primary); }
.rail-nav button:disabled { opacity: .35; cursor: default; }
.rail-nav .icon { width: 20px; height: 20px; }
.rail-nav[hidden] { display: none; }

/* A plan without the rail still lines up as a plain row of cards. */
.plans:not([data-rail]) { display: grid; gap: var(--mv-space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* What a plan leaves out is said plainly, in the same list, marked as left out. */
.plan li.is-out { color: var(--mv-color-text-tertiary); }
.plan li.is-out .icon { color: var(--mv-color-status-error); }
.plan ul.plan-notes {
  display: flex; flex-wrap: wrap; align-content: start; width: 100%; gap: var(--mv-space-2);
  margin-top: var(--mv-space-6); padding-top: var(--mv-space-5);
  border-top: var(--mv-border) solid var(--mv-color-border);
}
.plan-notes li {
  display: block; padding: 4px var(--mv-space-3); border-radius: var(--mv-radius-full);
  background: var(--mv-color-surface-sunken); font-size: var(--mv-size-caption); color: var(--mv-color-text-tertiary);
}
/* The one thing a reader must not miss: these are estimates, not the final number. */
.plan-caveat {
  display: flex; align-items: flex-start; gap: var(--mv-space-3);
  margin-top: var(--mv-space-8); padding: var(--mv-space-5) var(--mv-space-6);
  border: var(--mv-border-strong) solid var(--mv-color-border-accent); border-radius: var(--mv-radius-lg);
  background: var(--mv-color-surface-accent); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-primary);
}
.plan-caveat .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--mv-color-action-primary); }
.plan-caveat b { font-weight: var(--mv-weight-semibold); }
.plan { display: flex; flex-direction: column; padding: var(--mv-space-8); border: var(--mv-border) solid var(--mv-color-border); border-radius: var(--mv-radius-xl); background: var(--mv-color-surface); }
.plan h3 { margin-top: var(--mv-space-3); font-size: var(--mv-size-h2); font-weight: var(--mv-weight-bold); line-height: 1.2; }
.plan > p { margin-top: var(--mv-space-4); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); line-height: 1.6; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mv-space-2); margin-top: var(--mv-space-6); }
.plan-price .mv-figure { line-height: 1.15; }
.plan-price .mv-figure { font-size: clamp(24px, 2vw, 34px); line-height: 1.1; }
.plan-price em { font-style: normal; font-size: var(--mv-size-caption); color: var(--mv-color-text-tertiary); white-space: nowrap; }
.plan-note { margin-top: var(--mv-space-2); font-size: var(--mv-size-caption); color: var(--mv-color-text-tertiary); }
.plan .button { margin-top: var(--mv-space-6); justify-self: start; }
.plan h4 { margin-top: var(--mv-space-8); margin-bottom: var(--mv-space-5); font-size: var(--mv-size-caption); color: var(--mv-color-text-tertiary); }
.plan ul { margin-top: 0; display: grid; gap: var(--mv-space-3); align-content: start; }
.plan li { display: flex; gap: var(--mv-space-3); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); }
.plan li .icon { width: 20px; height: 20px; flex: none; color: var(--mv-color-action-primary); }
.plan li.is-extra { color: var(--mv-color-text-tertiary); }
.plan li.is-extra .icon { color: var(--mv-gray-400); }

/* Contact */
.form-grid { display: grid; gap: var(--mv-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .is-wide { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mv-space-4); margin-top: var(--mv-space-8); }
.form-status { font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); }
.form-status[data-state="error"] { color: var(--mv-color-status-error); }
.form-status[data-state="done"] { color: var(--mv-color-status-success); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Data voucher: the route animation, then one card per industry. */
/* The route: four rings on one line, each filling in after the one before it. */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mv-space-6); }
.flow-step { position: relative; }
/* One line runs the whole way: each piece reaches from its own ring to the next, so the
   pieces meet at the ring centres and read as a single rule with the rings sitting on it. */
.flow-step:not(:last-child)::before {
  content: ""; position: absolute; top: 34px; left: 34px; right: calc(-1 * (var(--mv-space-6) + 34px));
  height: 2px; background: var(--mv-color-border);
  transform-origin: left center;
}
.flow-ring {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 68px; height: 68px;
  border: 2px solid var(--mv-color-border-strong); border-radius: var(--mv-radius-full);
  background: var(--mv-color-surface);
  font-family: var(--mv-font-en); font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold);
  color: var(--mv-color-text-tertiary);
  transition: border-color var(--mv-duration-slow) var(--mv-ease-standard), color var(--mv-duration-slow) var(--mv-ease-standard);
}
.flow-step h3 { margin-top: var(--mv-space-5); font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); }
/* A step that explains itself in a sentence rather than in tags. */
.flow-step > p:not(.flow-ring) { margin-top: var(--mv-space-3); font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); line-height: 1.6; }
.flow-step ul { margin-top: var(--mv-space-4); display: flex; flex-wrap: wrap; gap: var(--mv-space-2); }
.flow-step li {
  padding: 6px var(--mv-space-3); border: var(--mv-border) solid var(--mv-color-border);
  border-radius: var(--mv-radius-full); background: var(--mv-color-surface);
  font-size: var(--mv-size-caption); color: var(--mv-color-text-secondary);
}
/* The route draws itself: a step settles in, its line runs on to the next ring, and only
   then does the following step arrive. They start hidden only once the script can show them. */
.flow[data-flow="ready"] .flow-step { opacity: 0; transform: translateY(16px); }
.flow[data-flow="ready"] .flow-ring { transform: scale(0.82); }
.flow[data-flow="ready"] .flow-step::before { transform: scaleX(0); }

.flow[data-flow="shown"] .flow-step {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--mv-ease-enter), transform 520ms var(--mv-ease-enter);
  transition-delay: calc(var(--step) * 520ms);
}
.flow[data-flow="shown"] .flow-ring {
  transform: none;
  border-color: var(--mv-color-action-primary); color: var(--mv-color-action-primary);
  transition: transform 460ms var(--mv-ease-standard), border-color 460ms var(--mv-ease-standard), color 460ms var(--mv-ease-standard);
  transition-delay: calc(var(--step) * 520ms + 60ms);
}
.flow[data-flow="shown"] .flow-step::before {
  transform: none;
  transition: transform 420ms var(--mv-ease-standard);
  transition-delay: calc(var(--step) * 520ms + 300ms);
}
@media (prefers-reduced-motion: reduce) {
  .flow-step { opacity: 1; transform: none; }
}
.voucher-list { display: grid; gap: var(--mv-space-5); }
/* The field name sits on its own line, so the picture and the work it illustrates start together
   and end together: the row decides the height and both cells fill it. */
.voucher-list > li {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  column-gap: var(--mv-space-8); row-gap: var(--mv-space-5);
  padding: var(--mv-space-6); border: var(--mv-border) solid var(--mv-color-border);
  border-radius: var(--mv-radius-lg); background: var(--mv-color-surface);
}
.voucher-list > li > h3 { grid-column: 1 / -1; font-size: var(--mv-size-title); font-weight: var(--mv-weight-semibold); }
/* Without a picture to show, the work takes the whole width rather than leaving a gap. */
.voucher-list > li:has(.voucher-media[hidden]) { grid-template-columns: minmax(0, 1fr); }
.voucher-media {
  position: relative; overflow: hidden; height: 100%; min-height: 200px;
  border-radius: var(--mv-radius-md); background: var(--mv-gray-100);
}
.voucher-media img, .voucher-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voucher-list dl { display: grid; gap: var(--mv-space-4); }
.voucher-list dt {
  margin-bottom: var(--mv-space-1); font-size: var(--mv-size-caption);
  font-weight: var(--mv-weight-semibold); color: var(--mv-color-action-primary);
}
.voucher-list dd { font-size: var(--mv-size-body-sm); color: var(--mv-color-text-secondary); line-height: 1.6; }

/* Short notice pages keep the same left edge as every other page. */
.notice-page { display: grid; align-content: center; min-height: 60vh; }
.notice-page h1 { font-size: clamp(26px, 2.6vw, 42px); font-weight: var(--mv-weight-bold); }
.notice-page p { margin-top: var(--mv-space-4); color: var(--mv-color-text-secondary); }
.notice-page .button { margin-top: var(--mv-space-8); }

@media (max-width: 1024px) {
  /* The row still compares plans side by side, but a narrow screen only has room for two and a bit. */
  .plans[data-rail] { grid-auto-columns: calc((100% - var(--mv-space-5) * 1.4) / 2.4); }
  .task-grid { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .voucher-list > li { grid-template-columns: 1fr; gap: var(--mv-space-5); }
  .platforms { grid-template-columns: repeat(2, 1fr); }
  .step-last { grid-template-columns: 1fr; align-items: start; }
  .flow { grid-template-columns: repeat(2, 1fr); row-gap: var(--mv-space-10); }
  .flow-step:nth-child(2)::before { display: none; }
}

@media (max-width: 680px) {
  /* On a phone one plan fills the screen and the next one peeks in from the side. The cards keep
     sharing rows, so the row ends where the card ends and no blank band opens under it. */
  .plans[data-rail] {
    grid-auto-columns: calc(100% - var(--mv-space-10));
    --fade-right: linear-gradient(90deg, #000 calc(100% - 36px), transparent 100%);
    --fade-left: linear-gradient(90deg, transparent 0, #000 24px);
    --fade-both: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 36px), transparent 100%);
  }
  .plan { padding: var(--mv-space-6); }
  .flow { grid-template-columns: 1fr; }
  .platforms { grid-template-columns: 1fr; }
  .flow-step::before { display: none; }
}

@media (max-width: 760px) {
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: var(--mv-border) solid var(--mv-color-border); border-radius: var(--mv-radius-md);
    background: var(--mv-color-surface); cursor: pointer;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 18px; height: 2px; background: var(--mv-color-text-primary); }
  .menu-toggle span { position: relative; }
  .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
  .menu-toggle span::before { top: -6px; }
  .menu-toggle span::after { top: 6px; }
  #main-nav {
    position: absolute; inset: var(--mv-header-height) 0 auto; display: none; flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--mv-space-4) var(--mv-margin) var(--mv-space-6);
    background: var(--mv-color-surface); border-bottom: var(--mv-border) solid var(--mv-color-border);
  }
  #main-nav[data-open="true"] { display: flex; }
  /* Behind the open menu the page is dimmed, so the panel reads as a layer over it. */
  body:has(#main-nav[data-open="true"])::after {
    content: ""; position: fixed; inset: 0; z-index: calc(var(--mv-z-header) - 1);
    background: rgb(5 15 45 / 32%);
  }
  #main-nav > a:not(.button) { height: 48px; }
  #main-nav > a:not(.button)[aria-current="page"]::after { display: none; }
  #main-nav .button { margin-top: var(--mv-space-4); }
  .hero-actions .button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
}

/* The intro keeps the line break the admin typed. */
[data-contact-intro] { white-space: pre-line; }