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

html { scroll-behavior: smooth; }

body {
  background: var(--rmme-bg);
  color: var(--rmme-text);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--rmme-red); color: var(--rmme-text); }

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

.skip-link {
  position: absolute; left: -999px; top: var(--space-2);
  z-index: 100; padding: var(--space-1) var(--space-2);
  background: var(--rmme-red); color: var(--rmme-text);
  font-family: var(--font-tech); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-tech);
  text-decoration: none; font-size: var(--fs-caption);
}
.skip-link:focus { left: var(--space-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.headline {
  font-family: var(--font-headline);
  font-weight: var(--fw-headline);
  line-height: var(--lh-headline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-headline);
  color: var(--rmme-text);
  text-wrap: balance;
}
.headline--display { font-size: var(--fs-display); letter-spacing: var(--tracking-display); }
.headline--h1      { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); }
.headline--h2      { font-size: var(--fs-h2); }

.headline--steel {
  color: var(--headline-fill);
  background-image: url('../assets/brand/headline-steel.png');
  background-size: cover;
  background-position: 50% 40%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dot { color: var(--dot-accent); -webkit-text-fill-color: var(--dot-accent); }

.tech-label {
  font-family: var(--font-tech);
  font-weight: var(--fw-tech);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tech);
  color: var(--rmme-metal-light);
}

.lead { font-size: var(--fs-body-l); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; gap: 0.75em;
  min-height: var(--btn-height);
  padding: 0 var(--btn-padding-x);
  background: var(--btn-bg);
  color: var(--btn-label);
  border: 0; border-radius: var(--btn-radius);
  font-family: var(--font-headline);
  font-weight: 800; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-snap) var(--ease-snap),
              transform var(--dur-snap) var(--ease-snap);
}
.btn::after { content: '→' / ''; font-weight: 900; transition: transform var(--dur-snap) var(--ease-snap); }
.btn:hover, .btn:focus-visible { background: var(--btn-bg-hover); }
.btn:hover::after { transform: translateX(0.25em); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--rmme-line);
  color: var(--rmme-text);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--rmme-metal-dark);
  box-shadow: inset 0 0 0 1px var(--rmme-metal-light);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-base) var(--ease-base),
              transform var(--dur-base) var(--ease-base);
}
.cut-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-snap) var(--ease-snap),
              transform var(--dur-snap) var(--ease-snap);
}
.reveal.is-in, .cut-in.is-in { opacity: 1; transform: none; }

[data-engine-asset] { position: relative; overflow: hidden; }
.engine-badge {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  z-index: 5;
  padding: 0.3em 0.7em;
  background: var(--rmme-scrim);
  border: 1px solid var(--rmme-line);
  border-radius: 3px;
  font-family: var(--font-tech); font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rmme-text);
  backdrop-filter: blur(4px);
}

.draft-badge {
  position: fixed; left: var(--space-2); bottom: var(--space-2);
  z-index: 95;
    pointer-events: none;
  padding: 0.35em 0.8em;
  background: var(--rmme-metal-dark);
  border: 1px solid var(--rmme-line);
  border-radius: 3px;
  font-family: var(--font-tech); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rmme-metal-light);
}

.container      { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }

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