/* ── Mike Sirius — Webfonts ───────────────────────────────────────────
   Schibsted Grotesk → display (confident, modern, premium — NOT a serif)
   IBM Plex Sans      → body / UI (structured, credible, technical-human)
   IBM Plex Mono      → eyebrow labels, data, kickers (strategic / technical)

   NOTE: Loaded from Google Fonts CDN. For self-hosted binaries (offline /
   production), download the woff2 files into assets/fonts/ and swap these
   @import lines for local @font-face rules.
   ──────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* ── Mike Sirius — Color Tokens ───────────────────────────────────────
   Base palette only. Semantic aliases live in semantic.css.

   Philosophy: deep "ink" navy ground for authority, warm ivory paper for
   editorial light surfaces, a single REFINED "Sirius" blue used sparingly
   for emphasis (deepened from a tech-blue to an institutional azure).
   Primary actions are ink, not accent — timeless over trendy. One accent,
   one ground per surface; no decorative third colour.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Ink — deep navy ground (authority, dark surfaces) */
  --ink-950: #060F1B;
  --ink-900: #0A1A2F;
  --ink-850: #0D2138;
  --ink-800: #102640;
  --ink-700: #163251;
  --ink-600: #1E4366;

  /* Sirius — refined signature accent (institutional azure, used sparingly) */
  --sirius-50:  #EEF2F8;
  --sirius-100: #DBE4F0;
  --sirius-200: #B7C8DF;
  --sirius-300: #8DABCD;  /* on-dark emphasis */
  --sirius-400: #5681B0;
  --sirius-500: #2C619E;  /* signature */
  --sirius-600: #224E80;
  --sirius-700: #1B3E66;
  --sirius-800: #173451;
  --sirius-900: #142A41;

  /* Slate — cool neutral scale (kept for dark-theme surfaces & UI) */
  --slate-0:   #FFFFFF;
  --slate-25:  #F8FAFC;
  --slate-50:  #F1F4F8;
  --slate-100: #E6EBF1;
  --slate-200: #D4DCE5;
  --slate-300: #B7C2CE;
  --slate-400: #8C99A8;
  --slate-500: #647284;
  --slate-600: #4A5868;
  --slate-700: #33414F;
  --slate-800: #1F2A36;
  --slate-900: #131C26;

  /* Paper — warm ivory editorial neutrals (light surfaces) */
  --paper-canvas:  #F2EFE8;  /* warm ivory page ground */
  --paper-surface: #FBFAF6;  /* warm white card */
  --paper-raised:  #FFFFFF;
  --paper-sunken:  #EBE7DD;
  --warm-line:        #E3DCCD;
  --warm-line-strong: #D4CAB6;
  --warm-line-subtle: #EDE8DD;

  /* Graphite — warm dark text on paper */
  --graphite-900: #1E1B16;
  --graphite-800: #2C2820;
  --graphite-700: #3D382F;
  --graphite-600: #564F44;
  --graphite-500: #6B6356;
  --graphite-400: #968D7D;

  /* Status — calm, credible, never neon */
  --green-500: #1F8A5B;
  --green-100: #DCF1E7;
  --amber-500: #C2882B;
  --amber-100: #F6EAD2;
  --red-500:   #CF4F3A;
  --red-100:   #F7E0DB;

  /* Static utility */
  --white: #FFFFFF;
  --black: #060F1B;
}
/* ── Mike Sirius — Typography Tokens ──────────────────────────────────
   Schibsted Grotesk (display) · IBM Plex Sans (body) · IBM Plex Mono (labels)
   Confident, intelligent, structured. Headlines carry authority through a
   modern grotesque set tight; body stays clear and practical; mono uppercase
   for strategic eyebrow kickers. No serif, no italic — type does the work
   through weight, size, tracking and contrast.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Families */
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --fs-display-1: 68px;   /* hero statements */
  --fs-display-2: 52px;   /* section openers */
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 25px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;     /* mono, uppercase, tracked */

  /* Fluid display for heroes */
  --fs-display-fluid: clamp(40px, 6vw, 68px); /* @kind font */

  /* Weights */
  --fw-light: 300;      /* @kind font */
  --fw-regular: 400;    /* @kind font */
  --fw-medium: 500;     /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */

  /* Line heights */
  --lh-tight: 1.06;     /* @kind font */
  --lh-snug: 1.2;       /* @kind font */
  --lh-heading: 1.18;   /* @kind font */
  --lh-normal: 1.5;     /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */

  /* Letter spacing — grotesque display wants tight tracking at scale */
  --tracking-tightest: -0.04em;  /* @kind font */
  --tracking-tight: -0.025em;    /* @kind font */
  --tracking-normal: 0;          /* @kind font */
  --tracking-wide: 0.02em;       /* @kind font */
  --tracking-eyebrow: 0.18em;    /* @kind font */
}
/* ── Mike Sirius — Spacing, Radius, Shadow, Motion ────────────────────
   4px base grid. Structured, generous whitespace. Moderate radii (credible,
   not playful-pill). Soft navy-tinted shadows. Calm motion — short fades and
   small translates, standard easing, no bounce.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Spacing (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 160px;

  /* Radius — structured, moderate */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px;  /* @kind other */
  --border-width: 1px;     /* @kind other */

  /* Shadows — soft, navy-tinted, premium */
  --shadow-xs: 0 1px 2px rgba(10, 26, 47, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 26, 47, 0.08), 0 1px 2px rgba(10, 26, 47, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(10, 26, 47, 0.12), 0 2px 6px -2px rgba(10, 26, 47, 0.08);
  --shadow-lg: 0 12px 32px -8px rgba(10, 26, 47, 0.16), 0 4px 12px -4px rgba(10, 26, 47, 0.10);
  --shadow-xl: 0 24px 56px -12px rgba(10, 26, 47, 0.22), 0 8px 20px -8px rgba(10, 26, 47, 0.12);
  --shadow-focus: 0 0 0 3px rgba(44, 97, 158, 0.30);

  /* Motion — calm, intentional */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;       /* @kind other */
  --dur-slow: 320ms;  /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */

  /* Layout */
  --container-max: 1200px;    /* @kind spacing */
  --container-prose: 720px;   /* @kind spacing */
  --container-wide: 1440px;   /* @kind spacing */
}
/* ── Mike Sirius — Semantic Aliases ───────────────────────────────────
   Map base palette → roles. Default scope is the LIGHT (editorial) theme.
   The dark (authoritative) theme is available via [data-theme="dark"] or
   the .ms-dark utility class — used for heroes, decks, footers and CTAs.
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces (light — warm editorial paper) */
  --color-bg: var(--paper-canvas);
  --color-surface: var(--paper-surface);
  --color-surface-sunken: var(--paper-sunken);
  --color-surface-raised: var(--paper-raised);
  --color-inverse-bg: var(--ink-900);

  /* Text (light — navy headings, warm graphite body) */
  --text-strong: var(--ink-900);
  --text-body: var(--graphite-700);
  --text-muted: var(--graphite-500);
  --text-subtle: var(--graphite-400);
  --text-on-accent: var(--white);
  --text-on-dark: #F4F1EA;

  /* Lines (warm hairlines) */
  --border: var(--warm-line);
  --border-strong: var(--warm-line-strong);
  --border-subtle: var(--warm-line-subtle);

  /* Primary action — ink, not accent (timeless over trendy) */
  --action: var(--ink-900);
  --action-hover: #14283C;
  --action-contrast: var(--paper-surface);

  /* Accent (refined Sirius) — emphasis only: marks, rules, links */
  --accent: var(--sirius-500);
  --accent-hover: var(--sirius-600);
  --accent-active: var(--sirius-700);
  --accent-soft: var(--sirius-50);
  --accent-soft-border: var(--sirius-100);
  --accent-contrast: var(--white);
  --focus-ring: var(--shadow-focus);

  /* Status */
  --success: var(--green-500);
  --success-soft: var(--green-100);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-100);
  --danger: var(--red-500);
  --danger-soft: var(--red-100);

  /* Component roles */
  --btn-radius: var(--radius-md);
  --card-radius: var(--radius-card);
  --card-shadow: var(--shadow-sm);
  --card-border: var(--warm-line);
  --input-radius: var(--radius-md);
}

/* ── Dark / authoritative theme ─────────────────────────────────────── */
[data-theme="dark"],
.ms-dark {
  --color-bg: var(--ink-900);
  --color-surface: var(--ink-850);
  --color-surface-sunken: var(--ink-950);
  --color-surface-raised: var(--ink-800);
  --color-inverse-bg: var(--paper-surface);

  --text-strong: #F4F1EA;
  --text-body: #C4CAD2;
  --text-muted: #8B94A0;
  --text-subtle: var(--slate-500);
  --text-on-accent: var(--white);

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-subtle: rgba(255, 255, 255, 0.07);

  /* Primary action flips to ivory on dark — high-contrast, premium */
  --action: #F4F1EA;
  --action-hover: #E6E1D5;
  --action-contrast: var(--ink-900);

  --accent: var(--sirius-300);
  --accent-hover: var(--sirius-200);
  --accent-active: var(--sirius-100);
  --accent-soft: rgba(44, 97, 158, 0.20);
  --accent-soft-border: rgba(141, 171, 205, 0.30);

  --card-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --card-border: rgba(255, 255, 255, 0.09);
}
/* ── Mike Sirius — Base ───────────────────────────────────────────────
   Light element defaults so specimen cards, components and kits render
   on-brand out of the box. Intentionally minimal — consumers can override.
   ──────────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to the display serif */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--sirius-100); color: var(--ink-900); }

/* ── Brand helpers ──────────────────────────────────────────────────── */

/* Eyebrow / kicker — strategic mono label */
.ms-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Prose spacing */
.ms-prose { max-width: var(--container-prose); }
.ms-prose p + p { margin-top: var(--space-4); }
:root {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--paper-canvas);
}

body {
  min-width: 320px;
}

img,
svg {
  display: block;
}

a {
  text-decoration: none;
}

.container {
  width: min(100% - 80px, var(--container-max));
  margin: 0 auto;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 max(40px, calc((100vw - var(--container-max)) / 2));
  background: var(--ink-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 178px;
}

.wordmark {
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-left: auto;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: var(--fw-medium);
  color: var(--text-body);
  transition: color var(--dur) var(--ease-standard);
}

.nav-links a:hover {
  color: var(--text-strong);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  font-weight: var(--fw-medium);
  cursor: pointer;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease-standard),
    border-color var(--dur) var(--ease-standard),
    box-shadow var(--dur) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button:active {
  transform: translateY(1px);
}

.button-light {
  color: var(--action-contrast);
  background: var(--action);
  border-color: var(--action);
}

.button-light:hover {
  color: var(--action-contrast);
  background: var(--action-hover);
  border-color: var(--action);
}

.button-small {
  min-height: 36px;
  padding: 8px 16px;
  font-size: 13px;
  gap: 7px;
}

.button-small svg {
  width: 16px;
  height: 16px;
}

.button-secondary {
  color: var(--text-strong);
  background: transparent;
  border-color: var(--border-strong);
}

.button-secondary:hover {
  color: var(--action-contrast);
  background: var(--text-strong);
  border-color: var(--text-strong);
}

.button-ghost {
  color: var(--text-strong);
  background: transparent;
  border-color: transparent;
}

.button-ghost:hover {
  background: var(--color-surface-sunken);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow-rule::before {
  content: "";
  width: 24px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.7;
}

.hero {
  background: var(--ink-900);
}

.hero-inner {
  min-height: calc(72vh - 76px);
  display: flex;
  align-items: center;
  padding-top: 42px;
  padding-bottom: 64px;
}

.hero-copy {
  max-width: 820px;
}

.hero-copy h1 {
  max-width: 15ch;
  margin: 22px 0 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(46px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: var(--fw-bold);
}

.hero-copy h1 span {
  color: var(--sirius-300);
}

.hero-subhead {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}

.hero-support {
  position: relative;
  max-width: 48ch;
  margin: 18px 0 0;
  padding-left: 44px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  font-weight: var(--fw-medium);
}

.hero-support::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.products-grid span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.section {
  background: var(--paper-canvas);
  padding: 116px 0;
}

.light-section {
  padding-top: 120px;
  padding-bottom: 96px;
}

.section-intro {
  max-width: 720px;
}

.section-intro h2,
.closing h2 {
  margin: 20px 0 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: var(--fw-bold);
}

.section-intro p:not(.eyebrow) {
  max-width: 60ch;
  margin: 20px 0 0;
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  margin-top: 64px;
}

.expertise-grid article {
  padding: 30px 0 34px;
  border-top: 1px solid var(--border-strong);
}

.expertise-grid span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.expertise-grid h3,
.products-grid h3 {
  margin: 16px 0 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: var(--fw-semibold);
}

.expertise-grid p,
.products-grid p {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.62;
}

.dark-base {
  background: var(--ink-900);
  padding: 116px 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  margin-top: 40px;
}

.products-grid a {
  display: block;
  padding: 28px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.products-grid a:hover h3 {
  color: var(--accent);
}

.products-grid h3 {
  color: var(--text-strong);
  transition: color var(--dur) var(--ease-standard);
}

.closing {
  max-width: 880px;
  margin: 0 auto;
  padding: 120px 0 124px;
  text-align: center;
}

.closing .eyebrow {
  justify-content: center;
}

.closing h2 {
  margin-top: 26px;
  color: var(--text-strong);
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
}

.closing > p:not(.eyebrow) {
  max-width: 40ch;
  margin: 22px auto 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.5;
  font-weight: var(--fw-medium);
}

.closing .button {
  margin-top: 40px;
}

.footer {
  background: var(--ink-900);
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-bottom span {
  color: var(--text-subtle);
  font-family: var(--font-sans);
  font-size: 12.5px;
}

@media (max-width: 1080px) {
  .hero-inner {
    min-height: auto;
  }

  .expertise-grid,
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .container {
    width: min(100% - 40px, var(--container-max));
  }

  .site-nav {
    height: auto;
    min-height: 68px;
    padding: 14px 20px;
  }

  .brand {
    min-width: 164px;
  }

  .wordmark {
    font-size: 15px;
  }

  .nav-links {
    display: none;
  }

  .site-nav .button {
    margin-left: auto;
  }

  .hero-inner {
    min-height: auto;
    padding-top: 52px;
    padding-bottom: 38px;
  }

  .hero-copy h1 {
    font-size: clamp(42px, 13vw, 58px);
    max-width: 12ch;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .section,
  .light-section,
  .dark-base {
    padding-top: 88px;
  }

  .section,
  .light-section {
    padding-bottom: 88px;
  }

  .expertise-grid,
  .products-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .closing {
    padding: 88px 0 92px;
  }
}

@media (max-width: 480px) {
  .site-nav .button {
    display: none;
  }

  .site-nav {
    justify-content: center;
  }

  .brand {
    min-width: 172px;
  }

  .hero-copy h1 {
    font-size: clamp(42px, 14vw, 56px);
  }
}