/* Karleef Cyber — self-hosted fonts + design tokens */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/newsreader-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/newsreader-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/newsreader-latin-500-italic.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/newsreader-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/newsreader-latin-600-italic.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");}
/* Karleef Cyber — Color tokens
   Brand essence: "Deep Passion for People and Technology."
   Executive trust (deep ink) + human warmth (amber) + cyber resilience (teal),
   on warm editorial paper. */
:root {
  /* ---- Base palette ---- */
  /* Ink — deep slate-navy. Primary text, dark surfaces, executive gravitas */
  --ink-900: #0B1320;
  --ink-800: #111C2E;
  --ink-700: #1B2A40;
  --ink-600: #2A3C56;
  --ink-500: #3D506C;

  /* Paper — warm off-white editorial ground */
  --paper-0:  #FFFFFF;
  --paper-50: #FAF7F1;
  --paper-100:#F4EFE6;
  --paper-200:#EAE3D6;
  --paper-300:#DBD2C2;

  /* Warm neutrals (text on paper) */
  --stone-700:#4A4742;
  --stone-600:#6B665E;
  --stone-500:#8A8479;
  --stone-400:#A9A296;

  /* Amber — human warmth / passion. The signature accent. */
  --amber-600:#B97524;
  --amber-500:#C8893A;
  --amber-400:#D9A35C;
  --amber-200:#EAD0A6;
  --amber-100:#F3E4C9;

  /* Teal — cyber resilience / "secure" signal */
  --teal-700:#0E5048;
  --teal-600:#136B5F;
  --teal-500:#1A8576;
  --teal-200:#A9D3CB;
  --teal-100:#D7EAE5;

  /* Status */
  --success-600:#1F7A4D;
  --warning-600:#B26A12;
  --danger-600: #B23A2E;
  --danger-100: #F6DED9;

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--paper-50);
  --surface-card:    var(--paper-0);
  --surface-sunken:  var(--paper-100);
  --surface-inverse: var(--ink-900);
  --surface-accent-soft: var(--amber-100);
  --surface-secure-soft: var(--teal-100);

  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--stone-600);
  --text-subtle:  var(--stone-500);
  --text-on-ink:  var(--paper-50);
  --text-on-ink-muted: #A9B4C4;
  --text-accent:  var(--amber-600);
  --text-secure:  var(--teal-700);

  --border-hairline: var(--paper-300);
  --border-strong:   var(--ink-700);
  --border-accent:   var(--amber-500);
  --border-on-ink:   rgba(255,255,255,0.14);

  --accent:         var(--amber-500);
  --accent-hover:   var(--amber-600);
  --secure:         var(--teal-600);
  --secure-hover:   var(--teal-700);

  --focus-ring: var(--amber-500);
}
/* Karleef Cyber — Typography tokens
   Newsreader (warm editorial serif: headings + pull-quotes)
   Hanken Grotesk (humanist grotesk: UI + body)
   IBM Plex Mono (technical eyebrows, tags, the "cyber" signal)
   NOTE: typefaces are an informed substitution — the real site fonts were
   not accessible. Confirm/replace via tokens/fonts.css. */
:root {
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale — editorial, generous. rem-based (16px root) */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-base:1rem;      /* 16px */
  --text-md:  1.125rem;  /* 18px */
  --text-lg:  1.375rem;  /* 22px */
  --text-xl:  1.75rem;   /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 3rem;      /* 48px */
  --text-4xl: 4rem;      /* 64px */
  --text-5xl: 5.25rem;   /* 84px */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.16em; /* mono eyebrow labels, uppercased */

  /* Semantic roles */
  --display-font: var(--font-display);
  --display-weight: var(--weight-semibold);
  --display-leading: var(--leading-tight);
  --display-tracking: var(--tracking-tight);

  --heading-font: var(--font-display);
  --body-font: var(--font-sans);
  --eyebrow-font: var(--font-mono);
}
/* Karleef Cyber — Spacing & layout tokens. 4px base grid. */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-prose: 680px;
  --gutter: var(--space-6);
  --section-y: var(--space-24);
}
/* Karleef Cyber — Radii, shadows, borders, motion.
   Editorial & premium: restrained radii, soft warm shadows, hairline borders. */
:root {
  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Shadows — warm-tinted, low, editorial. Prefer hairline borders over heavy shadow. */
  --shadow-xs: 0 1px 2px rgba(28, 22, 12, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 22, 12, 0.07), 0 1px 2px rgba(28, 22, 12, 0.05);
  --shadow-md: 0 4px 14px rgba(28, 22, 12, 0.08), 0 2px 6px rgba(28, 22, 12, 0.05);
  --shadow-lg: 0 14px 40px rgba(15, 24, 40, 0.12), 0 4px 12px rgba(15, 24, 40, 0.07);
  --shadow-focus: 0 0 0 3px rgba(200, 137, 58, 0.32);

  /* Motion — calm, confident. No bounces. */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */
}

html,body{margin:0;padding:0;background:var(--surface-page);color:var(--text-body);overflow-x:hidden}
*{-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
noscript p{font-family:var(--font-sans);padding:24px;max-width:640px}

/* Cyber Readiness Assessment callout */
.kc-ra{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:start;
  background:var(--surface-sunken);border:1px solid var(--border-hairline);border-top:3px solid var(--accent);
  border-radius:var(--radius-lg);padding:48px;box-shadow:var(--shadow-sm)}
.kc-ra-intro{min-width:0}
.kc-ra-title{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1.12;letter-spacing:-0.02em;
  color:var(--text-strong);margin:14px 0 16px;text-wrap:balance}
.kc-ra-body{font-family:var(--font-sans);font-size:16px;line-height:1.7;color:var(--text-body);margin:0;max-width:56ch}
.kc-ra-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.kc-ra-note{font-family:var(--font-sans);font-size:14px;color:var(--text-muted);margin:14px 0 0}
.kc-ra-steps{min-width:0;background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-md);padding:28px 28px 8px}
.kc-ra-steps-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-subtle);margin:0 0 8px}
.kc-ra-steps ol{list-style:none;margin:0;padding:0}
.kc-ra-steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:18px 0;border-top:1px solid var(--border-hairline)}
.kc-ra-steps li:first-child{border-top:0}
.kc-ra-num{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--text-accent);padding-top:3px;font-variant-numeric:tabular-nums}
.kc-ra-steps h3{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--text-strong);margin:0 0 4px}
.kc-ra-steps li p{font-family:var(--font-sans);font-size:14.5px;line-height:1.55;color:var(--text-muted);margin:0}
.kc-ra--secure{border-top-color:var(--secure)}
.kc-ra-steps ul{list-style:none;margin:0;padding:0}
.kc-ra-plain li{grid-template-columns:22px 1fr}
.kc-ra-mark{width:7px;height:7px;background:var(--secure);border-radius:1px;margin-top:10px;transform:rotate(45deg)}
.kc-ra--ink{border-top-color:var(--ink-700)}
.kc-ra-mark--ink{background:var(--ink-700)}
@media (max-width:860px){.kc-ra{grid-template-columns:1fr;gap:32px;padding:32px 24px}.kc-ra-title{font-size:28px}}