/* ============================================
   KC IT Solutions - design tokens
   ============================================ */
:root {
  --ink: #0d0d0c;
  --ink-soft: #19180f;
  --paper: #ffffff;
  --paper-dim: #f6f3ec;

  --gold: #c9a84c;
  --gold-deep: #96772c;
  --gold-wash: rgba(201, 168, 76, 0.14);
  --amber: #b9791f;

  --text-on-ink: #ffffff;
  --text-on-ink-dim: rgba(255, 255, 255, 0.68);
  --text-on-paper: #14120c;
  --text-on-paper-dim: rgba(20, 18, 12, 0.62);

  --rule: rgba(20, 18, 12, 0.12);
  --rule-on-ink: rgba(255, 255, 255, 0.14);

  --display: "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
  /* System monospace on purpose: the terminal mark needs a mono face, and
     a webfont for one short line would be a render-blocking request on the
     page whose speed we sell against. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;

  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text-on-paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  /* Heavy weight and tight tracking give the type real presence. This is
     the single biggest reason the page reads as designed rather than
     defaulted - it was 600 and looked like every other template. */
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.022em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow.on-ink { color: var(--gold); }

/* ============================================
   Focus visibility
   ============================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================
   Header / Nav
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-on-paper);
}
.logo .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-wash);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14.5px;
}
.nav-links a.page-link {
  color: var(--text-on-paper-dim);
  transition: color 0.15s ease;
}
.nav-links a.page-link:hover,
.nav-links a.page-link[aria-current="page"] {
  color: var(--text-on-paper);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--ink-soft); }
.btn-signal {
  background: var(--gold);
  color: var(--ink);
}
.btn-signal:hover { background: #d8bc72; }
.btn-outline {
  background: transparent;
  border-color: var(--rule);
  color: var(--text-on-paper);
}
.btn-outline:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn-outline.on-ink,
.cta-band .btn-outline,
.page-hero .btn-outline {
  border-color: var(--rule-on-ink);
  color: var(--text-on-ink);
}
.btn-outline.on-ink:hover,
.cta-band .btn-outline:hover,
.page-hero .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
}

/* ============================================
   Hero
   ============================================ */
.hero {
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 96px 0 100px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule-on-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-on-ink) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 50% at 70% 30%, black, transparent);
  opacity: 0.5;
}
.hero::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.18), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin-top: 18px;
  color: #fff;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
}
.hero-sub {
  margin-top: 20px;
  font-size: 17.5px;
  color: var(--text-on-ink-dim);
  max-width: 46ch;
}
.hero-cta {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================
   Terminal mark  |<C
   The bar and the less-than form the K; the C is shared between the
   mark and the phrase typing after it, so "C" + "alls answered."
   reads as both "KC" and "Calls answered." at once.

   Decorative only. It is aria-hidden and sits ABOVE the real <h1>,
   which stays static text - a heading that rewrites itself is noise
   to a screen reader and churn to a crawler.
   ============================================ */
.kc-term {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 19px;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  margin-bottom: 4px;
}
.kc-term .bar,
.kc-term .lt { color: var(--gold); }
.kc-term .lt { margin-left: -0.06em; }
.kc-term .c  { color: var(--text-on-ink); margin-left: 0.10em; }

/* The sizer reserves the width of the longest phrase in the same grid
   cell, so the line never reflows mid-type. Without it the layout
   jumps on every character and the whole thing reads as cheap. */
.kc-slot { display: inline-grid; vertical-align: baseline; }
.kc-slot > * { grid-area: 1 / 1; }
/* Also carries visibility:hidden as an inline style in the HTML. That is
   not redundancy for its own sake: a visitor holding a cached stylesheet
   from before these rules existed would otherwise see the sizer's text
   sitting in the hero permanently, looking like the animation had frozen.
   That exact bug shipped once. Keep the inline style. */
.kc-slot .kc-sizer { visibility: hidden; pointer-events: none; }

/* white-space:pre keeps the leading space in " Solutions"; HTML would
   otherwise collapse it and render "CSolutions". Weight 500 against the
   mark's 700 stops |< reading as punctuation opening a sentence. */
.kc-typed {
  color: var(--text-on-ink);
  text-align: left;
  white-space: pre;
  font-weight: 500;
}
/* Cursor belongs to the typed text, not the reserved box - as a sibling
   it stranded itself at the far edge on any short phrase. */
.kc-typed::after {
  content: "";
  display: inline-block;
  width: 0.58em;
  height: 1em;
  background: var(--gold);
  transform: translateY(0.12em);
  margin-left: 0.08em;
  animation: kc-blink 1.05s steps(1) infinite;
}
.kc-typed.resting::after { animation: kc-blink 1.9s steps(1) infinite; opacity: 0.75; }
@keyframes kc-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .kc-typed::after { animation: none; opacity: 1; }
}

/* Signature: status panel */
.status-panel {
  background: var(--ink-soft);
  border: 1px solid var(--rule-on-ink);
  border-radius: 12px;
  padding: 22px 22px 8px;
  font-family: var(--body);
  position: relative;
  z-index: 1;
}
.status-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-on-ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-on-ink);
  margin-bottom: 6px;
}
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-on-ink);
  font-size: 13.5px;
}
.status-row:last-child { border-bottom: none; }
.status-row .label { color: var(--text-on-ink-dim); }
.status-row .val { color: #fff; font-weight: 500; }
.status-row .val.good { color: var(--gold); }
.status-row .val.warn { color: var(--amber); }

/* ============================================
   Section scaffolding
   ============================================ */
section { padding: 88px 0; }
.section-head {
  max-width: 620px;
  margin-bottom: 52px;
}
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-top: 14px;
}
.section-head p {
  margin-top: 14px;
  color: var(--text-on-paper-dim);
  font-size: 16px;
}
.section-alt {
  background: var(--paper-dim);
}

/* ============================================
   Services
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.service-card {
  background: var(--paper);
  padding: 32px 28px;
  transition: background 0.2s ease;
}
.service-card:hover { background: var(--paper-dim); }
.service-card .num {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--gold-deep);
  letter-spacing: 0.08em;
}
.service-card h3 {
  font-size: 1.25rem;
  margin-top: 14px;
}
.service-card p {
  margin-top: 12px;
  color: var(--text-on-paper-dim);
  font-size: 14.8px;
}
.tag-row {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Service cards used to be dead ends - the service pages were only
   reachable from the footer. These make each card a real entry point. */
.card-link {
  display: block;
  margin-top: 16px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-deep);
  text-decoration: none;
}
.card-link + .card-link { margin-top: 8px; }
.card-link:hover { text-decoration: underline; }
.tag {
  font-family: var(--body);
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--rule);
  color: var(--text-on-paper-dim);
}

/* ============================================
   Process
   ============================================ */
.process-list {
  display: grid;
  gap: 0;
}
.process-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.process-item:last-child { border-bottom: 1px solid var(--rule); }
.process-item .step-num {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  color: var(--gold-deep);
  padding-top: 4px;
}
.process-item h3 { font-size: 1.15rem; }
.process-item p {
  margin-top: 8px;
  color: var(--text-on-paper-dim);
  font-size: 15px;
  max-width: 58ch;
}

/* ============================================
   Pricing
   ============================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.price-num.price-num-sm { font-size: 1.6rem; }
.price-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  background: var(--ink);
  color: var(--text-on-ink);
  border-color: var(--ink);
}
.price-card.featured::before {
  content: "Most popular";
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
/* Spanish page reuses this badge - swap only the text, not the shape. */
html[lang="es"] .price-card.featured::before {
  content: "Más popular";
}
.price-card.featured .price-tier,
.price-card.featured .price-desc { color: var(--text-on-ink-dim); }
.price-card.featured .price-num { color: #fff; }
.price-card.featured .feature-list li { color: var(--text-on-ink); border-top-color: var(--rule-on-ink); }
.price-card.featured .feature-list li::before { color: var(--gold); }
.price-tier {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-paper-dim);
}
.price-num {
  font-family: var(--display);
  font-size: 2.5rem;
  margin-top: 10px;
}
.price-desc {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--text-on-paper-dim);
  min-height: 42px;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  flex-grow: 1;
}
.feature-list li {
  font-size: 14.5px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  color: var(--text-on-paper-dim);
}
.feature-list li:first-child { border-top: none; }
.feature-list li::before {
  content: "✓";
  color: var(--gold-deep);
  margin-right: 10px;
  font-weight: 600;
}
.price-card .btn { margin-top: 24px; }

/* ============================================
   CTA band
   ============================================ */
.cta-band {
  background: var(--ink);
  color: var(--text-on-ink);
  text-align: center;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 720px;
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.12), transparent 70%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.cta-band p {
  margin-top: 14px;
  color: var(--text-on-ink-dim);
  font-size: 16px;
}
.cta-band .hero-cta { justify-content: center; margin-top: 30px; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--ink);
  color: var(--text-on-ink-dim);
  padding: 56px 0 32px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  /* Four columns since the Services links were added. */
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule-on-ink);
}
.footer-grid h4 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-ink);
  margin-bottom: 16px;
}
.footer-grid a, .footer-grid p { display: block; margin-bottom: 10px; }
.footer-grid a:hover { color: var(--gold); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

/* ============================================
   Page hero (About / Contact - smaller)
   ============================================ */
.page-hero {
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.16), transparent 70%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; }
.page-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  margin-top: 14px;
}
.page-hero p {
  margin-top: 16px;
  color: var(--text-on-ink-dim);
  max-width: 56ch;
  font-size: 16.5px;
}

/* ============================================
   About page
   ============================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.about-grid p + p { margin-top: 16px; }
.about-grid p { color: var(--text-on-paper-dim); font-size: 16px; }
.value-list {
  display: grid;
  gap: 22px;
}
.value-item {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.value-item h3 { font-size: 1.05rem; }
.value-item p { margin-top: 8px; color: var(--text-on-paper-dim); font-size: 14.8px; }

/* ============================================
   Contact page
   ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
}
.contact-info h3 { font-size: 1.05rem; margin-top: 28px; }
.contact-info h3:first-child { margin-top: 0; }
.contact-info p, .contact-info a {
  margin-top: 8px;
  color: var(--text-on-paper-dim);
  font-size: 15px;
}
.contact-info a:hover { color: var(--gold-deep); }

.form-card {
  background: var(--paper-dim);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 32px;
}
.field {
  margin-bottom: 20px;
}
.field label {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-paper-dim);
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  font-family: var(--body);
  font-size: 15px;
  color: var(--text-on-paper);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px var(--gold-wash);
}
.form-msg {
  margin-top: 16px;
  font-size: 14px;
  font-family: var(--body);
  display: none;
}
.form-msg.show { display: block; }
.form-msg.ok { color: var(--gold-deep); }
.form-msg.err { color: #C24444; }

/* ============================================
   Responsive
   ============================================ */
/* Column-count modifiers for the service pages. These are classes rather than
   inline styles on purpose: an inline style beats a media query, so inlining
   the column count silently breaks the mobile layout below. */
.pricing-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.value-list.cols-2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 880px) {
  .pricing-grid.cols-3 { grid-template-columns: 1fr; }
  .value-list.cols-2 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .status-panel { max-width: 420px; }
  .services-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* ============================================
   CONTACT — phone/email emphasis + spam trap
   ============================================ */
.contact-info a.contact-lead {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-on-paper);
  letter-spacing: -0.01em;
}
.contact-info a.contact-lead:hover { color: var(--gold-deep); }

.field label .opt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.65;
}

/* Honeypot: off-screen for people, still submitted by bots. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* Long email addresses shouldn't blow out the column on small screens. */
.contact-info a.contact-lead.is-email {
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.site-footer a[href^="mailto:"] { overflow-wrap: anywhere; }