/* AbleQ LLC — holding page. Tokens from ABLEQ-DS-001 §11. */
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/inter-500.woff2") format("woff2"); }

:root {
  --ink: #061A1D; --text-on-dark: #F2F4F3; --steel: #B8C7CC;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-h1: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ink); color: var(--text-on-dark);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
}

.site-header, .hold, .site-footer { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 600px) { .site-header, .hold, .site-footer { padding-inline: 32px; } }

.site-header { padding-block: 24px; }
.lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--text-on-dark); text-decoration: none; min-height: 44px; }
.lockup img { width: 40px; height: 40px; }
.lockup__word { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; }

.hold { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 64px; }
.eyebrow { margin: 0 0 32px; color: var(--steel); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
h1 { margin: 0 0 40px; max-width: 16ch; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; }
.lead { margin: 0 0 12px; max-width: 38rem; font-size: var(--fs-lead); }
.contact { margin: 0; max-width: 38rem; color: var(--steel); }

a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 3px; border-radius: 2px; }

.site-footer { padding-block: 0 24px; color: var(--steel); font-size: 0.9375rem; }
.site-footer p { margin: 0; padding-top: 24px; border-top: 1px solid rgba(184, 199, 204, 0.24); }

@media (forced-colors: active) {
  .lockup img { forced-color-adjust: auto; }
  a:focus-visible { outline-color: Highlight; }
}