/* Keltra v2 marketing site. Tokens in colors_and_type.css. */

* { box-sizing: border-box; }
body { background: var(--ivory-50); color: var(--fg); }

/* =========================================================================
   Container / layout primitives
   ========================================================================= */
.kx-container { max-width: 1360px; margin: 0 auto; padding: 0 56px; }
.kx-prose     { max-width: 700px; }
.kx-rule      { height: 1px; background: var(--brass-600); border: 0; margin: 0; }
.kx-rule--hair { height: 1px; background: var(--border); border: 0; margin: 0; }

/* =========================================================================
   Top bar — annunciator above nav (markets, ticker)
   ========================================================================= */
.kx-anc { background: var(--forest-900); color: var(--ivory-200); padding: 8px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; }
.kx-anc__inner { display: flex; justify-content: space-between; align-items: center; padding: 0 56px; gap: 16px; flex-wrap: nowrap; }
.kx-anc__group { display: flex; gap: 22px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.kx-anc__group > span { white-space: nowrap; }
.kx-anc__item { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.kx-anc__item b { color: var(--ivory-100); font-weight: 500; }
.kx-anc__pos { color: #8DC8A8; }
.kx-anc__neg { color: #D89B96; }
.kx-anc__sep { width: 1px; height: 12px; background: rgba(168,133,66,0.4); }

/* =========================================================================
   Nav
   ========================================================================= */
.kx-nav { position: sticky; top: 0; z-index: 50; background: var(--ivory-50); border-bottom: 1px solid var(--brass-600); }
.kx-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 22px 56px; gap: 32px; }
.kx-nav__brand { display: inline-flex; align-items: baseline; gap: 16px; cursor: pointer; }
.kx-nav__wm { font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: 0.2em; color: var(--forest-900); }
.kx-nav__sub { font-family: var(--font-text); font-size: 10px; font-weight: 500; letter-spacing: 0.36em; color: var(--forest-900); border-left: 1px solid var(--brass-600); padding-left: 16px; }
.kx-nav__links { display: flex; gap: 36px; }
.kx-nav__link {
  font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest-900); cursor: pointer; padding: 6px 0;
  border: 0; background: transparent;
}
.kx-nav__link:hover { color: var(--brass-700); }
.kx-nav__link--active { color: var(--brass-700); border-bottom: 2px solid var(--brass-600); }
.kx-nav__cta {
  font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ivory-100); background: var(--forest-900); border: 1px solid var(--forest-900);
  padding: 11px 18px; cursor: pointer; border-radius: 2px;
}
.kx-nav__cta:hover { background: var(--ink); }

/* =========================================================================
   Hero
   ========================================================================= */
.kx-hero { position: relative; min-height: 720px; padding: 96px 0 80px; color: var(--ivory-100); overflow: hidden; }
.kx-hero__bg  { position: absolute; inset: 0; }
.kx-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.kx-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,42,34,0.78) 0%, rgba(11,42,34,0.72) 40%, rgba(11,42,34,0.86) 80%, rgba(11,42,34,0.95) 100%); }
.kx-hero__inner { position: relative; padding: 0 56px; max-width: 1360px; margin: 0 auto; }

.kx-eyebrow {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-500); margin-bottom: 32px;
}
.kx-eyebrow::before { content: ""; width: 48px; height: 1px; background: var(--brass-600); }

.kx-hero__head { font-family: var(--font-display); font-weight: 300; font-size: 96px; line-height: 0.98; letter-spacing: -0.028em; max-width: 1000px; margin: 0 0 32px; }
.kx-hero__head em { font-style: italic; font-weight: 400; }

.kx-hero__lede { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.5; color: var(--ivory-200); max-width: 580px; margin: 0 0 40px; }

.kx-hero__row { display: flex; align-items: center; gap: 28px; }

.kx-hero__chrome { position: absolute; left: 56px; right: 56px; bottom: 48px; display: flex; justify-content: space-between; align-items: center; color: var(--ivory-200); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.kx-hero__chrome--right { display: flex; gap: 32px; }

/* =========================================================================
   Buttons
   ========================================================================= */
.kx-btn {
  font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 24px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; transition: all 160ms;
  display: inline-flex; align-items: center; gap: 12px;
}
.kx-btn--primary    { background: var(--brass-600); color: var(--forest-900); border-color: var(--brass-600); }
.kx-btn--primary:hover { background: var(--brass-700); color: var(--ivory-100); }
.kx-btn--outline    { background: transparent; color: var(--ivory-100); border-color: var(--ivory-100); }
.kx-btn--outline:hover { background: var(--ivory-100); color: var(--forest-900); }
.kx-btn--ink        { background: var(--forest-900); color: var(--ivory-100); border-color: var(--forest-900); }
.kx-btn--ink:hover  { background: var(--ink); }
.kx-btn--ghost      { background: transparent; color: inherit; border: 0; padding: 14px 0; }
.kx-btn--ghost::after { content: "›"; font-family: serif; font-size: 18px; color: var(--brass-500); transition: transform 160ms; }
.kx-btn--ghost:hover::after { transform: translateX(4px); }
.kx-btn--ghost-dark { color: var(--forest-900); }
.kx-btn--ghost-dark::after { color: var(--brass-600); }

/* =========================================================================
   Marquee stats strip under hero
   ========================================================================= */
.kx-marquee { background: var(--forest-900); color: var(--ivory-100); padding: 28px 0; border-top: 1px solid var(--brass-600); }
.kx-marquee__inner { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 56px; max-width: 1360px; margin: 0 auto; }
.kx-marquee__stat { padding-right: 28px; border-right: 1px solid rgba(168,133,66,0.4); display: flex; flex-direction: column; gap: 6px; }
.kx-marquee__stat:last-child { border-right: 0; padding-right: 0; }
.kx-marquee__stat:first-child { padding-left: 0; }
.kx-marquee__lbl { font-family: var(--font-text); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-500); }
.kx-marquee__fig { font-family: var(--font-display); font-size: 32px; font-weight: 300; letter-spacing: -0.02em; color: var(--ivory-100); font-variant-numeric: tabular-nums; }
.kx-marquee__fig sup { font-size: 14px; color: var(--brass-500); vertical-align: top; position: relative; top: 4px; margin-left: 2px; }

/* =========================================================================
   Section / split / pillar showcase
   ========================================================================= */
.kx-section { padding: 120px 0; }
.kx-section--ivory  { background: var(--ivory-100); }
.kx-section--paper  { background: var(--paper); }
.kx-section--forest { background: var(--forest-900); color: var(--ivory-100); }

.kx-secthead { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: end; margin-bottom: 64px; }
.kx-secthead__title { font-family: var(--font-display); font-weight: 300; font-size: 64px; line-height: 1.02; letter-spacing: -0.026em; margin: 8px 0 0; color: var(--forest-900); }
.kx-section--forest .kx-secthead__title { color: var(--ivory-100); }
.kx-secthead__title em { font-style: italic; font-weight: 400; }
.kx-secthead__intro { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--graphite-700); max-width: 600px; }
.kx-section--forest .kx-secthead__intro { color: var(--ivory-200); }

/* =========================================================================
   Pillar showcase — large editorial cards (the four asset classes)
   ========================================================================= */
.kx-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kx-pillar { position: relative; min-height: 480px; overflow: hidden; cursor: pointer; }
.kx-pillar__bg { position: absolute; inset: 0; transition: transform 600ms var(--ease-emphatic); }
.kx-pillar__bg img { width: 100%; height: 100%; object-fit: cover; }
.kx-pillar:hover .kx-pillar__bg { transform: scale(1.04); }
.kx-pillar__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,10,0.10) 0%, rgba(11,11,10,0.55) 70%, rgba(11,11,10,0.85) 100%); }
.kx-pillar__body { position: relative; padding: 36px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; color: var(--ivory-100); min-height: 480px; }
.kx-pillar__num { font-family: var(--font-mono); font-size: 11px; color: var(--brass-500); letter-spacing: 0.2em; margin-bottom: auto; padding-top: 4px; }
.kx-pillar__name { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -0.018em; margin: 0 0 14px; max-width: 380px; }
.kx-pillar__name em { font-style: italic; }
.kx-pillar__desc { font-family: var(--font-text); font-size: 15px; line-height: 1.55; color: var(--ivory-200); max-width: 460px; margin: 0 0 24px; }
.kx-pillar__cta { font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-500); display: inline-flex; align-items: center; gap: 8px; }
.kx-pillar__cta::after { content: "›"; font-family: serif; font-size: 16px; }

/* =========================================================================
   Story / split image-text
   ========================================================================= */
.kx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.kx-split--reverse { grid-template-columns: 1fr 1fr; }
.kx-split--reverse .kx-split__media { order: 2; }
.kx-split__media { position: relative; }
.kx-split__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.kx-split__media-cap { position: absolute; bottom: 18px; left: 18px; font-family: var(--font-mono); font-size: 10px; color: var(--ivory-100); background: rgba(11,11,10,0.6); padding: 6px 10px; letter-spacing: 0.08em; }
.kx-split__body h3 { font-family: var(--font-display); font-weight: 300; font-size: 48px; line-height: 1.08; letter-spacing: -0.022em; margin: 16px 0 24px; color: var(--forest-900); }
.kx-split__body h3 em { font-style: italic; font-weight: 400; }
.kx-split__body p { font-family: var(--font-text); font-size: 16px; line-height: 1.7; color: var(--graphite-700); margin: 0 0 16px; max-width: 540px; }
.kx-split__body p.lede { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--forest-900); margin-bottom: 24px; }

/* =========================================================================
   Plantations strip — three-up image cards with depth
   ========================================================================= */
.kx-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kx-strip__card { display: flex; flex-direction: column; gap: 20px; cursor: pointer; }
.kx-strip__card img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; transition: transform 400ms var(--ease-emphatic); }
.kx-strip__card:hover img { transform: scale(1.02); }
.kx-strip__num { font-family: var(--font-mono); font-size: 11px; color: var(--brass-700); letter-spacing: 0.18em; }
.kx-strip__name { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.012em; color: var(--forest-900); margin: 0; }
.kx-strip__name em { font-style: italic; }
.kx-strip__desc { font-family: var(--font-text); font-size: 14px; line-height: 1.6; color: var(--graphite-700); margin: 0; }
.kx-strip__cta { font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest-800); display: inline-flex; gap: 6px; }
.kx-strip__cta::after { content: "›"; color: var(--brass-600); font-family: serif; font-size: 14px; }

/* =========================================================================
   Big quote
   ========================================================================= */
.kx-quote { padding: 120px 0; text-align: center; position: relative; }
.kx-quote--forest { background: var(--forest-900); color: var(--ivory-100); }
.kx-quote__mark { font-family: var(--font-display); font-size: 132px; line-height: 0.4; color: var(--brass-600); opacity: 0.7; }
.kx-quote__body { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 48px; line-height: 1.25; letter-spacing: -0.014em; max-width: 1040px; margin: 32px auto; color: inherit; }
.kx-quote__body em { font-style: normal; }
.kx-quote__attr { display: inline-flex; align-items: center; gap: 16px; font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-500); }
.kx-quote__attr::before { content: ""; width: 32px; height: 1px; background: var(--brass-600); }

/* =========================================================================
   Insights list
   ========================================================================= */
.kx-insights { display: flex; flex-direction: column; }
.kx-insight {
  display: grid; grid-template-columns: 140px 1fr 240px 28px;
  gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--border);
  align-items: baseline; cursor: pointer;
}
.kx-insight:hover .kx-insight__title { color: var(--brass-700); }
.kx-insight__date  { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--graphite-700); }
.kx-insight__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--forest-900); margin: 0; transition: color 160ms; }
.kx-insight__title em { font-style: italic; }
.kx-insight__type  { font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-700); }
.kx-insight__arrow { font-family: serif; font-size: 22px; color: var(--brass-600); text-align: right; }

/* =========================================================================
   Filter pills
   ========================================================================= */
.kx-pills { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.kx-pill {
  font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--fg); background: transparent; cursor: pointer;
}
.kx-pill--active { background: var(--forest-900); color: var(--ivory-100); border-color: var(--forest-900); }

/* =========================================================================
   People grid (leadership)
   ========================================================================= */
.kx-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; }
.kx-person__portrait {
  aspect-ratio: 4 / 5; background: var(--forest-700);
  background-size: cover; background-position: center;
  border-top: 2px solid var(--brass-600);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 16px; color: var(--ivory-100);
  font-family: var(--font-display); font-weight: 300; font-size: 64px; line-height: 1;
}
.kx-person__name  { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--forest-900); margin: 14px 0 4px; }
.kx-person__title { font-family: var(--font-text); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--graphite-700); }

/* =========================================================================
   Sub-page hero (smaller, no full image bg)
   ========================================================================= */
.kx-subhero { padding: 96px 0 80px; background: var(--ivory-100); border-bottom: 1px solid var(--brass-600); position: relative; }
.kx-subhero--texture {
  background-image: url(../assets/texture-engraving.svg);
  background-size: 360px 360px;
}
.kx-subhero__title { font-family: var(--font-display); font-weight: 300; font-size: 88px; line-height: 1.0; letter-spacing: -0.028em; color: var(--forest-900); margin: 0; max-width: 1100px; }
.kx-subhero__title em { font-style: italic; font-weight: 400; }
.kx-subhero__lede  { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--graphite-700); max-width: 660px; margin: 28px 0 0; }
.kx-subhero__meta  { display: flex; gap: 32px; margin-top: 40px; font-family: var(--font-mono); font-size: 11px; color: var(--graphite-700); letter-spacing: 0.06em; text-transform: uppercase; }
.kx-subhero__meta b { color: var(--forest-900); font-weight: 500; }

/* =========================================================================
   Strategy detail block (Strategies page)
   ========================================================================= */
.kx-strategy { padding: 96px 0; border-bottom: 1px solid var(--border); }
.kx-strategy:last-child { border-bottom: 0; }
.kx-strategy__top { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; margin-bottom: 56px; align-items: baseline; }
.kx-strategy__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--brass-700); }
.kx-strategy__title { font-family: var(--font-display); font-weight: 300; font-size: 56px; line-height: 1.06; letter-spacing: -0.022em; color: var(--forest-900); margin: 16px 0 0; }
.kx-strategy__title em { font-style: italic; font-weight: 400; }
.kx-strategy__intro { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--graphite-700); margin: 0; }
.kx-strategy__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; }
.kx-strategy__copy p { font-family: var(--font-text); font-size: 16px; line-height: 1.7; color: var(--graphite-900); margin: 0 0 16px; max-width: 620px; }
.kx-strategy__copy ul { padding: 0; margin: 24px 0 0; list-style: none; }
.kx-strategy__copy li { padding: 14px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 160px 1fr; gap: 16px; font-family: var(--font-text); font-size: 14px; color: var(--graphite-700); }
.kx-strategy__copy li:last-child { border-bottom: 1px solid var(--border); }
.kx-strategy__copy li b { font-family: var(--font-text); font-weight: 500; color: var(--forest-900); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; align-self: center; }
.kx-strategy__media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

/* =========================================================================
   Contact split — form + sidebar
   ========================================================================= */
.kx-contact { display: grid; grid-template-columns: 2fr 1fr; gap: 80px; padding: 96px 0; }
.kx-contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.kx-contact__form > .kx-field--full { grid-column: 1 / -1; }
.kx-field { display: flex; flex-direction: column; gap: 10px; }
.kx-field__label { font-family: var(--font-text); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--graphite-700); }
.kx-field__input { font-family: var(--font-text); font-size: 15px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--graphite-300); background: transparent; color: var(--forest-900); border-radius: 0; }
.kx-field__input:focus { outline: none; border-bottom-color: var(--brass-600); }
.kx-field__input::placeholder { color: var(--graphite-500); }
.kx-contact__aside { padding: 36px; background: var(--ivory-100); border-top: 2px solid var(--brass-600); }
.kx-contact__aside h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 0 0 16px; color: var(--forest-900); }
.kx-contact__aside p  { font-family: var(--font-text); font-size: 14px; line-height: 1.7; color: var(--graphite-700); margin: 0 0 16px; }
.kx-contact__aside .kx-rule { margin: 24px 0; }
.kx-contact__aside b { font-family: var(--font-text); font-weight: 500; color: var(--forest-900); }

/* =========================================================================
   Footer
   ========================================================================= */
.kx-footer { background: var(--forest-900); color: var(--ivory-200); padding: 80px 0 32px; }
.kx-footer__top { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 64px; border-bottom: 1px solid rgba(168,133,66,0.4); }
.kx-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.kx-footer__brand img { width: 200px; height: auto; }
.kx-footer__brand p { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ivory-200); max-width: 360px; margin: 8px 0 0; }
.kx-footer__col h4 { font-family: var(--font-text); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-500); margin: 0 0 18px; }
.kx-footer__col a { font-family: var(--font-text); font-size: 13px; color: var(--ivory-200); text-decoration: none; display: block; padding: 5px 0; cursor: pointer; }
.kx-footer__col a:hover { color: var(--brass-500); }
.kx-footer__bot { padding-top: 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ivory-300); letter-spacing: 0.06em; }
.kx-footer__legal { display: flex; gap: 24px; }
.kx-footer__legal a { color: var(--ivory-300); }