/* Self-hosted variable fonts. Version-stamped filenames: bump the stamp to ship an update,
   because vercel.json caches .woff2 immutably for a year. Unicode ranges match what
   Google Fonts served, so glyph coverage is unchanged. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext-v1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext-v1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-v1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* usekaryo.com — shared design system (Oct 2026 rebuild).
   The layout, type scale, spacing, motion and header are carried over from
   usekenro.com so the two TUD brands read as one family: same Onyx canvas,
   same mega-menu, same section rhythm. Only the accent differs: Karyo blue
   (#2f6feb) where Kenro has saffron. Kenro's logo, film and photos are not
   used; Karyo's hero is its own still.

   Reveal states are opt-in: they only apply under html.js-reveal, which the
   inline script in <head> sets and karyo.js confirms. If the script never
   runs, nothing on the page is hidden. */

:root {
  color-scheme: dark;
}
html,
body {
  margin: 0;
  padding: 0;
  background: #000000;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══ Tokens ═══════════════════════════════════════════════════════════ */
.ks-page {
  --ks-bg: #000000;
  --ks-surface: #070708;
  --ks-elevated: #0c0c0d;
  --ks-soft: rgba(255, 255, 255, 0.025);
  --ks-line: #1f1f22;
  --ks-line-strong: #2e2e33;
  --ks-text: #ffffff;
  --ks-muted: #b8b8b8;
  --ks-faint: #8c8c8c; /* 5.8:1 on the canvas */
  --ks-brand: #2f6feb; /* fill: white text 4.6:1 */
  --ks-brand-light: #6ea1ff; /* text shade on black: 7.6:1 */
  --ks-brand-cta: #2f6feb;
  --ks-brand-deep: #2156c4; /* hover/press fill: white text 6.4:1 */
  --ks-brand-soft: rgba(47, 111, 235, 0.1);
  --ks-brand-rgb: 47, 111, 235;
  --ks-gold: #5b8ff9; /* eyebrows: the accent at a readable weight, 6.2:1 */
  --ks-danger: #c75d5d;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 1000ms;
  --ku-gutter: 28px;
  position: relative;
  min-height: 100vh;
  background: var(--ks-bg);
  color: var(--ks-text);
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    "Segoe UI",
    sans-serif;
  overflow-x: hidden;
  overflow-x: clip;
}
.ks-page * {
  box-sizing: border-box;
}
.ks-page a {
  color: inherit;
}
.ks-page :focus-visible {
  outline: 2px solid var(--ks-brand-light);
  outline-offset: 3px;
}
.ks-page :focus:not(:focus-visible) {
  outline: none;
}
.ks-page img {
  max-width: 100%;
  display: block;
}
.ks-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ═══ Type and layout ══════════════════════════════════════════════════ */
.ks-shell {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
}
.ks-section {
  padding: 84px 0;
}
.ks-section-head {
  max-width: 760px;
  margin: 0 0 34px;
}
.ks-eyebrow {
  margin: 0 0 10px;
  color: var(--ks-gold);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ks-page h1,
.ks-page h2,
.ks-page h3,
.ks-page p {
  margin-top: 0;
}
.ks-page h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  max-width: 760px;
}
.ks-page h2 {
  font-size: clamp(30px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}
.ks-page h1,
.ks-page h2 {
  text-wrap: balance;
}
.ks-page h3 {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.ks-lede {
  color: var(--ks-muted);
  font-size: 16px;
  line-height: 1.62;
  max-width: 640px;
}
.ku-lede {
  color: var(--ks-muted);
  line-height: 1.65;
}
.ks-small {
  color: var(--ks-faint);
  font-size: 13px;
  line-height: 1.5;
}
.ks-visually-hidden,
.ks-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full-bleed width, homepage only (Kenro's .ku-page): one gutter token drives
   shell, nav and footer, so everything hangs off the same left edge. Inner
   pages keep the 1180px column their copy is measured for. */
.ku-page {
  --ku-gutter: clamp(20px, 4vw, 80px);
}
.ku-page .ks-shell {
  width: 100%;
  max-width: none;
  padding-inline: var(--ku-gutter);
}
.ku-page .ks-nav,
.ku-page .ks-footer {
  padding-inline: var(--ku-gutter);
}
.ku-page .ks-section-head {
  max-width: 940px;
}
.ku-page .ks-footer-main,
.ku-page .ks-footer-umbrella,
.ku-page .ks-footer-bottom {
  width: 100%;
  max-width: none;
}

/* Hairline between bands, and anchors that land under the fixed chrome. */
.ks-page main > .ks-section + .ks-section {
  border-top: 1px solid var(--ks-line);
}
.ks-page main > .ks-section {
  scroll-margin-top: 78px;
}
html {
  scroll-padding-top: 78px;
  scroll-behavior: smooth;
}

/* ═══ Header bar ═══════════════════════════════════════════════════════ */
.ks-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid transparent;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    backdrop-filter 180ms ease;
}
.ks-nav.is-scrolled {
  background: rgba(0, 0, 0, 0.88);
  border-bottom-color: var(--ks-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.ks-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ks-text);
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
}
.ks-logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ks-line);
  border-radius: 8px;
  background: #000;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ks-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ks-nav .ks-nav-cta {
  display: inline-flex;
  margin-left: auto;
  padding: 0 14px;
  font-size: 13px;
}
.ks-menu {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--ks-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  place-content: center;
  gap: 4px;
  cursor: pointer;
}
.ks-menu span {
  width: 18px;
  height: 2px;
  background: var(--ks-text);
  display: block;
  transition:
    transform 260ms var(--ease),
    opacity 180ms ease;
}
.ks-menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.ks-menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.ks-menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
@media (min-width: 920px) {
  .ks-nav {
    padding: 14px 28px;
  }
  .ks-nav .ks-nav-cta {
    padding: 0 17px;
    font-size: 14px;
  }
}

/* ═══ Buttons ══════════════════════════════════════════════════════════ */
.ks-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  /* Magnetic offset lives in custom properties, so :active composes with it. */
  transform: translate(var(--mx-btn, 0px), var(--my-btn, 0px));
  transition:
    transform 500ms var(--ease),
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 300ms ease;
}
.ks-btn:active {
  transform: scale(0.97) translate(var(--mx-btn, 0px), var(--my-btn, 0px));
}
.ks-btn-primary {
  background: var(--ks-brand-cta);
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(var(--ks-brand-rgb), 0.2);
}
.ks-btn-primary:hover {
  background: var(--ks-brand-deep);
  box-shadow: 0 18px 44px rgba(var(--ks-brand-rgb), 0.32);
}
.ks-btn-secondary {
  background: rgba(255, 255, 255, 0.045);
  color: var(--ks-text);
  border-color: var(--ks-line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ks-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.075);
}
.ks-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ═══ Footer ═══════════════════════════════════════════════════════════ */
.ks-footer {
  border-top: 1px solid var(--ks-line);
  padding: 38px 16px 24px;
  background: #0b0b0c;
}
.ks-footer-main {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
.ks-footer-brand {
  margin-bottom: 14px;
}
.ks-footer p {
  color: var(--ks-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  max-width: 360px;
}
.ks-footer-entity,
.ks-footer p.ks-footer-entity {
  color: var(--ks-faint);
  font-size: 13px;
}
.ks-footer-entity a {
  color: var(--ks-muted);
  text-decoration: none;
}
.ks-footer-entity a:hover {
  color: var(--ks-text);
}
.ks-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ks-page .ks-footer-links .ks-footer-h {
  color: var(--ks-text);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  max-width: none;
}
.ks-footer-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ks-muted);
  text-decoration: none;
  font-size: 14px;
  margin: 0;
  overflow-wrap: anywhere;
}
.ks-footer-links a:hover,
.ks-footer-links a:focus-visible,
.ks-footer-umbrella a:focus-visible {
  color: var(--ks-text);
}
.ks-footer-umbrella {
  width: min(100%, 1120px);
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--ks-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ks-faint);
  font-size: 13px;
}
.ks-footer-umbrella a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ks-muted);
  text-decoration: none;
}
.ks-footer-umbrella a:hover {
  color: var(--ks-text);
}
.ks-footer-bottom {
  width: min(100%, 1120px);
  margin: 12px auto 0;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ks-faint);
  font-size: 12px;
}
@media (min-width: 720px) {
  .ks-page h1 {
    font-size: 64px;
  }
  .ks-section {
    padding: 76px 0;
  }
  .ks-footer-main {
    grid-template-columns: 1fr 1.3fr;
  }
  .ks-footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ks-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Skip link: off-screen until focused. */
.ks-page .ks-skip {
  position: absolute;
  top: 10px;
  left: var(--ku-gutter);
  z-index: 50;
  padding: 10px 14px;
  background: var(--ks-brand-cta);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-300%);
}
.ks-page .ks-skip:focus-visible,
.ks-page .ks-skip:focus {
  transform: none;
}

/* ═══ Backdrop and hero photo ══════════════════════════════════════════ */
.ku-backdrop {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(126vh, 1320px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* The hero still: the counter of a shop that still runs on registers. It
   sits where Kenro's film sits, fading into the canvas before the content. */
.ku-film {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 64%,
    transparent 94%
  );
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 94%);
}
/* Five trade scenes stacked; karyo.js moves .is-on along them for a slow crossfade. */
.ku-film picture {
  opacity: 0;
  transition: opacity 1.6s ease;
}
.ku-film picture.is-on {
  opacity: 1;
}
.ku-film picture.is-on img {
  animation: ku-drift 7s ease-out both;
}
@keyframes ku-drift {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}
.ku-film picture,
.ku-film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.ku-film img {
  object-fit: cover;
  object-position: 60% 40%;
  /* The still is a dim shop interior; lift it so the floor reads as a working
     day, the way Kenro's hero does. The scrim below keeps the type at AA. */
  filter: brightness(1.55) saturate(1.08) contrast(1.04);
}
/* Scrim: dark on the left where the type sits, the shop showing on the right,
   and dark again at the foot so the hero hands over to the canvas. */
.ku-film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.42) 50%,
      rgba(0, 0, 0, 0.06) 88%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0) 22%,
      rgba(0, 0, 0, 0.24) 72%,
      rgba(0, 0, 0, 0.88) 100%
    ),
    radial-gradient(
      120% 78% at 62% 34%,
      transparent 36%,
      rgba(0, 0, 0, 0.2) 100%
    );
}
@media (max-width: 860px) {
  .ku-film img {
    object-position: 50% 50%;
    filter: brightness(1.7) saturate(1.08) contrast(1.04);
  }
  .ku-film::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.28) 18%,
      rgba(0, 0, 0, 0.46) 36%,
      rgba(0, 0, 0, 0.76) 70%,
      rgba(0, 0, 0, 0.96) 100%
    );
  }
  .ku-hero p.ku-lede {
    color: #d4d4d4;
  }
}
.ku-backdrop-grid {
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(
    ellipse 85% 55% at 50% 0%,
    #000 10%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 85% 55% at 50% 0%,
    #000 10%,
    transparent 72%
  );
  animation: ku-drift 48s linear infinite;
}
.ku-backdrop-aura {
  position: absolute;
  top: -22%;
  left: 50%;
  width: min(1180px, 130vw);
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--ks-brand-rgb), 0.2) 0%,
    rgba(var(--ks-brand-rgb), 0.09) 34%,
    rgba(var(--ks-brand-rgb), 0.025) 56%,
    transparent 74%
  );
  filter: blur(70px);
  animation: ku-breathe 9s ease-in-out infinite;
}
.ku-backdrop-aura.is-low {
  top: auto;
  bottom: -30%;
  left: 18%;
  width: min(760px, 90vw);
  height: 460px;
  opacity: 0.5;
  animation-delay: -4s;
}
/* With the photo in place, the grid and aura sit behind it and only show
   where the still has faded out. */
.ku-film ~ .ku-backdrop-grid,
.ku-film ~ .ku-backdrop-aura {
  opacity: 0.55;
}
/* Grain: what makes a black page feel like paper instead of a void. */
.ku-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes ku-drift {
  to {
    transform: translate3d(76px, 76px, 0);
  }
}
@keyframes ku-breathe {
  0%,
  100% {
    opacity: 0.82;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}
/* Content sits above the backdrop; the fixed chrome keeps its own position. */
.ks-page
  > *:not(.ku-backdrop):not(.kn-bar):not(.kn-scrim):not(.kn-sticky):not(
    .ku-progress
  ):not(.ks-skip) {
  position: relative;
  z-index: 1;
}
@media (max-width: 860px) {
  .ku-backdrop-grid,
  .ku-backdrop-aura {
    animation: none;
  }
}

/* ═══ Homepage hero ════════════════════════════════════════════════════ */
.ku-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 128px 0 56px;
}
.ku-hero h1 {
  margin: 18px 0 0;
  font-size: clamp(38px, 6.6vw, 92px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 0.98;
  max-width: 16ch;
}
.ku-hero .ku-lede {
  margin: 30px 0 0;
  max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--ks-muted);
}
.ku-hero-cta {
  margin-top: 34px;
}
@media (max-width: 860px) {
  .ku-hero {
    padding: 104px 0 36px;
  }
}
@media (max-width: 560px) {
  .ku-hero h1 {
    font-size: clamp(32px, 10.4vw, 42px);
    line-height: 1.04;
    max-width: 100%;
  }
}
/* The trades Karyo serves, as quiet chips under the lede. */
.ku-fields {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ku-fields a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--ks-line-strong);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ks-muted);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    color 200ms ease,
    border-color 200ms ease;
}
.ku-fields a:hover,
.ku-fields a:focus-visible,
.ku-fields a.is-on {
  color: var(--ks-text);
  border-color: var(--ks-brand);
}
/* Scroll cue at the foot of the hero. */
.ku-cue {
  position: absolute;
  left: var(--ku-gutter);
  bottom: 22px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-faint);
}
.ku-cue::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--ks-line-strong);
  transform-origin: left;
  animation: ku-cue 2.2s var(--ease) infinite;
}
@keyframes ku-cue {
  0% {
    transform: scaleX(0);
  }
  55% {
    transform: scaleX(1);
    transform-origin: left;
  }
  56% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
@media (min-width: 900px) {
  .ku-cue {
    display: inline-flex;
  }
}
@media (min-width: 1100px) {
  .ku-cue {
    left: auto;
    right: var(--ku-gutter);
    flex-direction: row-reverse;
  }
}

/* ═══ Homepage bands ═══════════════════════════════════════════════════ */
/* About: the explanation beside its heading, then the promises as a wall. */
.ku-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 28px 64px;
  align-items: start;
}
.ku-about-text p {
  margin: 0 0 16px;
  color: var(--ks-muted);
  font-size: 17px;
  line-height: 1.65;
  max-width: 60ch;
}
.ks-page .ku-about-text p.ke-statement {
  margin: 8px 0 0;
  color: var(--ks-text);
  font-weight: 700;
}

/* Card wall: hairline-divided cells on the canvas, a blue rule drawing in
   along the top of the one under the pointer. Kenro's .ku-carries. */
.ku-carries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--ks-line);
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  overflow: hidden;
}
.ku-carry {
  position: relative;
  flex: 1 1 340px;
  background: var(--ks-bg);
  padding: 26px 26px 28px;
  overflow: hidden;
}
.ks-page .ku-carry h3 {
  display: block;
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ks-text);
}
.ks-page .ku-carry p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ks-muted);
}
.ku-carry::before,
.ke-module::before,
.ku-svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--ks-brand-rgb), 0.12),
    transparent 68%
  );
  transition: opacity 220ms ease;
}
.ku-carry::after,
.ke-module::after,
.ku-svc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--ks-brand),
    rgba(var(--ks-brand-rgb), 0)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.ku-carry:hover::before,
.ke-module:hover::before,
.ku-svc:hover::before,
.ku-svc:focus-within::before {
  opacity: 1;
}
.ku-carry:hover::after,
.ku-carry:focus-within::after,
.ke-module:hover::after,
.ke-module:focus-within::after,
.ku-svc:hover::after,
.ku-svc:focus-within::after {
  transform: scaleX(1);
}
.ku-carry > *,
.ke-module > *,
.ku-svc > * {
  position: relative;
  z-index: 1;
}

/* What we build: the five services, a lifted band like Kenro's systems. */
#services {
  background: linear-gradient(180deg, #0c0c0e 0%, #09090b 100%);
}
.ku-services {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--ks-line);
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  overflow: hidden;
}
.ku-svc {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 30px;
  background: #0a0a0c;
  overflow: hidden;
}
.ku-svc:nth-child(4),
.ku-svc:nth-child(5) {
  grid-column: span 3;
}
.ku-svc svg {
  width: 26px;
  height: 26px;
  color: var(--ks-brand-light);
  margin-bottom: 22px;
}
.ks-page .ku-svc h3 {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.ku-svc .ku-svc-lead {
  margin: 12px 0 0;
  color: var(--ks-text);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
}
.ku-svc p {
  margin: 10px 0 0;
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.62;
}
.ku-svc .ku-go {
  margin-top: auto;
  padding-top: 22px;
}
.ku-go a,
a.ku-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ks-brand-light);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
.ku-go i {
  font-style: normal;
  display: inline-block;
  transition: transform 420ms var(--ease);
}
.ku-go a:hover,
.ku-go a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ku-go a:hover i,
.ku-go a:focus-visible i {
  transform: translateX(4px);
}
@media (max-width: 1000px) {
  .ku-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ku-svc,
  .ku-svc:nth-child(4) {
    grid-column: span 1;
  }
  .ku-svc:nth-child(5) {
    grid-column: span 2;
  }
}
@media (max-width: 620px) {
  .ku-services {
    grid-template-columns: minmax(0, 1fr);
  }
  .ku-svc,
  .ku-svc:nth-child(4),
  .ku-svc:nth-child(5) {
    grid-column: auto;
  }
}

/* Industries: a wall of cards, each with its way in. */
.ku-trades .ku-carry {
  flex-basis: 300px;
  display: flex;
  flex-direction: column;
}
.ku-trades .ku-go {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.ku-trades .ku-go a {
  font-size: 13.5px;
}

/* A one-line note under a band. */
.ku-note {
  margin: 22px 0 0;
  color: var(--ks-faint);
  font-size: 14px;
  line-height: 1.6;
  max-width: 80ch;
}

/* Our work: three case studies as linked cards. */
.ku-work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* One case study: let it span the row instead of sitting in a third. */
.ku-work--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
.ku-work a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 26px 26px;
  border: 1px solid var(--ks-line);
  border-radius: 16px;
  background: var(--ks-surface);
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 220ms ease,
    background 220ms ease;
}
.ku-work a:hover,
.ku-work a:focus-visible {
  border-color: rgba(var(--ks-brand-rgb), 0.45);
  background: #0b0d12;
}
.ku-work small {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-brand-light);
}
.ku-work b {
  display: block;
  margin-top: 12px;
  color: var(--ks-text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ku-work span {
  display: block;
  margin-top: 10px;
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.ku-work em {
  margin-top: auto;
  padding-top: 20px;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--ks-brand-light);
}
.ku-work em i {
  font-style: normal;
  display: inline-block;
  transition: transform 420ms var(--ease);
}
.ku-work a:hover em i,
.ku-work a:focus-visible em i {
  transform: translateX(4px);
}
@media (max-width: 900px) {
  .ku-work {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Guides: a hairline list, one row per guide. */
.ku-guides {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ks-line);
}
.ku-guides li {
  border-bottom: 1px solid var(--ks-line);
}
.ku-guides a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: 6px 28px;
  align-items: baseline;
  padding: 18px 6px;
  text-decoration: none;
  transition: background 200ms ease;
}
.ku-guides a:hover,
.ku-guides a:focus-visible {
  background: rgba(255, 255, 255, 0.03);
}
.ku-guides b {
  color: var(--ks-text);
  font-size: 16.5px;
  font-weight: 650;
}
.ku-guides span {
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.ku-guides i {
  font-style: normal;
  color: var(--ks-brand-light);
  transition: transform 360ms var(--ease);
}
.ku-guides a:hover i,
.ku-guides a:focus-visible i {
  transform: translateX(4px);
}
@media (max-width: 860px) {
  .ku-about-grid {
    grid-template-columns: 1fr;
  }
  .ku-guides a {
    grid-template-columns: 1fr auto;
  }
  .ku-guides span {
    grid-column: 1 / -1;
  }
}

/* Closing band: copy left, action right, warmed with the accent. */
#contact {
  background:
    radial-gradient(
      90% 70% at 15% 0%,
      rgba(var(--ks-brand-rgb), 0.1),
      transparent 60%
    ),
    #08090c;
}
.ks-page main > #contact.ks-section {
  border-top: 1px solid rgba(var(--ks-brand-rgb), 0.2);
}
.ku-cta,
.ke-band {
  display: grid;
  gap: 22px;
  align-items: center;
  padding: 32px 26px;
  border: 1px solid var(--ks-line);
  border-radius: 20px;
  background:
    radial-gradient(
      680px circle at 100% 0%,
      rgba(var(--ks-brand-rgb), 0.11),
      transparent 70%
    ),
    var(--ks-elevated);
}
.ku-cta h2,
.ke-band h2 {
  margin-bottom: 10px;
}
.ku-cta .ks-lede,
.ke-band .ks-lede {
  margin: 0;
  max-width: 74ch;
}
.ku-channels {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ku-channels li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--ks-muted);
  font-size: 14px;
  line-height: 1.5;
}
.ku-channels li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ks-brand-light);
  transform: translateY(-2px);
}
.ku-cta-side {
  display: grid;
  gap: 18px;
}
.ku-cta-side .ks-btn {
  justify-self: start;
}
@media (min-width: 900px) {
  .ku-cta,
  .ke-band {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 48px;
    padding: 40px 44px;
  }
  .ku-cta .ks-btn,
  .ke-band .ks-btn-primary {
    min-height: 50px;
    padding: 0 24px;
    font-size: 15px;
  }
}

/* ═══ FAQ accordion (Kenro's .ku-faq) ══════════════════════════════════
   Native <details>, so it works with scripts off; the shared name keeps one
   open at a time where supported, and ::details-content animates the
   height where supported. */
.ku-faq {
  interpolate-size: allow-keywords;
}
.ku-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 56px;
  align-items: start;
}
.ku-faq-head .ks-btn {
  margin-top: 22px;
}
.ku-faq-list {
  border-top: 1px solid var(--ks-line);
}
.ku-q {
  border-bottom: 1px solid var(--ks-line);
}
.ku-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  color: var(--ks-text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 220ms ease;
}
.ku-q summary::-webkit-details-marker {
  display: none;
}
.ku-q summary:hover,
.ku-q[open] summary {
  color: var(--ks-brand-light);
}
.ku-q summary i {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.ku-q summary i::before,
.ku-q summary i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 420ms var(--ease);
}
.ku-q summary i::after {
  transform: rotate(90deg);
}
.ku-q[open] summary i::after {
  transform: rotate(0deg);
}
.ku-q::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 460ms var(--ease),
    content-visibility 460ms allow-discrete;
}
.ku-q[open]::details-content {
  block-size: auto;
}
.ku-a p {
  margin: 0;
  padding: 0 44px 22px 4px;
  color: var(--ks-muted);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 68ch;
}
.ku-a a {
  color: var(--ks-brand-light);
  text-underline-offset: 3px;
}
@media (max-width: 860px) {
  .ku-faq-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ku-q summary {
    font-size: 16px;
  }
  .ku-a p {
    padding-right: 8px;
  }
}

/* ═══ Motion ═══════════════════════════════════════════════════════════
   One easing curve everywhere. Reveals rise rather than fade; children of a
   [data-stagger] group arrive in sequence; the homepage headline arrives a
   word at a time. Everything is gated by html.js-reveal and collapses to a
   plain cut under reduced motion. */
.js-reveal .ks-section,
.js-reveal .ks-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.js-reveal .ks-section.is-visible,
.js-reveal .ks-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js-reveal [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 900ms var(--ease) calc(var(--i, 0) * 85ms),
    transform 900ms var(--ease) calc(var(--i, 0) * 85ms);
}
.js-reveal [data-stagger].is-visible > *,
.js-reveal .ks-section.is-visible:not([data-hero]) [data-stagger] > *,
.js-reveal [data-hero].is-ready [data-stagger] > * {
  opacity: 1;
  transform: none;
}
.ku-word {
  display: inline-block;
  white-space: pre;
}
.js-reveal [data-hero] .ks-eyebrow,
.js-reveal [data-hero] .ku-word {
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(8px);
}
.js-reveal [data-hero] .ku-lede,
.js-reveal [data-hero] .ku-hero-cta {
  opacity: 0;
  transform: translateY(0.55em);
}
.js-reveal [data-hero] h1,
.js-reveal [data-hero] .ku-cue {
  opacity: 0;
}
.js-reveal [data-hero].is-ready h1 {
  opacity: 1;
}
.js-reveal [data-hero].is-ready .ks-eyebrow {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 900ms var(--ease) 80ms,
    transform 900ms var(--ease) 80ms,
    filter 900ms var(--ease) 80ms;
}
.js-reveal [data-hero].is-ready .ku-word {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 1100ms var(--ease) calc(180ms + var(--i, 0) * 62ms),
    transform 1100ms var(--ease) calc(180ms + var(--i, 0) * 62ms),
    filter 1100ms var(--ease) calc(180ms + var(--i, 0) * 62ms);
}
.js-reveal [data-hero].is-ready .ku-lede {
  opacity: 1;
  transform: none;
  transition:
    opacity 1000ms var(--ease) 820ms,
    transform 1000ms var(--ease) 820ms;
}
.js-reveal [data-hero].is-ready .ku-hero-cta {
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms var(--ease) 900ms,
    transform 900ms var(--ease) 900ms;
}
.js-reveal [data-hero].is-ready .ku-cue {
  opacity: 1;
  transition: opacity 900ms var(--ease) 1500ms;
}
.js-reveal [data-hero] [data-stagger] > * {
  transition-delay: calc(1000ms + var(--i, 0) * 70ms);
}
/* A return visit gets a short entrance instead of the full sequence. */
.js-reveal [data-hero].is-ready.is-quick .ks-eyebrow,
.js-reveal [data-hero].is-ready.is-quick .ku-word,
.js-reveal [data-hero].is-ready.is-quick .ku-lede,
.js-reveal [data-hero].is-ready.is-quick .ku-hero-cta {
  transition-duration: 500ms;
  transition-delay: 0ms;
}
.js-reveal [data-hero].is-quick [data-stagger] > * {
  transition-duration: 500ms;
  transition-delay: calc(120ms + var(--i, 0) * 40ms);
}

/* Scroll progress, one hairline under the chrome. */
.ku-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 41;
  background: linear-gradient(90deg, var(--ks-brand-light), var(--ks-brand));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js-reveal .ks-section,
  .js-reveal .ks-reveal,
  .js-reveal [data-stagger] > *,
  .ku-word,
  .js-reveal [data-hero] h1,
  .js-reveal [data-hero] .ks-eyebrow,
  .js-reveal [data-hero] .ku-lede,
  .js-reveal [data-hero] .ku-hero-cta,
  .js-reveal [data-hero] .ku-cue,
  .ku-cue {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .ku-cue::after,
  .ku-backdrop-grid,
  .ku-backdrop-aura {
    animation: none !important;
  }
  .ku-backdrop::after {
    display: none;
  }
  .ks-btn,
  .ks-menu span,
  .ku-carry::before,
  .ku-carry::after,
  .ke-module::before,
  .ke-module::after,
  .ku-svc::before,
  .ku-svc::after,
  .ku-fields a,
  .ku-guides i,
  .ku-go i,
  .ku-work a,
  .ku-work em i,
  .ku-progress,
  .ku-q::details-content,
  .ku-q summary i::before,
  .ku-q summary i::after {
    transition: none !important;
  }
  .ks-btn {
    transform: none !important;
  }
}

/* ═══ Header and mega-menu (Kenro's partials/nav.html) ═════════════════
   Desktop (>= 1000px): the triggers open floating panels over one shared
   stage that morphs its height between them, and panels slide in from the
   side you travelled from. Below 1000px the same markup is a full-height
   accordion sheet. Behaviour: initMegaMenu in karyo.js. */
@property --kn-glow-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 18%;
}
.kn-bar {
  --kn-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --kn-line: var(--ks-line);
  --kn-line-strong: var(--ks-line-strong);
  --kn-text: var(--ks-text);
  --kn-muted: var(--ks-muted);
  --kn-faint: var(--ks-faint);
  --kn-brand: var(--ks-gold);
  --kn-brand-light: var(--ks-brand-light);
  --kn-gutter: var(--ku-gutter, 28px);
}
.ks-page > .kn-bar {
  position: fixed;
  z-index: 40;
}
.ks-page > .kn-scrim {
  position: fixed;
  z-index: 39;
}
.kn-bar.kn-is-open,
.kn-bar.kn-sheet-open {
  background: rgba(0, 0, 0, 0.92);
  border-bottom-color: var(--kn-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.kn-list,
.kn-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kn-trigger {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--kn-muted);
}
.kn-chev {
  width: 10px;
  height: 6px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms var(--kn-ease);
}
.kn-trigger[aria-expanded="true"] .kn-chev {
  transform: rotate(180deg);
}
.kn-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--kn-brand);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kn-links a {
  display: grid;
  gap: 3px;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 220ms ease;
}
.kn-t {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--kn-text);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.3;
  transition: color 220ms ease;
}
.kn-t::after {
  content: "→";
  font-weight: 500;
  color: var(--kn-brand-light);
  opacity: 0;
  transform: translateX(-5px);
  transition:
    opacity 220ms ease,
    transform 360ms var(--kn-ease);
}
.kn-d {
  color: var(--kn-faint);
  font-size: 13px;
  line-height: 1.45;
}
.kn-links a:hover,
.kn-links a:focus-visible {
  background: rgba(255, 255, 255, 0.045);
}
.kn-links a:hover .kn-t,
.kn-links a:focus-visible .kn-t,
.kn-links a[aria-current="page"] .kn-t {
  color: var(--kn-brand-light);
}
.kn-links a:hover .kn-t::after,
.kn-links a:focus-visible .kn-t::after {
  opacity: 1;
  transform: none;
}
.kn-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--kn-brand-light);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.kn-more i {
  font-style: normal;
  transition: transform 360ms var(--kn-ease);
}
.kn-more:hover i,
.kn-more:focus-visible i {
  transform: translateX(4px);
}
.kn-group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--kn-text);
  font-size: 12.5px;
  font-weight: 750;
}
.kn-group-h::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kn-brand-light);
  box-shadow: 0 0 0 3px rgba(var(--ks-brand-rgb), 0.22);
}
.kn-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  border: 1px solid var(--kn-line);
  border-radius: 14px;
  background:
    radial-gradient(
      260px 140px at 100% 0%,
      rgba(var(--ks-brand-rgb), 0.14),
      transparent 70%
    ),
    rgba(255, 255, 255, 0.02);
}
.kn-card .kn-eyebrow {
  margin: 0;
}
.kn-card-title {
  margin: 0;
  color: var(--kn-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.kn-card .kn-more {
  margin: 2px 0 0;
}
.kn-contact {
  display: grid;
  gap: 2px;
  margin: 0;
}
.kn-contact a {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  text-decoration: none;
}
.kn-contact .kn-cl {
  font-weight: 700;
  color: var(--kn-text);
  font-size: 14px;
}
.kn-contact span:not(.kn-cl) {
  color: var(--kn-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
}
.kn-contact a:hover span:not(.kn-cl),
.kn-contact a:focus-visible span:not(.kn-cl) {
  color: var(--kn-brand-light);
}
.kn-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--kn-line);
  color: var(--kn-faint);
  font-size: 13px;
}
.kn-legal a {
  color: var(--kn-faint);
  text-decoration: none;
}
.kn-legal a:hover,
.kn-legal a:focus-visible {
  color: var(--kn-text);
}
.kn-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--kn-line);
  color: var(--kn-faint);
  font-size: 13px;
}
.kn-strip b {
  color: var(--kn-text);
  font-weight: 700;
}
.kn-strip .kn-more {
  margin: 0 0 0 auto;
}
.kn-sheet-foot {
  display: none;
}
/* The sticky email bar on phones and tablets: the same component as Kenro's
   sticky bar, with email as the only channel. On a desktop the bar's own
   button is always in reach. */
.kn-sticky {
  display: none;
}
@media (max-width: 979.98px) {
  .ks-page > .kn-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 38;
    display: grid;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.92);
    border-top: 1px solid var(--ks-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .kn-sticky .ks-btn {
    min-height: 46px;
    font-size: 13.5px;
    padding: 0 10px;
  }
  .ks-page .ks-footer {
    padding-bottom: calc(24px + 68px + env(safe-area-inset-bottom, 0px));
  }
  .kn-bar .ks-nav-cta {
    display: none;
  }
}
@media (min-width: 1000px) {
  .kn-bar .kn-toggle {
    display: none;
  }
  .kn-bar .ks-nav-cta {
    margin-left: 0;
  }
  .kn {
    display: block;
    margin-inline: auto;
  }
  .kn-list {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .kn-trigger {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    transition: color 200ms ease;
  }
  .kn-trigger:hover,
  .kn-trigger[aria-expanded="true"] {
    color: var(--kn-text);
  }
  .kn-pill {
    position: absolute;
    left: 0;
    top: var(--kn-py, 0px);
    width: var(--kn-pw, 0px);
    height: var(--kn-ph, 0px);
    transform: translateX(var(--kn-px, 0px));
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 460ms var(--kn-ease),
      width 460ms var(--kn-ease),
      opacity 180ms ease;
  }
  .kn-pill.is-on {
    opacity: 1;
  }
  .kn-pill.is-instant {
    transition: opacity 180ms ease;
  }
  .kn-stage,
  .kn-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--kn-gutter);
    right: var(--kn-gutter);
    max-width: 1240px;
    margin-inline: auto;
  }
  .kn-stage {
    z-index: 1;
    height: var(--kn-h, 0px);
    border: 1px solid var(--kn-line);
    border-radius: 18px;
    background:
      radial-gradient(
        560px 170px at var(--kn-glow-x) 0%,
        rgba(var(--ks-brand-rgb), 0.12),
        transparent 72%
      ),
      linear-gradient(180deg, #0d0d0f, #080809);
    box-shadow:
      0 40px 90px rgba(0, 0, 0, 0.62),
      0 12px 28px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.985);
    transform-origin: 50% 0;
    transition:
      opacity 220ms ease,
      transform 520ms var(--kn-ease),
      height 520ms var(--kn-ease),
      --kn-glow-x 700ms var(--kn-ease),
      visibility 0s linear 220ms;
  }
  .kn-stage::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
  }
  .kn-stage.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 220ms ease,
      transform 520ms var(--kn-ease),
      height 520ms var(--kn-ease),
      --kn-glow-x 700ms var(--kn-ease),
      visibility 0s;
  }
  .kn-stage.is-fresh {
    transition-property: opacity, transform, visibility;
  }
  .kn-panel {
    z-index: 2;
    padding: 28px 32px 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(var(--kn-shift, 0px), var(--kn-lift, -8px), 0);
    transition:
      opacity 200ms ease,
      transform 520ms var(--kn-ease),
      visibility 0s linear 200ms;
  }
  .kn-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 260ms ease 70ms,
      transform 560ms var(--kn-ease),
      visibility 0s;
  }
  .kn-panel.is-instant {
    transition: none;
  }
  .kn-panel.is-active .kn-grid > * {
    animation: kn-rise 620ms var(--kn-ease) both;
  }
  .kn-panel.is-active .kn-grid > :nth-child(2) {
    animation-delay: 45ms;
  }
  .kn-panel.is-active .kn-grid > :nth-child(3) {
    animation-delay: 90ms;
  }
  .kn-panel.is-active .kn-grid > :nth-child(4) {
    animation-delay: 135ms;
  }
  @keyframes kn-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
  .kn-grid {
    display: grid;
    gap: 12px 30px;
    align-items: start;
  }
  .kn-grid-3,
  .kn-grid-company,
  .kn-grid-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kn-span-2 {
    grid-column: span 2;
  }
  .kn-span-2 .kn-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
  }
  .kn-span-2 .kn-links a {
    margin: 0;
  }
  .kn-card {
    display: none;
  }
  .kn-scrim {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.68);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 320ms ease,
      visibility 0s linear 320ms;
  }
  .kn-scrim.is-on {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 320ms ease,
      visibility 0s;
  }
  /* Before karyo.js arrives, or if it never does, hover and focus still open
     a panel on its own surface. */
  .kn-bar:not(.kn-ready) .kn-item:hover > .kn-panel,
  .kn-bar:not(.kn-ready) .kn-item:focus-within > .kn-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    border: 1px solid var(--kn-line);
    border-radius: 18px;
    background: #0b0b0c;
  }
}
@media (min-width: 1200px) {
  .kn-grid-services {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 248px;
  }
  .kn-card {
    display: flex;
  }
}
@media (max-width: 999.98px) {
  .kn-bar .kn-toggle {
    display: grid;
  }
  .kn-bar .ks-nav-cta {
    margin-left: auto;
  }
  .kn {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100dvh - var(--kn-bar-h, 70px));
    min-height: calc(100dvh - var(--kn-bar-h, 70px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px var(--kn-gutter) 28px;
    background: #050506;
    border-top: 1px solid var(--kn-line);
    border-bottom: 1px solid var(--kn-line);
  }
  .kn.is-open {
    display: block;
    animation: kn-sheet 380ms var(--kn-ease);
  }
  @keyframes kn-sheet {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  .kn-item {
    border-bottom: 1px solid var(--kn-line);
  }
  .kn-trigger {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--kn-text);
    font-size: 17px;
    font-weight: 700;
    padding: 0;
  }
  .kn-chev {
    width: 12px;
    height: 7px;
  }
  .kn-panel {
    display: none;
    padding: 2px 0 22px;
  }
  .kn-panel.is-active {
    display: block;
    animation: kn-sheet 380ms var(--kn-ease);
  }
  .kn-grid {
    display: grid;
    gap: 22px;
  }
  .kn-d,
  .kn-card,
  .kn-strip,
  .kn-pill,
  .kn-stage {
    display: none;
  }
  .kn-links a {
    padding: 8px 12px;
  }
  .kn-sheet-foot {
    display: grid;
    gap: 10px;
    padding-top: 22px;
  }
  .kn-sheet-foot .ks-btn {
    width: 100%;
  }
  .kn-scrim {
    display: none;
  }
}
@media (min-width: 560px) and (max-width: 999.98px) {
  .kn-grid-3,
  .kn-grid-services,
  .kn-grid-company {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .kn-bar *,
  .kn-scrim {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══ Page components (ke-*) ═══════════════════════════════════════════
   Karyo's inner-page building blocks, set in Kenro's inner-page language:
   a plain page hero under the bar, hairline-divided card walls, mono
   kickers, and tables drawn with rules rather than boxes. */

/* Two columns: heading left, detail right. */
.ku-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 28px 64px;
  align-items: start;
}
@media (max-width: 860px) {
  .ku-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Page hero: the first band under the fixed bar. */
.ke-hero,
.ks-section.ku-hero:not([data-hero]) {
  padding: 140px 0 76px;
}
.ks-section.ku-hero:not([data-hero]) {
  min-height: 0;
  display: block;
}
.ke-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ks-page .ke-hero h1,
.ks-page .ku-hero:not([data-hero]) h1 { margin: 0; font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; max-width: 18ch; }
.ke-hero .ku-lede,
.ku-hero:not([data-hero]) .ku-lede { margin: 26px 0 0; max-width: 56ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; }
.ke-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.ke-spec { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--ks-faint); font-size: 13px; }
.ke-spec li { display: inline-flex; align-items: center; gap: 8px; }
.ke-spec li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ks-brand); }

.ke-mock { min-width: 0; border: 1px solid var(--ks-line-strong); border-radius: 14px; background: var(--ks-surface); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; font-size: 12.5px; }
.ke-mock-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ks-line); color: var(--ks-muted); font-weight: 600; }
.ke-mock-bar span:first-child { display: inline-flex; gap: 5px; }
.ke-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ks-line-strong); display: block; }
.ke-table-wrap { overflow-x: auto; }
.ke-table { width: 100%; border-collapse: collapse; }
.ke-table th, .ke-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--ks-line); white-space: nowrap; }
.ke-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ks-faint); font-weight: 600; }
.ke-table tbody th { font-weight: 600; color: var(--ks-text); }
.ke-table td { color: var(--ks-muted); }

.ke-table .num { text-align: right; }
.ke-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--ks-brand-soft); color: var(--ks-brand-light); }
.ke-pill.is-low { background: rgba(199, 93, 93, 0.16); color: #e89a9a; }
.ke-mock-today { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ks-line); }
.ke-mock-today div { background: var(--ks-surface); padding: 10px 12px; display: grid; gap: 3px; }
.ke-mock-today span { color: var(--ks-faint); font-size: 11px; }
.ke-mock-today b { color: var(--ks-text); font-weight: 700; font-size: 13px; }
.ke-sync { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-top: 1px solid var(--ks-line); color: var(--ks-faint); }
.ke-sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ks-brand); box-shadow: 0 0 0 4px var(--ks-brand-soft); }

.ke-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 28px; background: var(--ks-line); border: 1px solid var(--ks-line); border-radius: 18px; overflow: hidden; counter-reset: ke-step; }
.ke-flow > div { position: relative; padding: 26px 26px 28px; background: var(--ks-bg); counter-increment: ke-step; }
.ke-flow > div::before { content: "0" counter(ke-step); display: block; margin-bottom: 18px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--ks-faint); }
.ke-kicker { display: block; margin-bottom: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ks-brand-light); }
.ke-flow h3 { font-size: 15.5px; margin: 0 0 6px; }
.ke-flow p { margin: 0; color: var(--ks-muted); font-size: 14px; line-height: 1.6; }

.ke-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ks-line); border: 1px solid var(--ks-line); border-radius: 18px; overflow: hidden; }
.ke-module { position: relative; background: var(--ks-bg); padding: 26px 26px 28px; overflow: hidden; }
.ke-module svg { width: 24px; height: 24px; color: var(--ks-brand-light); display: block; margin-bottom: 18px; }
.ke-module h3 { font-size: 15.5px; margin: 0 0 8px; }
.ke-module p { margin: 0; color: var(--ks-muted); font-size: 14px; line-height: 1.6; }
.ke-module p + p { margin-top: 10px; }
.ke-module .ks-eyebrow { margin-bottom: 12px; }

.ke-tag { display: inline-block; margin-top: auto; padding-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ks-brand-light); }
.ke-tag.is-planned { color: var(--ks-faint); }

.ke-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.ke-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--ks-line); }
.ke-steps li:last-child { border-bottom: 1px solid var(--ks-line); }
.ke-steps b { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; color: var(--ks-brand-light); font-size: 14px; padding-top: 2px; }
.ke-steps h3 { font-size: 16px; margin: 0 0 4px; }
.ke-steps p { margin: 0; color: var(--ks-muted); font-size: 14px; line-height: 1.55; }

.ke-terms { margin: 0; display: grid; }
.ke-terms div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--ks-line); font-size: 14px; line-height: 1.5; }
.ke-terms div:last-child { border-bottom: 1px solid var(--ks-line); }
.ke-terms dt { margin: 0; color: var(--ks-faint); }
.ke-terms dd { margin: 0; color: var(--ks-text); }

@media (max-width: 960px) {
  .ke-hero,
  .ks-section.ku-hero:not([data-hero]) { padding: 108px 0 52px; }
  .ke-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ke-hero h1 { max-width: 100%; }
  .ke-flow { grid-template-columns: minmax(0, 1fr); }
  .ke-terms div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 900px) { .ke-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ke-modules { grid-template-columns: 1fr; }
  .ke-mock-today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Corrections and additions from the September audit ── */

/* h1 rendered SMALLER than h2 between 720px and 909px, i.e. iPad portrait,
   because h1 is fluid and h2 was a fixed 40px. Make h2 fluid too so the
   main claim is never visually subordinate to a section label. */
.ks-page h2 {
  font-size: clamp(26px, 3.2vw, 40px);
}
.ks-page h3 {
  font-size: 20px;
}
/* Card and module names are h3 for document structure, but must keep the
   card type scale — .ks-page h3 at (0,1,1) would otherwise win. */
.ks-page h3.ku-card-name,
.ks-page .ke-module h3,
.ks-page .ke-flow h3,
.ks-page .ke-steps h3 {
  margin: 0 0 6px;
}
.ks-page h3.ku-card-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ks-text);
  margin: 0;
}
.ks-page .ke-module h3 {
  font-size: 15px;
}
.ks-page .ke-flow h3 {
  font-size: 15px;
}
.ks-page .ke-steps h3 {
  font-size: 16px;
  margin: 0 0 4px;
}

/* A one-line scope note under a line's status tag. */
.ke-tag-note {
  margin: 6px 0 0;
  color: var(--ks-faint);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Two product screens side by side. .ku-grid resolves to ~382px columns here,
   which clips a third of every table. */
.ke-mockwall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 16px;
}
.ke-mock-note {
  margin: 12px 0 0;
  color: var(--ks-faint);
  font-size: 13px;
}

/* The hero mock stretched to its emptiest state on tablets and clipped its
   Status column — the one cell showing the product doing something — on phones. */
@media (max-width: 960px) {
  .ke-mock {
    max-width: 560px;
  }
}
@media (max-width: 700px) {
  .ke-mockwall {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .ke-table th:nth-child(4),
  .ke-table td:nth-child(4) {
    display: none;
  }
}
@media (max-width: 460px) {
  .ke-table th:nth-child(3),
  .ke-table td:nth-child(3) {
    display: none;
  }
}

/* Printing produced a blank page: the browser drops background colours by
   default, leaving white text on white paper. This is how an owner shares a
   vendor with his accountant, so it has to survive. */
@media print {
  .ks-page {
    --ks-bg: #fff;
    --ks-surface: #fff;
    --ks-elevated: #fff;
    --ks-soft: #fff;
    --ks-text: #000;
    --ks-muted: #333;
    --ks-faint: #555;
    --ks-line: #ccc;
    --ks-line-strong: #999;
    --ks-brand: #14418f;
    --ks-brand-light: #14418f;
    --ks-brand-soft: #eef2fb;
    background: #fff;
  }
  body {
    background: #fff;
    color: #000;
  }
  .js-reveal .ks-section,
  .js-reveal .ks-reveal,
  .js-reveal [data-hero] *,
  .js-reveal [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .ku-q::details-content {
    block-size: auto;
    content-visibility: visible;
  }
  .ks-section {
    padding: 18px 0;
    page-break-inside: avoid;
  }
  .ku-backdrop,
  .ks-nav,
  .kn-scrim,
  .kn-sticky,
  .ku-progress,
  .ke-actions,
  .ku-hero-cta {
    display: none !important;
  }
  .ke-mock,
  .ke-module {
    box-shadow: none;
  }
  .ks-footer {
    border-top: 1px solid #ccc;
  }
  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #555;
    word-break: break-all;
  }
}

.ke-mock-figure {
  margin: 0;
}

/* Stacked call-to-action pair inside the contact band. */
.ke-actions--stack {
  flex-direction: column;
  align-items: stretch;
}
.ke-actions--stack .ks-btn {
  justify-content: center;
}

.ke-spec a {
  color: var(--ks-muted);
  text-decoration: none;
}
.ke-spec a:hover {
  color: var(--ks-text);
}

/* Per-module detail: who enters it, what it produces, what it becomes in Tally. */
.ke-modspec {
  margin: 4px 0 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  border-top: 1px solid var(--ks-line);
  padding-top: 12px;
}
.ke-modspec div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
}
.ke-modspec dt {
  margin: 0;
  color: var(--ks-faint);
}
.ke-modspec dd {
  margin: 0;
  color: var(--ks-muted);
}

.ks-small-note {
  margin: 14px 0 0;
  color: var(--ks-faint);
  font-size: 13px;
  line-height: 1.55;
}

/* A status tag and a "go" line can share one card; only the tag takes the
   auto margin, or the flex column pushes them to opposite ends. */
.ke-tag + .ku-card-go {
  margin-top: 0;
  padding-top: 4px;
}

@media (max-width: 460px) {
  .ke-modspec div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Two-up variant of the module grid, for the four reasons it pays. */
.ke-modules--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .ke-modules--pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Homepage rebuild, Oct 2026: services, process and engagement tables,
   FAQ, and the three-screen hero composition. Same tokens as above. ── */


/* Hero visual: a dashboard, a portal order screen and a phone, overlapped on
   a 12-column grid. Decorative (aria-hidden); the figcaption describes it. */
.ke-screens-figure {
  margin: 0;
  max-width: 600px;
}
.ke-screens {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-items: start;
}
.ke-screens .ke-mock {
  font-size: 11.5px;
}
.ke-screen--dash {
  grid-column: 1 / 10;
  grid-row: 1;
}
.ke-screen--portal {
  grid-column: 1 / 9;
  grid-row: 2;
  margin: -26px 0 0 20px;
  position: relative;
  z-index: 1;
}
.ke-phone {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
  align-self: center;
  position: relative;
  z-index: 2;
  padding: 6px;
  border: 1px solid var(--ks-line-strong);
  border-radius: 24px;
  background: #050506;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
}
.ke-phone-screen {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 300px;
  padding: 18px 10px 12px;
  border-radius: 18px;
  background: var(--ks-surface);
  position: relative;
  font-size: 10.5px;
}
.ke-phone-screen::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 34%;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--ks-line-strong);
}
.ke-phone-url {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--ks-elevated);
  color: var(--ks-faint);
  font-size: 9.5px;
  text-align: center;
}
.ke-phone-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--ks-line);
}
.ke-phone-nav i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--ks-brand);
}
.ke-phone-nav span {
  width: 14px;
  height: 2px;
  background: var(--ks-muted);
  box-shadow:
    0 4px 0 var(--ks-muted),
    0 -4px 0 var(--ks-muted);
}
.ke-phone-screen b {
  color: var(--ks-text);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}
.ke-skel {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--ks-line-strong);
}
.ke-skel.is-short {
  width: 64%;
}
.ke-phone-btn {
  margin-top: 4px;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--ks-brand);
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.ke-phone-card {
  height: 54px;
  border: 1px solid var(--ks-line);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ks-brand-soft), transparent);
}

.ke-dash-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
}
.ke-dash-tiles div {
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 9px 10px;
  background: var(--ks-surface);
}
.ke-dash-tiles span {
  color: var(--ks-faint);
  font-size: 10.5px;
}
.ke-dash-tiles b {
  color: var(--ks-text);
  font-size: 14px;
}
.ke-dash-tiles .ke-pill {
  font-style: normal;
  font-size: 10px;
}
.ke-dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 78px;
  padding: 12px 12px 10px;
}
.ke-dash-chart span {
  flex: 1;
  border-top: 2px solid var(--ks-brand);
  background: var(--ks-brand-soft);
}
.ke-dash-chart span:nth-child(1) { height: 56%; }
.ke-dash-chart span:nth-child(2) { height: 72%; }
.ke-dash-chart span:nth-child(3) { height: 64%; }
.ke-dash-chart span:nth-child(4) { height: 82%; }
.ke-dash-chart span:nth-child(5) { height: 76%; }
.ke-dash-chart span:nth-child(6) {
  height: 28%;
  border-top-color: var(--ks-danger);
  background: rgba(199, 93, 93, 0.14);
}
.ke-dash-chart span:nth-child(7) { height: 68%; }
.ke-dash-chart span:nth-child(8) { height: 78%; }

.ke-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--ks-line);
  color: var(--ks-muted);
}
.ke-order-row.is-head {
  color: var(--ks-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ke-order-row.is-total {
  color: var(--ks-text);
  font-weight: 700;
}
.ke-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 10px 12px 12px;
  list-style: none;
  color: var(--ks-faint);
  font-size: 10px;
}
.ke-track li {
  display: grid;
  gap: 5px;
  justify-items: start;
}
.ke-track li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ks-line-strong);
}
.ke-track li.is-done::before {
  border-color: var(--ks-brand);
  background: var(--ks-brand);
}
.ke-track li.is-now {
  color: var(--ks-text);
  font-weight: 700;
}
.ke-track li.is-now::before {
  border-color: var(--ks-brand-light);
  box-shadow: 0 0 0 3px var(--ks-brand-soft);
}

@media (max-width: 960px) {
  .ke-screens-figure {
    max-width: 560px;
  }
}
@media (max-width: 560px) {
  .ke-screen--dash {
    grid-column: 1 / 13;
  }
  .ke-screen--portal {
    grid-column: 1 / 9;
    margin: 12px 0 0;
  }
  .ke-phone {
    grid-column: 9 / 13;
    grid-row: 2;
    align-self: start;
    margin: 12px 0 0 8px;
    padding: 4px;
    border-radius: 18px;
  }
  .ke-phone-screen {
    min-height: 0;
    padding: 14px 6px 8px;
    border-radius: 14px;
    font-size: 9px;
  }
  .ke-phone-screen b {
    font-size: 10.5px;
  }
  .ke-phone-card {
    display: none;
  }
  .ke-track {
    gap: 4px;
    padding: 10px 10px 12px;
    font-size: 8.5px;
  }
}

/* A one-sentence conclusion set apart from the paragraphs above it. */
.ke-statement {
  margin: 0;
  max-width: 640px;
  color: var(--ks-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

/* Service cards: a bold promise line above the detail paragraph, and a
   full-row card so five services never leave an empty cell in the grid. */
.ke-module .ke-module-lead {
  margin: 0 0 8px;
  color: var(--ks-text);
  font-weight: 600;
}
.ke-module--wide {
  grid-column: span 2;
}
@media (max-width: 560px) {
  .ke-module--wide {
    grid-column: auto;
  }
}

/* Inline links inside running text: underlined so they never rely on colour. */
.ke-link {
  color: var(--ks-brand-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ke-link:hover {
  color: var(--ks-text);
}

/* Content tables (process, engagement models). A real <table> on wide
   screens; on phones each row becomes a labelled card via data-label. */
.ke-dtable-wrap {
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  background: var(--ks-bg);
  overflow: hidden;
}
.ke-dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}
.ke-dtable th,
.ke-dtable td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--ks-line);
}
.ke-dtable thead th {
  border-top: 0;
  padding-top: 13px;
  padding-bottom: 13px;
  background: var(--ks-surface);
  color: var(--ks-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ke-dtable tbody th {
  width: 24%;
  color: var(--ks-text);
  font-weight: 700;
}
.ke-dtable td {
  color: var(--ks-muted);
}
.ke-dtable td.is-key {
  color: var(--ks-text);
}
.ke-dtable .ke-num {
  margin-right: 4px;
  color: var(--ks-brand-light);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
}
@media (max-width: 720px) {
  .ke-dtable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .ke-dtable,
  .ke-dtable tbody,
  .ke-dtable tr,
  .ke-dtable th,
  .ke-dtable td {
    display: block;
  }
  .ke-dtable tbody tr {
    padding: 16px 18px;
    border-top: 1px solid var(--ks-line);
  }
  .ke-dtable tbody tr:first-child {
    border-top: 0;
  }
  .ke-dtable tbody th,
  .ke-dtable td {
    width: auto;
    padding: 0;
    border: 0;
  }
  .ke-dtable tbody th {
    margin-bottom: 8px;
    font-size: 15px;
  }
  .ke-dtable td + td {
    margin-top: 10px;
  }
  .ke-dtable td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ks-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* Terms list with the label above the text, for longer commitments. */
.ke-terms--stack div {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 18px 0;
}
.ke-terms--stack dt {
  color: var(--ks-text);
  font-size: 15px;
  font-weight: 700;
}
.ke-terms--stack dd {
  color: var(--ks-muted);
  line-height: 1.6;
}

/* Case study body: labelled paragraphs. */
.ke-case p {
  margin: 0 0 14px;
  color: var(--ks-muted);
  font-size: 15px;
  line-height: 1.65;
}
.ke-case strong {
  color: var(--ks-text);
}

@media print {
  .ke-screens .ke-mock,
  .ke-phone {
    box-shadow: none;
  }
  .ke-dtable-wrap,
  .ku-q {
    break-inside: avoid;
  }
  .ke-link {
    color: #14418f;
  }
}

/* The homepage's section headlines take Kenro's homepage scale; inner pages
   keep the 40px ceiling above, as Kenro's inner pages do. */
.ks-page.ku-page h2 {
  font-size: clamp(30px, 4.2vw, 58px);
}

@media (prefers-reduced-motion: reduce) {
  .ku-film picture,
  .ku-film picture.is-on img {
    transition: none;
    animation: none;
  }
}