/* kevos-home.css — UNIFIED v5 chrome for the homepage and the two portal
   landing pages (/intelligence, /studio).

   THIS FILE IS PURELY ADDITIVE. assets/style.css is not modified by v5 and
   still loads first; every rule here is namespaced `kv-` and none of them
   reaches a selector style.css owns. Removing this one <link> returns every
   page to unstyled-v5 / normal-v4.1 rendering with nothing else to undo —
   which is what guarantees the 232 content pages are untouched.

   COLOUR DISCIPLINE
     Every colour below resolves from the tokens style.css already defines
     (--bg --paper --paper2 --ink --ink2 --muted --line --line2 --accent
     --accent-ink --topbar --shadow) through color-mix(). Exactly two
     destination accents are introduced, and neither is a new hue on the
     platform:
       --kv-ai      = --accent          the site's own primary; AI Intelligence
                                        is the flagship destination
       --kv-studio  = #0E7C7B           the Engineering main-category accent,
                                        reused as a semantic echo exactly as
                                        Templates & Examples reuses its
                                        discipline hues (see config.php)
     Literals permitted, and the only ones used: #fff, #000, #ddd.

   ORGANISATION
     1  destination tokens
     2  section scaffolding (heading, rhythm, reveal)
     3  hero + the drafting-plane signature
     4  stat strip
     5  services
     6  industries
     7  platform cards (AI Intelligence · Design Studio)
     8  library + latest
     9  about + contact + CTA
    10  portal pages (experts, plans, capabilities)
    11  nav: the platform items
    12  responsive  (1024 / 860 / 560 / 390)
    13  print       (LAST, and ≥(0,2,0) — see the note there)
*/

/* ================================================== 1. destination tokens */
:root,
[data-theme="light"] {
  --kv-ai: var(--accent);
  --kv-studio: #0E7C7B;
}
[data-theme="dark"] {
  --kv-ai: var(--accent);
  --kv-studio: #3FB3B1;          /* lifted for AA on the dark paper */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kv-ai: var(--accent);
    --kv-studio: #3FB3B1;
  }
}

/* ============================================ 2. section scaffolding */
.kv-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

.kv-sec { padding: 68px 0; }
.kv-sec + .kv-sec { padding-top: 0; }
.kv-sec-alt {
  background: color-mix(in srgb, var(--paper) 62%, var(--bg));
  border-block: 1px solid var(--line2);
  padding: 68px 0;
  margin-top: 68px;
}
.kv-sec-alt + .kv-sec { padding-top: 68px; }

.kv-sh { max-width: 720px; margin: 0 0 34px; }
.kv-eyebrow {
  display: inline-block; font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 11px;
}
.kv-sh h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(24px, 3.1vw, 34px); line-height: 1.1;
  letter-spacing: .1px; margin: 0 0 10px; color: var(--ink);
}
.kv-sh p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink2); }

.kv-i { flex: none; vertical-align: middle; }

/* scroll reveal — opt-in, and inert unless kevos-home.js adds .kv-ready */
.kv-rv { opacity: 1; }
.kv-ready .kv-rv {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.kv-ready .kv-rv.kv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kv-ready .kv-rv { opacity: 1; transform: none; transition: none; }
}

/* ================================== 3. hero + the drafting-plane signature */
/* The signature: the hero sits on a drawing sheet. Fine and coarse grid,
   a real dimension line measuring the headline's column, corner registration
   ticks, and a title block. It is the vernacular of the work this site is
   about, drawn in tokens so it themes itself. */
.kv-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line2); }
.kv-hero-plane {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--line); pointer-events: none; z-index: 0;
}
.kv-hero-in {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; padding: 86px 22px 74px;
}
.kv-hero-copy { max-width: 760px; }
.kv-hero h1 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(32px, 5.4vw, 58px); line-height: 1.02;
  letter-spacing: -.4px; margin: 0 0 16px; color: var(--ink);
}
.kv-hero h1 .kv-rule {
  display: block; color: var(--accent);
}
.kv-lede {
  font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.58;
  color: var(--ink2); margin: 0 0 26px; max-width: 640px;
}
.kv-cta-row { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }

.kv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .4px;
  padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.kv-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.kv-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kv-btn-ghost {
  background: transparent; color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
}
.kv-btn-ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* homepage search — binds the ids assets/home.js already expects */
.kv-search {
  display: flex; align-items: center; gap: 10px; margin-top: 28px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 11px; padding: 12px 14px; max-width: 520px;
  color: var(--muted);
}
.kv-search:focus-within { border-color: var(--accent); }
.kv-search input {
  border: 0; outline: 0; background: transparent; width: 100%;
  font: inherit; font-size: 14.5px; color: var(--ink);
}
.kv-search button {
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; padding: 0; font: inherit;
}

/* ================================================== 4. stat strip */
.kv-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line2);
  border-block: 1px solid var(--line2);
}
.kv-stat { background: var(--bg); padding: 22px; text-align: center; }
.kv-stat b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: clamp(22px, 2.6vw, 30px);
  color: var(--ink); line-height: 1;
}
.kv-stat span {
  display: block; margin-top: 7px;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted);
}

/* ================================================== 5. services */
.kv-grid { display: grid; gap: 18px; }
.kv-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kv-grid-3 { grid-template-columns: repeat(3, 1fr); }

.kv-svc {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kv-svc:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.kv-svc-i {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 16px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.kv-svc h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 19px; margin: 0 0 9px; color: var(--ink);
}
.kv-svc p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.58; color: var(--ink2); }
.kv-svc ul { margin: 0; padding: 0; list-style: none; }
.kv-svc li {
  position: relative; padding-left: 18px; margin-bottom: 6px;
  font-size: 13.5px; color: var(--ink2);
}
.kv-svc li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ================================================== 6. industries */
.kv-ind {
  display: flex; gap: 14px; padding: 18px 0;
  border-bottom: 1px solid var(--line2);
}
.kv-ind:last-child { border-bottom: 0; }
.kv-ind-n {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: var(--muted); padding-top: 3px; flex: none; min-width: 34px;
}
.kv-ind h3 {
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 700;
  font-size: 16px; margin: 0 0 4px; color: var(--ink);
}
.kv-ind p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink2); }

/* ============================== 7. platform cards (AI · Design Studio) */
.kv-plat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kv-pcard {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 30px;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kv-pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kv-pcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--kv-c);
}
.kv-pcard-ai     { --kv-c: var(--kv-ai); }
.kv-pcard-studio { --kv-c: var(--kv-studio); }
.kv-pc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.kv-pc-i {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  color: var(--kv-c); background: color-mix(in srgb, var(--kv-c) 13%, transparent);
  flex: none;
}
.kv-pc-top h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 21px; margin: 0; color: var(--ink);
}
.kv-pcard > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink2); }
.kv-pc-list { margin: 0 0 22px; padding: 0; list-style: none; }
.kv-pc-list li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  font-size: 13.8px; color: var(--ink2);
}
.kv-pc-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--kv-c);
}
.kv-pc-foot { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.kv-pc-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 700;
  font-size: 13.5px; letter-spacing: .3px;
  padding: 10px 17px; border-radius: 9px;
  background: var(--kv-c); color: #fff;
  transition: filter .15s ease;
}
.kv-pc-btn:hover { filter: brightness(1.08); }
.kv-pc-btn2 {
  background: transparent; color: var(--kv-c);
  border: 1px solid color-mix(in srgb, var(--kv-c) 42%, transparent);
}
.kv-pc-btn2:hover { background: color-mix(in srgb, var(--kv-c) 9%, transparent); filter: none; }

.kv-tag {
  display: inline-block; font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; vertical-align: middle;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}
.kv-tag-on {
  background: color-mix(in srgb, var(--kv-studio) 15%, transparent);
  color: var(--kv-studio);
}

/* ================================================== 8. library + latest */
.kv-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kv-cat {
  display: block; background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--kv-c, var(--accent));
  border-radius: 12px; padding: 20px 22px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.kv-cat:hover { transform: translateX(2px); box-shadow: var(--shadow); }
.kv-cat h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 17.5px; margin: 0 0 6px; color: var(--ink);
}
.kv-cat p { margin: 0 0 12px; font-size: 13.6px; line-height: 1.55; color: var(--ink2); }
.kv-cat-n {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  color: var(--kv-c, var(--accent));
}
.kv-more { margin-top: 26px; }

/* ================================================== 9. about · contact · CTA */
.kv-about { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start; }
.kv-about p { font-size: 15.2px; line-height: 1.68; color: var(--ink2); margin: 0 0 15px; }
.kv-facts { margin: 0; padding: 0; list-style: none; }
.kv-facts li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line2);
  font-size: 14px;
}
.kv-facts li:last-child { border-bottom: 0; }
.kv-facts b {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 600; color: var(--muted);
}
.kv-facts span { color: var(--ink); text-align: right; }

.kv-contact {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 32px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; align-items: center;
}
.kv-contact h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(22px, 2.7vw, 30px); margin: 0 0 10px; color: var(--ink);
}
.kv-contact p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.kv-mail {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'IBM Plex Mono', monospace; font-size: 14.5px;
  color: var(--accent); word-break: break-all;
}

.kv-cta {
  text-align: center; background: var(--topbar); color: #fff;
  border-radius: 18px; padding: 52px 30px;
}
.kv-cta h2 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(24px, 3.4vw, 36px); margin: 0 0 12px; color: #fff;
}
.kv-cta p {
  margin: 0 auto 24px; max-width: 560px; font-size: 15.5px; line-height: 1.6;
  color: color-mix(in srgb, #fff 76%, transparent);
}
.kv-cta .kv-cta-row { justify-content: center; }
.kv-cta .kv-btn-ghost {
  color: #fff; border-color: color-mix(in srgb, #fff 34%, transparent);
}
.kv-cta .kv-btn-ghost:hover { background: color-mix(in srgb, #fff 12%, transparent); }

/* ============================ 10. portal pages: experts, plans, capabilities */
.kv-portal-hero { border-bottom: 1px solid var(--line2); }
.kv-portal-hero .kv-hero-in { padding-block: 70px 58px; }

.kv-experts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kv-exp {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; position: relative;
}
.kv-exp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.kv-exp-i {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  color: var(--kv-c); background: color-mix(in srgb, var(--kv-c) 14%, transparent);
}
.kv-exp h3 {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 17px; margin: 0; color: var(--ink);
}
.kv-exp > p { margin: 0 0 13px; font-size: 13.8px; line-height: 1.55; color: var(--ink2); }
.kv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kv-chip {
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 12px;
  padding: 4px 9px; border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink2);
}
.kv-exp-locked { opacity: .72; }
.kv-lock {
  position: absolute; top: 18px; right: 18px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .7px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.kv-note {
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  padding: 15px 18px; border-radius: 0 10px 10px 0;
  font-size: 14px; line-height: 1.6; color: var(--ink2); margin: 22px 0 0;
}

.kv-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 720px; }
.kv-plan {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px;
}
.kv-plan-pro { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); }
.kv-plan h3 {
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.kv-plan b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 30px; color: var(--ink); line-height: 1;
}
.kv-plan b span {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
  font-weight: 500; color: var(--muted);
}
.kv-plan ul { margin: 16px 0 0; padding: 0; list-style: none; }
.kv-plan li {
  padding: 7px 0; font-size: 13.8px; color: var(--ink2);
  border-bottom: 1px solid var(--line2);
}
.kv-plan li:last-child { border-bottom: 0; }

.kv-caps { margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kv-cap {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 11px; padding: 14px 16px;
}
.kv-cap-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none;
  background: var(--kv-studio);
}
.kv-cap-off .kv-cap-dot { background: transparent; border: 2px solid var(--muted); }
.kv-cap-off { opacity: .74; }
.kv-cap b {
  display: block; font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 700; font-size: 14.5px; color: var(--ink); margin-bottom: 2px;
}
.kv-cap span { font-size: 12.6px; color: var(--muted); line-height: 1.45; }

/* ============================================ 11. nav: the platform items */
/* The two platform destinations read as platform, not library: a hairline
   accent underline in the always-dark top bar. `.on` still wins because
   style.css sets its background and this rule sets none. */
.topnav a.plat {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 78%, transparent);
}
.topnav a.plat:hover { box-shadow: inset 0 -2px 0 var(--accent); }
.topnav a.plat.on { box-shadow: none; }

/* ================================================== 12. responsive */
@media (max-width: 1024px) {
  .kv-grid-3, .kv-cats, .kv-caps { grid-template-columns: repeat(2, 1fr); }
  .kv-about { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 860px) {
  .kv-hero-in { padding: 62px 22px 54px; }
  .kv-sec, .kv-sec-alt { padding: 52px 0; }
  .kv-sec-alt { margin-top: 52px; }
  .kv-sec-alt + .kv-sec { padding-top: 52px; }
  .kv-plat, .kv-experts, .kv-plans { grid-template-columns: 1fr; }
  .kv-contact { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
  .kv-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kv-grid-2, .kv-grid-3, .kv-cats, .kv-caps { grid-template-columns: 1fr; }
  .kv-hero-in { padding: 48px 18px 44px; }
  .kv-wrap { padding: 0 18px; }
  .kv-svc, .kv-pcard, .kv-plan { padding: 22px; }
  .kv-cta { padding: 40px 22px; border-radius: 14px; }
  .kv-cta-row { flex-direction: column; align-items: stretch; }
  .kv-btn { justify-content: center; }
}
@media (max-width: 390px) {
  .kv-stats { grid-template-columns: 1fr; }
  .kv-facts li { flex-direction: column; gap: 3px; }
  .kv-facts span { text-align: left; }
}

/* ================================================== 13. print  (LAST) */
/* SPECIFICITY NOTE — this block must be read alongside the OS-dark fallback
   in style.css, `@media (prefers-color-scheme: dark) :root:not([data-theme=
   "light"])`, which carries (0,2,0). A bare `:root` print block is (0,1,0)
   and LOSES to it, so printing from a dark-preference OS bleeds a dark page.
   The `:not([data-print-force])` guard raises these selectors to (0,2,0) and
   this block is last in source order, so it wins the tie. Do not simplify
   these selectors back to `:root`. */
@media print {
  :root:not([data-print-force]),
  [data-theme="dark"]:not([data-print-force]) {
    --bg: #fff; --paper: #fff; --paper2: #fff;
    --ink: #000; --ink2: #000; --muted: #000;
    --line: #ddd; --line2: #ddd;
    --topbar: #fff; --topbar-ink: #000;
    --shadow: none;
  }
  html:not([data-print-force]) body,
  body:not([data-print-force]) { background: #fff; color: #000; }

  .kv-hero-plane, .kv-cta, .kv-search, .kv-cta-row, .kv-pc-foot { display: none; }

  /* Generated card covers are six solid blocks of category accent. On screen
     they carry the section's identity; on paper they carry nothing, waste
     ink, and drag the page's mean luminance below the dark-bleed threshold
     (measured: 242.5 with them, 249.6 without). Hidden here rather than in
     style.css, so this applies ONLY to pages that load kevos-home.css — the
     category, search and tag archives print exactly as they did before v5. */
  .pcard-cover { display: none; }
  .pcard { border: 1px solid #ddd; break-inside: avoid; }

  .kv-sec, .kv-sec-alt { padding: 18px 0; margin-top: 0; break-inside: avoid; }
  .kv-sec-alt { background: none; }
  .kv-svc, .kv-pcard, .kv-exp, .kv-plan, .kv-cap, .kv-cat, .kv-contact {
    border-color: #ddd; background: #fff; box-shadow: none;
    break-inside: avoid; transform: none;
  }
  .kv-grid-2, .kv-grid-3, .kv-plat, .kv-experts, .kv-plans, .kv-cats, .kv-caps {
    grid-template-columns: repeat(2, 1fr);
  }
  .kv-ready .kv-rv { opacity: 1; transform: none; }
}