/* ==========================================================================
   KRATOS, site stylesheet
   Built on the Kratos Design System tokens (tokens.css).
   Personality: Premium / Luxury · Bold / Performance-driven · Minimal / Swiss
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core neutrals, warm, not cool */
  --k-ink:        #0B0A09;
  --k-ink-2:      #1A1816;
  --k-ink-3:      #2B2825;
  --k-ink-4:      #3D3935;
  --k-paper:      #F6F3EE;
  --k-paper-2:    #EFEBE3;
  --k-paper-3:    #E5DFD3;
  --k-cream:      #FBF8F2;

  /* Bronze brand ramp (from the K logo) */
  --k-bronze-50:  #F7EDE2;
  --k-bronze-100: #ECD5BD;
  --k-bronze-200: #DDB892;
  --k-bronze-300: #C69573;
  --k-bronze-400: #AE7651;
  --k-bronze-500: #945D3C;
  --k-bronze-600: #6F4428;
  --k-bronze-700: #4E2F1B;

  --k-bronze-gradient: linear-gradient(135deg,
    #D9A77A 0%, #B27A4E 22%, #7A4424 48%, #C9885C 72%, #E6B98D 100%);

  --k-positive: #2E7D5B;
  --k-negative: #B53A2A;

  /* Semantic */
  --k-bg:            var(--k-paper);
  --k-bg-elevated:   var(--k-cream);
  --k-bg-inverse:    var(--k-ink);
  --k-fg:            var(--k-ink);
  --k-fg-muted:      #5E5853;
  --k-fg-subtle:     #8A837A;
  --k-fg-inverse:    var(--k-paper);
  --k-fg-on-dark:    #A39A8D;
  --k-border:        var(--k-paper-3);
  --k-border-strong: #CFC7B6;
  --k-border-dark:   #2B2825;

  /* Type */
  --k-font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-font-serif: 'Noto Serif', 'Iowan Old Style', Palatino, Georgia, serif;
  --k-font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --k-tight:   -0.03em;
  --k-tighter: -0.045em;
  --k-wide:    0.08em;
  --k-wider:   0.14em;
  --k-widest:  0.22em;

  /* Spacing */
  --k-s-1: 4px;   --k-s-2: 8px;   --k-s-3: 12px;  --k-s-4: 16px;
  --k-s-5: 20px;  --k-s-6: 24px;  --k-s-7: 32px;  --k-s-8: 40px;
  --k-s-9: 56px;  --k-s-10: 72px; --k-s-11: 96px; --k-s-12: 128px;

  /* Radii, mostly sharp */
  --k-r-xs: 2px; --k-r-sm: 4px; --k-r-md: 8px; --k-r-lg: 14px; --k-r-pill: 999px;

  /* Shadows, restrained, warm */
  --k-shadow-sm: 0 1px 2px rgba(46,30,15,.06);
  --k-shadow-md: 0 4px 16px -4px rgba(46,30,15,.10), 0 2px 4px rgba(46,30,15,.04);
  --k-shadow-lg: 0 24px 48px -12px rgba(46,30,15,.18), 0 8px 16px -8px rgba(46,30,15,.08);

  /* Motion */
  --k-ease-out:    cubic-bezier(.22, 1, .36, 1);
  --k-ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --k-dur-fast: 160ms; --k-dur-base: 260ms; --k-dur-slow: 480ms;

  /* Grid */
  --k-container: 1280px;
  --k-gutter: 32px;
  --k-nav-h: 68px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--k-font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  color: var(--k-fg);
  background: var(--k-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11', 'calt';
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--k-bronze-200); color: var(--k-ink); }

:focus-visible {
  outline: 2px solid var(--k-bronze-400);
  outline-offset: 3px;
  border-radius: var(--k-r-xs);
}

.k-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--k-ink); color: var(--k-paper);
  padding: 12px 20px; font-size: 14px; text-decoration: none;
}
.k-skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.k-container { max-width: var(--k-container); margin: 0 auto; padding: 0 var(--k-gutter); }
.k-narrow    { max-width: 760px; margin: 0 auto; }
.k-section   { padding: 112px 0; border-bottom: 1px solid var(--k-border); }
.k-section--tight { padding: 72px 0; }
/* "flush" means flush against whatever precedes it, so it has to drop the top
   padding as well as the border. Clearing only the border left a pagehead's
   60px bottom padding sitting on top of this section's 112px, a 172px void at
   the head of every data page. */
.k-section--flush { padding-top: 0; border-bottom: 0; }
/* Two full sections in a row put 112px against 112px at the seam. */
.k-section--flush + .k-section { padding-top: 64px; }
/* The CTA band brings its own 104px, so the section above it does not need a
   full stop underneath as well. */
.k-section + .k-cta { padding-top: 84px; }

.k-dark {
  background: var(--k-ink);
  color: var(--k-fg-inverse);
  border-bottom-color: var(--k-border-dark);
  position: relative;
  overflow: hidden;
}
.k-dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 80% at 100% 118%, rgba(174,118,81,.20), transparent 70%);
}
.k-dark > * { position: relative; z-index: 1; }

.k-elevated { background: var(--k-cream); }

/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
.k-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: var(--k-widest); text-transform: uppercase;
  color: var(--k-bronze-500);
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px;
}
.k-eyebrow::before {
  content: ''; width: 28px; height: 2px; flex: none;
  background: var(--k-bronze-400);
}
.k-dark .k-eyebrow { color: var(--k-bronze-300); }
.k-eyebrow--plain::before { display: none; }

.k-serif { font-family: var(--k-font-serif); font-style: italic; font-weight: 600; }

/* box-decoration-break is what makes this survive wrapping. An inline element
   that breaks across two lines has fragmented boxes, and without `clone` the
   gradient is painted once across the whole fragmented area, which leaves the
   text with no paint over it at all: the words vanish. "real estate" and
   "trust us" both wrap, which is why both disappeared while single-line
   phrases like "businesses" looked fine. */
/* `display: inline-block` is load-bearing. As a plain inline element that wraps
   onto two lines, the box fragments and the gradient is painted across the
   union of the fragments, leaving no paint over the glyphs: the words render
   completely invisible while still taking up space. box-decoration-break was
   not enough on its own. An inline-block is a single box that still wraps its
   text internally, so the gradient covers every line and the clip works.
   -webkit-text-fill-color is needed too; `color` alone loses to the UA
   stylesheet in some WebKit builds. */
/* The selector has to include `.k-w__i`. On a [data-split] headline the word
   splitter recurses into this element, so its text ends up inside per-word
   spans that each have `overflow: hidden`. The element is then left with no
   text of its own, and `background-clip: text` has nothing to clip the
   gradient to, so the words render completely invisible while still taking up
   space. Painting the gradient on the inner spans as well fixes it, because
   each one is an inline-block that actually contains the glyphs. */
.k-metal,
.k-metal .k-w__i {
  background: var(--k-bronze-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* If background-clip:text is unsupported, transparent text would be invisible
   rather than merely unstyled. Fall back to solid bronze. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .k-metal { color: var(--k-bronze-400); background: none; }
}

.k-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum','cv11'; }
.k-mono { font-family: var(--k-font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.k-display {
  font-size: clamp(52px, 9.2vw, 132px);
  font-weight: 600; letter-spacing: var(--k-tighter);
  line-height: .92; margin: 0 0 32px;
}
.k-h1 { font-size: clamp(40px, 6.4vw, 84px); font-weight: 600; letter-spacing: var(--k-tighter); line-height: .98; margin: 0 0 24px; }
.k-h2 { font-size: clamp(32px, 4.6vw, 64px); font-weight: 600; letter-spacing: var(--k-tight); line-height: 1.02; margin: 0; }
.k-h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.14; margin: 0; }
.k-h4 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; margin: 0; }

.k-lead  { font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; line-height: 1.55; color: var(--k-fg-muted); margin: 0; max-width: 52ch; }
.k-body  { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--k-fg-muted); margin: 0; }
.k-small { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--k-fg-subtle); margin: 0; }

.k-dark .k-lead, .k-dark .k-body { color: var(--k-fg-on-dark); }
.k-dark .k-small { color: #7E766B; }

.k-section-head {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 56px; align-items: end; margin-bottom: 56px;
}
.k-section-head .k-h2 { max-width: 16ch; }
.k-section-head .k-lead { max-width: 46ch; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 24px; border-radius: var(--k-r-sm);
  font-size: 14px; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease-out),
              color var(--k-dur-fast) var(--k-ease-out),
              border-color var(--k-dur-fast) var(--k-ease-out),
              transform var(--k-dur-fast) var(--k-ease-out);
  white-space: nowrap;
}
.k-btn:active { transform: translateY(1px); }
.k-btn .k-arrow { transition: transform var(--k-dur-base) var(--k-ease-out); }
.k-btn:hover .k-arrow { transform: translateX(4px); }

.k-btn--primary { background: var(--k-ink); color: var(--k-paper); }
.k-btn--primary:hover { background: var(--k-ink-3); }

.k-btn--bronze { background: var(--k-bronze-500); color: #fff; }
.k-btn--bronze:hover { background: var(--k-bronze-600); }

.k-btn--ghost { background: transparent; color: var(--k-ink); border-color: var(--k-border-strong); }
.k-btn--ghost:hover { background: rgba(11,10,9,.05); border-color: var(--k-ink); }

.k-btn--lg { padding: 18px 30px; font-size: 15px; }
.k-btn--sm { padding: 11px 16px; font-size: 13px; }

.k-dark .k-btn--primary { background: var(--k-paper); color: var(--k-ink); }
.k-dark .k-btn--primary:hover { background: #fff; }
.k-dark .k-btn--ghost { color: var(--k-paper); border-color: var(--k-ink-4); }
.k-dark .k-btn--ghost:hover { background: rgba(246,243,238,.08); border-color: var(--k-bronze-400); }

.k-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--k-bronze-500);
  border-bottom: 1px solid var(--k-border-strong);
  padding-bottom: 5px;
  transition: color var(--k-dur-fast), border-color var(--k-dur-fast);
}
.k-link:hover { color: var(--k-bronze-600); border-color: var(--k-bronze-400); }
.k-link .k-arrow { transition: transform var(--k-dur-base) var(--k-ease-out); }
.k-link:hover .k-arrow { transform: translateX(4px); }
.k-dark .k-link { color: var(--k-bronze-300); border-color: var(--k-ink-4); }
.k-dark .k-link:hover { color: var(--k-bronze-200); border-color: var(--k-bronze-400); }

/* --------------------------------------------------------------------------
   6. NAV
   -------------------------------------------------------------------------- */
.k-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246,243,238,.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--k-border);
  transition: box-shadow var(--k-dur-base) var(--k-ease-out);
}
.k-nav[data-stuck='true'] { box-shadow: 0 1px 20px rgba(46,30,15,.07); }

/* Three tracks so the menu sits dead-centre in the bar regardless of how wide
   the brand and the CTA are. On desktop the toggle is hidden, on mobile the CTA
   is, so there are always exactly three children for three columns. */
.k-nav__inner {
  max-width: var(--k-container); margin: 0 auto;
  padding: 0 var(--k-gutter); height: var(--k-nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
}

.k-brand {
  justify-self: start;
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  text-decoration: none; color: var(--k-ink); flex: none;
}
.k-brand img { height: 26px; width: auto; }

.k-nav__menu {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: 30px;
  font-size: 14px; font-weight: 600;
}
.k-nav__menu > li { position: relative; }
.k-nav__menu a {
  color: var(--k-fg-muted); text-decoration: none;
  transition: color var(--k-dur-fast);
  display: inline-flex; align-items: center; gap: 5px;
}
.k-nav__menu a:hover, .k-nav__menu a[aria-current='page'] { color: var(--k-ink); }

/* dropdown */
.k-nav__sub {
  position: absolute; top: calc(100% + 14px); left: -18px;
  min-width: 226px; padding: 8px;
  background: var(--k-cream); border: 1px solid var(--k-border);
  border-radius: var(--k-r-md); box-shadow: var(--k-shadow-lg);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--k-dur-fast) var(--k-ease-out),
              transform var(--k-dur-fast) var(--k-ease-out),
              visibility var(--k-dur-fast);
}
.k-nav__item:hover .k-nav__sub,
.k-nav__item:focus-within .k-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.k-nav__sub a {
  display: block; padding: 10px 12px; border-radius: var(--k-r-sm);
  color: var(--k-ink); font-size: 14px;
}
.k-nav__sub a:hover { background: var(--k-paper-2); color: var(--k-bronze-600); }
.k-nav__caret { width: 9px; height: 9px; opacity: .5; }

.k-nav__cta { justify-self: end; }
.k-nav__toggle {
  display: none; justify-self: end;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--k-border-strong);
  border-radius: var(--k-r-sm); cursor: pointer;
  align-items: center; justify-content: center;
}
.k-nav__toggle span {
  display: block; width: 17px; height: 1.5px; background: var(--k-ink);
  position: relative; transition: background var(--k-dur-fast);
}
.k-nav__toggle span::before, .k-nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--k-ink);
  transition: transform var(--k-dur-base) var(--k-ease-out);
}
.k-nav__toggle span::before { top: -5.5px; }
.k-nav__toggle span::after  { top: 5.5px; }
.k-nav__toggle[aria-expanded='true'] span { background: transparent; }
.k-nav__toggle[aria-expanded='true'] span::before { transform: translateY(5.5px) rotate(45deg); }
.k-nav__toggle[aria-expanded='true'] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.k-hero { padding: 88px 0 80px; border-bottom: 1px solid var(--k-border); position: relative; overflow: hidden; }
/* Both columns stretch to the same height and the facts distribute across it,
   so the hero reads as one balanced block, no void above or below the list. */
.k-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.k-hero .k-display { max-width: 13ch; }
.k-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* One grid for the whole list, `display: contents` on each row promotes its
   dt/dd to grid children, so the number column is sized once against the widest
   value ("100+") and every label starts on the same edge. Sizing each row
   separately made the wide values collide with their labels. */
.k-hero__aside {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 22px;
  border-top: 1px solid var(--k-border);
}
.k-hero__fact { display: contents; }
.k-hero__fact dt,
.k-hero__fact dd {
  padding: 20px 0;
  border-bottom: 1px solid var(--k-border);
  align-self: center;
}
.k-hero__fact dt {
  font-family: var(--k-font-serif); font-style: italic; font-weight: 700;
  font-size: clamp(28px, 2.6vw, 36px); line-height: 1;
  letter-spacing: -.02em; color: var(--k-bronze-500);
  font-variant-numeric: tabular-nums; margin: 0;
  white-space: nowrap;
}
.k-hero__fact dd {
  margin: 0; font-size: 13px; font-weight: 500;
  color: var(--k-fg-muted); line-height: 1.4;
}

/* page header (interior pages) */
.k-pagehead { padding: 76px 0 60px; border-bottom: 1px solid var(--k-border); }
.k-pagehead .k-h1 { max-width: 18ch; }
.k-crumb {
  display: flex; gap: 9px; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--k-fg-subtle);
  letter-spacing: .04em; margin: 0 0 22px;
}
.k-crumb a { text-decoration: none; color: var(--k-fg-subtle); }
.k-crumb a:hover { color: var(--k-bronze-500); }

/* --------------------------------------------------------------------------
   8. MARQUEE (capability strip)
   -------------------------------------------------------------------------- */
.k-marquee {
  border-bottom: 1px solid var(--k-border);
  padding: 20px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.k-marquee__track { display: flex; width: max-content; animation: k-scroll 46s linear infinite; }
.k-marquee:hover .k-marquee__track { animation-play-state: paused; }
.k-marquee__group { display: flex; align-items: center; flex: none; }
.k-marquee span {
  font-size: 13px; font-weight: 600; letter-spacing: var(--k-wide);
  text-transform: uppercase; color: var(--k-fg-subtle);
  padding: 0 26px; display: inline-flex; align-items: center; gap: 26px; white-space: nowrap;
}
.k-marquee span::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--k-bronze-400); flex: none;
}
@keyframes k-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .k-marquee__track { animation: none; } }

/* --------------------------------------------------------------------------
   9. STATS BAND
   -------------------------------------------------------------------------- */
.k-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--k-border-dark); }
.k-stat { padding: 30px 26px 0 0; border-right: 1px solid var(--k-border-dark); }
.k-stat:last-child { border-right: 0; padding-right: 0; }
.k-stat:not(:first-child) { padding-left: 26px; }
.k-stat__label { font-size: 11px; letter-spacing: var(--k-widest); text-transform: uppercase; color: var(--k-bronze-300); font-weight: 600; }
.k-stat__value {
  font-size: clamp(40px, 4.6vw, 66px); font-weight: 600;
  letter-spacing: var(--k-tighter); line-height: 1; margin: 16px 0 8px;
  font-variant-numeric: tabular-nums;
}
.k-stat__value .unit { font-family: var(--k-font-serif); font-style: italic; color: var(--k-bronze-300); font-size: .42em; margin-left: 6px; letter-spacing: 0; }
.k-stat__note { font-size: 13px; color: var(--k-fg-on-dark); font-weight: 500; }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.k-grid { display: grid; gap: 20px; }
.k-grid--2 { grid-template-columns: repeat(2, 1fr); }
.k-grid--3 { grid-template-columns: repeat(3, 1fr); }
.k-grid--4 { grid-template-columns: repeat(4, 1fr); }

.k-card {
  background: var(--k-cream); border: 1px solid var(--k-border);
  border-radius: var(--k-r-md); padding: 30px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--k-dur-base) var(--k-ease-out),
              box-shadow var(--k-dur-base) var(--k-ease-out),
              border-color var(--k-dur-base) var(--k-ease-out);
}
.k-card--link { text-decoration: none; color: inherit; }
.k-card--link:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-md); border-color: var(--k-border-strong); }
.k-card__num { font-family: var(--k-font-mono); font-size: 11px; letter-spacing: var(--k-wider); color: var(--k-bronze-500); text-transform: uppercase; }
.k-card__foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--k-border);
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.k-card__foot span:first-child { color: var(--k-fg-subtle); font-weight: 500; }

.k-dark .k-card { background: var(--k-ink-2); border-color: var(--k-border-dark); }
.k-dark .k-card__foot { border-top-color: var(--k-border-dark); }
.k-dark .k-card--link:hover { border-color: var(--k-bronze-600); }

/* numbered process steps */
.k-step { min-height: 300px; }
.k-step .k-h3 { max-width: 15ch; }

/* --------------------------------------------------------------------------
   11. FEATURE / CASE PANEL
   -------------------------------------------------------------------------- */
.k-panel {
  background: var(--k-ink); color: var(--k-fg-inverse);
  border-radius: var(--k-r-md); padding: 64px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px; align-items: center;
  position: relative; overflow: hidden;
}
.k-panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 80% at 108% 112%, rgba(174,118,81,.22), transparent 70%);
}
.k-panel > * { position: relative; z-index: 1; }
.k-panel .k-h2 { max-width: 16ch; margin-bottom: 20px; }

.k-metrics { display: flex; flex-direction: column; }
.k-metric {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: 20px 0; border-top: 1px solid var(--k-border-dark);
}
.k-metric:first-child { border-top: 0; padding-top: 0; }
.k-metric__label { font-size: 12px; letter-spacing: var(--k-wide); text-transform: uppercase; color: var(--k-fg-on-dark); font-weight: 600; }
.k-metric__sub   { font-size: 11px; color: var(--k-bronze-300); font-weight: 600; margin-top: 3px; }
.k-metric__value { font-size: clamp(30px, 3vw, 42px); font-weight: 600; letter-spacing: var(--k-tight); font-variant-numeric: tabular-nums; }
.k-metric__value .unit { font-family: var(--k-font-serif); font-style: italic; color: var(--k-bronze-300); font-size: .48em; margin-left: 5px; }

/* --------------------------------------------------------------------------
   12. QUOTE
   -------------------------------------------------------------------------- */
.k-quote { max-width: 940px; margin: 0 auto; text-align: center; }
.k-quote blockquote {
  font-family: var(--k-font-serif); font-style: italic; font-weight: 600;
  font-size: clamp(24px, 3.1vw, 42px); line-height: 1.26; letter-spacing: -.02em;
  margin: 0 0 28px; color: var(--k-fg);
}
.k-quote blockquote::before { content: '\201C'; color: var(--k-bronze-400); }
.k-quote blockquote::after  { content: '\201D'; color: var(--k-bronze-400); }
.k-quote__attr {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  font-size: 14px; font-weight: 600; color: var(--k-fg-muted);
}
.k-quote__attr strong { color: var(--k-fg); }
.k-quote__attr .sep { opacity: .4; }
.k-dark .k-quote blockquote { color: var(--k-paper); }
.k-dark .k-quote__attr strong { color: var(--k-paper); }

.k-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.k-quotecard {
  background: var(--k-cream); border: 1px solid var(--k-border);
  border-radius: var(--k-r-md); padding: 34px;
  display: flex; flex-direction: column; gap: 22px;
}
.k-quotecard p {
  font-family: var(--k-font-serif); font-style: italic; font-weight: 600;
  font-size: 19px; line-height: 1.44; margin: 0; color: var(--k-fg);
}
.k-quotecard footer { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.k-quotecard footer .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--k-bronze-400); flex: none; }

/* --------------------------------------------------------------------------
   13. PORTFOLIO GALLERY
   -------------------------------------------------------------------------- */
.k-gallery { display: grid; gap: 16px; }
.k-gallery--square  { grid-template-columns: repeat(4, 1fr); }
.k-gallery--wide    { grid-template-columns: repeat(3, 1fr); }
.k-gallery--tall    { grid-template-columns: repeat(4, 1fr); }
.k-gallery--video   { grid-template-columns: repeat(4, 1fr); }

.k-tile {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  background: var(--k-paper-2); cursor: zoom-in; padding: 0;
  transition: transform var(--k-dur-base) var(--k-ease-out),
              box-shadow var(--k-dur-base) var(--k-ease-out),
              border-color var(--k-dur-base) var(--k-ease-out);
}
.k-tile:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-md); border-color: var(--k-bronze-300); }
.k-tile img { width: 100%; display: block; transition: transform var(--k-dur-slow) var(--k-ease-out); }
.k-tile:hover img { transform: scale(1.03); }

.k-tile--square img { aspect-ratio: 1/1; object-fit: cover; }
.k-tile--wide img   { aspect-ratio: 16/9; object-fit: cover; }
.k-tile--tall {
  /* long landing-page screenshots: show the top, reveal on hover */
  height: 420px;
}
.k-tile--tall img { height: auto; object-fit: cover; object-position: top; transition: transform 3.2s var(--k-ease-in-out); }
.k-tile--tall:hover img { transform: translateY(calc(-100% + 420px)); }

.k-tile__meta {
  position: absolute; inset: auto 0 0 0; padding: 14px 16px;
  background: linear-gradient(to top, rgba(11,10,9,.92), rgba(11,10,9,0));
  color: var(--k-paper); font-size: 12px; font-weight: 600;
  letter-spacing: -.005em; text-align: left;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--k-dur-base) var(--k-ease-out), transform var(--k-dur-base) var(--k-ease-out);
}
.k-tile:hover .k-tile__meta, .k-tile:focus-visible .k-tile__meta { opacity: 1; transform: translateY(0); }

.k-tile__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.k-tile__play span {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(11,10,9,.62); backdrop-filter: blur(6px);
  display: grid; place-items: center;
  border: 1px solid rgba(246,243,238,.28);
  transition: transform var(--k-dur-base) var(--k-ease-out), background var(--k-dur-base);
}
.k-tile:hover .k-tile__play span { transform: scale(1.09); background: var(--k-bronze-500); }
.k-tile__play svg { width: 15px; height: 15px; fill: var(--k-paper); margin-left: 2px; }

/* filter chips */
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.k-chip {
  padding: 9px 16px; border-radius: var(--k-r-pill);
  border: 1px solid var(--k-border-strong); background: transparent;
  font-size: 13px; font-weight: 600; color: var(--k-fg-muted); cursor: pointer;
  transition: all var(--k-dur-fast) var(--k-ease-out);
}
.k-chip:hover { border-color: var(--k-ink); color: var(--k-ink); }
.k-chip[aria-pressed='true'] { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-paper); }

/* --------------------------------------------------------------------------
   14. LIGHTBOX
   -------------------------------------------------------------------------- */
.k-lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11,10,9,.94);
  backdrop-filter: blur(8px);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--k-dur-base) var(--k-ease-out), visibility var(--k-dur-base);
}
.k-lightbox[data-open='true'] { opacity: 1; visibility: visible; }
.k-lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 24px; color: var(--k-paper);
}
.k-lightbox__title { font-size: 13px; font-weight: 600; color: var(--k-fg-on-dark); }
/* The explicit minmax(0,1fr) row matters. With the default auto row the row
   sizes to its content, so a percentage max-height on the media resolves
   against the media's own height and constrains nothing, and a tall image
   renders at full natural size and gets cut off. */
.k-lightbox__stage {
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: center;
  padding: 0 24px; overflow: auto; min-height: 0;
}
.k-lightbox__stage img, .k-lightbox__stage video {
  display: block;
  max-width: min(1100px, 92vw); max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--k-r-sm); box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
/* Video sources are smaller than the player, so they must scale up to the
   stage rather than sit at intrinsic size in the middle of it. site.js pins
   the real aspect ratio on loadedmetadata so the box hugs the picture. */
.k-lightbox__stage video { height: 100%; }
.k-lightbox__stage--scroll { grid-template-rows: auto; align-items: start; padding-bottom: 24px; }
.k-lightbox__stage--scroll img { max-height: none; }
.k-lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; }
.k-iconbtn {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(246,243,238,.08); border: 1px solid rgba(246,243,238,.16);
  border-radius: var(--k-r-sm); color: var(--k-paper); cursor: pointer;
  transition: background var(--k-dur-fast), border-color var(--k-dur-fast);
}
.k-iconbtn:hover { background: rgba(246,243,238,.16); border-color: var(--k-bronze-400); }
.k-iconbtn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.k-lightbox__count { font-size: 13px; font-weight: 600; color: var(--k-fg-on-dark); min-width: 74px; text-align: center; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   15. PRICING
   -------------------------------------------------------------------------- */
.k-pricing__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.k-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.k-plan {
  background: var(--k-cream); border: 1px solid var(--k-border);
  border-radius: var(--k-r-md); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 18px; height: 100%;
}
.k-plan--featured { border-color: var(--k-ink); box-shadow: var(--k-shadow-md); position: relative; }
.k-plan--featured::before {
  content: 'Most popular'; position: absolute; top: -1px; right: 20px;
  transform: translateY(-50%);
  background: var(--k-ink); color: var(--k-paper);
  font-size: 10px; font-weight: 600; letter-spacing: var(--k-wider); text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--k-r-pill);
}
.k-plan--soon { opacity: .72; }
.k-plan__name { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.k-plan__price { display: flex; align-items: baseline; gap: 6px; }
.k-plan__price .cur { font-size: 13px; font-weight: 600; color: var(--k-fg-subtle); letter-spacing: var(--k-wide); }
.k-plan__price .amt { font-family: var(--k-font-serif); font-style: italic; font-weight: 700; font-size: 46px; letter-spacing: -.02em; color: var(--k-bronze-500); font-variant-numeric: tabular-nums; line-height: 1; }
.k-plan__price .per { font-size: 13px; font-weight: 500; color: var(--k-fg-subtle); }
.k-plan__setup { font-size: 12px; font-weight: 500; color: var(--k-fg-subtle); line-height: 1.45; margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--k-border); }
.k-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.k-plan__list li { display: grid; grid-template-columns: 15px 1fr; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--k-fg-muted); }
.k-plan__list li::before {
  content: ''; width: 15px; height: 15px; margin-top: 2px;
  background: var(--k-bronze-100); border-radius: 50%;
  background-image: linear-gradient(var(--k-bronze-500), var(--k-bronze-500));
  background-size: 7px 1.5px; background-position: center; background-repeat: no-repeat;
}
.k-plan__cta { margin-top: auto; padding-top: 8px; }
.k-plan__cta .k-btn { width: 100%; }

/* --------------------------------------------------------------------------
   16. FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.k-faq { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
.k-faq__nav { position: sticky; top: calc(var(--k-nav-h) + 28px); display: flex; flex-direction: column; gap: 2px; }
.k-faq__nav a {
  padding: 9px 12px; border-radius: var(--k-r-sm);
  font-size: 13px; font-weight: 600; color: var(--k-fg-muted); text-decoration: none;
  transition: background var(--k-dur-fast), color var(--k-dur-fast);
}
.k-faq__nav a:hover { background: var(--k-paper-2); color: var(--k-ink); }
.k-faq__group { margin-bottom: 48px; scroll-margin-top: calc(var(--k-nav-h) + 24px); }
.k-faq__group > h2 {
  font-size: 12px; font-weight: 600; letter-spacing: var(--k-widest); text-transform: uppercase;
  color: var(--k-bronze-500); margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--k-border);
}
.k-acc { border-bottom: 1px solid var(--k-border); }
.k-acc > summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.4;
  transition: color var(--k-dur-fast);
}
.k-acc > summary::-webkit-details-marker { display: none; }
.k-acc > summary:hover { color: var(--k-bronze-600); }
.k-acc > summary::after {
  content: ''; position: absolute; right: 6px; top: 26px;
  width: 11px; height: 11px;
  border-right: 1.75px solid var(--k-bronze-500);
  border-bottom: 1.75px solid var(--k-bronze-500);
  transform: rotate(45deg); transform-origin: center;
  transition: transform var(--k-dur-base) var(--k-ease-out);
}
.k-acc[open] > summary::after { transform: rotate(-135deg); }
.k-acc__body { padding: 0 40px 22px 0; }
.k-acc__body p { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--k-fg-muted); margin: 0 0 10px; }
.k-acc__body p:last-child { margin-bottom: 0; }
.k-acc__body ul { margin: 0; padding-left: 20px; }
.k-acc__body li { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--k-fg-muted); margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   17. BLOG
   -------------------------------------------------------------------------- */
.k-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.k-post {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--k-cream); border: 1px solid var(--k-border);
  border-radius: var(--k-r-md); padding: 28px; text-decoration: none; color: inherit;
  transition: transform var(--k-dur-base) var(--k-ease-out),
              box-shadow var(--k-dur-base) var(--k-ease-out),
              border-color var(--k-dur-base) var(--k-ease-out);
}
.k-post:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-md); border-color: var(--k-border-strong); }
.k-post__date { font-family: var(--k-font-mono); font-size: 11px; letter-spacing: var(--k-wide); color: var(--k-bronze-500); text-transform: uppercase; }
.k-post__title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.24; margin: 0; }
.k-post__excerpt { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--k-fg-muted); margin: 0; }
.k-post__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--k-border); font-size: 12px; font-weight: 600; color: var(--k-fg-subtle); display: flex; justify-content: space-between; }

.k-post--feature { grid-column: 1 / -1; }
.k-post--feature .k-post__title { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: var(--k-tight); line-height: 1.06; max-width: 20ch; }
.k-post--feature .k-post__excerpt { font-size: 16px; max-width: 62ch; }

/* article body */
.k-article { max-width: 720px; margin: 0 auto; }
.k-article > h2 {
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 600;
  letter-spacing: var(--k-tight); line-height: 1.16;
  margin: 52px 0 18px; scroll-margin-top: calc(var(--k-nav-h) + 20px);
}
.k-article > h2:first-child { margin-top: 0; }
.k-article > h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 36px 0 14px; }
.k-article p {
  font-size: 17px; font-weight: 400; line-height: 1.68;
  color: var(--k-ink-2); margin: 0 0 22px;
}
.k-article ul, .k-article ol { margin: 0 0 24px; padding-left: 0; list-style: none; }
.k-article li {
  font-size: 17px; font-weight: 400; line-height: 1.62; color: var(--k-ink-2);
  margin-bottom: 12px; padding-left: 26px; position: relative;
}
.k-article li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 7px; height: 1.75px; background: var(--k-bronze-400);
}
.k-article a { color: var(--k-bronze-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.k-article a:hover { color: var(--k-bronze-700); }
.k-article strong { font-weight: 600; color: var(--k-ink); }
.k-article em { font-family: var(--k-font-serif); font-style: italic; }
.k-article blockquote {
  margin: 32px 0; padding: 4px 0 4px 26px;
  border-left: 2px solid var(--k-bronze-400);
  font-family: var(--k-font-serif); font-style: italic; font-weight: 600;
  font-size: 20px; line-height: 1.45; color: var(--k-ink);
}
.k-article img { border-radius: var(--k-r-md); margin: 32px 0; border: 1px solid var(--k-border); }

.k-article__meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--k-fg-subtle);
  padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--k-border);
}
.k-article__meta .sep { opacity: .4; }

.k-prevnext { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.k-prevnext a {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px; border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  text-decoration: none; color: inherit; background: var(--k-cream);
  transition: border-color var(--k-dur-base), transform var(--k-dur-base) var(--k-ease-out);
}
.k-prevnext a:hover { border-color: var(--k-bronze-300); transform: translateY(-2px); }
.k-prevnext .dir { font-size: 11px; letter-spacing: var(--k-wider); text-transform: uppercase; color: var(--k-bronze-500); font-weight: 600; }
.k-prevnext .ttl { font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.k-prevnext a.is-next { text-align: right; align-items: flex-end; }

/* --------------------------------------------------------------------------
   18. KINGS (program page)
   -------------------------------------------------------------------------- */
.k-modules { display: flex; flex-wrap: wrap; gap: 8px; }
.k-module-chip {
  padding: 8px 15px; border-radius: var(--k-r-pill);
  border: 1px solid var(--k-ink-4); font-size: 13px; font-weight: 600;
  color: var(--k-bronze-200);
}
.k-part { border-top: 1px solid var(--k-border); padding-top: 56px; margin-top: 72px; }
.k-part:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.k-part__label {
  font-family: var(--k-font-mono); font-size: 11px; letter-spacing: var(--k-widest);
  text-transform: uppercase; color: var(--k-bronze-500); margin: 0 0 16px;
}
.k-part__title { max-width: 22ch; margin-bottom: 22px; }
.k-part__value {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 28px; padding: 12px 18px;
  background: var(--k-bronze-50); border: 1px solid var(--k-bronze-100);
  border-radius: var(--k-r-sm);
  font-size: 13px; font-weight: 600; color: var(--k-bronze-700);
}
.k-part__value .amt { font-family: var(--k-font-serif); font-style: italic; font-weight: 700; font-size: 19px; }

/* three-column comparison */
.k-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--k-border); border-radius: var(--k-r-md); overflow: hidden; }
.k-compare__col { padding: 28px; border-right: 1px solid var(--k-border); }
.k-compare__col:last-child { border-right: 0; }
.k-compare__col h3 {
  font-size: 12px; letter-spacing: var(--k-wider); text-transform: uppercase;
  font-weight: 600; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--k-border);
}
.k-compare__col--bad  { background: var(--k-paper-2); }
.k-compare__col--bad h3  { color: var(--k-negative); }
.k-compare__col--mid h3  { color: var(--k-fg-subtle); }
.k-compare__col--good { background: var(--k-bronze-50); }
.k-compare__col--good h3 { color: var(--k-positive); }
.k-compare__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.k-compare__col li { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--k-fg-muted); padding-left: 18px; position: relative; }
.k-compare__col li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 1.75px; background: currentColor; opacity: .45; }

/* --------------------------------------------------------------------------
   19. CONTACT
   -------------------------------------------------------------------------- */
.k-contact { display: grid; grid-template-columns: 1fr 1.35fr; gap: 64px; align-items: start; }
.k-contact__details { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--k-border); }
.k-contact__row { padding: 20px 0; border-bottom: 1px solid var(--k-border); display: flex; flex-direction: column; gap: 6px; }
.k-contact__row dt { font-size: 11px; letter-spacing: var(--k-widest); text-transform: uppercase; color: var(--k-fg-subtle); font-weight: 600; }
.k-contact__row dd { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.k-contact__row a { text-decoration: none; color: var(--k-ink); border-bottom: 1px solid var(--k-border-strong); transition: color var(--k-dur-fast), border-color var(--k-dur-fast); }
.k-contact__row a:hover { color: var(--k-bronze-600); border-color: var(--k-bronze-400); }

.k-embed {
  border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  background: var(--k-cream); overflow: hidden; min-height: 640px;
}
.k-embed iframe { width: 100%; min-height: 640px; border: 0; display: block; }
.k-embed__placeholder {
  padding: 56px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 640px; justify-content: center;
}
.k-embed__placeholder code {
  font-family: var(--k-font-mono); font-size: 12px; background: var(--k-paper-2);
  padding: 3px 7px; border-radius: var(--k-r-xs); color: var(--k-bronze-700);
}

/* --------------------------------------------------------------------------
   20. CTA BAND + FOOTER
   -------------------------------------------------------------------------- */
.k-cta { padding: 104px 0; background: var(--k-cream); border-bottom: 1px solid var(--k-border); }
.k-cta__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end; }
.k-cta .k-h2 { font-size: clamp(38px, 5.6vw, 78px); letter-spacing: var(--k-tighter); line-height: .96; max-width: 13ch; }
.k-cta__side { display: flex; flex-direction: column; gap: 20px; }

footer.k-footer { background: var(--k-ink); color: var(--k-fg-inverse); padding: 76px 0 32px; }
.k-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
.k-footer .k-brand { color: var(--k-paper); font-size: 21px; margin-bottom: 16px; }
.k-footer .k-brand img { height: 34px; }
.k-footer__blurb { font-size: 13px; color: var(--k-fg-on-dark); line-height: 1.6; font-weight: 500; max-width: 34ch; margin: 0 0 20px; }
.k-footer h4 { font-size: 11px; letter-spacing: var(--k-widest); text-transform: uppercase; color: var(--k-bronze-300); font-weight: 600; margin: 0 0 16px; }
.k-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.k-footer ul a { color: var(--k-paper); text-decoration: none; font-size: 14px; font-weight: 600; transition: color var(--k-dur-fast); }
.k-footer ul a:hover { color: var(--k-bronze-300); }
.k-footer__legal {
  max-width: var(--k-container); margin: 52px auto 0;
  padding: 22px var(--k-gutter) 0; border-top: 1px solid var(--k-border-dark);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: #6E665B; font-weight: 500;
}
.k-footer__legal em { font-family: var(--k-font-serif); font-style: italic; color: var(--k-bronze-300); }
.k-social { display: flex; gap: 8px; }
.k-social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--k-border-dark); border-radius: var(--k-r-sm);
  color: var(--k-paper); transition: border-color var(--k-dur-fast), background var(--k-dur-fast);
}
.k-social a:hover { border-color: var(--k-bronze-400); background: rgba(174,118,81,.14); }
.k-social svg { width: 16px; height: 16px; fill: currentColor; }

/* --------------------------------------------------------------------------
   21. SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Progressive enhancement: content is visible by default. Only once JS has
   confirmed it is running (html.js) do we hide it to animate it back in, so a
   script error, a blocked file or a throttled observer can never leave the
   page blank. */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 620ms var(--k-ease-out), transform 620ms var(--k-ease-out);
  transition-delay: var(--k-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .k-tile img, .k-tile:hover img { transition: none; transform: none; }
  .k-tile--tall:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .k-gallery--square, .k-gallery--tall, .k-gallery--video { grid-template-columns: repeat(3, 1fr); }
  .k-plans { grid-template-columns: repeat(2, 1fr); }
  .k-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .k-stat:nth-child(2) { border-right: 0; padding-right: 0; }
  .k-stat:nth-child(3) { padding-left: 0; border-top: 1px solid var(--k-border-dark); padding-top: 30px; }
  .k-stat:nth-child(4) { border-top: 1px solid var(--k-border-dark); padding-top: 30px; }
  .k-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --k-gutter: 22px; }
  .k-section { padding: 76px 0; }
  .k-hero { padding: 64px 0 60px; }
  .k-hero__grid, .k-section-head, .k-cta__inner, .k-contact, .k-panel { grid-template-columns: 1fr; gap: 34px; }
  .k-panel { padding: 40px 30px; }
  .k-faq { grid-template-columns: 1fr; gap: 30px; }
  .k-faq__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 7px; }
  .k-faq__nav a { border: 1px solid var(--k-border-strong); border-radius: var(--k-r-pill); padding: 7px 13px; font-size: 12px; }
  .k-grid--3, .k-grid--4, .k-posts, .k-quotes, .k-compare { grid-template-columns: 1fr; }
  .k-compare__col { border-right: 0; border-bottom: 1px solid var(--k-border); }
  .k-compare__col:last-child { border-bottom: 0; }
  .k-cta { padding: 72px 0; }

  /* mobile nav */
  .k-nav__toggle { display: inline-flex; }
  .k-nav__inner { gap: 14px; }
  .k-nav__cta { display: none; }
  .k-nav__menu {
    position: fixed; inset: var(--k-nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--k-paper); border-bottom: 1px solid var(--k-border);
    padding: 10px var(--k-gutter) 22px; margin: 0;
    max-height: calc(100dvh - var(--k-nav-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--k-dur-base) var(--k-ease-out),
                transform var(--k-dur-base) var(--k-ease-out), visibility var(--k-dur-base);
    box-shadow: 0 18px 30px rgba(46,30,15,.10);
  }
  /* The closed menu is a fixed, full-viewport panel. `visibility: hidden` alone
     is not enough to take it out of play, because .k-nav__sub below sets
     `visibility: visible` and a visible child inside a hidden parent becomes
     hit-testable again. The result was an invisible menu covering the whole
     page: tapping empty space anywhere on the homepage fired a submenu link.
     pointer-events is the belt to that braces. */
  .k-nav__menu:not([data-open='true']) { pointer-events: none; }
  .k-nav__menu:not([data-open='true']) .k-nav__sub { visibility: hidden; }
  .k-nav__menu[data-open='true'] { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .k-nav__menu > li > a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--k-border); }
  .k-nav__menu > li:last-child > a { border-bottom: 0; }
  .k-nav__caret { display: none; }
  .k-nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent; padding: 0 0 10px 14px;
    min-width: 0; border-left: 1px solid var(--k-border); margin-left: 2px;
  }
  .k-nav__sub a { padding: 9px 10px; font-size: 14px; }
}

@media (max-width: 620px) {
  .k-gallery--square, .k-gallery--tall, .k-gallery--video, .k-gallery--wide { grid-template-columns: repeat(2, 1fr); }
  .k-gallery { gap: 11px; }
  .k-tile--tall { height: 260px; }
  .k-grid--2, .k-prevnext, .k-footer__grid { grid-template-columns: 1fr; }
  .k-stats__grid { grid-template-columns: 1fr; }
  .k-stat { border-right: 0; padding: 26px 0 0 0 !important; border-top: 1px solid var(--k-border-dark); }
  .k-stat:first-child { border-top: 0; padding-top: 0 !important; }
  .k-section { padding: 60px 0; }
  .k-hero__fact dt { font-size: 28px; }
  .k-lightbox__stage { padding: 0 12px; }
}

/* --------------------------------------------------------------------------
   24. TOUCH REFINEMENTS
   Comfortable tap targets (>=44px) and slightly larger body copy on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* body copy: 15px is fine on a desktop monitor, tight on a phone */
  .k-body      { font-size: 16px; }
  .k-small     { font-size: 14px; }
  .k-article p, .k-article li { font-size: 17px; line-height: 1.65; }
  .k-plan__list li { font-size: 14px; }
  .k-post__excerpt { font-size: 15px; }

  /* full-width primary actions read better than shrink-wrapped ones */
  .k-hero__actions { flex-direction: column; align-items: stretch; }
  .k-hero__actions .k-btn { width: 100%; }
  .k-cta__side > div { flex-direction: column; align-items: stretch; }
  .k-cta__side .k-btn { width: 100%; }

  /* tap targets */
  .k-btn { min-height: 48px; }
  .k-btn--sm { min-height: 44px; }
  .k-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .k-crumb { gap: 6px; }
  .k-crumb a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
  .k-contact__row a { display: inline-flex; align-items: center; min-height: 44px; }
  .k-faq__nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .k-acc > summary { padding-top: 18px; padding-bottom: 18px; min-height: 56px; }
  .k-social a { width: 44px; height: 44px; }
  .k-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .k-link { min-height: 44px; align-items: center; }
  .k-nav__menu > li > a { min-height: 52px; align-items: center; }
  .k-nav__sub a { min-height: 44px; display: flex; align-items: center; }
  .k-iconbtn { width: 48px; height: 48px; }

  /* hover-reveal captions never fire on touch, show them by default */
  .k-tile__meta { opacity: 1; transform: none; }
  .k-tile--tall:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; }
  .k-nav, .k-cta, footer.k-footer, .k-lightbox, .k-chips { display: none !important; }
  .k-section { padding: 24px 0; border: 0; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Bare embed: the consultation page is the form and nothing else. */
.k-embed--bare { border: 0; background: transparent; min-height: 700px; }

/* --------------------------------------------------------------------------
   26. WEBGL HERO
   The funnel renders behind the copy. If the canvas never goes live (no WebGL,
   reduced motion, script blocked) the section keeps the gradient below, so the
   hero is never a flat black box.
   -------------------------------------------------------------------------- */
.k-hero--webgl {
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(174,118,81,.20), transparent 62%),
    radial-gradient(90% 70% at 12% 92%, rgba(110,68,40,.22), transparent 66%),
    var(--k-ink);
  isolation: isolate;
}
.k-hero--webgl .k-container { position: relative; z-index: 2; }
.k-hero--webgl::after { display: none; }

/* The canvas fills the showcase column rather than the whole section. Keeping
   it out from under the copy is what makes the headline readable, so do not
   promote it back to a full-bleed background. */
.k-hero__showcase {
  position: relative;
  min-height: clamp(340px, 40vw, 520px);
  display: flex; flex-direction: column; justify-content: center;
}
.k-hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 900ms var(--k-ease-out);
  pointer-events: none;
}
.k-hero__canvas[data-live='true'] { opacity: 1; }
.k-hero__showcase-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; text-align: center;
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--k-fg-on-dark); opacity: .55;
}

/* Facts run as a full-width strip under the hero. The stacked `display:
   contents` layout is for the two-column version and would put every number
   in one shared column here, so each fact becomes its own block. */
.k-hero__aside--row {
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  margin-top: 64px;
}
.k-hero__aside--row .k-hero__fact {
  display: block;
  padding: 22px 0 0;
  border-bottom: 0;
}
.k-hero__aside--row .k-hero__fact dt,
.k-hero__aside--row .k-hero__fact dd { padding: 0; border-bottom: 0; }
.k-hero__aside--row .k-hero__fact dd { margin-top: 8px; max-width: 22ch; }

@media (max-width: 900px) {
  /* Two-up keeps the numbers large enough to read; four across a phone would
     shrink them to nothing. */
  .k-hero__aside--row { grid-template-columns: repeat(2, 1fr); row-gap: 8px; margin-top: 40px; }
  .k-hero__showcase { min-height: 320px; margin-top: 36px; }
}
@media (max-width: 520px) {
  .k-hero__aside--row { grid-template-columns: 1fr; }
  .k-hero__aside--row .k-hero__fact dd { max-width: none; }
}

.k-hero--webgl .k-hero__aside { border-top-color: var(--k-border-dark); }
.k-hero--webgl .k-hero__fact dt,
.k-hero--webgl .k-hero__fact dd { border-bottom-color: var(--k-border-dark); }
.k-hero--webgl .k-hero__fact dt { color: var(--k-bronze-300); }
.k-hero--webgl .k-hero__fact dd { color: var(--k-fg-on-dark); }

/* --------------------------------------------------------------------------
   27. FLIPBOOK
   -------------------------------------------------------------------------- */
.k-pdf {
  width: min(1180px, 94vw);
  height: 100%;
  display: flex; flex-direction: column; min-height: 0;
}
.k-pdf__loading {
  flex: 1; display: grid; place-items: center;
  color: var(--k-fg-on-dark); font-size: 13px; font-weight: 600;
  letter-spacing: var(--k-wide); text-transform: uppercase;
}

.k-flip { display: flex; flex-direction: column; gap: 14px; min-height: 0; height: 100%; }
.k-flip:focus-visible { outline: none; }

.k-flip__stage {
  flex: 1 1 auto; min-height: 0; position: relative;
  border-radius: var(--k-r-sm); overflow: hidden;
  cursor: grab; touch-action: pan-y;
}
.k-flip__stage:active { cursor: grabbing; }
.k-flip__canvas { width: 100%; height: 100%; display: block; }

.k-flip__bar {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
.k-flip__btn {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(246,243,238,.08);
  border: 1px solid rgba(246,243,238,.16);
  border-radius: var(--k-r-sm); color: var(--k-paper);
  transition: background var(--k-dur-fast), border-color var(--k-dur-fast), opacity var(--k-dur-fast);
}
.k-flip__btn:hover:not(:disabled) { background: rgba(174,118,81,.22); border-color: var(--k-bronze-400); }
.k-flip__btn:disabled { opacity: .3; cursor: default; }
.k-flip__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.k-flip__count {
  min-width: 92px; text-align: center;
  font-family: var(--k-font-mono); font-size: 13px;
  color: var(--k-fg-on-dark); font-variant-numeric: tabular-nums;
}
.k-flip__dl {
  margin-left: 10px; padding: 12px 16px; min-height: 46px;
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--k-bronze-300);
  border: 1px solid rgba(246,243,238,.16); border-radius: var(--k-r-sm);
  transition: border-color var(--k-dur-fast), background var(--k-dur-fast);
}
.k-flip__dl:hover { border-color: var(--k-bronze-400); background: rgba(174,118,81,.16); }

.k-flip__error {
  flex: 1; display: flex; flex-direction: column; gap: 16px;
  align-items: center; justify-content: center; text-align: center;
  color: var(--k-fg-on-dark);
}
.k-flip__error .k-btn { color: var(--k-paper); border-color: rgba(246,243,238,.24); }

.k-lightbox__stage:has(.k-pdf) { align-items: stretch; padding-bottom: 4px; }

@media (max-width: 620px) {
  .k-pdf { width: 96vw; }
  .k-flip__dl { margin-left: 0; }
  .k-flip__bar { gap: 8px; }
}

/* Scrim between the canvas and the copy. The funnel is decoration; the
   headline and the numbers must stay readable over whatever it is doing. */
/* The heavy diagonal scrim that used to live here was protecting the copy from
   a full-bleed canvas. The carousel now sits in its own column, so all that is
   still needed is a little contrast under the fixed nav. */
.k-hero--webgl::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,10,9,.55) 0%, rgba(11,10,9,0) 22%);
}


/* A report takes the whole stage: no gallery chrome competing with its pager */
.k-lightbox__stage:has(.k-pdf) { align-items: stretch; padding: 0 16px 4px; }
.k-pdf { width: 100%; max-width: 1500px; margin: 0 auto; }
.k-flip__stage { background: rgba(246,243,238,.03); }

/* class-based display rules outrank the UA [hidden] rule, so state it plainly */
[hidden] { display: none !important; }

/* Cover art stands in while the PDF streams and page one rasterises. */
.k-pdf__loading { position: relative; flex: 1; display: grid; place-items: center; }
.k-pdf__poster {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; opacity: .32; border-radius: var(--k-r-sm);
}
.k-pdf__loading span { position: relative; z-index: 1; }
.k-flip__poster {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; opacity: .5;
  transition: opacity 240ms var(--k-ease-out);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   28. MOTION LAYER
   Word-split headlines, parallax, magnetic buttons, scroll progress.
   All enhancement: without JS the type is simply visible.
   -------------------------------------------------------------------------- */

/* headline word reveal ---------------------------------------------------- */
/* The mask is `overflow: hidden` so each word can slide up from beneath it.
   That also clips anything the glyphs push outside their line box, which for
   the italic serif is the descender below, the slanted ascender above and the
   overhang on the right: the "e" in "estate" lost its top-right corner.
   Padding on every side except the left gives the mask room, and the matching
   negative margins keep the line box identical so nothing shifts.
   The left is deliberately untouched, since padding there would visibly offset
   the first letter of every word. */
.k-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: .16em .14em .2em 0;
  margin: -.16em -.14em -.2em 0;
}
/* Belt and braces: the clip is only needed while the words are still moving.
   A zero-length animation with a delay flips it off discretely once the last
   word has landed, so nothing can be cropped in the resting state no matter
   how far a glyph overhangs. */
[data-split].is-in .k-w { animation: k-unclip 0s linear 1.8s forwards; }
@keyframes k-unclip { to { overflow: visible; } }
@media (prefers-reduced-motion: reduce) {
  .k-w { overflow: visible; animation: none; }
}
.k-w__i {
  display: inline-block;
  transform: translateY(118%) rotate(2.5deg);
  opacity: 0;
  transition: transform 780ms var(--k-ease-out), opacity 620ms var(--k-ease-out);
  will-change: transform;
}
[data-split].is-in .k-w__i { transform: none; opacity: 1; }
/* if the split never ran, the text must still show */
[data-split]:not([data-split='done']) .k-w__i { transform: none; opacity: 1; }

/* parallax ---------------------------------------------------------------- */
[data-parallax] { transform: translate3d(0, var(--k-par, 0px), 0); will-change: transform; }

/* magnetic ---------------------------------------------------------------- */
[data-magnetic] { will-change: transform; }

/* scroll progress --------------------------------------------------------- */
/* width:100% rather than right:0. With left/right the fixed bar resolved
   against the viewport including the scrollbar gutter, so it sat 2px wider
   than the page and gave every page a sliver of horizontal scroll. */
.k-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  z-index: 70; pointer-events: none;
  background: transparent;
}
.k-progress span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--k-bronze-gradient);
}

@media (prefers-reduced-motion: reduce) {
  .k-w__i { transform: none !important; opacity: 1 !important; transition: none; }
  [data-parallax] { transform: none !important; }
  [data-magnetic] { transform: none !important; }
  .k-progress { display: none; }
}

/* --------------------------------------------------------------------------
   29. NUMBERED ROWS
   Replaces a grid of equal cards with full-width editorial rows: a large
   index, a large headline, supporting copy and a metric. Reads as a document
   rather than a dashboard, and gives long headlines room to be large.
   -------------------------------------------------------------------------- */
.k-rows { border-top: 1px solid var(--k-border); }
.k-dark .k-rows { border-top-color: var(--k-border-dark); }

.k-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.25fr) minmax(0, 1fr) auto;
  gap: 40px; align-items: start;
  padding: 44px 0;
  border-bottom: 1px solid var(--k-border);
  position: relative;
  text-decoration: none; color: inherit;
  transition: background var(--k-dur-base) var(--k-ease-out);
}
.k-dark .k-row { border-bottom-color: var(--k-border-dark); }

.k-row::before {
  content: ''; position: absolute; left: -24px; right: -24px; top: 0; bottom: 0;
  background: var(--k-cream); border-radius: var(--k-r-md);
  opacity: 0; transition: opacity var(--k-dur-base) var(--k-ease-out);
  z-index: -1;
}
.k-dark .k-row::before { background: rgba(246,243,238,.04); }
.k-row:hover::before { opacity: 1; }

.k-row__num {
  font-family: var(--k-font-mono); font-size: 12px;
  letter-spacing: var(--k-wider); text-transform: uppercase;
  color: var(--k-bronze-500); padding-top: .5rem;
}
.k-dark .k-row__num { color: var(--k-bronze-300); }

.k-row__title {
  font-size: clamp(26px, 3.4vw, 46px); font-weight: 600;
  letter-spacing: var(--k-tight); line-height: 1.04; margin: 0;
  transition: transform var(--k-dur-base) var(--k-ease-out);
}
.k-row:hover .k-row__title { transform: translateX(6px); }
.k-row__body { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--k-fg-muted); margin: 0; padding-top: .35rem; }
.k-dark .k-row__body { color: var(--k-fg-on-dark); }

.k-row__metric { text-align: right; padding-top: .2rem; }
.k-row__metric b {
  display: block;
  font-family: var(--k-font-serif); font-style: italic; font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px); color: var(--k-bronze-500);
  letter-spacing: -.02em; line-height: 1;
}
.k-dark .k-row__metric b { color: var(--k-bronze-300); }
.k-row__metric span {
  display: block; margin-top: 8px;
  font-size: 11px; letter-spacing: var(--k-wider); text-transform: uppercase;
  color: var(--k-fg-subtle); font-weight: 600;
}

@media (max-width: 900px) {
  .k-row {
    grid-template-columns: 1fr auto; gap: 14px 20px; padding: 32px 0;
    grid-template-areas: 'num metric' 'title title' 'body body';
  }
  .k-row__num { grid-area: num; padding-top: 0; }
  .k-row__title { grid-area: title; }
  .k-row__body { grid-area: body; padding-top: 0; }
  .k-row__metric { grid-area: metric; text-align: right; padding-top: 0; }
  .k-row__metric b { font-size: 22px; }
  .k-row__metric span { margin-top: 4px; }
  .k-row:hover .k-row__title { transform: none; }
}

/* --------------------------------------------------------------------------
   30. EDITORIAL LIST (blog)
   -------------------------------------------------------------------------- */
.k-list { border-top: 1px solid var(--k-border); }
.k-listitem {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto;
  gap: 32px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--k-border);
  text-decoration: none; color: inherit; position: relative;
  transition: padding-left var(--k-dur-base) var(--k-ease-out);
}
.k-listitem:hover { padding-left: 14px; }
.k-listitem::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%; background: var(--k-bronze-400);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--k-dur-base), transform var(--k-dur-base) var(--k-ease-out);
}
.k-listitem:hover::before { opacity: 1; transform: scale(1); }

.k-listitem__date {
  font-family: var(--k-font-mono); font-size: 12px;
  letter-spacing: var(--k-wide); text-transform: uppercase;
  color: var(--k-bronze-500);
}
.k-listitem__title {
  font-size: clamp(19px, 2.1vw, 28px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.16; margin: 0;
}
.k-listitem__meta {
  font-size: 12px; font-weight: 600; color: var(--k-fg-subtle);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 10px;
}
.k-listitem__meta .k-arrow { transition: transform var(--k-dur-base) var(--k-ease-out); }
.k-listitem:hover .k-arrow { transform: translateX(5px); }

@media (max-width: 760px) {
  .k-listitem {
    grid-template-columns: 1fr auto; gap: 8px 16px; padding: 22px 0;
    grid-template-areas: 'date meta' 'title title';
  }
  .k-listitem__date { grid-area: date; }
  .k-listitem__title { grid-area: title; }
  .k-listitem__meta { grid-area: meta; }
  .k-listitem:hover { padding-left: 0; }
  .k-listitem::before { display: none; }
}

/* --------------------------------------------------------------------------
   28. CASE STUDIES, CLIENTS, SERVICE TABLES
   -------------------------------------------------------------------------- */

/* case study grid --------------------------------------------------------- */
.k-cases__summary { margin-top: 0; margin-bottom: 44px; }
.k-chips--cases { margin-bottom: 32px; }

.k-cases {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.k-case {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 20px;
  border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  background: var(--k-paper-2);
  transition: border-color var(--k-dur-base) var(--k-ease-out),
              transform var(--k-dur-base) var(--k-ease-out);
}
.k-case:hover { border-color: var(--k-bronze-300); transform: translateY(-2px); }
.k-case__client {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--k-fg);
}
.k-case__focus { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--k-fg-muted); }
.k-case__market {
  margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--k-bronze-500);
}
.k-case__cpl {
  margin: 10px 0 0; padding-top: 14px;
  border-top: 1px solid var(--k-border);
  display: flex; align-items: baseline; gap: 8px;
}
.k-case__num {
  font-family: var(--k-font-serif); font-style: italic; font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: -.02em;
  color: var(--k-bronze-500); font-variant-numeric: tabular-nums;
}
.k-case__unit { font-size: 12px; font-weight: 600; color: var(--k-fg-muted); }
.k-cases__note {
  margin: 40px 0 0; max-width: 62ch;
  font-size: 14px; line-height: 1.6; color: var(--k-fg-muted);
}

/* client logo wall -------------------------------------------------------- */
.k-logowall {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  background: var(--k-border);
  border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  overflow: hidden;
}
.k-logo {
  display: grid; place-items: center; min-height: 92px; padding: 18px 16px;
  background: var(--k-paper);
  transition: background var(--k-dur-base) var(--k-ease-out);
}
.k-logo:hover { background: var(--k-paper-2); }
/* Wordmarks carry the bronze gradient rather than flat grey, so the wall reads
   as one designed set instead of a list of names. These are typographic marks,
   not the clients' real logos: drop a real SVG into assets/brand/clients/ and
   name it in clients.tsv and it replaces the wordmark. */
.k-logo span {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  text-align: center; line-height: 1.3;
  background: var(--k-bronze-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: saturate(.72) opacity(.85);
  transition: filter var(--k-dur-base) var(--k-ease-out);
}
.k-logo:hover span { filter: saturate(1) opacity(1); }

/* background-clip:text leaves the text invisible where it is unsupported, so
   fall back to solid ink rather than a blank tile. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .k-logo span { color: var(--k-fg); filter: none; }
}
/* No `color` here: an SVG loaded through <img> is an isolated document, so it
   cannot inherit currentColor from the page. The marks carry their own fill. */
/* The marks now carry the bronze gradient internally, so they need far less
   knocking back than the flat-ink versions did. */
.k-logo--mark img {
  width: auto; max-width: 100%; height: 30px; display: block;
  opacity: .88; transition: opacity var(--k-dur-base) var(--k-ease-out);
}
.k-logo--mark:hover img { opacity: 1; }

/* comparison + feature tables --------------------------------------------- */
/* Wide tables scroll inside their own box; the page itself must never scroll
   sideways on a phone. */
.k-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.k-table {
  width: 100%; min-width: 720px; border-collapse: collapse;
  font-size: 14px; line-height: 1.5;
}
.k-table th, .k-table td {
  padding: 16px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--k-border);
}
.k-table thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--k-fg-muted); border-bottom-width: 2px;
}
.k-table tbody th {
  font-weight: 700; color: var(--k-fg); white-space: nowrap;
}
.k-table td { font-weight: 500; color: var(--k-fg-muted); }
.k-table__own { background: rgba(174,118,81,.07); }
.k-table thead .k-table__own { color: var(--k-bronze-500); }
.k-table tbody td.k-table__own { color: var(--k-fg); font-weight: 600; }
.k-table--feature tbody th { white-space: normal; min-width: 160px; }

/* process steps ----------------------------------------------------------- */
.k-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  background: var(--k-border-dark);
  border: 1px solid var(--k-border-dark); border-radius: var(--k-r-md);
  overflow: hidden;
}
.k-step {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 20px; background: var(--k-ink);
}
.k-step__n { font-size: 12px; color: var(--k-bronze-400); }
.k-step__t { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--k-fg-on-dark); }

/* problem statements ------------------------------------------------------ */
/* min() guard: a bare 300px track is wider than a 320px phone viewport once
   container padding is taken out, and the grid overflows the page. */
.k-problems { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); background: var(--k-border-dark); border: 1px solid var(--k-border-dark); border-radius: var(--k-r-md); overflow: hidden; }
.k-problem {
  margin: 0; padding: 26px 24px; background: var(--k-ink);
  font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--k-fg-on-dark);
}

@media (max-width: 900px) {
  .k-cases { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .k-logowall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .k-logo { min-height: 78px; }
}

/* Testimonial attribution as a client mark rather than a text name. */
.k-quotecard__logo {
  height: 26px; width: auto; max-width: 60%; display: block;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   29. MARKET DATA PAGES
   -------------------------------------------------------------------------- */
.k-datanote {
  margin: 22px 0 0; font-size: 13px; font-weight: 500; line-height: 1.5;
  color: var(--k-fg-muted);
}

/* stat tiles --------------------------------------------------------------- */
.k-tiles {
  display: grid; gap: 1px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  background: var(--k-border);
  border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  overflow: hidden;
}
.k-tile-stat { padding: 22px 22px 20px; background: var(--k-paper); }
.k-tile-stat dt {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--k-fg-muted);
}
.k-tile-stat__v {
  margin: 10px 0 0;
  font-family: var(--k-font-serif); font-style: italic; font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -.02em;
  color: var(--k-bronze-500); font-variant-numeric: tabular-nums;
}
.k-tile-stat__s { margin: 8px 0 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--k-fg-muted); }

/* chart blocks ------------------------------------------------------------- */
.k-chartblock {
  padding: 30px; margin-bottom: 22px;
  border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  background: var(--k-paper);
}
.k-chartblock__head { margin-bottom: 22px; }
.k-chartblock__head h2 { margin: 0 0 8px; }
.k-chartblock__head p { margin: 0; max-width: 68ch; font-size: 14px; line-height: 1.6; color: var(--k-fg-muted); }
.k-grid2 { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.k-grid2 .k-chartblock { margin-bottom: 22px; }

/* The SVG carries its own viewBox, so the only job here is to give it a box
   with a sane height on every screen. */
.k-chart { width: 100%; }
.k-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.k-chart__grid { stroke: rgba(11,10,9,.08); stroke-width: 1; }
.k-chart__axis { stroke: rgba(11,10,9,.22); stroke-width: 1; }
.k-chart__tick { font-family: var(--k-font-mono); font-size: 13px; fill: var(--k-fg-muted); }
.k-chart__bar { transition: opacity var(--k-dur-fast) var(--k-ease-out); }
.k-chart__bar:hover { opacity: .78; }

.k-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.k-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--k-fg-muted); }
.k-legend__item i { width: 11px; height: 11px; border-radius: 3px; display: block; }

/* ranked bars -------------------------------------------------------------- */
.k-rank {
  display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto;
  align-items: center; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--k-border);
}
.k-rank:last-child { border-bottom: 0; }
.k-rank__label { font-size: 13px; font-weight: 600; color: var(--k-fg); }
.k-rank__track { height: 8px; border-radius: 4px; background: rgba(11,10,9,.06); overflow: hidden; }
.k-rank__fill { display: block; height: 100%; border-radius: 4px; background: var(--k-bronze-500); }
.k-rank__value {
  font-family: var(--k-font-mono); font-size: 13px; font-weight: 500;
  color: var(--k-fg-muted); font-variant-numeric: tabular-nums; text-align: right;
}

/* data tables -------------------------------------------------------------- */
.k-table--data { min-width: 560px; font-size: 13px; }
.k-table--data th, .k-table--data td { padding: 11px 14px; }
.k-num-col { text-align: right !important; font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; }
.k-table--data thead th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.k-table--data thead th[data-sort]:hover { color: var(--k-bronze-500); }
.k-table--data thead th[aria-sort='ascending']::after  { content: ' \2191'; }
.k-table--data thead th[aria-sort='descending']::after { content: ' \2193'; }
.k-table--data tbody tr:hover { background: rgba(174,118,81,.05); }

@media (max-width: 700px) {
  .k-chartblock { padding: 20px 16px; }
  .k-rank { grid-template-columns: 1fr auto; }
  .k-rank__track { display: none; }
}

/* data controls (search / select above a table) ---------------------------- */
.k-datacontrols {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  margin-bottom: 18px;
}
.k-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.k-field__label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--k-fg-muted);
}
.k-field input, .k-field select {
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 11px 13px; min-height: 44px; min-width: 200px;
  color: var(--k-fg); background: var(--k-paper);
  border: 1px solid var(--k-border); border-radius: var(--k-r-sm);
  transition: border-color var(--k-dur-fast) var(--k-ease-out);
}
.k-field input:focus, .k-field select:focus { outline: none; border-color: var(--k-bronze-500); }
.k-datacontrols__count {
  margin: 0 0 12px auto; font-family: var(--k-font-mono); font-size: 13px;
  color: var(--k-fg-muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .k-field input, .k-field select { min-width: 0; width: 100%; }
  .k-field { width: 100%; }
  .k-datacontrols__count { margin-left: 0; }
}

/* market-data.js engine surface -------------------------------------------- */
/* The engine builds its own selects and lists into these hosts, so the styling
   is generic on purpose. Do not rename the ids, the engine looks them up. */
.k-mdloader {
  padding: 14px 18px; margin-bottom: 22px;
  border: 1px solid var(--k-border); border-radius: var(--k-r-sm);
  background: var(--k-paper-2);
  font-size: 13px; font-weight: 500; color: var(--k-fg-muted);
}
.k-kpibar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.k-kpibar__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.k-kpibar__window { margin: 0; font-family: var(--k-font-mono); font-size: 12px; color: var(--k-fg-muted); }

.k-mdfilters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.k-mdfilters select, .k-mdfilters input, .k-kpibar select, .k-kpibar input {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 9px 11px; min-height: 40px;
  color: var(--k-fg); background: var(--k-paper);
  border: 1px solid var(--k-border); border-radius: var(--k-r-sm);
}
.k-mdfilters select:focus, .k-mdfilters input:focus { outline: none; border-color: var(--k-bronze-500); }
.k-mdfilters button, .k-kpibar button.on, .k-mdfilters button.on {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 13px; min-height: 40px; cursor: pointer;
  border: 1px solid var(--k-border); border-radius: 999px;
  background: var(--k-paper); color: var(--k-fg-muted);
}
.k-mdfilters button.on { background: var(--k-bronze-500); border-color: var(--k-bronze-500); color: var(--k-paper); }

.k-chart--canvas { position: relative; min-height: 300px; }
.k-chart--canvas canvas { width: 100% !important; max-height: 420px; }

.k-mdempty { margin: 0 0 12px; font-size: 13px; color: var(--k-fg-muted); }
.k-mdempty:empty { display: none; }
.k-mdlist { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.k-mdlist .ru-row, .k-mdlist .ad-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--k-border);
}
.k-mdmodal {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: rgba(11,10,9,.9); padding: 24px;
}
.k-mdmodal[hidden] { display: none; }
.k-mdmodal__panel {
  background: var(--k-paper); border-radius: var(--k-r-md);
  padding: 26px; max-width: 720px; width: 100%;
  max-height: 80vh; overflow: auto;
}

/* creator cell ------------------------------------------------------------- */
.k-creator { display: flex; flex-direction: column; gap: 2px; }
.k-creator strong { font-size: 13px; font-weight: 700; color: var(--k-fg); }
.k-creator small { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-fg-muted); }
.k-strong { font-weight: 700 !important; color: var(--k-bronze-500) !important; }
.k-pending {
  padding: 14px 18px; border-left: 3px solid var(--k-bronze-500);
  background: var(--k-paper-2); border-radius: var(--k-r-sm);
}

/* engine-written KPI deltas and units --------------------------------------- */
.k-delta {
  display: inline-block; margin-right: 10px;
  font-family: var(--k-font-mono); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.k-delta.up   { color: #3C8562; }
.k-delta.down { color: #B5432E; }
.k-delta.flat { color: var(--k-fg-muted); }
.k-delta:empty { display: none; }
.k-unit {
  margin-left: 6px; font-family: var(--k-font-sans);
  font-size: 12px; font-style: normal; font-weight: 600;
  letter-spacing: .04em; color: var(--k-fg-muted);
}

/* engine-rendered lists ----------------------------------------------------- */
/* The engine puts every matching row in these, which for projects is nearly
   5,000. Uncapped they stretch the page to tens of thousands of pixels and
   read as broken empty space. The source page caps them at 330px. */
.lb-list {
  max-height: 330px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--k-border);
}
.lb-list > * {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--k-border);
  font-size: 13px; line-height: 1.35; color: var(--k-fg);
}
.lb-list .n, .lb-list b { font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; color: var(--k-fg-muted); }
.lb-list .up   { color: #3C8562; }
.lb-list .down { color: #B5432E; }

/* engine chips and filter rows --------------------------------------------- */
.mini-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mini-chips button {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 14px; min-height: 40px; cursor: pointer;
  border: 1px solid var(--k-border); border-radius: 999px;
  background: var(--k-paper); color: var(--k-fg-muted);
  transition: background var(--k-dur-fast), color var(--k-dur-fast), border-color var(--k-dur-fast);
}
.mini-chips button:hover { border-color: var(--k-bronze-300); color: var(--k-fg); }
.mini-chips button.on { background: var(--k-bronze-500); border-color: var(--k-bronze-500); color: var(--k-paper); }

.chart-empty:empty { display: none; }
.chart-empty { margin: 10px 0 0; font-size: 13px; color: var(--k-fg-muted); }
.ru-stat:empty { display: none; }
.ru-stat { margin: 0 0 12px; font-size: 13px; color: var(--k-fg-muted); }

/* KPI delta rows ------------------------------------------------------------ */
.k-drow { display: flex; align-items: baseline; gap: 7px; }
.k-dlabel { font-size: 11px; font-weight: 500; color: var(--k-fg-muted); }
.k-tile-stat__s { display: flex; flex-direction: column; gap: 3px; }

/* resale unit modal --------------------------------------------------------- */
.ru-modal-back {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: rgba(11,10,9,.9); padding: 24px;
}
.ru-modal-back[hidden] { display: none; }
.ru-modal {
  background: var(--k-paper); border-radius: var(--k-r-md); padding: 26px;
  max-width: 720px; width: 100%; max-height: 80vh; overflow: auto;
}

/* method grid --------------------------------------------------------------- */
.k-methodgrid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.k-methodgrid h3 { margin: 0 0 8px; }
.k-methodgrid p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--k-fg-muted); }
.k-h4 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

/* client logo rail ---------------------------------------------------------- */
/* Replaces the static grid. site.js clones the group so the -50% loop is
   seamless; the animation is on the track, not the group. */
.k-logorail {
  overflow: hidden; position: relative;
  border-top: 1px solid var(--k-border); border-bottom: 1px solid var(--k-border);
  padding: 26px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.k-logorail__track { display: flex; width: max-content; animation: k-logoscroll 68s linear infinite; }
.k-logorail__group { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.k-logorail:hover .k-logorail__track { animation-play-state: paused; }
@keyframes k-logoscroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .k-logorail__track { animation: none; }
  .k-logorail { overflow-x: auto; }
}
.k-logorail .k-logo {
  min-height: 0; padding: 0; background: none; white-space: nowrap;
  display: grid; place-items: center;
}
.k-logorail .k-logo:hover { background: none; }

/* Hero is a full-bleed background again, so the copy column no longer shares
   the row with a showcase and the grid collapses to one track. */
.k-hero--webgl .k-hero__grid { grid-template-columns: 1fr; }
.k-hero--webgl .k-display { max-width: 16ch; }
.k-hero--webgl .k-lead { max-width: 54ch; }
/* The canvas sits under the copy again, so restore a diagonal scrim to keep
   the headline on near-flat ink. */
.k-hero--webgl::before {
  background:
    linear-gradient(100deg, rgba(11,10,9,.92) 0%, rgba(11,10,9,.74) 32%,
                    rgba(11,10,9,.30) 58%, rgba(11,10,9,0) 80%),
    linear-gradient(to bottom, rgba(11,10,9,.55) 0%, rgba(11,10,9,0) 22%);
}
@media (max-width: 900px) {
  .k-hero--webgl::before {
    background: linear-gradient(to bottom, rgba(11,10,9,.88) 0%, rgba(11,10,9,.66) 45%, rgba(11,10,9,.82) 100%);
  }
}

/* creator rows -------------------------------------------------------------- */
.k-people { display: flex; flex-direction: column; }
.k-person {
  display: grid; grid-template-columns: 30px 42px 1fr auto;
  align-items: center; gap: 14px;
  padding: 11px 4px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--k-border);
  transition: background var(--k-dur-fast) var(--k-ease-out);
}
.k-person:last-child { border-bottom: 0; }
.k-person:hover { background: rgba(174,118,81,.06); }
.k-person__rank { font-size: 12px; color: var(--k-fg-muted); }
.k-person__ava {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--k-paper);
  background: var(--k-bronze-gradient);
  filter: hue-rotate(var(--k-ava-shift, 0deg));
}
.k-person__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-person__body strong { font-size: 14px; font-weight: 700; color: var(--k-fg); }
.k-person__body small { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-fg-muted); }
.k-person:hover .k-person__body strong { color: var(--k-bronze-500); }
.k-person__metric {
  font-family: var(--k-font-mono); font-size: 13px; font-weight: 600;
  color: var(--k-bronze-500); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.k-creator { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.k-creator .k-person__ava { width: 30px; height: 30px; font-size: 11px; }
.k-creator__txt { display: flex; flex-direction: column; gap: 1px; }
.k-creator:hover strong { color: var(--k-bronze-500); }
@media (max-width: 700px) {
  .k-person { grid-template-columns: 24px 34px 1fr; row-gap: 4px; }
  .k-person__metric { grid-column: 3; justify-self: start; }
  .k-person__ava { width: 34px; height: 34px; }
}
.k-field--grow { flex: 1 1 340px; }
.k-field--grow input { width: 100%; }

/* --------------------------------------------------------------------------
   30. SERVICE COMPARISON + PROCESS (elevated treatment)
   -------------------------------------------------------------------------- */

/* comparison table --------------------------------------------------------- */
.k-compare {
  border: 1px solid var(--k-border); border-radius: var(--k-r-lg);
  background: var(--k-paper); box-shadow: var(--k-shadow-sm);
  overflow: hidden;
}
.k-compare .k-tablewrap { overflow-x: auto; }
.k-compare table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.k-compare th, .k-compare td { padding: 20px 22px; text-align: left; vertical-align: top; line-height: 1.55; }

.k-compare thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--k-paper-2);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--k-fg-muted);
  border-bottom: 1px solid var(--k-border);
  white-space: nowrap;
}
/* The row label column stays put while the options scroll past it. */
.k-compare tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--k-paper);
  font-weight: 700; color: var(--k-fg); white-space: nowrap;
  border-right: 1px solid var(--k-border);
}
.k-compare tbody tr + tr th, .k-compare tbody tr + tr td { border-top: 1px solid var(--k-border); }
.k-compare td { color: var(--k-fg-muted); font-weight: 500; }
.k-compare tbody tr:hover td { background: rgba(11,10,9,.02); }

/* the Kratos column is the point of the table, so it is lifted out */
.k-compare .k-table__own {
  background: linear-gradient(180deg, rgba(174,118,81,.10), rgba(174,118,81,.05));
  color: var(--k-fg); font-weight: 600;
  box-shadow: inset 1px 0 0 rgba(174,118,81,.28), inset -1px 0 0 rgba(174,118,81,.28);
}
.k-compare thead .k-table__own {
  background: var(--k-bronze-gradient);
  color: var(--k-paper); letter-spacing: .12em;
  box-shadow: none;
}
.k-compare tbody tr:hover .k-table__own { background: linear-gradient(180deg, rgba(174,118,81,.16), rgba(174,118,81,.09)); }
.k-compare tbody tr:last-child .k-table__own { box-shadow: inset 1px 0 0 rgba(174,118,81,.28), inset -1px 0 0 rgba(174,118,81,.28), inset 0 -1px 0 rgba(174,118,81,.28); }

/* feature cards (replaces the what-it-is / benefit tables) ------------------ */
.k-features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.k-feature {
  display: flex; flex-direction: column;
  padding: 26px; border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  background: var(--k-paper);
  transition: border-color var(--k-dur-base) var(--k-ease-out),
              transform var(--k-dur-base) var(--k-ease-out),
              box-shadow var(--k-dur-base) var(--k-ease-out);
}
.k-feature:hover { border-color: var(--k-bronze-300); transform: translateY(-3px); box-shadow: var(--k-shadow-md); }
.k-feature__n {
  font-family: var(--k-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; color: var(--k-bronze-500); margin-bottom: 12px;
}
.k-feature__t { margin: 0 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--k-fg); }
.k-feature__d { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--k-fg-muted); flex: 1; }
.k-feature__b {
  margin: 0; padding: 14px 16px; border-radius: var(--k-r-sm);
  background: rgba(174,118,81,.08);
  border-left: 2px solid var(--k-bronze-500);
  font-size: 13px; line-height: 1.55; font-weight: 500; color: var(--k-fg);
}
.k-feature__b b {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--k-bronze-500);
}

/* process timeline --------------------------------------------------------- */
.k-flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
@media (min-width: 860px) {
  .k-flow { grid-auto-flow: column; grid-auto-columns: 1fr; }
  /* the rail runs behind the discs, from the first centre to the last */
  .k-flow::before {
    content: ''; position: absolute; top: 21px; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, var(--k-bronze-500), rgba(174,118,81,.25));
  }
}
.k-flow__step { position: relative; padding: 0 14px; text-align: center; }
@media (max-width: 859px) {
  .k-flow__step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; text-align: left; padding: 0 0 26px 0; }
  .k-flow__step::before {
    content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px;
    background: rgba(174,118,81,.25);
  }
  .k-flow__step:last-child::before { display: none; }
}
.k-flow__n {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; position: relative; z-index: 1;
  font-family: var(--k-font-mono); font-size: 13px; font-weight: 600;
  color: var(--k-paper); background: var(--k-bronze-gradient);
  box-shadow: 0 0 0 6px var(--k-ink);
}
@media (max-width: 859px) { .k-flow__n { margin: 0; } }
.k-flow__t { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--k-fg-on-dark); }

/* --------------------------------------------------------------------------
   31. ROI CALCULATOR
   -------------------------------------------------------------------------- */
.k-roi__controls { margin-bottom: 26px; }
.k-roi__controls .k-chips { margin-bottom: 18px; }
.k-field--grow { position: relative; }
.k-roi__results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  max-height: 320px; overflow-y: auto; margin-top: 6px;
  background: var(--k-paper); border: 1px solid var(--k-border);
  border-radius: var(--k-r-sm); box-shadow: var(--k-shadow-md);
}
.k-roi__result {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--k-border);
  font: inherit; font-size: 14px; color: var(--k-fg);
}
.k-roi__result:last-child { border-bottom: 0; }
.k-roi__result:hover, .k-roi__result:focus-visible { background: rgba(174,118,81,.08); outline: none; }
.k-roi__result small {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--k-bronze-500); white-space: nowrap;
}
.k-roi__picked {
  margin: 16px 0 0; font-size: 13px; font-weight: 600; color: var(--k-bronze-500);
}
.k-roi__empty { margin: 0; font-size: 14px; color: var(--k-fg-muted); }

.k-roi__out { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.k-roi__card {
  padding: 24px; border: 1px solid var(--k-border); border-radius: var(--k-r-md);
  background: var(--k-paper);
}
.k-roi__card--wide { grid-column: 1 / -1; }
.k-roi__card h3 {
  margin: 0 0 16px; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--k-fg-muted);
}
.k-roi__row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px;
  padding: 11px 0; border-bottom: 1px solid var(--k-border);
}
.k-roi__row:last-of-type { border-bottom: 0; }
.k-roi__k { font-size: 13px; font-weight: 500; color: var(--k-fg-muted); }
.k-roi__v {
  font-family: var(--k-font-mono); font-size: 15px; font-weight: 600;
  color: var(--k-fg); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.k-roi__row:has(b) .k-roi__v { color: var(--k-bronze-500); font-size: 17px; }
.k-roi__n { grid-column: 1 / -1; font-size: 11px; color: var(--k-fg-muted); }
.k-roi__fine { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: var(--k-fg-muted); }
.k-roi__none { margin: 0; font-size: 13px; line-height: 1.6; color: var(--k-fg-muted); }
.k-roi__warn {
  margin: 12px 0 0; padding: 12px 14px; border-radius: var(--k-r-sm);
  background: rgba(181,67,46,.08); border-left: 2px solid #B5432E;
  font-size: 12px; line-height: 1.55; color: var(--k-fg);
}
.k-roi__proj { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); margin-top: 18px; }
.k-roi__projcell {
  padding: 18px; border-radius: var(--k-r-sm); background: rgba(174,118,81,.07);
  display: flex; flex-direction: column; gap: 6px;
}
.k-roi__projcell span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--k-fg-muted); }
.k-roi__projcell b {
  font-family: var(--k-font-serif); font-style: italic; font-size: 24px;
  color: var(--k-bronze-500); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   32. HORIZONTAL OVERFLOW GUARD
   The marquee and logo rail tracks are deliberately thousands of pixels wide.
   Their wrappers clip them, but iOS Safari still lets the page itself pan
   sideways past the content, which shows a strip of blank white.
   `overflow-x: clip` stops the pan without creating a scroll container, so
   position: sticky and the fixed nav keep working (plain `hidden` would break
   them).
   -------------------------------------------------------------------------- */
html, body { overflow-x: clip; max-width: 100%; }
.k-marquee, .k-logorail { overflow-x: clip; }