/* ==========================================================================
   Base — reset, document defaults, typography primitives.
   Consumes tokens.css. Contains no layout and no component styling.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Reserve the scrollbar track permanently. Without it, locking body scroll to
     open the contact panel removes the scrollbar and forces a relayout of the
     whole document — sticky header, sticky cards, two canvases — at exactly the
     moment the panel starts sliding. That stall was the slide's "bugginess".
     Carried over from the old theme, where it was there for the same reason. */
  scrollbar-gutter: stable;

  /* The system tap flash — translucent blue on Android, grey-blue on iOS — is
     painted over whatever it lands on, and nothing in this stylesheet reached
     it: `::selection` below is a different thing entirely, which is why the
     flash stayed blue on a site with no blue in its palette.

     Dropped rather than recoloured. Every control here already answers a press
     in its own way — the arrow travels, the burger crosses to an X, a card
     lifts — so the flash was a second, unstyled acknowledgement on top of a
     designed one. The one exception, a plain text link, gets its own state at
     the bottom of this file. */
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

/* :where() keeps this at zero specificity. Written plainly, `ul[class]` is an
   element + attribute selector (0,1,1) and outranks any single class (0,1,0) —
   so a component setting padding on its own list would silently lose to the
   reset. That is exactly what flattened the nav pill's padding. */
:where(ul[class], ol[class]) {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: calc(var(--t-body-lh) / var(--t-body));
  font-weight: var(--fw-medium);
  font-optical-sizing: auto;
  /* DM Sans is variable: let the 18pt/36pt optical axis resolve itself */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* `clip`, not `hidden`. Both stop the marquee and sphere spilling sideways,
     but overflow-x: hidden turns the body into a scroll container, which
     silently breaks `position: sticky` against the viewport — that is what
     stopped the green case-study panels from pinning. `clip` does not create a
     scroll container, so sticky keeps working. */
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--c-accent);
}


/* --------------------------------------------------------------------------
   Headings

   The XD does not use a conventional h1..h6 ramp — it uses four display sizes
   applied by role. Element selectors carry sensible defaults; the .t-* classes
   below are what templates actually reach for, so a heading's level can be set
   by document structure and its size by design intent, independently.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-light);
  line-height: 1;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-display);
  font-weight: var(--fw-thin);
  line-height: calc(var(--t-display-lh) / var(--t-display));
}

h2 {
  font-size: var(--t-h2);
  line-height: calc(var(--t-h2-lh) / var(--t-h2));
}

h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-medium);
  line-height: calc(var(--t-h3-lh) / var(--t-h3));
}

h4,
h5,
h6 {
  font-size: var(--t-body);
  font-weight: var(--fw-medium);
}


/* --- Type roles ---------------------------------------------------------- */

.t-display {
  font-size: var(--t-display);
  line-height: calc(var(--t-display-lh) / var(--t-display));
  font-weight: var(--fw-thin);
  color: var(--c-text-display);
  letter-spacing: 0.01em;
}

.t-card-title {
  font-size: var(--t-card-title);
  line-height: calc(var(--t-card-title-lh) / var(--t-card-title));
  font-weight: var(--fw-light);
}

.t-h2 {
  font-size: var(--t-h2);
  line-height: calc(var(--t-h2-lh) / var(--t-h2));
  font-weight: var(--fw-light);
}

.t-lead {
  font-size: var(--t-lead);
  line-height: calc(var(--t-lead-lh) / var(--t-lead));
  font-weight: var(--fw-medium);
}

.t-body {
  font-size: var(--t-body);
  line-height: calc(var(--t-body-lh) / var(--t-body));
  font-weight: var(--fw-medium);
}

.t-strong {
  font-size: var(--t-strong);
  line-height: calc(var(--t-strong-lh) / var(--t-strong));
  font-weight: var(--fw-bold);
}

/* Mono roles — nav, tags, labels. The XD's line-height of 55px on 18px and
   12px type is a click target, not leading; it is applied as a fixed height on
   components rather than inherited here, which would wreck multi-line labels. */

.t-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.t-tag {
  font-family: var(--font-mono);
  font-size: var(--t-tag);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.t-micro {
  font-size: var(--t-micro);
  line-height: calc(var(--t-micro-lh) / var(--t-micro));
  font-weight: var(--fw-medium);
}

/* The decorative face. Only digits, letters E/S/C and the slash are ever set
   in it — it renders as dotted outlines by design. */
.t-step {
  font-family: var(--font-display);
  font-size: var(--t-step);
  line-height: calc(var(--t-step-lh) / var(--t-step));
  font-weight: 200;
}

.t-numeral {
  font-family: var(--font-display);
  font-size: var(--t-numeral);
  line-height: calc(var(--t-numeral-lh) / var(--t-numeral));
  font-weight: 200;
}


/* --- Long-form prose (privacy policy) ------------------------------------ */

.prose>*+* {
  margin-top: var(--s-3);
}

.prose h2 {
  margin-top: var(--s-6);
  font-size: var(--t-h3);
  font-weight: var(--fw-medium);
}

.prose h3 {
  margin-top: var(--s-4);
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
}

.prose p,
.prose li {
  font-size: var(--t-body);
  line-height: 1.6;
}

.prose ul {
  padding-left: 1.2em;
  list-style: disc;
}

.prose li+li {
  margin-top: var(--s-1);
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose .lead {
  font-size: var(--t-lead);
  line-height: 1.4;
}


/* --- Accessibility ------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

/* A plain link in running copy is the only thing on the site with no press
   state of its own, so removing the tap flash above would have left it silent
   on a touch screen. `:not([class])` keeps this off every component link —
   those answer a press themselves and set their own colours. */
@media (hover: none) {
  a:not([class]):active {
    opacity: 0.55;
  }
}

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

.skip-link {
  position: absolute;
  top: 0;
  left: var(--page-margin);
  z-index: calc(var(--z-preloader) + 1);
  padding: var(--s-2) var(--s-3);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-mono);
  font-size: var(--t-tag);
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--c-on-accent);
}