/* site.css — the one stylesheet every Kenro Digital page links.

   Kenro Digital is a sibling of dealership.usekenro.com and
   workshop.usekenro.com, so the first part of this file is Dealership's own
   page CSS, ported rule for rule with its purple swapped for Kenro Digital
   red (Oct 2026). Then come the shared mega-menu from usekenro.com, the
   "Kenro Digital" wordmark animation, and the few components only this site
   needs, built on the same tokens and metrics.

   THE ONE TRAP (same as the sibling sites): sections ship at opacity 0 and
   are lifted by initSectionReveal in assets/site.js. Break that script and
   the page renders blank. Anything you add needs ks-section or ks-reveal. */

/* ═══ Ported from dealership.usekenro.com (purple → red) ═══════════════ */
/* Reset the UA default body margin and paint the canvas on the root:
   .ks-page is a div, so without this the 8px body margin and the
   white UA background frame the page, and macOS overscroll flashes
   white above/below the fold. color-scheme keeps scrollbars and
   native controls dark to match. */
html,
body {
  margin: 0;
  padding: 0;
  background: #000000;
  color-scheme: dark;
}
.ks-page {
  /* Onyx: the Kenro family's true-black ladder, in Kenro Digital red
     (Kenro Event's red, which Digital took over in Oct 2026). */
  --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 — #787878 sat at 4.45 (#937) */
  --ks-brand: #dc2626;
  --ks-brand-light: #f87171;
  --ks-brand-cta: #b91c1c; /* resting fill for primary buttons: white text 6.5:1 (AA). Hover brightens to --ks-brand #dc2626, white 4.8:1. */
  --ks-brand-soft: rgba(220, 38, 38, 0.1);
  --ks-gold: #f87171; /* eyebrows and proof figures: 7.6:1 on the canvas */
  --ks-danger: #c75d5d;
  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;
}
.ks-page * {
  box-sizing: border-box;
}
.ks-page a {
  color: inherit;
}
.ks-page img {
  max-width: 100%;
  display: block;
}
.ks-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.ks-shell {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
}
.ks-section {
  padding: 68px 0;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 360ms ease,
    transform 360ms ease;
}
.ks-section.is-visible,
.ks-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.ks-section-head {
  max-width: 680px;
  margin: 0 0 24px;
}
.ks-section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.ks-eyebrow {
  margin: 0 0 8px;
  color: var(--ks-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ks-page h1,
.ks-page h2,
.ks-page h3,
.ks-page p {
  margin-top: 0;
}
.ks-page h1 {
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: 0;
  margin-bottom: 18px;
  max-width: 760px;
}
.ks-page h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.ks-page h3 {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 10px;
}
.ks-lede {
  color: var(--ks-muted);
  font-size: 16px;
  line-height: 1.62;
  max-width: 640px;
}
.ks-small {
  color: var(--ks-faint);
  font-size: 13px;
  line-height: 1.5;
}
.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: #070708;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ks-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
/* The mark is one shared currentColor SVG — each product tints
   it from its own --ks-brand rather than shipping a recoloured PNG. */
.ks-logo {
  color: var(--ks-brand);
}
.ks-logo .ks-mark {
  width: 24px;
  height: 24px;
  display: block;
}
.ks-nav-links {
  display: none;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.ks-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ks-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.ks-nav-links a:hover {
  color: var(--ks-text);
}
/* CTA stays visible on mobile — signup is one tap away at every width. */
.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;
}
.ks-menu span {
  width: 18px;
  height: 2px;
  background: var(--ks-text);
  display: block;
}
.ks-menu-panel {
  position: fixed;
  inset: 64px 16px auto;
  z-index: 39;
  display: none;
  padding: 16px;
  background: rgba(7, 7, 8, 0.98);
  border: 1px solid var(--ks-line);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.46);
}
.ks-menu-panel.is-open {
  display: grid;
  gap: 8px;
}
.ks-menu-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  text-decoration: none;
  color: var(--ks-text);
}
.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-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 100ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.ks-btn:active {
  transform: scale(0.97);
}
.ks-btn-primary {
  background: var(--ks-brand-cta);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(220, 38, 38, 0.2);
}
.ks-btn-primary:hover {
  background: var(--ks-brand);
}
.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-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ks-card,
.ks-price-card,
.ks-faq,
.ks-form-card {
  border: 1px solid var(--ks-line);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.018)
  );
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 52px rgba(0, 0, 0, 0.24);
}
.ks-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ks-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ks-check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ks-brand-soft);
  color: var(--ks-brand);
  font-weight: 900;
}
.ks-price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: min(100%, 880px);
  margin: 0 auto;
}
.ks-price-card {
  position: relative;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ks-price-card.is-featured {
  border-color: rgba(220, 38, 38, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(220, 38, 38, 0.18),
    0 24px 70px rgba(220, 38, 38, 0.08);
}
.ks-price-card h3 span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px;
}
.ks-price-card h3 small {
  display: block;
  margin-top: 4px;
  color: var(--ks-muted);
  font-size: 13px;
  font-weight: 600;
}
.ks-price-card header p {
  color: var(--ks-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.ks-price-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ks-price-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ks-muted);
  font-size: 14px;
  line-height: 1.45;
}
.ks-price-card .ks-btn {
  margin-top: auto;
}
.ks-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--ks-brand-soft);
  color: var(--ks-brand-light);
  font-size: 12px;
  font-weight: 800;
}
/* One plan card + the add-ons card (Sep 8 2026: one price, no size
   axis). Mobile-first — one column at 375px, side by side once there
   is room (720px). */
.ks-edition-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.ks-edition-card {
  padding: 20px;
  gap: 14px;
}
.ks-edition-name {
  font-size: 19px;
  font-weight: 800;
}
.ks-edition-price {
  margin: 6px 0 0;
}
.ks-edition-price span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 27px;
  font-weight: 700;
}
/* Pricing is quoted, not printed (#733) — this slot now holds words, not
   a figure, so it drops the mono face, the display size AND the heavy
   weight a real price would carry (Aug 31 2026 fix — at 700 weight and
   19px this still read as a blank price slot, not a deliberate line). */
.ks-edition-price.is-on-request span {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ks-text);
}
.ks-edition-price small {
  display: block;
  margin-top: 4px;
  color: var(--ks-muted);
  font-size: 13px;
  font-weight: 600;
}
.ks-edition-limits {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ks-edition-limits li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ks-muted);
  font-size: 14px;
}
/* Kept for other lists on the page. The pricing card no longer marks
   a "recommended" row: with ONE price (Sep 8 2026) there are no tiers
   to choose between, so there is nothing to recommend. */
.ks-edition-limits li.is-recommended {
  padding: 8px 10px;
  margin: -8px -10px;
  border-radius: 8px;
  background: var(--ks-brand-soft);
}
.ks-tier-tag {
  flex-shrink: 0;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.16);
  color: var(--ks-brand-light);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.ks-edition-card .ks-btn {
  margin-top: auto;
  align-self: stretch;
}
/* Honest proof line under the two pricing cards, reusing PROOF_POINTS —
   never a fabricated shop count or testimonial (Workshop is
   pre-revenue), always the one claim that's true and checkable: it
   runs daily on a real floor (Aug 31 2026). */
.ks-proof-inline {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 18px auto 0;
  max-width: 640px;
  color: var(--ks-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.ks-proof-inline b {
  color: var(--ks-text);
}
/* Chooser line above the edition cards — the one question that
   decides the price, stated before the prices are read. */
.ks-edition-chooser {
  margin: 0 auto 20px;
  max-width: 620px;
  text-align: center;
  color: var(--ks-muted);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
}
/* Five-year cost of renting vs buying once. */
.ks-price-compare {
  margin: 22px auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--ks-muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.ks-edition-note {
  margin: 16px auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--ks-faint);
  font-size: 13px;
  line-height: 1.6;
}
/* The three extras were full-width bands stacked down the page, which
   made a minor add-on read as heavy as the licence itself. As a grid
   they read as what they are: small, optional, mostly-not-charged. */
.ks-addon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
@media (min-width: 760px) {
  .ks-addon-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
}
.ks-onboarding-card {
  margin-top: 0;
  padding: 18px;
  gap: 10px;
}
.ks-onboarding-card h3 {
  margin: 0;
}
.ks-onboarding-card header p {
  font-size: 13.5px;
  line-height: 1.5;
}
.ks-onboarding-card h3 span {
  font-size: 21px;
}
.ks-onboarding-card h3 small {
  font-size: 12.5px;
}
.ks-migration-note {
  margin: 0;
  color: var(--ks-faint);
  font-size: 12.5px;
  line-height: 1.55;
}
.ks-price-product .ks-btn {
  align-self: flex-start;
  min-width: 180px;
}
.ks-trust-line {
  margin: 18px auto 0;
  max-width: 720px;
  text-align: center;
  color: var(--ks-muted);
  font-size: 14px;
  line-height: 1.6;
}
.ks-recharge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
}
.ks-recharge-card {
  padding: 18px;
  gap: 12px;
}
.ks-recharge-card h3 span {
  font-size: 22px;
}
.ks-recharge-card h3 small {
  font-size: 12px;
}
.ks-struck {
  color: var(--ks-faint);
  text-decoration: line-through;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 17px;
  margin-right: 8px;
  font-weight: 600;
}
/* Two options SIDE BY SIDE, not stacked full-width rows. Stacked, each
   row spanned the whole card with the label at one end and the price at
   the other and a field of nothing between them, which is most of why
   the Live card read as an oversized box. */
.ks-live-options {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .ks-live-options {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
.ks-live-options li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  align-content: start;
  padding: 13px 15px;
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.ks-live-options li.is-recommended {
  border-color: rgba(220, 38, 38, 0.45);
  background: var(--ks-brand-soft);
}
.ks-live-options b {
  font-size: 13px;
  font-weight: 700;
}
/* The TOTAL is the loud number — this buyer thinks in totals, not
   instalments, having just paid the licence in one go. */
.ks-live-options span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-align: left;
}
.ks-live-options small {
  color: var(--ks-faint);
  font-size: 12px;
}
.ks-live-options em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--ks-brand-light);
  margin-top: 2px;
}
.ks-live-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ks-live-after {
  color: var(--ks-muted);
  font-size: 13.5px;
  margin-bottom: 4px;
}
.ks-refund-line {
  margin: 18px auto 0;
  max-width: 620px;
  text-align: center;
  color: var(--ks-brand-light);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}
/* Two columns so all five lines fit without the card growing tall. */
.ks-live-includes {
  display: grid;
  gap: 10px;
}
@media (min-width: 620px) {
  .ks-live-includes {
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
  }
}
.ks-live-includes {
  display: grid;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ks-live-includes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ks-muted);
  font-size: 13.5px;
  line-height: 1.45;
}
.ks-recharge-stop {
  margin: 0;
  color: var(--ks-faint);
  font-size: 12.5px;
}
.ks-recharge-note {
  margin: 14px auto 0;
  text-align: center;
  color: var(--ks-faint);
  font-size: 12.5px;
  line-height: 1.5;
}
/* Terms block. These were four loose paragraphs trailing off under the
   cards at body size, which read as unfinished page rather than as fine
   print. Marked with a star and set below a rule, they are recognisably
   terms — present and readable, but no longer competing with the prices
   they qualify. */
.ks-fineprint {
  list-style: none;
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 8px;
  max-width: 720px;
}
/* Indent via padding + an absolute marker, NOT display:grid. As a grid
   the li's inline children each became their own grid item, so the two
   anchors in the franchise line broke onto separate rows ("WhatsApp" /
   "us" / an arrow, each on its own line). */
.ks-fineprint li {
  position: relative;
  padding-left: 22px;
  color: var(--ks-faint);
  font-size: 12.5px;
  line-height: 1.55;
}
.ks-fineprint li::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ks-brand-light);
  font-weight: 700;
}
.ks-fineprint a {
  color: var(--ks-brand-light);
  text-decoration: none;
  font-weight: 600;
}
.ks-fineprint a:hover {
  text-decoration: underline;
}
.ks-faq-list {
  display: grid;
  gap: 10px;
}
.ks-faq {
  padding: 0;
  overflow: hidden;
}
.ks-faq summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 800;
}
.ks-faq summary::-webkit-details-marker {
  display: none;
}
.ks-faq p {
  color: var(--ks-muted);
  line-height: 1.6;
  padding: 0 16px 16px;
  margin: 0;
}
.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 {
  color: var(--ks-faint);
  font-size: 13px;
}
.ks-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* .ks-page .ks-footer-links beats the responsive .ks-page h2 size-up
   (equal-specificity .ks-footer-links h2 was losing to the 720px
   media rule below, blowing the footer headings up to 40px). */
.ks-page .ks-footer-links h2 {
  color: var(--ks-text);
  font-size: 13px;
  margin-bottom: 10px;
}
.ks-footer-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ks-muted);
  text-decoration: none;
  font-size: 14px;
  margin: 0;
}
/* The umbrella cross-link row. Sits ABOVE the © line so the last thing
   read is the company, not the product list. Wraps on narrow screens
   rather than scrolling — it is three short links, never a nav. */
.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-page h2 {
    font-size: 40px;
  }
  .ks-section {
    padding: 92px 0;
  }
  .ks-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ks-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Product card stays full width; features flow into two columns. */
  .ks-price-product ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Recharges: auto-fit, NOT a hard 2 columns. The fixed pair was a
     leftover from the retired two-recharge split (#652) — with the
     single Kenro Live recharge it left the card filling half its
     track and a dead column beside it, on this page and on /pricing.
     auto-fit renders one card full width and still pairs them if a
     second recharge ever returns. (No retired rupee figure in this
     comment on purpose: these styles are inlined into the public
     HTML, and the #656 guard test rightly fails on one.) */
  .ks-recharge-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  /* Three editions across. auto-fit so a future fourth wraps instead of
     squeezing, and so two-up is the natural tablet state. */
  .ks-edition-grid {
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  }
  .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;
  }
}
@media (min-width: 920px) {
  .ks-nav {
    padding: 14px 28px;
  }
  .ks-nav-links {
    display: flex;
  }
  .ks-nav .ks-nav-cta {
    margin-left: 0;
    padding: 0 17px;
    font-size: 14px;
  }
  .ks-menu {
    display: none;
  }
  .ks-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .ks-section,
  .ks-reveal,
  .ks-btn {
    transition: none;
    transform: none;
    opacity: 1;
  }
}
/* Hero film (#1071). Replaces the #742 stock loop with a generated
   one: a single continuous shot of a car arriving at a pre-owned
   showroom at golden hour (a gpt_image_2 still, moved by Kling 3.0),
   graded near-black with one amber accent so this page and the Workshop
   root read as one company.

   WIRING IS #1070's, EXACTLY: the <video> carries NO <source> on
   purpose, so initHeroFilm() picks the desktop or the lighter phone
   encode before the browser starts downloading either, then scrubs the
   film by scroll on mouse devices and loops it on phones. Without
   JavaScript the poster still shows. Two encodes, no webm this time
   (the #742 pair predates the desktop/phone split). */
.kd-fold {
  position: relative;
}
.kd-hero {
  position: relative;
  padding: 88px 0 32px;
}
.kd-film {
  position: absolute;
  inset: -30px 0 auto 0;
  height: 124%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: #000 center / cover no-repeat
    url("/assets/shots/dealership-arrival.jpg");
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 48%,
    transparent 88%
  );
  mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 88%);
  opacity: 0.6;
}
.kd-film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(var(--film-scale, 1));
  transform-origin: center;
  will-change: transform;
}
/* Copy sits left, so weight the darkness there. */
.kd-film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 8, 0.9) 0%,
      rgba(7, 7, 8, 0.55) 44%,
      rgba(7, 7, 8, 0.14) 100%
    ),
    linear-gradient(180deg, rgba(7, 7, 8, 0.5) 0%, transparent 38%);
}
.kd-hero > .ks-shell {
  position: relative;
  z-index: 1;
}
/* The phone keeps the film now — it gets the light encode rather than
   nothing at all (#1070), so only the tint changes at this width. */
@media (max-width: 860px) {
  .kd-film {
    opacity: 0.42;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kd-film video {
    display: none;
  }
}

.kd-hero h1 {
  margin: 16px 0 0;
  font-size: clamp(32px, 5.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 17ch;
}
.kd-lede {
  margin: 24px 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--ks-muted);
}
.kd-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.kd-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 52px 0 0;
  background: var(--ks-line);
  border: 1px solid var(--ks-line);
  border-radius: 16px;
  overflow: hidden;
}
.kd-proof div {
  background: var(--ks-bg);
  padding: 20px 22px;
}
.kd-proof b {
  display: block;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ks-gold);
}
.kd-proof span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--ks-faint);
}

/* The life of a car (#1071). The fifteen steps, grouped into their
   five phases: a rail of phases, one photographed panel each. The
   markup contract and all the behaviour are initDayWalkthrough()'s
   (#day, [data-day-step], .kd-panel, .kd-photo) — the same helper the
   Workshop root drives its day walkthrough with, so the two pages step
   and auto-advance identically.

   The CSS is this page's own rather than imported: the helper's styles
   live inside renderLandingStyles(), which would drag the whole kv-*
   landing system (section rhythm, block heads, feature wall, plans)
   onto a page built on renderPublicStyles() and restyle every section
   on it. Duplicated deliberately, and only the parts this page uses. */
.kd-wrap {
  display: grid;
  gap: 22px;
}
@media (min-width: 900px) {
  .kd-wrap {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}
.kd-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.kd-rail::-webkit-scrollbar {
  display: none;
}
@media (min-width: 900px) {
  .kd-rail {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }
}
.kd-step {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  gap: 3px;
  justify-items: start;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--ks-line);
  border-radius: 13px;
  background: var(--ks-elevated);
  color: var(--ks-muted);
  cursor: pointer;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    background 200ms ease;
}
.kd-step:hover {
  border-color: rgba(220, 38, 38, 0.4);
  color: var(--ks-text);
}
.kd-step:focus-visible {
  outline: 2px solid var(--ks-brand);
  outline-offset: 2px;
}
.kd-step.is-active {
  border-color: rgba(220, 38, 38, 0.55);
  background: var(--ks-soft);
  color: var(--ks-text);
}
.kd-step-range {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--ks-brand-light);
}
.kd-step-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.kd-step-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--ks-brand);
}
#day.is-auto .kd-step.is-active .kd-step-bar {
  animation: kdBar 4600ms linear forwards;
}
@keyframes kdBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.kd-panel {
  display: none;
}
.kd-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  animation: kdPanelIn 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 900px) {
  .kd-panel.is-active {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 30px;
  }
  /* Taller crop on desktop, as the Workshop root's panels use: a 3:2
     photograph leaves dead space beside a column of five steps. */
  .kd-photo {
    aspect-ratio: 4 / 3;
  }
}
@keyframes kdPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.kd-photo {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--ks-soft);
  border: 1px solid var(--ks-line);
}
.kd-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kd-panel-range {
  margin: 0 0 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ks-gold);
}
.kd-panel h3 {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ks-text);
}
.kd-panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.kd-panel ol li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.kd-panel ol i {
  font-style: normal;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ks-brand-light);
}
.kd-panel ol b {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ks-text);
}
.kd-panel ol span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ks-muted);
}

.kd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.kd-card {
  position: relative;
  padding: 24px 22px;
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  background: var(--ks-elevated);
  overflow: hidden;
  transition:
    transform 220ms ease,
    border-color 220ms ease;
}
.kd-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(220, 38, 38, 0.12),
    transparent 70%
  );
}
.kd-card:hover {
  transform: translateY(-3px);
  border-color: rgba(220, 38, 38, 0.4);
}
.kd-card:hover::before {
  opacity: 1;
}
.kd-card h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ks-text);
}
.kd-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.kd-card li {
  display: flex;
  gap: 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ks-muted);
}
.kd-card li svg {
  flex: 0 0 auto;
  margin-top: 3px;
}

.kd-surface {
  padding: 24px 22px;
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  background: var(--ks-elevated);
}
.kd-surface p.kd-who {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ks-brand-light);
}
.kd-surface h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ks-text);
}
.kd-surface p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ks-muted);
}

.kd-real {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.kd-real div {
  padding: 22px;
  border-left: 2px solid rgba(220, 38, 38, 0.45);
  background: var(--ks-soft);
  border-radius: 0 14px 14px 0;
}
.kd-real b {
  display: block;
  margin-bottom: 7px;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--ks-text);
}
.kd-real span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ks-muted);
}

@media (max-width: 720px) {
  .kd-proof {
    grid-template-columns: 1fr;
  }
  .kd-hero {
    padding: 64px 0 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kd-card,
  .kd-card::before {
    transition: none;
  }
  .kd-card:hover {
    transform: none;
  }
  .kd-step {
    transition: none;
  }
  .kd-panel.is-active,
  .kd-step-bar {
    animation: none;
  }
}
/* Product screens, the full list, ways to start, the trust band and the
   FAQ (Oct 2026). Same recipe as the kd-* blocks above: this page's own
   styles, built on the ks-* tokens, so the new blocks sit in the page's
   existing rhythm. Every screenshot carries width and height, so the
   frames hold their space before the image arrives. */
.kd-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kd-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ks-brand-light);
}

/* A row that swipes sideways on phones and tablets: scroll-snap only,
   no script. It bleeds to the screen edges (the shell gutter is 16px
   below 1212px) so the next card is always half in view, which is the
   cue that there is more. From 900px it becomes a plain grid. */
.kd-swipe {
  margin: 0 -16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ks-line-strong) transparent;
}
.kd-swipe:focus-visible {
  outline: 2px solid var(--ks-brand);
  outline-offset: -2px;
}
.kd-swipe > ul {
  list-style: none;
  margin: 0;
  padding: 2px 16px 16px;
  display: flex;
  gap: 14px;
  width: max-content;
}
.kd-swipe > ul > li {
  scroll-snap-align: start;
}

/* The app, in phone frames. The frame is CSS only. */
.kd-shot {
  flex: 0 0 min(66vw, 248px);
}
.kd-phone {
  margin: 0;
  padding: 7px;
  border: 1px solid var(--ks-line-strong);
  border-radius: 30px;
  background: var(--ks-elevated);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 52px rgba(0, 0, 0, 0.36);
}
.kd-phone img {
  width: 100%;
  height: auto;
  border-radius: 23px;
  background: var(--ks-surface);
}
.kd-shot-cap {
  position: relative;
  padding: 14px 4px 0;
}
.kd-shot-cap h3 {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ks-text);
}
.kd-shot-cap p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ks-muted);
}
/* Only the desktop picker uses this button (see the scripting block). */
.kd-shot-pick {
  display: none;
}
p.kd-shots-note {
  margin: 14px 0 0;
}

/* The console, in browser frames. Each frame links to the full-size
   screenshot, because a desktop screen cannot be read at phone width. */
/* position: relative keeps the screen-reader-only label inside the
   frame. Without it that label escapes the swipe row's clipping and
   the whole page scrolls sideways on a phone. */
.kd-browser {
  position: relative;
  display: block;
  border: 1px solid var(--ks-line-strong);
  border-radius: 14px;
  background: var(--ks-elevated);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
  transition: border-color 200ms ease;
}
.kd-browser:hover {
  border-color: rgba(220, 38, 38, 0.55);
}
.kd-browser:focus-visible {
  outline: 2px solid var(--ks-brand);
  outline-offset: 2px;
}
.kd-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ks-line);
}
.kd-browser-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-line-strong);
}
.kd-browser-bar b {
  flex: 0 1 220px;
  height: 12px;
  margin-left: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}
.kd-browser img {
  width: 100%;
  height: auto;
  background: var(--ks-surface);
}
.kd-console-lead {
  margin: 0 0 24px;
}
.kd-console-lead figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ks-faint);
}
.kd-console-more > li {
  flex: 0 0 min(78vw, 300px);
}
/* Close-ups of the console: cropped at reading size, no browser frame. */
.kd-snips > li {
  flex: 0 0 min(86vw, 440px);
}
.kd-snip {
  margin: 0;
  border: 1px solid var(--ks-line-strong);
  border-radius: 14px;
  background: var(--ks-surface);
  overflow: hidden;
}
.kd-snip img {
  display: block;
  width: 100%;
  height: auto;
}
.kd-snips h3,
.kd-console-more h3 {
  margin: 12px 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ks-text);
}
.kd-snips p,
.kd-console-more p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ks-muted);
}
h3.kd-uses-title {
  margin: 34px 0 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ks-text);
}
/* Hairline grid, as the hero's proof strip is built. */
.kd-uses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ks-line);
  border: 1px solid var(--ks-line);
  border-radius: 16px;
  overflow: hidden;
}
.kd-uses li {
  background: var(--ks-bg);
  padding: 18px 20px;
}
.kd-uses b {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ks-text);
}
.kd-uses span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ks-muted);
}

/* Tick list shared by the full list and the ways to start. The tick is
   the same check the cards above draw inline, as a data URI so forty
   list items do not each carry an svg. */
.kd-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px 28px;
}
.kd-ticks li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ks-muted);
}
.kd-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 13px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c084fc' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* What you get: one ruled row per part of the business. */
.kd-spec {
  border-top: 1px solid var(--ks-line);
}
.kd-spec-row {
  display: grid;
  gap: 14px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ks-line);
}
.kd-spec-row h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ks-text);
}

/* Ways to start: three options and no figure on any of them. */
.kd-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.kd-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px;
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  background: var(--ks-elevated);
}
.kd-plan h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ks-text);
}
.kd-plan-for {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ks-muted);
}
p.kd-plan-quote {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ks-line);
  font-size: 15px;
  font-weight: 650;
  color: var(--ks-text);
}
.kd-plan-quote small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ks-faint);
}
.kd-all {
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  background: var(--ks-soft);
}
.kd-all .kd-ticks {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Security and access: a band, so it reads as a statement and not as
   one more feature section. */
.kd-band {
  background: var(--ks-surface);
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
}

/* FAQ: the family's ks-faq cards, with an open and close mark and a
   visible focus ring added. Native details, so it works with scripts
   off. */
.kd-faq {
  max-width: 820px;
}
.kd-faq .ks-faq summary {
  list-style: none;
  padding: 12px 16px;
  font-size: 15.5px;
  line-height: 1.4;
}
.kd-faq .ks-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--ks-brand-light);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.kd-faq .ks-faq[open] summary::after {
  content: "\2212";
}
.kd-faq .ks-faq summary:focus-visible {
  outline: 2px solid var(--ks-brand);
  outline-offset: -2px;
  border-radius: 8px;
}
.kd-faq .ks-faq p {
  font-size: 14.5px;
}

@media (min-width: 720px) {
  .kd-uses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kd-spec .kd-ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .kd-swipe {
    margin: 0;
    overflow: visible;
  }
  .kd-swipe > ul {
    width: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 22px;
  }
  .kd-swipe > ul.kd-snips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kd-swipe-hint {
    display: none;
  }
  .kd-uses {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kd-spec-row {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
  }
  .kd-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Desktop picker: the twelve captions become a list and one phone shows
   the chosen screen. The layout is decided here in CSS, so nothing
   moves when site.js arrives; the script only switches is-active.
   Where scripts are off (or the browser does not know this query) the
   four-column grid above stays, with every screen on show. */
@media (min-width: 900px) and (scripting: enabled) {
  .kd-shots-scroller > .kd-shots {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    grid-auto-rows: 1fr;
    min-height: 692px;
    padding-right: 368px;
  }
  .kd-shot .kd-phone {
    display: none;
    position: absolute;
    top: 0;
    right: 16px;
    width: 312px;
  }
  .kd-shot.is-active .kd-phone {
    display: block;
  }
  .kd-shot-cap {
    height: 100%;
    padding: 13px 16px;
    border: 1px solid var(--ks-line);
    border-radius: 13px;
    background: var(--ks-elevated);
    transition:
      border-color 200ms ease,
      background 200ms ease;
  }
  .kd-shot-cap:hover {
    border-color: rgba(220, 38, 38, 0.4);
  }
  .kd-shot.is-active .kd-shot-cap {
    border-color: rgba(220, 38, 38, 0.55);
    background: var(--ks-soft);
  }
  .kd-shot-pick {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
  }
  .kd-shot-pick:focus-visible {
    outline: 2px solid var(--ks-brand);
    outline-offset: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kd-browser,
  .kd-shot-cap {
    transition: none;
  }
}
    .ku-guides {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 14px;
      margin-top: 4px;
    }
    .ku-guides a {
      display: block;
      padding: 20px 22px;
      border: 1px solid var(--ks-line);
      border-radius: 14px;
      background: var(--ks-soft);
      text-decoration: none;
      transition:
        border-color 160ms ease,
        transform 100ms ease;
    }
    .ku-guides a:hover {
      border-color: var(--ks-brand);
      transform: translateY(-2px);
    }
    .ku-guides b {
      display: block;
      color: var(--ks-text);
      font-size: 16px;
      font-weight: 650;
      margin-bottom: 6px;
    }
    .ku-guides span {
      display: block;
      color: var(--ks-muted);
      font-size: 14px;
      line-height: 1.55;
    }
  /* Sticky WhatsApp bar on phones and tablets (Oct 2026): the same bar
     Kenro Workshop runs on every page, so the family behaves the same in
     the hand. The footer gains bottom padding below 980px so its last
     line is never hidden under the bar. */
  .ks-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 38;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    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);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .ks-sticky-cta .ks-btn {
    min-height: 46px;
    font-size: 13.5px;
    padding: 0 10px;
  }
  @media (min-width: 980px) {
    .ks-sticky-cta {
      display: none;
    }
  }
  @media (max-width: 979px) {
    .ks-footer {
      padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }
  }

/* ═══ Kenro Digital additions ═══════════════════════════════════════ */
.ks-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 60;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ks-brand-cta);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.ks-skip:focus {
  left: 12px;
}
.ks-page :focus-visible {
  outline: 2px solid var(--ks-brand-light);
  outline-offset: 2px;
}
.ks-link {
  color: var(--ks-brand-light) !important;
  font-weight: 650;
  text-decoration: none;
}
.ks-link:hover {
  text-decoration: underline;
}

/* "Digital" matches "Kenro" in size and plays like a TV: CRT switch-on, then a short signal glitch every few seconds. */
.ks-brand small {
  display: inline-block;
  color: var(--ks-brand-light);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.45);
  transform-origin: 50% 55%;
  animation:
    ks-tv-on 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both,
    ks-tv-glitch 6s steps(1, end) 1.6s infinite;
}
@keyframes ks-tv-on {
  0% {
    transform: scale(1.3, 0.02);
    filter: brightness(4);
    opacity: 0;
  }
  25% {
    transform: scale(1.1, 0.04);
    filter: brightness(3);
    opacity: 1;
  }
  55% {
    transform: scale(1, 1.08);
    filter: brightness(1.6);
  }
  65% {
    opacity: 0.35;
  }
  72% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: none;
    filter: none;
    opacity: 1;
  }
}
@keyframes ks-tv-glitch {
  0%,
  88%,
  100% {
    transform: none;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.45);
    opacity: 1;
  }
  89% {
    transform: translateX(-1.5px) skewX(-8deg);
    text-shadow:
      2px 0 rgba(0, 220, 255, 0.85),
      -2px 0 rgba(255, 40, 40, 0.9);
  }
  90% {
    transform: translateX(1.5px) scaleY(0.9);
    opacity: 0.55;
    text-shadow:
      -2px 0 rgba(0, 220, 255, 0.85),
      2px 0 rgba(255, 40, 40, 0.9);
  }
  91% {
    transform: none;
    opacity: 1;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.7);
  }
  93% {
    opacity: 0.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ks-brand small {
    animation: none;
  }
}

/* Hero stills. The .kd-film layer is Dealership's; each page picks its
   still with data-photo. The borrowed stills are graded warm, so they are
   muted here and the only colour on the page is Kenro Digital red. */
.kd-film[data-photo] {
  filter: saturate(0.2);
}
/* The homepage film is Digital's own (#dc2626 is graded into it), so it keeps
   its colour instead of the muting the borrowed stills get. */
.kd-film[data-photo="studio"] {
  background-image: url("/assets/shots/digital-studio.jpg");
  filter: none;
}
/* Kenro Digital's own stills (4 Oct 2026), graded like the homepage film with
   one red accent, so they keep their colour. */
.kd-film[data-photo="detailing"] {
  background-image: url("/assets/shots/digital-detailing.jpg");
  filter: none;
}
.kd-film[data-photo="workshop"] {
  background-image: url("/assets/shots/digital-workshop.jpg");
  filter: none;
}
.kd-film[data-photo="showroom"] {
  background-image: url("/assets/shots/digital-showroom.jpg");
  filter: none;
}
.kd-film[data-photo="parts"] {
  background-image: url("/assets/shots/digital-parts.jpg");
  filter: none;
}
.kd-film[data-photo="storefront"] {
  background-image: url("/assets/shots/digital-storefront.jpg");
  filter: none;
}
.kd-film[data-photo="prepare"] {
  background-image: url("/assets/shots/deal-prepare.jpg");
}
.kd-film[data-photo="buying"] {
  background-image: url("/assets/shots/deal-buying.jpg");
}
.kd-film[data-photo="arrival"] {
  background-image: url("/assets/shots/dealership-arrival.jpg");
}
/* Motorsport events: the borrowed paddock still regraded the same way
   (4 Oct 2026), the street lamp and its reflection as the red accent. */
.kd-film[data-photo="paddock"] {
  background-image: url("/assets/shots/digital-paddock.jpg");
  filter: none;
}
.kd-film[data-photo="paperwork"] {
  background-image: url("/assets/shots/deal-paperwork.jpg");
}
/* A hero with no still (guides, case studies) keeps Dealership's spacing. */
.kd-hero.is-plain {
  padding-bottom: 8px;
}
.kd-hero .kd-proof + .ks-small {
  margin-top: 28px;
}

/* Breadcrumb trail above a page's eyebrow. */
.kg-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  color: var(--ks-faint);
  font-size: 13px;
}
.kg-crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--ks-line-strong);
}
.kg-crumbs a {
  color: var(--ks-muted);
  text-decoration: none;
}
.kg-crumbs a:hover {
  color: var(--ks-text);
}

/* A .kd-surface that is a link: Dealership's guide-card hover. */
a.kd-surface {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    transform 100ms ease;
}
a.kd-surface:hover {
  border-color: var(--ks-brand);
  transform: translateY(-2px);
}
.kd-surface p + p {
  margin-top: 10px;
}
.kd-surface .kg-go {
  margin-top: auto;
  padding-top: 14px;
  color: var(--ks-brand-light);
  font-size: 13.5px;
  font-weight: 700;
}
.kd-surface .kg-site {
  color: var(--ks-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
}
.kg-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
/* Homepage work: the latest project spans the row, the others pair beneath it. */
#work .kg-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#work .kg-grid-2 > :first-child {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  #work .kg-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Motorsport events: the day in photo cards. Three across, then four, so no
   card sits alone on a row; image beside the words on tablets; stacked on
   phones. */
.kd-surface.kg-story {
  padding: 0;
  overflow: hidden;
}
.kg-story img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Borrowed warm stills, muted like the heroes so red stays the only colour. */
  filter: saturate(0.2);
}
.kg-story > div {
  padding: 20px 22px 22px;
}
.kd-grid.kg-story-grid {
  grid-template-columns: minmax(0, 1fr);
}
.kg-story-grid + .kg-handoff {
  margin-top: 16px;
}
@media (min-width: 640px) and (max-width: 1079px) {
  .kd-surface.kg-story {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .kg-story img {
    height: 100%;
    aspect-ratio: auto;
  }
}
@media (min-width: 1080px) {
  .kd-grid.kg-story-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .kg-story-grid > * {
    grid-column: span 3;
  }
  .kg-story-grid > :nth-child(-n + 3) {
    grid-column: span 4;
  }
}
/* Motorsport guides: four of them, so two by two. */
#guides .kg-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  #guides .kg-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hand-off to a Kenro product, on a trade page. */
.kg-handoff {
  display: grid;
  gap: 14px;
  padding: 24px 22px;
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 18px;
  background: var(--ks-elevated);
}
.kg-handoff p {
  margin: 0;
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.kg-handoff b {
  color: var(--ks-text);
}
@media (min-width: 760px) {
  .kg-handoff {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* How a project runs: five numbered surfaces. */
.kg-steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.kg-steps li {
  counter-increment: step;
  padding: 24px 22px;
  border: 1px solid var(--ks-line);
  border-radius: 18px;
  background: var(--ks-elevated);
}
.kg-steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--ks-brand-light);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
}
.kg-steps h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.kg-steps p {
  margin: 0;
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Case studies: heading left, the problem in Dealership's .kd-real rows. */
.kg-split {
  display: grid;
  gap: 22px;
}
@media (min-width: 900px) {
  .kg-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: start;
  }
}
.kg-split .kd-real {
  grid-template-columns: 1fr;
}
.kg-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.kg-spec li {
  padding: 7px 12px;
  border: 1px solid var(--ks-line-strong);
  border-radius: 8px;
  color: var(--ks-muted);
  font-size: 13px;
  font-weight: 600;
}
.ks-link {
  color: var(--ks-brand-light) !important;
}

/* Contact lines under the closing section. */
.kg-contact-lines {
  display: grid;
  gap: 6px;
  margin: 18px 0 0;
  color: var(--ks-faint);
  font-size: 14px;
}
.kg-contact-lines a {
  color: var(--ks-text);
  text-decoration: none;
  font-weight: 650;
}
.kg-alt {
  margin: 12px 0 0;
  color: var(--ks-faint);
  font-size: 13.5px;
}
.kg-alt a {
  color: var(--ks-muted);
}

/* Guides: long-form reading column. */
.kg-prose {
  max-width: 720px;
}
.kg-prose h2 {
  margin: 44px 0 14px;
  font-size: 26px;
}
.kg-prose h3 {
  margin: 28px 0 10px;
  font-size: 19px;
}
.kg-prose p,
.kg-prose li {
  color: #d0d0d0;
  font-size: 16.5px;
  line-height: 1.75;
}
.kg-prose p {
  margin: 0 0 16px;
}
.kg-prose ul,
.kg-prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.kg-prose li {
  margin-bottom: 8px;
}
.kg-prose b {
  color: #fff;
}
.kg-prose a {
  color: var(--ks-brand-light);
  font-weight: 600;
}
@media (min-width: 720px) {
  .kg-prose h2 {
    font-size: 30px;
  }
}
.kg-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 18px 0 0;
  color: var(--ks-faint);
  font-size: 13.5px;
}
.kg-note {
  margin: 28px 0;
  padding: 18px 20px;
  border-left: 3px solid var(--ks-brand);
  border-radius: 0 12px 12px 0;
  background: var(--ks-surface);
}
.kg-note p {
  margin: 0;
  font-size: 15.5px;
}

/* The website offer: the entry product, stated first on home and trade pages. */
.kg-offer {
  display: grid;
  gap: 24px;
  padding: 26px 22px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 18px;
  background:
    radial-gradient(560px 220px at 100% 0%, rgba(220, 38, 38, 0.14), transparent 70%),
    var(--ks-surface);
}
.kg-offer h2 {
  margin-bottom: 10px;
}
.kg-offer .ks-btn-row {
  margin-top: 22px;
}
.kg-includes {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kg-includes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--ks-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.kg-includes li b {
  display: block;
  color: var(--ks-text);
  font-size: 15px;
}
.kg-includes li::before {
  content: "✓";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--ks-brand-soft);
  color: var(--ks-brand-light);
  font-weight: 900;
  font-size: 13px;
}
.kg-alt {
  margin: 12px 0 0;
  color: var(--ks-faint);
  font-size: 13.5px;
}
.kg-alt a {
  color: var(--ks-muted);
}
@media (min-width: 900px) {
  .kg-offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    padding: 40px;
    align-items: start;
  }
}

/* ═══ Header and mega-menu ═══════════════════════════════════════════════
     Carried over from the usekenro.com header (Oct 2026) so the family
     shares one menu. The markup lives once in partials/nav.html and
     scripts/sync-partials.mjs stamps it into every page; check.mjs fails a
     page whose copy has drifted. Edit the partial, never a page.

     Desktop (>= 1000px): the triggers open floating panels over one shared
     "stage". The stage morphs its height from panel to panel and the panels
     slide in from the side you travelled from, so moving along the bar reads
     as one surface changing, not six popups. Below 1000px the same markup
     becomes a full-height accordion sheet. Behaviour: initMegaMenu in
     assets/site.js. Tokens fall back to their own values so the header works
     on a page that never defined the --ks-* ladder. */
@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, #1f1f22);
  --kn-line-strong: var(--ks-line-strong, #2e2e33);
  --kn-text: var(--ks-text, #ffffff);
  --kn-muted: var(--ks-muted, #b8b8b8);
  --kn-faint: var(--ks-faint, #8c8c8c);
  --kn-brand: var(--ks-brand, #dc2626);
  --kn-brand-light: var(--ks-brand-light, #f87171);
  --kn-gutter: var(--ku-gutter, 28px);
  --kn-ws: var(--kp-workshop, #2563eb);
  --kn-ws-light: var(--kp-workshop-light, #60a5fa);
  --kn-dl: var(--kp-dealership, #7c3aed);
  --kn-dl-light: var(--kp-dealership-light, #c084fc);
  --kn-ev: var(--kp-event, #dc2626);
  --kn-ev-light: var(--kp-event-light, #f87171);
}
/* The homepage's backdrop rule (.ks-page > *:not(.ku-backdrop)) set every
     direct child to position: relative at (0,2,0), which quietly beat
     .ks-nav's position: fixed — the bar scrolled away with the page and the
     chapter rail hung under nothing. Matched depth, later in the source. */
.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,
.kn-places {
  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);
}

/* ── Panel furniture, shared by both layouts ── */
.kn-panel [data-sys="workshop"] {
  --sys: var(--kn-ws);
  --sys-light: var(--kn-ws-light);
}
.kn-panel [data-sys="dealership"] {
  --sys: var(--kn-dl);
  --sys-light: var(--kn-dl-light);
}
.kn-panel [data-sys="digital"] {
  --sys: var(--kn-brand);
  --sys-light: var(--kn-brand-light);
}
.kn-panel [data-sys="event"] {
  --sys: var(--kn-ev);
  --sys-light: var(--kn-ev-light);
}
.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-eyebrow i {
  font-style: normal;
  color: var(--kn-faint);
}
.kn-links a,
.kn-sys-head {
  text-decoration: none;
  color: inherit;
}
.kn-links a {
  display: grid;
  gap: 3px;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  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(--sys-light, 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 {
  color: var(--sys-light, var(--kn-text));
}
.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(--sys-light, 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);
}

/* Status chip: Live pulses in the system's own hue. */
.kn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--kn-line-strong);
  color: var(--kn-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.kn-chip.is-live {
  color: var(--sys-light, var(--kn-brand-light));
  border-color: color-mix(
    in srgb,
    var(--sys, var(--kn-brand)) 38%,
    transparent
  );
  background: color-mix(in srgb, var(--sys, var(--kn-brand)) 12%, transparent);
}
.kn-chip.is-live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: kn-pulse 2.4s var(--kn-ease) infinite;
}

@keyframes kn-pulse {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  70%,
  100% {
    box-shadow: 0 0 0 6px transparent;
  }
}

/* Products: one column per system, headed by its emblem. */
.kn-sys {
  min-width: 0;
}
.kn-sys-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--kn-line);
  position: relative;
}
.kn-sys-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--sys-light);
  transform: scaleX(0.14);
  transform-origin: left;
  transition: transform 620ms var(--kn-ease);
}
.kn-sys:hover .kn-sys-head::after,
.kn-sys:focus-within .kn-sys-head::after {
  transform: scaleX(1);
}
/* No emblem images here: a dot in the system's own hue marks each column. */
.kn-sys-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sys-light);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sys) 22%, transparent);
}
.kn-sys-mark {
  width: auto;
  height: 30px;
  flex: 0 0 auto;
}
.kn-sys-id {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}
.kn-sys-aud {
  color: var(--sys-light);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kn-sys-name {
  color: var(--kn-text);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* The feature card: a still of the floor you are pointing at. */
.kn-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 16px;
  border: 1px solid var(--kn-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.kn-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #111113;
  margin-bottom: 6px;
}
.kn-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 520ms ease,
    transform 1400ms var(--kn-ease);
}
.kn-card-media img.is-on {
  opacity: 1;
  transform: none;
}
.kn-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.55));
}
.kn-card .kn-eyebrow {
  margin: 0 4px;
}
.kn-card-title {
  margin: 0 4px;
  color: var(--kn-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.kn-card .kn-more {
  margin: 2px 4px 0;
}

/* Solutions: where we install, as a dense two-list block. */
.kn-places {
  display: grid;
  gap: 2px;
}
.kn-places a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  color: var(--kn-muted);
  font-size: 13.5px;
  text-decoration: none;
  transition: color 200ms ease;
}
.kn-places a:hover,
.kn-places a:focus-visible {
  color: var(--kn-text);
}
.kn-places small {
  color: var(--kn-faint);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kn-places-h {
  margin: 14px 0 4px;
  color: var(--kn-text);
  font-size: 12.5px;
  font-weight: 700;
}
.kn-places-h:first-of-type {
  margin-top: 0;
}

/* Trades: a hued dot on each group head says which system serves it. */
.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(--sys-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sys) 22%, transparent);
}
.kn-group-h small {
  margin-left: auto;
  color: var(--sys-light);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Company: plain contact lines and the legal row. */
.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);
}
.kn-legal a {
  color: var(--kn-faint);
  font-size: 13px;
  text-decoration: none;
}
.kn-legal a:hover,
.kn-legal a:focus-visible {
  color: var(--kn-text);
}

/* A panel's closing strip: the one line every panel wants to leave you with. */
.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 WhatsApp bar — the same component the Workshop site already
     runs (.ks-sticky-cta there), so the family behaves the same on a phone.
     Phones and tablets only; on a desktop the bar's own CTA is always in
     reach. The footer gets matching room so its last line is never under it. */
.kn-sticky {
  display: none;
}
@media (max-width: 979.98px) {
  .ks-page > .kn-sticky,
  .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, #1f1f22);
    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));
  }
  /* The sticky bar is the WhatsApp button on a phone; the bar's own pill
       would be a second one on the same screen. */

}

/* ── Desktop: the bar, the pill and the morphing stage ── */
@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);
  }
  /* The pill that slides between triggers. Positioned against the bar by
       initMegaMenu, because the panels need the bar — not the list — as
       their containing block. */
  .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;
  }
  /* Stage and panels share one box under the bar. The stage paints the
       surface and animates its height; the panels are transparent and
       cross-slide over it. */
  .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(220, 38, 38, 0.11),
        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;
  }
  /* The gap between bar and panel belongs to the stage, so a pointer
       crossing it never counts as leaving the menu. */
  .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;
  }
  /* Columns arrive a beat apart, the way the page's bands do. */
  .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;
  }
  .kn-panel.is-active .kn-grid > :nth-child(5) {
    animation-delay: 180ms;
  }
  @keyframes kn-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
  .kn-grid {
    display: grid;
    gap: 12px 30px;
    align-items: start;
  }
  .kn-grid-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* A two-line audience or the longer "Built to order" chip must not push
       one column's links below its neighbours'. */
  .kn-sys-head {
    min-height: 86px;
  }
  .kn-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kn-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .kn-grid-places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
  }
  .kn-span-2 {
    grid-column: span 2;
  }

  .kn-grid-company {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .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 site.js arrives — or if it never does — plain hover and focus
       still open a panel, painted on its own surface since the stage is
       JavaScript-driven. */
  .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-products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .kn-card {
    display: flex;
  }
}

/* ── Below 1000px: the same markup as an accordion sheet ── */
@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-grid-places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
  }
  .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-4,
  .kn-grid-products,
  .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;
  }
}

/* ── Pages carried over from event.usekenro.com (Oct 2026) ──
   Kenro Event became part of Kenro Digital. Its guide and product pages
   moved here with their markup intact, so the few classes they use are
   styled here rather than rewritten page by page. */
main > .ks-section:first-child:not(.kd-hero) {
  padding-top: 112px;
}
.ke-hero-h {
  max-width: 20ch;
}
.ke-lede {
  margin: 22px 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--ks-muted);
}
.ke-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.ke-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.ke-card,
.ks-card {
  padding: 22px;
  border: 1px solid var(--ks-line);
  border-radius: 16px;
  background: var(--ks-elevated);
}
.ke-card h3 {
  margin: 0 0 12px;
  font-size: 17px;
}
.ke-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.ke-card li {
  display: flex;
  gap: 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ks-muted);
}
.ke-card li svg {
  flex: 0 0 auto;
  margin-top: 4px;
}
.ks-check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ks-brand-soft);
  color: var(--ks-brand);
  font-weight: 900;
}
.ks-edition-limits {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: 760px;
}
.ks-edition-limits li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ks-muted);
  font-size: 15px;
  line-height: 1.55;
}
.kds-distinction {
  display: grid;
  gap: 14px;
}
@media (min-width: 760px) {
  .kds-distinction {
    grid-template-columns: 1fr 1fr;
  }
}
.kds-distinction > div {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--ks-line);
  border-radius: 16px;
  background: var(--ks-surface);
}
.kds-distinction > div:last-child {
  border-color: rgba(220, 38, 38, 0.4);
}
.kds-distinction span {
  color: var(--ks-muted);
  font-size: 14.5px;
  line-height: 1.6;
}


/* Header fit: "Kenro Digital" is wider than Dealership's "Kenro", so on a
   phone the wordmark and the WhatsApp pill must never wrap onto two lines. */
.ks-nav .ks-brand,
.ks-nav .ks-nav-cta {
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 419.98px) {
  .ks-nav {
    gap: 10px;
  }
  .ks-nav .ks-brand {
    gap: 8px;
    font-size: 17px;
  }
  .ks-nav .ks-nav-cta {
    padding: 0 12px;
  }
}

/* ═══ Homepage hero, ported from the Kenro Workshop root (Oct 2026) ═══
   Harman, 4 Oct 2026: "start like this, less heavy". The homepage fold is
   the Workshop root's, rule for rule, with its blue swapped for Digital red:
   the film full-screen behind centred copy, a typed pill, a two-line H1
   whose accent lands one word at a time, one rotating pointer line, one
   button, a trust line, three tags, then the trades marquee.

   Source: Kenro Workshop src/sites/workshop/landing-content.js
   (renderLandingStyles) and global-content.js (renderUniversalStyles,
   heroPillStyles, heroPointerStyles, heroAccentStyles). Class names are
   kept so the two can be diffed.

   FOUR DELIBERATE DIFFERENCES, all so every animation here is transform or
   opacity only (no paint or layout per frame):
     1. The pill types by revealing one character span at a time (opacity)
        instead of a stepped clip-path, and the caret is each character's
        ::after (opacity) instead of an absolutely placed bar moved by
        `left`. Same 45ms-per-character steps from the same 420ms start.
     2. The accent words rise and fade without the 6px blur.
     3. The button's two-beat pulse is a ring behind it that scales and
        fades, instead of an animated box-shadow.
     4. Workshop's page-wide .ks-btn weight, transition and hover lift are
        scoped to the hero button so the rest of this site keeps its own.

   Nothing here waits on JavaScript: if site.js fails, every line still
   rises in from CSS alone. Reduced motion gets the finished, static fold. */

/* ---------- Hero (renderLandingStyles) ---------- */
.ks-hero {
  position: relative;
  padding-top: 60px;
  padding-bottom: 0;
  overflow: hidden;
}
@media (min-width: 980px) {
  .ks-hero {
    padding-top: 92px;
  }
}
.ks-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 10px;
  margin: 0 0 28px;
  border: 1px solid var(--ks-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-hero-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ks-brand);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2);
}
.ks-hero-h {
  margin: 0 auto 20px;
  max-width: 960px;
  font-size: clamp(33px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: #fff;
  text-wrap: balance;
}
/* Specificity bump, as on Workshop: beats .ks-page h1's 40px/64px. */
.ks-hero .ks-hero-h {
  font-size: clamp(33px, 5vw, 52px);
}
.ks-hero-h-accent {
  color: var(--ks-brand-light);
  font-style: italic;
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  font-weight: 500;
}
.ks-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ks-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 26px;
  font-size: 13.5px;
  color: var(--ks-muted);
}
.ks-hero-tags span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ks-hero-tags i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.9);
}
@media (min-width: 980px) {
  .ks-hero-tags {
    justify-content: center;
  }
}

/* The button's attention pulse, two beats then rest (difference 3). */
.ks-hero-cta .ks-btn-primary {
  position: relative;
}
.ks-hero-cta .ks-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 8px;
  pointer-events: none;
  background: rgba(220, 38, 38, 0.5);
  opacity: 0;
  animation: ks-cta-pulse 400ms ease-out 2.4s 2;
}
@keyframes ks-cta-pulse {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(1.09, 1.5);
  }
}
.ks-hero {
  opacity: 1;
}

/* The first screen: hero fills the viewport and the marquee sits at its
   bottom edge. min-height, not height: short viewports scroll, never clip. */
.kv-fold {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.kv-fold .kv-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kv-hero {
  position: relative;
  padding-bottom: 48px;
}
.kv-hero-film {
  position: absolute;
  inset: -40px 0 auto 0;
  height: 118%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: #000 center / cover no-repeat
    url("/assets/shots/digital-studio.jpg");
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 46%,
    transparent 86%
  );
  mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 86%);
  opacity: 0.62;
}
.kv-hero-film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kv-hero-film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.5) 42%,
      rgba(0, 0, 0, 0.34) 72%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 38%);
}
.kv-hero > .ks-shell {
  position: relative;
  z-index: 1;
}
@media (max-width: 979px) {
  .kv-hero-film {
    opacity: 0.3;
  }
  .kv-hero-film video {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kv-hero-film video {
    display: none;
  }
}
.kv-hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 980px) {
  .kv-hero-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
  }
  .kv-hero-copy {
    text-align: left;
  }
  .kv-hero-copy .ks-hero-h {
    margin-left: 0;
  }
  .kv-hero-copy .ks-hero-pill {
    margin-left: 0;
  }
  .kv-hero-copy .ks-hero-cta {
    justify-content: flex-start;
  }
  .kv-hero-copy .ks-hero-tags {
    justify-content: flex-start;
  }
  .kv-hero-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
  }
}
.kv-hero-copy .ks-hero-h {
  text-align: inherit;
}
/* The accent owns its own line, so it never wraps mid-phrase. */
.kv-hero-copy .ks-hero-h-accent {
  display: block;
}
p.kv-trust-note {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #c7ccd1;
  opacity: 0.75;
}

/* Marquee */
.kv-marquee {
  border-top: 1px solid rgba(199, 204, 209, 0.1);
  border-bottom: 1px solid rgba(199, 204, 209, 0.1);
  padding: 30px 0;
  background: #0b0b0d;
}
p.kv-mq-lead {
  margin: 0 auto 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c7ccd1;
  opacity: 0.7;
}
.kv-page p.kv-mq-lead {
  text-align: center;
}
.kv-mq-viewport {
  overflow: hidden;
}
.kv-mq-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: kv-mq 46s linear infinite;
}
@keyframes kv-mq {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kv-mq-track {
    animation: none;
  }
}
.kv-mq-item {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(244, 244, 245, 0.85);
  white-space: nowrap;
}
.kv-mq-dot {
  width: 5px;
  height: 5px;
  background: rgba(220, 38, 38, 0.7);
  flex-shrink: 0;
}

/* Settle-stagger fade-up, the base hero entrance */
.ks-rise {
  opacity: 0;
  transform: translateY(14px);
  animation: ks-rise-in 720ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: var(--rise-delay, 0ms);
}
@keyframes ks-rise-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The hero button: Workshop's weight and hover lift (difference 4). */
.ks-hero-cta .ks-btn {
  letter-spacing: 0;
  font-weight: 600;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
.ks-hero-cta .ks-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(220, 38, 38, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .ks-rise,
  .ks-hero-cta .ks-btn {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ks-hero-cta .ks-btn-primary::after {
    animation: none !important;
  }
}

/* ---------- The centred, full-screen fold (renderUniversalStyles) ---------- */
.kx-hero {
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
}
.kx-hero .kv-hero-grid {
  justify-content: center;
  grid-template-columns: minmax(0, 760px);
}
.kx-hero .kv-hero-copy {
  text-align: center;
}
.kx-hero .kv-hero-copy .ks-hero-pill,
.kx-hero .kv-hero-copy .ks-hero-h {
  margin-left: auto;
  margin-right: auto;
}
.kx-hero .ks-hero-cta {
  justify-content: center;
}
.kx-hero .kv-trust-note {
  text-align: center;
}
.kx-hero .ks-hero-tags {
  justify-content: center;
}
/* Additions to Workshop's rules, all scoped to this fold.
   - Workshop's whole page inherits line-height 1.5; this site's is normal.
     Set here so the pill, trust line, tags and marquee lead have Workshop's
     exact heights.
   - Workshop has a secondary line between its button and its trust line;
     this fold has none (Harman, 4 Oct 2026), so the spacing is set rather
     than inherited: the trust line 28px under the button, the tags 16px
     under the trust line (Workshop's tags sit 0px under it), 18px between
     tags and 10px between rows when they wrap.
   - "Talk to us" is too short a label to give the button presence on its
     own, so the button holds a floor width.
   - The three tags need about 756px; on a wide screen the row may use 60px
     either side of the 760px column so it always stays one line. */
.kx-hero,
.kv-marquee {
  line-height: 1.5;
}
.kx-hero .kv-trust-note {
  margin-top: 28px;
}
.kx-hero .ks-hero-tags {
  margin-top: 16px;
  gap: 10px 18px;
}
.kx-hero .ks-btn-lg {
  min-width: 200px;
}
@media (min-width: 980px) {
  .kx-hero .ks-hero-tags {
    margin-left: -60px;
    margin-right: -60px;
  }
}
/* The film everywhere, phones included, at full strength under its scrim. */
.kx-hero .kv-hero-film {
  opacity: 1;
  background: #000 center / cover no-repeat
    url("/assets/shots/digital-studio.jpg");
}
.kx-hero .kv-hero-film video {
  display: block;
  transform: scale(var(--film-scale, 1));
  transform-origin: center;
  will-change: transform;
}
.kx-hero .kv-hero-film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 8, 0.55) 0%,
      rgba(7, 7, 8, 0.74) 50%,
      rgba(7, 7, 8, 0.55) 100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 7, 8, 0.35) 0%,
      rgba(7, 7, 8, 0) 30%,
      rgba(7, 7, 8, 0.85) 100%
    );
}
@media (prefers-reduced-motion: reduce) {
  .kx-hero .kv-hero-film video {
    display: none;
  }
}

/* ---------- The typed pill (heroPillStyles, difference 1) ----------
   Off below 760px, where the line wraps to two rows, and under reduced
   motion. Both show the finished sentence, never a half-typed one. The
   visible letters are aria-hidden; .kx-type-label carries the sentence for
   screen readers, which would otherwise spell it out letter by letter. */
.kx-type {
  position: relative;
  display: inline-block;
}
.kx-type-text {
  display: inline-block;
}
.kx-type-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.kx-type-caret {
  display: none;
}
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  .kx-type {
    white-space: nowrap;
  }
  .kx-type-text .kx-ch {
    position: relative;
    opacity: 0;
    animation: kx-ch-in 1ms linear forwards;
    animation-delay: calc(465ms + var(--i) * 45ms);
  }
  /* The caret sits after the newest letter for one 45ms step... */
  .kx-type-text .kx-ch::after {
    content: "";
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: 100%;
    width: 1.5px;
    background: var(--ks-brand-light, #f87171);
    opacity: 0;
    animation: kx-caret-here 45ms linear;
    animation-delay: calc(465ms + var(--i) * 45ms);
  }
  /* ...and blinks after the last one for good. */
  .kx-type-text .kx-ch:last-child::after {
    animation: kx-type-blink 900ms step-end infinite;
    animation-delay: calc(465ms + var(--i) * 45ms);
  }
  /* The caret before the first letter, from 420ms until it lands. */
  .kx-type-caret {
    display: block;
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: 0;
    width: 1.5px;
    background: var(--ks-brand-light, #f87171);
    animation:
      kx-type-blink 900ms step-end 420ms infinite,
      kx-caret-off 1ms linear 465ms forwards;
  }
}
@keyframes kx-ch-in {
  to {
    opacity: 1;
  }
}
@keyframes kx-caret-here {
  0%,
  100% {
    opacity: 1;
  }
}
@keyframes kx-caret-off {
  to {
    opacity: 0;
  }
}
@keyframes kx-type-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ---------- The rotating pointer line (heroPointerStyles) ----------
   CSS-only: every pointer is in the DOM, each offset by its own inline
   animation-delay (i x 2.8s, less 0.5s). Five pointers, so the cycle is
   5 x 2.8s = 14s and each owns a 20% slot: in by 18% of it (0.5s), out from
   82%. The 0.5s head start is that fade-in, so the first phrase is already
   showing on first paint instead of fading up from blank. The block's
   height is fixed, so nothing below it moves as phrases change. Adding or
   removing a pointer means recomputing these numbers. */
.kx-ptrs {
  position: relative;
  margin: 0 auto 28px;
  height: 3.1em;
  max-width: 620px;
}
.kx-ptr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ks-muted);
  opacity: 0;
  animation: kx-ptr 14s linear infinite;
}
@keyframes kx-ptr {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  3.6% {
    opacity: 1;
    transform: none;
  }
  16.4% {
    opacity: 1;
    transform: none;
  }
  20% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}
/* Reduced motion gets the whole list at once, not a frozen single line. */
@media (prefers-reduced-motion: reduce) {
  .kx-ptrs {
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
  }
  .kx-ptr {
    position: static;
    inset: auto;
    opacity: 1;
    animation: none;
    font-size: 15px;
  }
}

/* ---------- The accent, one word per beat (heroAccentStyles, difference 2) */
.ks-hero-h-accent .kx-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: kx-word-in 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes kx-word-in {
  to {
    opacity: 1;
    transform: none;
  }
}
/* Never leave a reader looking at an invisible headline. */
@media (prefers-reduced-motion: reduce) {
  .ks-hero-h-accent .kx-word {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* The lede, the email address and the proof strip that used to sit in the
   hero, now the first band below the fold. */
.kd-intro .kd-lede {
  margin-top: 0;
}