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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 16px); -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Lenis handles smoothing itself when active */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background-color: var(--surface);
  background-image: var(--grid-light);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--alt { background-color: var(--surface-alt); background-image: var(--grid-light); background-size: var(--grid-size) var(--grid-size); }

.text-accent { color: var(--accent-text); }
/* The hidden attribute always wins over component display rules */
[hidden] { display: none !important; }

.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;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--dark); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Placeholder marker for content awaiting client confirmation */
.tbc { outline: 1px dashed rgba(0, 164, 218, 0.7); outline-offset: 2px; border-radius: 4px; }