/* ==========================================================================
   base.css — reset, element defaults, layout primitives, motion, utilities
   Depends on: tokens.css
   ========================================================================== */

:root {
  /* Motion (kept here: the token format has no motion family) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-paper: cubic-bezier(0.34, 1.32, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* Patterns (data URIs so the same file works in the site and the Design System) */
  --dot-size: 22px;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--surface-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* An open dialog (video modal) or drawer keeps the page behind it still. */
body:has(dialog[open]) { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
/* Zero specificity, so a component's own padding (.service-index, .process-board__steps…) always wins. */
:where(ol[role="list"], ul[role="list"], .list-reset) { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-display);
  font-weight: 600;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark { --focus-ring: var(--focus-ring-on-dark); color: var(--text-on-dark); }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

.section { position: relative; padding-block: var(--section-space); }
/* Two sections on the same dark dotted ground read as one surface: share a single gap, not two. */
.section.surface-dotted + .section.surface-dotted { padding-top: 0; }

.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-3)); align-items: center; }

/* Layering: decoration never blocks content */
.layer-deco { position: absolute; z-index: var(--z-deco); pointer-events: none; }
.layer-content { position: relative; z-index: var(--z-content); }

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.uppercase { text-transform: uppercase; }
.text-display { color: var(--text-display); }
.text-secondary { color: var(--text-secondary); }

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: calc(var(--z-modal) + 1);
  padding: var(--space-3) var(--space-4);
  background: var(--cream-50);
  color: var(--burgundy-800);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-3); }

/* ---------- Reveal on scroll (js/modules/reveal.js adds .is-visible) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px) rotate(var(--reveal-rotate, 0deg));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-paper);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important; /* 0s, not 0.01ms: a near-zero transition still delays visibility changes (drawer focus) */
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}