/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: none; }
a { text-decoration: none; color: inherit; }
p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }

/* ===== Fonts =====
   Self-hosted with the real typefaces from the Figma design: Velour Raw
   (display/body serif) and Helvetica Now Display (nav + case-study titles).
   Only Regular weights were supplied, so heavier weights (e.g. the Submit
   button) fall back to the browser's synthetic bold. */
@font-face {
  font-family: 'Velour Raw';
  src: url('../fonts/VelourRaw-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Velour Raw', Georgia, serif;
  --font-sans: 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --color-black: #000000;
  --color-text: #111111;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: #ffffff;
  color: var(--color-black);
  overflow-x: hidden;
}

/* ===== Fixed-canvas "stage" =====
   The Figma file only defines a desktop (1512px) layout, so each page is
   built to match those exact coordinates, then scaled uniformly to fit
   whatever viewport it's viewed in (see js/scale.js). This keeps every
   page pixel-faithful to the design at any window size. */
.stage {
  position: relative;
  width: 1512px;
  transform-origin: top left;
  background: #ffffff;
}

.abs { position: absolute; }

/* ===== Shared nav ===== */
.site-nav {
  position: absolute;
  top: 50px;
  left: 1099px;
  display: flex;
  align-items: center;
  gap: 42px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.16px;
  line-height: 23px;
  white-space: nowrap;
}

.site-nav a {
  color: var(--color-black);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  opacity: 1;
}