/*
 * Kitemi brand layer
 *
 * This file deliberately sits after the exported Webflow stylesheet. It is
 * visual-only: the DOM, Webflow data attributes, interaction timings and
 * existing motion rules remain owned by the original export.
 */
@import url("../kitemi/tokens/kitemi.tokens.css");

html {
  background: var(--k-color-canvas);
}

body {
  background: var(--k-color-canvas);
  color: var(--k-color-ink);
  font-family: var(--k-font-body) !important;
  font-weight: 400;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: url("../kitemi/assets/textures/grain.gif") repeat;
  opacity: .018;
}

/* Keep Webflow's generated text nodes on the Kitemi text face without
   touching transforms, opacity, display or positioning used by its motion. */
.page-wrapper,
.page-wrapper * {
  font-family: var(--k-font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title,
.cta-title,
.footer-title,
.work-title,
.pricing-title,
.faq-title {
  color: var(--k-color-ink);
  font-family: var(--k-font-display) !important;
  font-weight: 700;
  letter-spacing: -.055em;
}

h1,
h2,
h3 {
  line-height: .92;
}

p,
.hero-details,
.section-details,
.section-description,
.section-subtitle,
.work-category,
.work-details,
.value-details,
.pricing-details,
.faq-details,
.blog-details,
.footer-item-title,
.office-location,
.menu-item-title,
.subtitle-text,
.hero-marquee-text {
  color: var(--k-color-ink-soft);
  font-weight: 400;
}

.header,
.navbar,
.page-wrapper {
  background-color: var(--k-color-canvas);
}

.navbar {
  border-bottom-color: var(--k-color-line) !important;
}

.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  width: 120px !important;
  height: 34px !important;
  object-fit: contain;
}

.footer-logo {
  width: min(320px, 100%) !important;
  height: auto !important;
  object-fit: contain;
}

.nav-link,
.menu-open,
.secondary-button,
.primary-button,
.button-text,
.footer-link-text,
.navigation-title,
.subtitle-black-text,
.blog-category {
  font-family: var(--k-font-display) !important;
  font-weight: 700;
}

.nav-link,
.menu-open,
.nav-link-text {
  color: var(--k-color-ink) !important;
}

.nav-link-line {
  background-color: var(--k-color-blue) !important;
}

.section.hero {
  background-color: var(--k-color-canvas);
  background-image: url("../kitemi/assets/textures/dot-grid.svg");
  background-position: right top;
  background-repeat: repeat;
  background-size: 44px 44px;
}

.section.work,
.section.capabilities,
.section.pricing,
.section.faq,
.section.blog {
  background-color: var(--k-color-paper);
}

.section.about,
.section.value,
.section.review,
.section.founder {
  background-color: var(--k-color-canvas);
}

.gray-color-text {
  color: var(--k-color-blue) !important;
}

.section-subtitle,
.subtitle-black-text {
  color: var(--k-color-blue-dark) !important;
}

.primary-button {
  background-color: var(--k-color-blue) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--k-color-blue);
  border-radius: var(--k-radius-sm) !important;
  color: var(--k-color-paper) !important;
}

.primary-button .button-text {
  color: var(--k-color-paper) !important;
}

.primary-button .button-dot {
  background-color: var(--k-color-paper) !important;
}

.primary-button .button-bg {
  background-color: var(--k-color-blue-hover) !important;
}

.secondary-button {
  background-color: var(--k-color-paper) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--k-color-line-strong);
  border-radius: var(--k-radius-sm) !important;
  color: var(--k-color-ink) !important;
}

.secondary-button .button-text {
  color: var(--k-color-ink);
}

.secondary-button .button-bg.black {
  background-color: var(--k-color-blue) !important;
}

.secondary-button .button-dot.black {
  background-color: var(--k-color-blue-dark) !important;
}

.value-single-block,
.pricing-wrap,
.pricing-left-wrap,
.pricing-right-wrap,
.faq-single-item,
.faq-right,
.blog-category,
.capabilities-hover-content,
.review-back-wrap {
  background-color: var(--k-color-paper) !important;
  border-color: var(--k-color-line) !important;
  border-radius: var(--k-radius-md) !important;
}

.faq-single-item.w--current {
  background-color: var(--k-color-blue-pale) !important;
}

.pricing-left-wrap,
.capabilities-hover-content,
.review-back-wrap,
.review-back-wrap._02 {
  background-color: var(--k-color-blue-dark) !important;
  color: var(--k-color-paper);
}

.pricing-left-wrap,
.capabilities-hover-content,
.review-back-wrap,
.review-back-wrap._02 {
  border-radius: var(--k-radius-md) !important;
}

/* Visual QA: keep section content from touching the next background. */
.section.hero,
.section.work,
.section.about,
.section.capabilities,
.section.value,
.section.pricing,
.section.review,
.section.founder,
.section.faq {
  padding-bottom: 32px;
}

/* The work heading is sticky in the original interaction. Give it a paint
   layer so project images cannot bleed through it while it is pinned. */
.section-title-wrap.work {
  z-index: 20;
  background-color: var(--k-color-paper);
}

/* Inactive capability rows were left at a low-contrast gray by the export. */
.capabilities-year,
.capabilities-title {
  color: var(--k-color-ink-soft) !important;
}

/* The first pricing card is intentionally dark; all of its copy must stay
   light, while the light secondary CTA keeps its own dark label. */
.pricing-left-wrap .pricing-title,
.pricing-left-wrap .pricing-details {
  color: var(--k-color-paper) !important;
}

/* The logo reveal finishes below the original footer clip after the Kitemi
   type scale is applied. Extra bottom room lets the existing animation finish
   without changing its opacity, transform or timing. */
.footer-section {
  padding-bottom: 120px;
}

.footer-section .gray-color-text {
  color: var(--k-color-blue-pale) !important;
}

.pricing-item-shape {
  background-color: var(--k-color-blue-mid) !important;
}

.review-item-overlay {
  background-image: radial-gradient(circle, rgb(27 43 100 / 0%), rgb(23 26 29 / 68%)) !important;
}

.border-line-left,
.border-line-right {
  background-color: var(--k-color-line) !important;
}

.section.cta {
  background-color: var(--k-color-blue-dark);
  background-image: url("../kitemi/assets/textures/blue-gradient.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--k-color-paper);
}

.section.cta h1,
.section.cta h2,
.section.cta h3,
.section.cta p,
.section.cta .subtitle-text,
.section.cta .section-subtitle,
.section.cta .cta-title {
  color: var(--k-color-paper) !important;
}

.footer-section {
  background-color: var(--k-color-blue-dark) !important;
  background-image: url("../kitemi/assets/textures/grid-dark.svg");
  background-position: center;
  background-repeat: repeat;
  background-size: 136px 136px;
  color: var(--k-color-paper) !important;
}

.footer-section,
.footer-section p,
.footer-section a,
.footer-section .footer-link-text,
.footer-section .footer-item-title,
.footer-section .office-location,
.footer-section .footer-title,
.footer-section .menu-item-title {
  color: var(--k-color-paper) !important;
}

.footer-section .secondary-button {
  background-color: var(--k-color-blue) !important;
  border-color: var(--k-color-blue) !important;
  color: var(--k-color-paper) !important;
}

.footer-section .secondary-button .button-text {
  color: var(--k-color-paper) !important;
}

.navigation-wrapper,
.sidemenu {
  background-color: var(--k-color-blue-dark) !important;
  background-image: url("../kitemi/assets/textures/blue-gradient.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--k-color-paper);
}

.navigation-wrapper a,
.navigation-wrapper .nav-link-text,
.navigation-wrapper .navigation-title,
.sidemenu a,
.sidemenu .nav-link-text,
.sidemenu .navigation-title {
  color: var(--k-color-paper) !important;
}

.navigation-wrapper .manu-close,
.section.cta .button-icon,
.footer-section .button-icon {
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 991px) {
  .brand-logo {
    width: 110px !important;
    height: auto !important;
  }

  .section.hero {
    background-size: 44px 44px;
  }
}

@media screen and (max-width: 479px) {
  .brand-logo {
    width: 100px !important;
  }

  .section.hero {
    background-size: 44px 44px;
  }
}