/* Binary Virtual Solutions: one stylesheet for index.html and privacy.html.
   Rules: brain/hq/coding-frontend.md (tokens, rem, layers, both themes, WCAG 2.2 AA).
   No web fonts, no JavaScript, nothing loaded from another origin. */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
  ul[class] { list-style: none; padding: 0; }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* primitives: a cool neutral ramp tinted toward the accent, one accent ramp */
    --grey-0: #ffffff;
    --grey-50: #f5f7fa;
    --grey-100: #eaeef3;
    --grey-200: #d5dce5;
    --grey-500: #5a6677;
    --grey-700: #334055;
    --grey-900: #0f1a2a;
    --ink-950: #0b121d;
    --ink-900: #111a27;
    --ink-800: #182333;
    --ink-700: #26344a;
    --ink-400: #9aa7b8;
    --ink-100: #e6ebf2;
    --blue-700: #1c4fb8;
    --blue-800: #163f93;
    --blue-300: #8fb4ff;
    --blue-200: #b7cfff;

    /* semantic: light theme */
    --color-bg: var(--grey-0);
    --color-surface: var(--grey-50);
    --color-text: var(--grey-900);
    --color-muted: var(--grey-500);
    --color-border: var(--grey-200);
    --color-accent: var(--blue-700);
    --color-accent-hover: var(--blue-800);
    --color-on-accent: var(--grey-0);
    --color-focus: var(--blue-700);

    /* spacing: rule 10 */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;

    /* type: rule 11, 16px @ 360px ratio 1.2 -> 18px @ 1240px ratio 1.25 (Utopia method) */
    --step--1: clamp(0.8333rem, 0.8061rem + 0.1212vw, 0.9rem);
    --step-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1156rem + 0.375vw, 1.406rem);
    --step-2: clamp(1.44rem, 1.31rem + 0.5778vw, 1.758rem);
    --step-3: clamp(1.728rem, 1.536rem + 0.8532vw, 2.197rem);
    --step-4: clamp(2.074rem, 1.7983rem + 1.2236vw, 2.747rem);

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    --weight-regular: 400;
    --weight-semibold: 600;
    --leading-body: 1.6;
    --leading-heading: 1.2;
    --tracking-label: .06em;

    --radius: .5rem;
    --radius-sm: .25rem;
    --measure: 68ch;
    --page-max: 66rem;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --hairline: 1px;
    --focus-ring: 3px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg: var(--ink-950);
      --color-surface: var(--ink-900);
      --color-text: var(--ink-100);
      --color-muted: var(--ink-400);
      --color-border: var(--ink-700);
      --color-accent: var(--blue-300);
      --color-accent-hover: var(--blue-200);
      --color-on-accent: var(--ink-950);
      --color-focus: var(--blue-300);
    }
  }
  :root[data-theme="dark"] {
    --color-bg: var(--ink-950);
    --color-surface: var(--ink-900);
    --color-text: var(--ink-100);
    --color-muted: var(--ink-400);
    --color-border: var(--ink-700);
    --color-accent: var(--blue-300);
    --color-accent-hover: var(--blue-200);
    --color-on-accent: var(--ink-950);
    --color-focus: var(--blue-300);
  }
}

@layer base {
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    font-weight: var(--weight-regular);
    overflow-wrap: break-word;
  }
  h1, h2, h3 { line-height: var(--leading-heading); font-weight: var(--weight-semibold); text-wrap: balance; hyphens: auto; }
  h1 { font-size: var(--step-4); letter-spacing: -.02em; }
  h2 { font-size: var(--step-3); letter-spacing: -.01em; }
  h3 { font-size: var(--step-1); }
  p { max-width: var(--measure); text-wrap: pretty; }
  a { color: var(--color-accent); text-underline-offset: .2em; text-decoration-thickness: .08em; }
  a:hover { color: var(--color-accent-hover); }
  :focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-ring); border-radius: var(--radius-sm); }
}

@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
  .section { padding-block: var(--space-6); }
  .section--surface { background: var(--color-surface); }
  .section__head { display: grid; gap: var(--space-2); margin-block-end: var(--space-5); }
  .stack > * + * { margin-block-start: var(--space-3); }

  .grid { display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
  .grid--four { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
  .split { display: grid; gap: var(--space-5); align-items: start; }
  @media (min-width: 56rem) {
    .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); }
  }
}

@layer components {
  .skip-link { position: absolute; inset-inline-start: var(--space-3); inset-block-start: var(--space-3); z-index: 1;
    padding: var(--space-2) var(--space-3); background: var(--color-accent); color: var(--color-on-accent);
    border-radius: var(--radius-sm); transform: translateY(-200%); }
  .skip-link:focus-visible { transform: none; color: var(--color-on-accent); }

  .site-header { border-block-end: var(--hairline) solid var(--color-border); }
  .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); }
  .wordmark { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font-weight: var(--weight-semibold); }
  .wordmark:hover { color: var(--color-text); }
  .wordmark__mark { display: inline-grid; place-items: center; inline-size: 2.25em; block-size: 2.25em; border-radius: var(--radius-sm);
    background: var(--color-text); color: var(--color-bg); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .02em; }
  .nav__item--more { display: none; }
  @media (min-width: 48rem) { .nav__item--more { display: list-item; } }
  .nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .nav__link { display: inline-block; padding-block: var(--space-2); color: var(--color-muted); text-decoration: none; font-size: var(--step--1); }
  .nav__link:hover { color: var(--color-text); text-decoration: underline; }

  /* owner headshot beside the name line; the image file is 480px square, shown at 6rem */
  .person { display: flex; align-items: center; gap: var(--space-3); }
  .person__photo { display: block; inline-size: 6rem; block-size: auto; aspect-ratio: 1; object-fit: cover;
    border-radius: var(--radius); background: var(--color-surface); }
  .eyebrow { font-size: var(--step--1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
  .lede { font-size: var(--step-1); color: var(--color-muted); line-height: 1.5; }

  .hero { padding-block: var(--space-6); }
  .hero__text { max-width: 52rem; }
  .hero__text > * + * { margin-block-start: var(--space-4); }
  .hero__title { max-width: 22ch; }
  .status { display: inline-flex; align-items: baseline; gap: var(--space-2); max-width: 100%; font-size: var(--step--1); color: var(--color-text);
    border: var(--hairline) solid var(--color-border); border-radius: var(--radius); padding: var(--space-1) var(--space-3); }
  .status__note { font-weight: var(--weight-regular); color: var(--color-muted); }

  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .actions > .btn { flex: 1 1 11rem; }
  @media (min-width: 40rem) { .actions > .btn { flex: 0 0 auto; } }
  .btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.75rem; padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm); border: var(--hairline) solid var(--color-accent); font-weight: var(--weight-semibold); text-decoration: none; }
  .btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
  .btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); }
  .btn--quiet { background: transparent; color: var(--color-accent); border-color: var(--color-muted); }
  .btn--quiet:hover { border-color: var(--color-accent); }

  .facts { margin-block-start: var(--space-5); background: var(--color-surface); border-radius: var(--radius); padding: var(--space-4); }
  .facts__title { font-size: var(--step--1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); margin-block-end: var(--space-3); }
  .facts__list { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 40rem) { .facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .facts__list { grid-template-columns: 1.25fr 1.15fr .6fr 1.3fr .95fr; } }
  /* NAICS carries a title per code, so it takes a full row of its own, last */
  .facts__row--naics { grid-column: 1 / -1; }
  .facts__lines { display: grid; gap: var(--space-1); }
  .facts__row { display: grid; gap: var(--space-1); align-content: start; min-inline-size: 0; }
  .facts dt { font-size: var(--step--1); color: var(--color-muted); }
  .facts dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .facts__code { font-family: var(--font-mono); letter-spacing: .03em; }
  .facts__note { font-size: var(--step--1); color: var(--color-muted); }

  /* Q&A: one column of short answers at reading width, two columns once there is room */
  .qa { display: grid; gap: var(--space-4) var(--space-5); }
  @media (min-width: 56rem) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .qa__item { display: grid; gap: var(--space-2); align-content: start; max-inline-size: var(--measure);
    padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--color-border); }
  .qa__item a { overflow-wrap: anywhere; }
  .qa__item a[href^="tel:"] { white-space: nowrap; }
  .item { display: grid; gap: var(--space-2); align-content: start; padding-block-start: var(--space-3); border-block-start: var(--hairline) solid var(--color-border); }
  .item__title { font-size: var(--step-1); }
  .item__body { color: var(--color-muted); }

  .data { display: grid; gap: 0; border-block-start: var(--hairline) solid var(--color-border); }
  .data__row { display: grid; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-block-end: var(--hairline) solid var(--color-border); }
  @media (min-width: 40rem) { .data__row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }
  .data dt { color: var(--color-muted); }
  .data dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

  .contact__list { display: grid; gap: var(--space-3); }
  .contact__label { display: block; font-size: var(--step--1); color: var(--color-muted); }
  .contact__value { font-size: var(--step-0); }

  .site-footer { border-block-start: var(--hairline) solid var(--color-border); padding-block: var(--space-5); color: var(--color-muted); font-size: var(--step--1); }
  .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; align-items: center; }
  .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .site-footer a { display: inline-block; padding-block: var(--space-1); }

  .prose { max-width: var(--measure); }
  .prose > * + * { margin-block-start: var(--space-3); }
  .prose h2 { font-size: var(--step-2); margin-block-start: var(--space-5); }
  .prose h3 { margin-block-start: var(--space-4); }
  .prose ul { padding-inline-start: var(--space-4); }
  .prose li + li { margin-block-start: var(--space-2); }
  .prose__meta { color: var(--color-muted); font-size: var(--step--1); }
  .prose__address { font-style: normal; }
  .prose a { overflow-wrap: anywhere; }
}

@layer utilities {
  .visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; overflow: hidden !important;
    clip-path: inset(50%) !important; white-space: nowrap !important; }
}