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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-charcoal);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* The HTML `hidden` attribute must always win. The UA `[hidden] { display:none }`
   rule has near-zero specificity, so ANY author rule that sets `display`
   (e.g. `.form-success { display: flex }`) silently overrides it and leaks the
   element into view even when toggled hidden in markup/JS. This global reset —
   the normalize.css / HTML5-Boilerplate convention — guarantees hidden means
   hidden across every form success/error message, modal, and toggled panel.
   (Components that need a hidden element to occupy space use `visibility`/`.is-*`
   classes, not `[hidden]`, so this is safe.) */
[hidden] {
  display: none !important;
}

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

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

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: var(--line-height-tight);
}

p {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ── Cross-browser form control baseline ──
   Strips the native OS appearance so custom styles render identically in
   Chrome, Safari, Firefox and Edge. `select` is intentionally EXCLUDED here
   to preserve the native dropdown chevron on pages that rely on it
   (admin-v2 `.form-select`, portfolio filters, etc). Page-specific CSS that
   custom-styles a select should add its own `appearance: none` + chevron
   background-image. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Firefox: remove inner focus outline on form controls */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Cross-browser user-select helper — apply via class or data-attribute
   to opt paragraphs, chips, pills, etc. out of text selection. */
.no-select,
[data-no-select] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}