/* ============================================================
   Voldarian Metals. Landing page and contact page.

   Layout is a 1512px artboard scaled by --u on desktop (1100px and
   up) and reflowed fluidly below that, so a measurement written as
   calc(var(--u) * 96) is 96px on the artboard and holds its
   proportion at every width.

   One sans superfamily: Saira Condensed sets every piece of display type
   and Saira sets the running text, so the page reads as one voice. IBM Plex
   Mono carries labels, codes and figures.
   Text is #fff or #000. There are no greys in type anywhere on this
   site; tone comes from the footage, never from the words.
   ============================================================ */

:root {
  --u: calc(100vw / 1512);
  --white: #fff;
  --black: #000;
  --font-display: "Saira Condensed", "Arial Narrow", Helvetica, sans-serif;
  --font-body: "Saira", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Geist Mono", "Courier New", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body { margin: 0; padding: 0; background: var(--black); }
body {
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video, svg { display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--white); color: var(--black); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.vm-root {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  overflow-x: clip;
}
.vm-root > main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* Each word of a scrambling paragraph is wrapped once. inline-block would
   break justification and wrapping, so they stay inline and the glyph
   substitution keeps the same character count. */
.vm-w { white-space: pre-wrap; }

/* Screen reader only */
.vm-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.vm-skip:focus-visible {
  position: fixed;
  left: 16px; top: 16px;
  z-index: 100;
  width: auto; height: auto;
  clip: auto;
  padding: 12px 18px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.vm-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: calc(var(--u) * 86);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 16);
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.vm-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  color: var(--white);
}
.vm-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--u) * 22);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vm-mark { width: calc(var(--u) * 38); height: calc(var(--u) * 38); flex: none; }
.vm-header__right {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 40);
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 10), 9px);
  line-height: 1.24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vm-header__link { position: relative; display: inline-block; }
.vm-header__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.vm-header__link:hover::after,
.vm-header__link:focus-visible::after { transform: scaleX(1); }

/* ---------- Hero ---------- */
.vm-hero { position: relative; height: var(--hero-h, calc(var(--u) * 1105)); }

/* Giant wordmark with the footage knocked out through the letters */
.vm-ghost {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 132);
  width: 100%;
  height: calc(var(--u) * 190);
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
}
.vm-ghost__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) contrast(1.15);
}
.vm-ghost__mask {
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  mix-blend-mode: multiply;
}
.vm-ghost__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--u) * 170);
  line-height: 0.82;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vm-headline {
  position: absolute;
  left: calc(var(--u) * 12);
  top: calc(var(--u) * 281);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--u) * 96);
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.vm-line { display: block; overflow: hidden; }
.vm-line > span { display: block; }

.vm-meta {
  position: absolute;
  top: var(--meta-top, calc(var(--u) * 372));
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--white);
}
.vm-meta--1 { left: calc(var(--u) * 16); width: calc(var(--u) * 230); }
.vm-meta--2 { left: calc(var(--u) * 386); width: calc(var(--u) * 260); }
.vm-meta--3 { right: calc(var(--u) * 18); text-align: right; white-space: nowrap; }

.vm-stage {
  position: absolute;
  left: calc(var(--u) * 16);
  top: var(--stage-top, calc(var(--u) * 450));
  width: calc(var(--u) * 1480);
  height: calc(var(--u) * 635);
}
.vm-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.9;
  /* bottom-right notch */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--u) * 39),
    calc(100% - var(--u) * 103) calc(100% - var(--u) * 39),
    calc(100% - var(--u) * 142) 100%,
    0 100%
  );
}
.vm-media__video {
  position: absolute;
  left: 0;
  top: -5%;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: contrast(1.06);
  will-change: transform;
}
.vm-ticks {
  position: absolute;
  left: calc(var(--u) * 21);
  bottom: calc(var(--u) * 40);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 14);
  line-height: 1.2;
  color: var(--white);
}
.vm-ticks i {
  display: block;
  width: calc(var(--u) * 14);
  height: 1px;
  margin: 0 0 calc(var(--u) * 11);
  background: var(--white);
}
.vm-slashes {
  position: absolute;
  right: calc(var(--u) * -15);
  top: calc(var(--u) * 273);
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 90);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 14);
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
}

/* ============================================================
   Section head. The rule, the corner glyph, the centred label and
   the bracket code repeat on every band, which is what holds the
   page together over its length.
   ============================================================ */
.vm-sec { position: relative; padding: 0 calc(var(--u) * 16); }
.vm-sechead {
  position: relative;
  height: calc(var(--u) * 92);
  border-top: 1px solid var(--white);
}
.vm-sechead__icon {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 14);
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  color: currentColor;
}
.vm-sechead__label,
.vm-sechead__code {
  position: absolute;
  top: calc(var(--u) * 22);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 15);
  line-height: 1.24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vm-sechead__label { left: 50%; transform: translateX(-50%); }
.vm-sechead__code { right: 0; text-align: right; }

/* ---------- Thesis ---------- */
.vm-thesis { padding-bottom: calc(var(--u) * 150); }
.vm-thesis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr);
  gap: calc(var(--u) * 96);
  padding-top: calc(var(--u) * 58);
}
.vm-thesis__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 52);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: calc(var(--u) * 470);
}
.vm-prose {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: calc(var(--u) * 21);
  line-height: 1.52;
  letter-spacing: -0.004em;
  text-wrap: pretty;
  max-width: calc(var(--u) * 790);
}
.vm-prose p + p { margin-top: calc(var(--u) * 26); }
.vm-prose__src {
  margin-top: calc(var(--u) * 30);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 11);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Figures. The numbers that scramble in on scroll ---------- */
.vm-figures { padding-bottom: calc(var(--u) * 140); }
.vm-figures__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid var(--white);
  margin-top: calc(var(--u) * 48);
}
.vm-fig {
  border-right: 1px solid var(--white);
  padding: calc(var(--u) * 30) calc(var(--u) * 26) calc(var(--u) * 32);
  min-height: calc(var(--u) * 290);
  display: flex;
  flex-direction: column;
}
.vm-fig__n {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: calc(var(--u) * 74);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vm-fig__n sup {
  font-size: calc(var(--u) * 30);
  line-height: 1;
  vertical-align: super;
  letter-spacing: 0;
}
.vm-fig__k {
  margin-top: calc(var(--u) * 20);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 19);
  line-height: 1.24;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}
.vm-fig__src {
  margin-top: auto;
  padding-top: calc(var(--u) * 22);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 10.5);
  line-height: 1.46;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* ---------- Chain. 01 / 02 / 03 ---------- */
.vm-chain { padding-bottom: calc(var(--u) * 40); }
.vm-step {
  display: grid;
  grid-template-columns: calc(var(--u) * 92) minmax(0, 1fr) minmax(0, 1.55fr);
  gap: calc(var(--u) * 56);
  align-items: center;
  padding: calc(var(--u) * 88) 0 calc(var(--u) * 96);
  border-top: 1px solid var(--white);
}
.vm-step__body { grid-column: 2; grid-row: 1; }
.vm-step .vm-step__media { grid-column: 3; grid-row: 1; }

/* Alternating sides, so the eye crosses the page rather than running down
   one gutter for the whole section. */
.vm-step--flip { grid-template-columns: calc(var(--u) * 92) minmax(0, 1.55fr) minmax(0, 1fr); }
.vm-step--flip .vm-step__media { grid-column: 2; grid-row: 1; }
.vm-step--flip .vm-step__body { grid-column: 3; grid-row: 1; }
.vm-chain .vm-step:first-of-type { border-top: 0; }
.vm-step__n {
  align-self: start;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 15);
  letter-spacing: 0.08em;
  line-height: 1.2;
  padding-top: calc(var(--u) * 8);
}
.vm-step__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 72);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.vm-step__lede {
  margin-top: calc(var(--u) * 26);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: calc(var(--u) * 19);
  line-height: 1.46;
  letter-spacing: -0.008em;
  max-width: calc(var(--u) * 520);
  text-wrap: pretty;
}
.vm-step__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  opacity: 0.9;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--u) * 26),
    calc(100% - var(--u) * 68) calc(100% - var(--u) * 26),
    calc(100% - var(--u) * 94) 100%,
    0 100%
  );
}
.vm-step__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- Spec table ---------- */
.vm-spec { padding-bottom: calc(var(--u) * 140); }
.vm-table {
  width: 100%;
  margin-top: calc(var(--u) * 44);
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 13);
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: left;
}
.vm-table th,
.vm-table td {
  border-top: 1px solid var(--white);
  padding: calc(var(--u) * 17) calc(var(--u) * 22) calc(var(--u) * 17) 0;
  vertical-align: top;
}
.vm-table th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(var(--u) * 11);
  white-space: nowrap;
}
.vm-table td:first-child {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  width: calc(var(--u) * 300);
}
.vm-table td:last-child { font-variant-numeric: tabular-nums; }

/* ---------- Interstitial film band ---------- */
.vm-band {
  position: relative;
  height: calc(var(--u) * 520);
  overflow: hidden;
  margin-bottom: calc(var(--u) * 150);
}
.vm-band video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
.vm-band__code {
  position: absolute;
  right: calc(var(--u) * 16);
  top: calc(var(--u) * 28);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

/* ---------- Call to action ---------- */
.vm-cta {
  padding: calc(var(--u) * 54) calc(var(--u) * 16) calc(var(--u) * 130);
  border-top: 1px solid var(--white);
}
.vm-cta__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 48);
  flex-wrap: wrap;
}
.vm-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--u) * 78);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.vm-cta__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 15);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--white);
  padding: calc(var(--u) * 18) calc(var(--u) * 30);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.vm-cta__link:hover,
.vm-cta__link:focus-visible { background: var(--white); color: var(--black); }

/* ---------- White band ---------- */
.vm-body {
  position: relative;
  background: var(--white);
  color: var(--black);
  min-height: calc(var(--u) * 433);
  padding: calc(var(--u) * 150) calc(var(--u) * 16) calc(var(--u) * 83);
}
.vm-body__rule {
  position: absolute;
  left: calc(var(--u) * 16);
  right: calc(var(--u) * 16);
  top: calc(var(--u) * 40);
  border-top: 1px solid var(--black);
}
.vm-body__icon {
  position: absolute;
  left: calc(var(--u) * 16);
  top: calc(var(--u) * 48);
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  color: var(--black);
}
.vm-body__label,
.vm-body__code {
  position: absolute;
  top: calc(var(--u) * 58);
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 16);
  line-height: 1.24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}
.vm-body__label { left: 50%; transform: translateX(-50%); }
.vm-body__code { right: calc(var(--u) * 16); text-align: right; }
.vm-body__text {
  max-width: calc(var(--u) * 1140);
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 28.8);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--black);
  text-wrap: pretty;
}

/* ---------- Footer ---------- */
.vm-footer {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: calc(var(--u) * 40);
  padding: calc(var(--u) * 40) calc(var(--u) * 16) calc(var(--u) * 36);
  background: var(--black);
  color: var(--white);
  border-top: 1px solid var(--white);
  font-family: var(--font-mono);
  font-size: max(calc(var(--u) * 11), 10px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vm-footer__brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(var(--u) * 14);
  letter-spacing: 0.18em;
  margin-bottom: calc(var(--u) * 10);
}
.vm-flag {
  width: calc(var(--u) * 42);
  height: auto;
  margin-top: calc(var(--u) * 18);
}
.vm-footer__fine {
  max-width: calc(var(--u) * 640);
  text-transform: none;
  letter-spacing: 0;
}
.vm-footer__right { text-align: right; }
.vm-footer__right a { position: relative; }
.vm-footer__right a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.vm-footer__right a:hover::after,
.vm-footer__right a:focus-visible::after { transform: scaleX(1); }

/* ---------- Contact page ---------- */
.vm-contact {
  position: relative;
  padding: calc(var(--u) * 120) calc(var(--u) * 16) calc(var(--u) * 140);
  min-height: calc(100svh - var(--u) * 86);
}
.vm-contact__label {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  line-height: 1.24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: calc(var(--u) * 48);
}
.vm-headline--static { position: static; white-space: normal; }
.vm-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: calc(var(--u) * 96);
  margin-top: calc(var(--u) * 96);
}
.vm-contact__notes {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: calc(var(--u) * 440);
}
.vm-contact__notes p + p { margin-top: calc(var(--u) * 22); }
.vm-contact__notes a { text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--white); }

.vm-form { display: grid; gap: calc(var(--u) * 36); max-width: calc(var(--u) * 760); }
.vm-field { display: grid; gap: 10px; }
.vm-field label {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vm-field input,
.vm-field select,
.vm-field textarea {
  width: 100%;
  background: var(--black);
  color: var(--white);
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: max(calc(var(--u) * 20), 16px);
  line-height: 1.3;
  padding: 10px 0 12px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.vm-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 18px;
  padding-right: 28px;
}
.vm-field select option { background: var(--black); color: var(--white); }
.vm-field textarea { min-height: 150px; resize: vertical; }
.vm-field input:focus,
.vm-field select:focus,
.vm-field textarea:focus { border-bottom-width: 2px; outline: none; }
.vm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vm-form__row { display: flex; align-items: center; gap: calc(var(--u) * 28); flex-wrap: wrap; }
.vm-submit {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: 0;
  padding: 16px 28px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.vm-submit:hover,
.vm-submit:focus-visible { background: var(--white); color: var(--black); }
.vm-submit[disabled] { cursor: wait; }
.vm-status {
  font-family: var(--font-mono);
  font-size: calc(var(--u) * 12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ============================================================
   Reflow below 1100px
   ============================================================ */
@media (max-width: 1099px) {
  .vm-header { height: 64px; padding: 0 16px; }
  .vm-wordmark { font-size: 14px; letter-spacing: 0.16em; }
  .vm-mark { width: 28px; height: 28px; }
  .vm-brand { gap: 10px; }
  .vm-header__right { gap: 24px; font-size: 9px; }

  .vm-hero { height: auto; padding: clamp(72px, 16vw, 160px) 16px 20px; }
  .vm-ghost { top: 0; height: 12vw; }
  .vm-ghost__text { font-size: 11.6vw; }
  .vm-headline {
    position: static;
    font-size: clamp(40px, 8.6vw, 88px);
    letter-spacing: -0.05em;
    white-space: normal;
  }
  .vm-meta { position: static; width: auto; font-size: 11px; }
  .vm-hero__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: clamp(28px, 6vw, 64px);
  }
  .vm-meta--1, .vm-meta--2 { flex: 0 1 200px; }
  .vm-meta--3 { margin-left: auto; text-align: right; }

  .vm-stage {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    height: auto;
    margin-top: clamp(28px, 6vw, 72px);
  }
  .vm-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 1480 / 760;
    max-height: 72vh;
    clip-path: polygon(
      0 0, 100% 0,
      100% calc(100% - 24px),
      calc(100% - 64px) calc(100% - 24px),
      calc(100% - 88px) 100%,
      0 100%
    );
  }
  .vm-ticks { left: 13px; bottom: 12px; font-size: 11px; }
  .vm-ticks i { width: 10px; margin-bottom: 8px; }
  .vm-slashes { display: none; }

  .vm-sec { padding: 0 16px; }
  .vm-sechead { height: 64px; }
  .vm-sechead__icon { top: 12px; width: 24px; height: 24px; }
  .vm-sechead__label, .vm-sechead__code { top: 18px; font-size: 10px; }

  .vm-thesis, .vm-figures, .vm-spec {
    padding-bottom: clamp(64px, 14vw, 140px);
  }
  .vm-thesis__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 32px;
  }
  .vm-thesis__title { font-size: clamp(27px, 5.6vw, 44px); max-width: 100%; }
  .vm-prose { font-size: clamp(17px, 2.9vw, 23px); max-width: 100%; }
  .vm-prose p + p { margin-top: 18px; }

  .vm-figures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
  .vm-fig { min-height: 0; padding: 20px 16px 24px; }
  .vm-fig__n { font-size: clamp(38px, 8.4vw, 64px); }
  .vm-fig__n sup { font-size: 0.42em; }
  .vm-fig__k { font-size: 15px; margin-top: 12px; }
  .vm-fig__src { font-size: 9px; padding-top: 16px; }

  .vm-step,
  .vm-step--flip {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 34px 0 44px;
  }
  .vm-step .vm-step__body,
  .vm-step .vm-step__media,
  .vm-step--flip .vm-step__body,
  .vm-step--flip .vm-step__media { grid-column: 1; grid-row: auto; }
  .vm-step__n { font-size: 11px; padding-top: 0; }
  .vm-step__title { font-size: clamp(34px, 8vw, 64px); }
  .vm-step__lede { font-size: 15.5px; line-height: 1.5; margin-top: 14px; max-width: 100%; }
  .vm-step__media { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 48px) calc(100% - 18px), calc(100% - 66px) 100%, 0 100%); }
  .vm-table { font-size: 11px; margin-top: 24px; display: block; overflow-x: auto; white-space: nowrap; }
  .vm-table th { font-size: 9.5px; }
  .vm-table td:first-child { width: auto; }
  .vm-table th, .vm-table td { padding: 12px 18px 12px 0; }

  .vm-band { height: clamp(220px, 46vw, 420px); margin-bottom: clamp(64px, 14vw, 140px); }
  .vm-band__code { font-size: 10px; top: 16px; right: 16px; }

  .vm-cta { padding: 34px 16px clamp(56px, 12vw, 110px); }
  .vm-cta__row { align-items: flex-start; flex-direction: column; gap: 26px; }
  .vm-cta__title { font-size: clamp(34px, 8vw, 70px); }
  .vm-cta__link { font-size: 11px; padding: 14px 22px; }

  .vm-body { min-height: 0; padding: clamp(84px, 18vw, 150px) 16px clamp(40px, 9vw, 80px); }
  .vm-body__rule { left: 16px; right: 16px; top: 24px; }
  .vm-body__icon { left: 16px; top: 34px; width: 26px; height: 26px; }
  .vm-body__label, .vm-body__code { font-size: 10px; top: 41px; }
  .vm-body__code { right: 16px; }
  .vm-body__text {
    max-width: min(100%, 820px);
    font-size: clamp(17px, 2.8vw, 24px);
    letter-spacing: -0.03em;
  }

  .vm-footer {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 16px 28px;
    font-size: 10px;
  }
  .vm-footer__brand { font-size: 12px; }
  .vm-flag {
  width: calc(var(--u) * 42);
  height: auto;
  margin-top: calc(var(--u) * 18);
}
.vm-footer__fine { max-width: 560px; }
  .vm-footer__right { text-align: left; }

  .vm-contact { padding: clamp(72px, 14vw, 120px) 16px clamp(72px, 14vw, 120px); min-height: 0; }
  .vm-contact__label { font-size: 11px; margin-bottom: 28px; }
  .vm-contact__grid { grid-template-columns: 1fr; gap: 56px; margin-top: 56px; }
  .vm-contact__notes { font-size: 11px; max-width: 560px; }
  .vm-contact__notes p + p { margin-top: 16px; }
  .vm-form { gap: 28px; max-width: 100%; }
  .vm-field label { font-size: 10px; }
  .vm-field input, .vm-field select, .vm-field textarea { font-size: 16px; }
  .vm-submit { font-size: 11px; padding: 14px 22px; }
  .vm-status { font-size: 10px; }
}

@media (max-width: 719px) {
  .vm-header__tag { display: none; }
  .vm-body__label { left: 50px; transform: none; }
  .vm-sechead__label { left: 42px; transform: none; }
  .vm-figures__grid { grid-template-columns: 1fr; border-left: 0; }
  .vm-fig { border-right: 0; border-top: 1px solid var(--white); padding-left: 0; padding-right: 0; }
}

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