/* Reset, body, typography defaults, links, focus states, icons. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.is-scroll-locked { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--cs-black);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--cs-white); text-decoration: none; transition: opacity var(--duration-fast) var(--ease-default); }
a:hover { opacity: 0.75; }
::selection { background: var(--cs-lime); color: var(--cs-black); }
input::placeholder, textarea::placeholder { color: var(--cs-neutral-500); }

:focus { outline: none; }
:focus-visible { outline: var(--focus-ring-width) solid var(--cs-lime); outline-offset: var(--focus-ring-width); }

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

/* Icons: Lucide SVGs as masks, so they take the text colour. Size = font-size. */
.icon {
  display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.icon--arrow-right { -webkit-mask-image: url('icons/arrow-right.svg'); mask-image: url('icons/arrow-right.svg'); }
.icon--check { -webkit-mask-image: url('icons/check.svg'); mask-image: url('icons/check.svg'); }
.icon--circle-alert { -webkit-mask-image: url('icons/circle-alert.svg'); mask-image: url('icons/circle-alert.svg'); }
.icon--linkedin { -webkit-mask-image: url('icons/linkedin.svg'); mask-image: url('icons/linkedin.svg'); }
.icon--instagram { -webkit-mask-image: url('icons/instagram.svg'); mask-image: url('icons/instagram.svg'); }
.icon--x { -webkit-mask-image: url('icons/x.svg'); mask-image: url('icons/x.svg'); }
.icon--menu { -webkit-mask-image: url('icons/menu.svg'); mask-image: url('icons/menu.svg'); }
.icon--tv { -webkit-mask-image: url('icons/tv.svg'); mask-image: url('icons/tv.svg'); }
.icon--chart-line { -webkit-mask-image: url('icons/chart-line.svg'); mask-image: url('icons/chart-line.svg'); }
.icon--box { -webkit-mask-image: url('icons/box.svg'); mask-image: url('icons/box.svg'); }
.icon--users { -webkit-mask-image: url('icons/users.svg'); mask-image: url('icons/users.svg'); }
.icon--info { -webkit-mask-image: url('icons/info.svg'); mask-image: url('icons/info.svg'); }
.icon--chevron-down { -webkit-mask-image: url('icons/chevron-down.svg'); mask-image: url('icons/chevron-down.svg'); }

/* Images positioned by site.js (data-frame="scale,x,y" crops). */
.framed-img {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  max-width: none; object-fit: cover; transform: translate(-50%, -50%);
  user-select: none; -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}