/*
Theme Name: Kinetica Brand
Theme URI: https://kinetica.systems
Description: Child theme of StartAce — applies the Kinetica dark brand system with deployable block patterns for hero, pillars, process, spec frame, team, and contact sections. Tokens, typography, and layout hooks match the canonical brand spec (Apr 2026).
Author: Kinetica Systems
Author URI: https://kinetica.systems
Template: startace
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
License URI: https://kinetica.systems
Text Domain: kinetica-brand
Tags: dark, industrial, full-site-editing, block-patterns, business
*/

/* =========================================================================
   KINETICA SYSTEMS — Brand CSS (child theme)
   Loaded by functions.php on top of StartAce parent.
   Design tokens mirror theme.json presets so either layer can drive colour.
   ========================================================================= */

/* -------- Design tokens ---------------------------------------------------- */
:root {
  --k-primary:   #0078D7;
  --k-accent:    #00BCF2;
  --k-bg-0:      #08090D;
  --k-bg-1:      #0F1117;
  --k-bg-2:      #1A1D27;
  --k-bg-3:      #252836;
  --k-bg-4:      #2E3245;
  --k-t-1:       #F0F2F5;
  --k-t-2:       #9CA3AF;
  --k-t-3:       #6B7280;
  --k-ok:        #22C55E;
  --k-warn:      #F59E0B;
  --k-bad:       #EF4444;
  --k-hairline:         rgba(240, 242, 245, 0.08);
  --k-hairline-strong:  rgba(240, 242, 245, 0.14);
  --k-blue-glow: 0 0 0 1px rgba(0,120,215,0.35), 0 12px 40px -16px rgba(0,188,242,0.35);
  --k-space-lg: clamp(80px, 10vw, 160px);
  --k-space-md: clamp(40px, 6vw, 80px);
}

/* -------- Global foundations ---------------------------------------------- */
html, :root, body {
  --wp--preset--color--base: #08090D !important;
  --wp--preset--color--contrast: #F0F2F5 !important;
  --wp--preset--color--primary: #0078D7 !important;
  --wp--preset--color--secondary: #00BCF2 !important;
  --wp--preset--color--tertiary: #9CA3AF !important;
}

html { scroll-behavior: smooth; background: #08090D; }

html body,
html body.wp-singular,
html body.page,
html body.home,
html body.wp-embed-responsive,
.editor-styles-wrapper {
  background: var(--k-bg-0) !important;
  background-color: var(--k-bg-0) !important;
  color: var(--k-t-1) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html body .wp-site-blocks,
html body main,
html body main.wp-block-group,
html body .wp-block-post-content,
html body .wp-block-group.is-layout-constrained,
html body #content,
html body .site-main,
html body .entry-content {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--k-t-1) !important;
}

html body .has-base-background-color,
html body [class*="has-base-background"] {
  background-color: transparent !important;
}

html body p,
html body li,
html body span,
html body .wp-block-post-content p,
html body .wp-block-post-content li {
  color: var(--k-t-1) !important;
}

/* Hardened heading visibility */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .wp-block-heading,
html body main h1, html body main h2, html body main h3, html body main h4,
html body section h1, html body section h2, html body section h3, html body section h4,
html body .wp-block-group h1, html body .wp-block-group h2, html body .wp-block-group h3,
html body .wp-block-group h4, html body .wp-block-group h5 {
  color: #F0F2F5 !important;
  -webkit-text-fill-color: #F0F2F5 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Gradient accent text (specificity beats the heading hardening above) */
html body h1 .k-accent-text, html body h2 .k-accent-text, html body h3 .k-accent-text,
html body h4 .k-accent-text, html body h5 .k-accent-text, html body p .k-accent-text,
html body .wp-block-heading .k-accent-text, html body .k-accent-text {
  background: linear-gradient(180deg, #00BCF2 0%, #0078D7 100%) !important;
  background-image: linear-gradient(180deg, #00BCF2 0%, #0078D7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
  padding: 0 0.05em;
}

/* Typography reset */
h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-post-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--k-t-1) !important;
}

h1, .wp-block-post-title, .wp-block-heading.is-style-hero {
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; letter-spacing: -0.035em; }
h3 { font-size: clamp(22px, 2.4vw, 30px); }
h4 { font-size: clamp(18px, 1.6vw, 22px); }
h5 { font-size: 16px; font-weight: 600; }

p, li, figcaption {
  color: var(--k-t-1);
  font-family: 'DM Sans', sans-serif;
}

a { color: var(--k-accent); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--k-primary); }

hr, .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--k-hairline);
  margin: 56px auto;
  max-width: 100%;
}
.wp-block-separator.is-style-wide { border-top-color: var(--k-hairline-strong); }

/* -------- Header / nav --------------------------------------------------- */
.wp-block-template-part, header.wp-block-template-part,
.wp-block-site-title a, .wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--k-t-1) !important;
}
header.wp-block-template-part {
  background: rgba(8, 9, 13, 0.82) !important;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--k-hairline);
  position: sticky;
  top: 0;
  z-index: 100;
}
.wp-block-site-title, .wp-block-site-title a {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.wp-block-navigation { font-family: 'DM Sans', sans-serif; }
.wp-block-navigation a {
  color: var(--k-t-2) !important;
  font-size: 14px;
  font-weight: 500;
  transition: color 150ms ease;
}
.wp-block-navigation a:hover, .wp-block-navigation .current-menu-item a {
  color: var(--k-t-1) !important;
}

/* -------- Footer --------------------------------------------------------- */
footer.wp-block-template-part {
  background: var(--k-bg-1) !important;
  border-top: 1px solid var(--k-hairline);
  color: var(--k-t-2);
  padding-top: 64px;
  padding-bottom: 32px;
}
footer .wp-block-site-title a, footer h2, footer h3, footer h4 {
  color: var(--k-t-1) !important;
}
footer a { color: var(--k-t-2); }
footer a:hover { color: var(--k-accent); }

/* -------- Buttons -------------------------------------------------------- */
.wp-block-button__link, .wp-block-buttons .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px !important;
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 150ms ease, background 150ms ease, box-shadow 200ms ease;
  border: 1px solid transparent;
  background: var(--k-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 32px -12px rgba(0, 120, 215, 0.6);
}
.wp-block-button__link:hover {
  background: var(--k-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -10px rgba(0, 188, 242, 0.65);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.is-style-outline > .wp-block-button__link {
  background: transparent !important;
  color: var(--k-t-1) !important;
  border: 1px solid var(--k-hairline-strong) !important;
  box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--k-primary) !important;
  color: var(--k-accent) !important;
}

/* -------- Content containers --------------------------------------------- */
.wp-block-group.is-layout-constrained > *, .wp-block-post-content > * {
  max-width: min(1280px, 92vw);
  margin-left: auto;
  margin-right: auto;
}
.wp-block-post-content > .alignwide { max-width: min(1280px, 94vw); }
.wp-block-post-content > .alignfull { max-width: none; width: 100%; }

/* -------- Section hooks -------------------------------------------------- */
.k-section {
  padding: var(--k-space-lg) 0;
  border-top: 1px solid var(--k-hairline);
  position: relative;
}
.k-section:first-of-type { border-top: none; }
.k-section-tag {
  position: absolute;
  top: 24px; right: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--k-t-3);
}

/* -------- Eyebrow -------------------------------------------------------- */
.k-eyebrow, .has-small-font-size.has-contrast-color, .wp-block-paragraph.is-style-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.18em;
  color: var(--k-accent) !important;
  text-transform: uppercase;
}
.k-eyebrow--pill {
  padding: 8px 16px;
  border: 1px solid var(--k-hairline-strong);
  border-radius: 100px;
  background: var(--k-bg-1);
  color: var(--k-t-2) !important;
}
.k-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--k-ok);
  box-shadow: 0 0 12px var(--k-ok);
  animation: k-pulse 2.2s ease-in-out infinite;
}
@keyframes k-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* -------- Gradient accent word ------------------------------------------- */
.k-accent-text, .has-primary-color, .has-accent-color {
  background: linear-gradient(180deg, var(--k-accent) 0%, var(--k-primary) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* -------- HERO ----------------------------------------------------------- */
.k-hero {
  position: relative;
  padding: 120px 0 140px;
  overflow: hidden;
  text-align: center;
}
.k-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--k-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--k-hairline) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 40%, transparent 75%);
  pointer-events: none;
}
.k-hero::after {
  content: "";
  position: absolute;
  left: 50%; top: 20%;
  transform: translateX(-50%);
  width: 1100px; height: 600px;
  background: radial-gradient(ellipse at center,
    rgba(0, 120, 215, 0.18),
    rgba(0, 188, 242, 0.08) 35%,
    transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.k-hero > * { position: relative; z-index: 2; }
.k-hero h1 {
  font-size: clamp(48px, 8vw, 112px);
  max-width: 16ch;
  margin-left: auto; margin-right: auto;
}
.k-hero-sub {
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--k-t-2);
  max-width: 58ch;
  margin: 24px auto 0;
  line-height: 1.55;
}
.k-hero .wp-block-buttons { justify-content: center; margin-top: 32px; }

/* -------- Proof bar ------------------------------------------------------ */
.k-proof-bar {
  margin: 80px auto 0;
  padding: 24px 32px;
  border: 1px solid var(--k-hairline);
  border-radius: 12px;
  background: rgba(15, 17, 23, 0.6);
  backdrop-filter: blur(8px);
  max-width: 1000px;
}
.k-proof-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--k-t-3);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.k-proof-list {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  color: var(--k-t-2);
  font-size: 15px;
}

/* -------- 2-up problem frame --------------------------------------------- */
.k-problem-frame {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--k-hairline);
  border-radius: 16px;
  overflow: hidden;
  margin-top: var(--k-space-md);
}
.k-problem-frame > .wp-block-column { padding: 48px 44px; }
.k-problem-frame > .wp-block-column:first-child {
  background: linear-gradient(135deg, rgba(0, 120, 215, 0.07), transparent 65%);
  border-right: 1px solid var(--k-hairline);
}
.k-frame-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--k-accent);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}

/* -------- Pillars (3-up) ------------------------------------------------- */
.k-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--k-hairline);
  border: 1px solid var(--k-hairline);
  border-radius: 16px;
  overflow: hidden;
  margin-top: var(--k-space-md);
}
.k-pillars > .wp-block-column, .k-pillar {
  background: var(--k-bg-1);
  padding: 44px 36px !important;
  transition: background 200ms ease;
}
.k-pillars > .wp-block-column:hover, .k-pillar:hover { background: var(--k-bg-2); }
.k-pillar-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--k-t-3);
  margin-bottom: 28px;
  display: block;
}
.k-pillar h3 {
  color: var(--k-accent);
  font-size: 26px;
  margin-bottom: 12px;
}

/* -------- Section head --------------------------------------------------- */
.k-section-head {
  text-align: center;
  max-width: 72ch;
  margin: 0 auto var(--k-space-md);
}
.k-section-head .kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--k-accent);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

/* -------- Capability cards (2-up) ---------------------------------------- */
.k-cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: var(--k-space-md);
}
.k-cap-card {
  border: 1px solid var(--k-hairline);
  border-radius: 14px;
  padding: 36px 32px;
  background: var(--k-bg-1);
  transition: border-color 200ms ease, transform 200ms ease;
}
.k-cap-card:hover {
  border-color: var(--k-primary);
  transform: translateY(-2px);
}
.k-cap-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 120, 215, 0.18), rgba(0, 188, 242, 0.08));
  border: 1px solid rgba(0, 188, 242, 0.3);
  display: grid; place-items: center;
  color: var(--k-accent);
  margin-bottom: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 14px;
}
.k-cap-stack {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.k-chip, code.k-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--k-t-2);
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--k-hairline-strong);
  background: var(--k-bg-2);
  display: inline-block;
}

/* -------- 4-up verticals ------------------------------------------------- */
.k-verticals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--k-hairline);
  border: 1px solid var(--k-hairline);
  border-radius: 16px;
  overflow: hidden;
  margin-top: var(--k-space-md);
}
.k-verticals > .wp-block-column, .k-vertical {
  background: var(--k-bg-1);
  padding: 36px 28px !important;
  transition: background 200ms ease;
}
.k-verticals > .wp-block-column:hover { background: var(--k-bg-2); }
.k-vertical-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--k-accent);
  letter-spacing: 0.2em;
  margin-bottom: 24px;
  display: block;
}
.k-vertical .v-sub {
  font-size: 13px;
  color: var(--k-t-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  display: block;
}

/* -------- Spec frame ----------------------------------------------------- */
.k-spec-frame {
  border: 1px solid var(--k-hairline);
  border-radius: 16px;
  padding: 48px 44px;
  background:
    radial-gradient(ellipse at top left, rgba(0, 120, 215, 0.07), transparent 50%),
    var(--k-bg-1);
  margin-top: var(--k-space-md);
}
.k-spec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--k-hairline);
  padding-bottom: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.k-spec-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--k-t-3);
  letter-spacing: 0.1em;
}
.k-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.k-spec-item { padding: 12px 0; }
.k-spec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--k-accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.k-spec-item h5 {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  margin-bottom: 6px;
  font-weight: 600;
}

/* -------- RaaS cards (3-up) ---------------------------------------------- */
.k-raas-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: var(--k-space-md);
}
.k-raas-card {
  border: 1px solid var(--k-hairline);
  border-radius: 14px;
  padding: 32px 28px;
  background: var(--k-bg-1);
}
.k-raas-card .big {
  font-family: 'Outfit', sans-serif;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--k-accent);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

/* -------- Process (3 steps) ---------------------------------------------- */
.k-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--k-hairline);
  border-radius: 16px;
  overflow: hidden;
  margin-top: var(--k-space-md);
}
.k-process > .wp-block-column, .k-process-step {
  padding: 48px 40px !important;
  background: var(--k-bg-1);
  border-right: 1px solid var(--k-hairline);
  position: relative;
}
.k-process > .wp-block-column:last-child, .k-process-step:last-child {
  border-right: none;
}
.k-step-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 88px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--k-hairline-strong);
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  display: block;
}
.k-step-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--k-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.k-process-meta {
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--k-t-3);
  padding-top: 16px;
  border-top: 1px solid var(--k-hairline);
}

/* -------- Question cards ------------------------------------------------- */
.k-questions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: var(--k-space-md);
}
.k-q-card {
  padding: 32px 28px;
  border: 1px solid var(--k-hairline);
  border-radius: 12px;
  background: var(--k-bg-1);
}
.k-q-card .q-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--k-t-3);
  letter-spacing: 0.2em;
  margin-bottom: 16px;
  display: block;
}
.k-q-card h5 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--k-accent);
  font-weight: 700;
}

/* -------- Measure block -------------------------------------------------- */
.k-measure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 44px;
  border: 1px solid var(--k-hairline);
  border-radius: 16px;
  background: var(--k-bg-1);
  margin-top: var(--k-space-md);
}
.k-measure ul { list-style: none; padding: 0; margin: 0; }
.k-measure li {
  color: var(--k-t-2);
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--k-hairline);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.k-measure li:last-child { border-bottom: none; }
.k-measure li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--k-accent);
  flex-shrink: 0;
  border-radius: 1px;
  transform: rotate(45deg);
}

/* -------- About / beliefs / team ----------------------------------------- */
.k-about-lead {
  max-width: 60ch;
  margin: 0 auto var(--k-space-md);
  text-align: center;
  color: var(--k-t-2) !important;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
}
.k-about-lead em {
  color: var(--k-t-1);
  font-style: normal;
  background: linear-gradient(120deg, var(--k-accent), var(--k-primary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}
.k-beliefs, .k-team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: var(--k-space-md);
}
.k-belief, .k-team-card {
  padding: 36px 32px;
  border: 1px solid var(--k-hairline);
  border-radius: 14px;
  background: var(--k-bg-1);
}
.k-belief .b-label, .k-team-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--k-accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}
.k-team-card h4 { margin-bottom: 6px; }
.k-team-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--k-t-3);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--k-hairline);
}

/* -------- Contact form (Jetpack) ----------------------------------------- */
.wp-block-jetpack-contact-form,
.wp-block-jetpack-field-text input,
.wp-block-jetpack-field-email input,
.wp-block-jetpack-field-textarea textarea,
.wp-block-jetpack-field-select select {
  font-family: 'DM Sans', sans-serif !important;
}
.wp-block-jetpack-field-text input,
.wp-block-jetpack-field-email input,
.wp-block-jetpack-field-textarea textarea,
.wp-block-jetpack-field-select select,
form input[type="text"], form input[type="email"], form textarea, form select {
  background: var(--k-bg-2) !important;
  border: 1px solid var(--k-hairline-strong) !important;
  color: var(--k-t-1) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
}
form input:focus, form textarea:focus, form select:focus {
  outline: none;
  border-color: var(--k-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 120, 215, 0.18) !important;
}
form label, .jetpack-field__label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em;
  color: var(--k-accent) !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
  display: block;
}
form ::placeholder { color: var(--k-t-3); opacity: 1; }
form button[type="submit"], .wp-block-jetpack-button button {
  background: var(--k-primary) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 16px 28px !important;
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 32px -12px rgba(0, 120, 215, 0.6);
  transition: background 150ms ease, transform 150ms ease;
}
form button[type="submit"]:hover {
  background: var(--k-accent) !important;
  transform: translateY(-1px);
}

/* -------- Responsive ----------------------------------------------------- */
@media (max-width: 960px) {
  .k-pillars, .k-process, .k-questions { grid-template-columns: 1fr !important; }
  .k-cap-grid, .k-problem-frame, .k-measure, .k-beliefs, .k-team,
  .k-spec-grid { grid-template-columns: 1fr !important; }
  .k-verticals { grid-template-columns: repeat(2, 1fr); }
  .k-raas-row { grid-template-columns: 1fr; }
  .k-process > .wp-block-column, .k-process-step {
    border-right: none; border-bottom: 1px solid var(--k-hairline);
  }
  .k-problem-frame > .wp-block-column:first-child {
    border-right: none; border-bottom: 1px solid var(--k-hairline);
  }
}
@media (max-width: 560px) {
  .k-verticals { grid-template-columns: 1fr; }
  .k-hero { padding: 80px 0 100px; }
  .k-spec-frame { padding: 32px 24px; }
  .k-measure { padding: 28px; }
}

.is-root-container.editor-styles-wrapper {
  background: var(--k-bg-0);
  color: var(--k-t-1);
}

/* -------- Single-page anchor offset (nav height compensation) ------------ */
.k-section[id],
section[id].k-section,
.k-anchor { scroll-margin-top: 92px; }

/* -------- Page section variants ------------------------------------------ */
.k-section.is-surface-1 { background: var(--k-bg-1); }
.k-section.is-surface-0 { background: var(--k-bg-0); }

/* -------- Tech stack (about → full stack in-house) ----------------------- */
.k-tech-stack {
  margin-top: 72px;
  padding: 48px 44px;
  background: var(--k-bg-1);
  border: 1px solid var(--k-hairline);
  border-radius: 14px;
}
.k-tech-stack h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--k-t-2);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 28px;
}
.k-stack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.k-stack-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--k-bg-2);
  border: 1px solid var(--k-hairline-strong);
  border-radius: 999px;
  font-size: 13px;
  color: var(--k-t-2);
  line-height: 1;
  transition: border-color 150ms ease, color 150ms ease;
}
.k-stack-pill:hover {
  border-color: var(--k-primary);
  color: var(--k-t-1);
}
.k-stack-pill strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--k-accent);
  text-transform: uppercase;
  font-weight: 500;
}

/* -------- Contact layout (form + side cards) ----------------------------- */
.k-contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 56px;
}
.k-contact-form-wrap {
  padding: 48px;
  background: var(--k-bg-1);
  border: 1px solid var(--k-hairline);
  border-radius: 14px;
}
.k-contact-form-wrap h3 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 28px;
}
.k-contact-side {
  display: grid;
  gap: 20px;
}
.k-side-card {
  padding: 28px;
  background: var(--k-bg-1);
  border: 1px solid var(--k-hairline);
  border-radius: 12px;
}
.k-side-card h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--k-accent);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
.k-side-card p { font-size: 14px; line-height: 1.65; color: var(--k-t-2); margin: 0 0 4px; }
.k-side-card p strong { color: var(--k-t-1); font-weight: 600; }
.k-side-card p.muted { color: var(--k-t-3); font-size: 13px; }
.k-side-card a { color: var(--k-accent); text-decoration: none; border-bottom: 1px solid rgba(0,188,242,0.3); transition: border-color 150ms ease; }
.k-side-card a:hover { border-bottom-color: var(--k-accent); }

/* -------- Who should reach out (2x2 grid) -------------------------------- */
.k-who-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.k-who-item {
  padding: 28px;
  background: var(--k-bg-1);
  border: 1px solid var(--k-hairline);
  border-radius: 12px;
  transition: border-color 150ms ease, transform 150ms ease;
}
.k-who-item:hover {
  border-color: var(--k-hairline-strong);
  transform: translateY(-2px);
}
.k-who-item .who-label,
.k-who-item p.who-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--k-accent);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 10px;
}
.k-who-item h5 {
  font-size: 17px;
  margin-bottom: 8px;
}
.k-who-item p { color: var(--k-t-2); font-size: 14px; line-height: 1.6; }

/* -------- Hero CTA pair -------------------------------------------------- */
.k-hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* -------- Nav anchors (make current-section link glow) ------------------- */
.wp-block-navigation a[href^="#"].current-menu-item,
.wp-block-navigation a[href^="#"]:hover { color: var(--k-t-1); }

/* -------- Footer brand line touch-up ------------------------------------- */
.k-footer-brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}

/* -------- Responsive additions ------------------------------------------- */
@media (max-width: 960px) {
  .k-contact-layout { grid-template-columns: 1fr; }
  .k-who-list { grid-template-columns: 1fr; }
  .k-tech-stack { padding: 32px 24px; }
  .k-contact-form-wrap { padding: 28px; }
}