/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }
:root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--c-black); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: none; }
/* Sketch composites shadows and glows in sRGB; SVG filters default to linearRGB */
svg { color-interpolation-filters: sRGB; }
img { height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input, select, textarea { background: none; border: 0; margin: 0; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-arc); outline-offset: 3px; }
::selection { background: rgb(90 155 255 / .35); color: #fff; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 1000; padding: 10px 16px; border-radius: 20px;
  background: var(--light-fill); color: var(--c-black); font: 500 13px/16px var(--f-text);
  transform: translateY(-200%); transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* Icons from the sprite */
.i { width: 24px; height: 24px; flex: none; fill: currentColor; }
.i--20 { width: 20px; height: 20px; }
.i--16 { width: 16px; height: 16px; }
.i--14 { width: 14px; height: 14px; }

/* Type styles (Sketch Text Styles). Sketch splits leading like CSS does, so line-height maps 1:1. */
.t-d1 { --fs: 136px; --lh: 124px; font: 400 var(--fs)/var(--lh) var(--f-display); letter-spacing: -6px; }
.t-d2 { --fs: 96px; --lh: 92px; font: 400 var(--fs)/var(--lh) var(--f-display); letter-spacing: -3.8px; }
.t-d3 { --fs: 72px; --lh: 72px; font: 400 var(--fs)/var(--lh) var(--f-display); letter-spacing: -2.6px; }
.t-d4 { --fs: 64px; --lh: 72px; font: 400 var(--fs)/var(--lh) var(--f-display); letter-spacing: -2px; }
.t-h1 { --fs: 48px; --lh: 52px; font: 400 var(--fs)/var(--lh) var(--f-display); letter-spacing: -1.4px; }
.t-h2 { --fs: 32px; --lh: 38px; font: 400 var(--fs)/var(--lh) var(--f-display); letter-spacing: -0.8px; }
.t-h3 { --fs: 22px; --lh: 28px; font: 500 var(--fs)/var(--lh) var(--f-display); letter-spacing: -0.3px; }
.t-b1 { --fs: 20px; --lh: 30px; font: 400 var(--fs)/var(--lh) var(--f-text); letter-spacing: -0.2px; }
.t-b2 { --fs: 16px; --lh: 25px; font: 400 var(--fs)/var(--lh) var(--f-text); letter-spacing: -0.1px; }
.t-b3 { --fs: 14px; --lh: 21px; font: 400 var(--fs)/var(--lh) var(--f-text); letter-spacing: 0; }
.t-label { --fs: 15px; --lh: 20px; font: 500 var(--fs)/var(--lh) var(--f-text); letter-spacing: -0.1px; }
.t-label-s { --fs: 13px; --lh: 16px; font: 500 var(--fs)/var(--lh) var(--f-text); letter-spacing: 0; }
.t-m1 { --ad: var(--ad-mono); --fs: 13px; --lh: 18px; font: 400 var(--fs)/var(--lh) var(--f-mono); letter-spacing: 1.3px; text-transform: uppercase; }
.t-m2 { --ad: var(--ad-mono); --fs: 11px; --lh: 14px; font: 400 var(--fs)/var(--lh) var(--f-mono); letter-spacing: 1.1px; text-transform: uppercase; }

.c-white { color: var(--c-white); }
.c-silver { color: var(--c-silver); }
.c-mist { color: var(--c-mist); }
.c-haze { color: var(--c-haze); }
.c-dim { color: var(--c-dim); }
.c-blue { color: var(--c-blue); }
.c-pale { color: var(--c-pale); }
.c-arc { color: var(--c-arc); }

/* Layout: the desktop composition is authored at 1440 px and scaled as a whole between
   1024 and 1440 px, so every page keeps the exact proportions of the Sketch file. */
.page { position: relative; width: 100%; }
.section { position: relative; width: 100%; overflow: clip; }
/* Sketch frames clip their content; the few that do not (clip behaviour 2) opt out */
.section.spill { overflow-x: clip; overflow-y: visible; }
.stage { position: relative; width: 1440px; margin-inline: auto; height: 100%; }
/* left/right offset that takes an absolutely placed layer from the stage to the window edge */
:root { --bleed: min(0px, calc(50% - 50vw)); }
.abs { position: absolute; }

@media (min-width: 1024px) {
  .page { zoom: var(--z, 1); }
  .only-mobile { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1439.98px) {
  /* Fallback steps when JS has not set --z yet */
  :root { --z: .711; }
}
@media (min-width: 1100px) and (max-width: 1439.98px) { :root { --z: .763; } }
@media (min-width: 1200px) and (max-width: 1439.98px) { :root { --z: .833; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { :root { --z: .888; } }
@media (min-width: 1366px) and (max-width: 1439.98px) { :root { --z: .948; } }
@media (max-width: 1023.98px) {
  .only-desktop { display: none !important; }
}

/* Reveal on scroll: nothing pops, everything eases out on the shared curve */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(18px); }
  .js [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal="fade"] { transform: none; }
}