/* =============================================================================
   Abkons wireframes — base: reset, typography, layout primitives, utilities
   Depends on tokens.css. Component styles live in components.css.
   ========================================================================== */

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--stripe-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  font-family: var(--font-main);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  font-synthesis: none;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* guard against any stray full-bleed overflow */
}
body.is-locked { overflow: hidden; }

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: -.01em;
  color: inherit;
  text-wrap: balance;
}
h1, .t-h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: var(--tracking-display); }
h2, .t-h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: var(--tracking-display); }
h3, .t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: 1.2; }
h4, .t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.3; }
.t-display { font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.t-small { font-size: var(--fs-small); }
.t-xs { font-size: var(--fs-xs); }
.t-muted { color: var(--ink-2); }
.t-ui { font-family: var(--font-ui); }
p { max-width: var(--measure); text-wrap: pretty; }
strong, b { font-weight: var(--fw-semibold); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--aqua); }
.prose a, a.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--aqua);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) ease-in;
}
.prose a:hover, a.link:hover { text-decoration-color: var(--ink); }
.on-dark .prose a, .on-dark a.link { color: var(--white); }
.on-dark .prose a:hover, .on-dark a.link:hover { text-decoration-color: var(--white); }

::selection { background: var(--frosted); color: var(--prussian); }

/* Long-form text block (articles, privacy, case-study body) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--aqua-ink); }
.prose blockquote {
  border-left: 2px solid var(--aqua);
  padding: .25em 0 .25em 1.25em;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--ink);
}

/* ---- Focus --------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.on-dark :focus-visible,
.drawer__panel :focus-visible, .bg-prussian :focus-visible, .bg-layered :focus-visible, .bg-band :focus-visible,
.page-hero--dark :focus-visible, .page-hero--image :focus-visible, .site-footer :focus-visible { outline-color: var(--aqua); }

/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-skip);
  padding: 12px 18px; background: var(--prussian); color: var(--white);
  font-family: var(--font-ui); font-size: var(--fs-small); text-decoration: none;
  transform: translateY(-150%); transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }

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

.section { padding-block: var(--section-pad); position: relative; }
.section--tight { padding-block: var(--section-pad-sm); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section themes (set colours + hairline colour for descendants) */
.bg-white    { background: var(--surface); color: var(--ink); }
.bg-alt      { background: var(--surface-alt); color: var(--ink); }
.bg-platinum { background: var(--platinum); color: var(--ink); }
.bg-cyan     { background: var(--cyan); color: var(--ink); }
.bg-prussian { background: var(--prussian); color: var(--on-dark); }
.bg-layered  { background: var(--grad-layered); color: var(--on-dark); }
.bg-band     { background: var(--grad-band); color: var(--on-dark); }
.on-dark, .bg-prussian, .bg-layered, .bg-band { --rule: var(--rule-dark); --ink-2: var(--on-dark-2); --ink-3: var(--on-dark-3); }
.bg-prussian, .bg-layered, .bg-band { color: var(--on-dark); }

/* Grid utilities — mobile-first, collapse to 1 column ≤ 640px */
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
@media (min-width: 641px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 12-column grid for bespoke layouts: .grid-12 > .span-*, .start-* (desktop only) */
.grid-12 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.grid-12 > * { min-width: 0; }
@media (min-width: 1025px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
  .span-12 { grid-column: 1 / -1; }
  .start-2 { grid-column-start: 2; } .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
}

/* Stack: vertical rhythm helper. .stack > * + * gets --stack-gap */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-5)); }
.stack--sm { --stack-gap: var(--s-3); }
.stack--lg { --stack-gap: var(--s-7); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-4)); }

.hairline { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; }
.ta-center { text-align: center; }
.nowrap { white-space: nowrap; }
.full-bleed { width: 100%; }
@media (max-width: 767px) {
  .bg-band { background: linear-gradient(180deg, #0D132A 0%, #0D132A 50%, #142A4A 78%, #1F6E86 100%); }
}