/* ============================================================
   BKY Data Consulting — warm paper editorial theme
   One stylesheet, shared by every page.
   ============================================================ */

:root {
  --page:      #FAF7F1;   /* warm paper background */
  --ink:       #161310;   /* near-black text */
  --muted:     #57503F;   /* secondary text — body copy */
  /* Small mono labels need more contrast than body copy to read at 12–13px.
     9.73:1 on the paper background, against 7.48:1 for --muted. */
  --muted-strong: #463F32;
  --accent:    #1C5B41;   /* deep green */
  --accent-hover: #174B36;
  --hairline:  #E7E0D2;   /* thin rules + borders */
  --card:      #FFFFFF;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--page);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* A touch more room for content on a phone. The open mobile nav is
   positioned outside .wrap, so it has to be nudged to match. */
@media (max-width: 460px) { .wrap, .nav.open { padding-left: 20px; padding-right: 20px; } }

/* ---- Links ---- */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

/* ---- Type ---- */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }

/* Mono labels sit at 12–13px. Below that the letterforms lose their
   counters at these tracking values and the label stops being readable. */
.eyebrow {
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 13px;
  color: var(--muted-strong);
}

/* ---- Buttons ----
   Two styles, used everywhere: filled green primary, outlined green
   secondary. inline-flex + an explicit line-height so an <a class="btn">
   and a <button class="btn"> come out exactly the same height — the
   <button> otherwise takes the UA line-height and renders shorter. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  padding: 13px 24px;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
/* The secondary used to carry a --hairline border (1.23:1 on paper), which
   read as a blank default box rather than a button. It now shares the
   primary's colour, outlined at 65% — 3.26:1, so the edge itself clears the
   3:1 WCAG asks of a control boundary. */
.btn-ghost { background: transparent; color: var(--accent); border-color: rgba(28, 91, 65, 0.65); }
.btn-ghost:hover { background: rgba(28, 91, 65, 0.07); border-color: var(--accent); color: var(--accent-hover); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--page);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark:hover { color: var(--ink); }

.nav { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav a {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
}
.nav a:hover, .nav a.active { color: var(--ink); }

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}

@media (max-width: 720px) {
  .hamburger { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--page);
    border-bottom: 1px solid var(--hairline);
    padding: 8px 24px 16px;
  }
  .nav.open { display: flex; }
  .nav li { width: 100%; }
  .nav a { display: block; padding: 10px 0; width: 100%; }
}

/* ============================================================
   Sections + hairline dividers
   ============================================================ */
.section { padding: 96px 0; border-top: 1px solid var(--hairline); }
.section:first-of-type { border-top: none; }
.section-head { margin-bottom: 40px; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }

/* Desktop padding on a 390px screen turns the home page into a scroll.
   Tighten it twice so the proof arrives sooner. */
@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 28px; }
}
@media (max-width: 460px) {
  .section { padding: 44px 0; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: 104px 0 88px; }
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  max-width: 16ch;
  margin-bottom: 24px;
}
.hero .lead {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 32px;
  line-height: 1.55;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 720px) { .hero { padding: 48px 0 40px; } .hero .lead { margin-bottom: 26px; } }
@media (max-width: 460px) { .hero { padding: 40px 0 32px; } .hero h1 { font-size: 2.2rem; margin-bottom: 18px; } }

/* ============================================================
   Proof strip (logos + roles)
   The strongest credibility signal on the site, so the marks are sized
   to be read, not decorated. Both logo files are trimmed to the mark
   with a transparent background, so these heights are all ink — the
   height is tuned per logo so the letterforms match optically.
   ============================================================ */
.proof { display: flex; flex-wrap: wrap; gap: 32px 72px; align-items: center; margin-top: 28px; }
.proof-item { display: flex; align-items: center; gap: 18px; }
.proof-item img { width: auto; display: block; }
.proof-logo-c1  { height: 46px; }
.proof-logo-ibm { height: 28px; }
.proof-role { font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; color: var(--muted-strong); text-transform: uppercase; line-height: 1.55; }
.proof-also { font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; color: var(--muted-strong); text-transform: uppercase; margin-top: 32px; }

@media (max-width: 560px) {
  .proof { gap: 24px 40px; }
  .proof-item { gap: 14px; }
  .proof-logo-c1  { height: 38px; }
  .proof-logo-ibm { height: 23px; }
}

/* ============================================================
   Numbers band
   ============================================================ */
.numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.num-fig { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); color: var(--ink); line-height: 1; margin-bottom: 12px; }
.num-cap { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--muted-strong); line-height: 1.55; text-transform: uppercase; }

/* Two-up all the way down. One column turned four short figures into four
   tall, near-empty blocks on a phone. */
@media (max-width: 860px) { .numbers { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; } }
@media (max-width: 460px) { .numbers { gap: 26px 18px; } .num-fig { margin-bottom: 8px; } }

/* ============================================================
   Selected work — cards
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) { .work-grid { grid-template-columns: 1fr; } }

.work-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
a.work-card:hover { border-color: var(--muted); color: var(--ink); }

/* Every card runs kicker -> heading -> copy -> closer, and the closer —
   screenshot, stat, or link — sits on the card floor. That is what keeps
   a text card, a screenshot card and a big-number card looking like one
   component instead of three. */
.work-card-media {
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 20px;
  background: var(--page);
  line-height: 0;
}
.work-card-media img { width: 100%; height: auto; display: block; }

.work-card .kicker {
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 12px;
  color: var(--muted-strong);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  line-height: 1.5;
}
.live-badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 1px 6px;
  text-transform: uppercase;
}
.work-card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.work-card p { color: var(--muted); font-size: 15px; line-height: 1.55; flex-grow: 1; }
.work-card .go { margin-top: 20px; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--accent); }

/* Typographic (figure) card. The figure used to run to 3.4rem, twice the
   card's own heading, so those two cards read as a different component.
   It now sits on the card floor above a hairline, at a size that answers
   the heading rather than shouting over it. */
.work-card .big-figure {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  color: var(--ink);
  line-height: 1.1;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

/* "Also on the books" list */
.also-list { list-style: none; margin-top: 40px; border-top: 1px solid var(--hairline); }
.also-list li { border-bottom: 1px solid var(--hairline); padding: 16px 0; color: var(--muted); font-size: 15px; }
.also-list li strong { color: var(--ink); font-weight: 600; }
.also-more { margin-top: 24px; font-family: var(--sans); font-weight: 600; font-size: 15px; }

/* ============================================================
   Services — hairline rows
   ============================================================ */
.svc-rows { border-top: 1px solid var(--hairline); }
.svc-row { border-bottom: 1px solid var(--hairline); padding: 26px 0; display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: baseline; }
.svc-row h3 { font-size: 1.25rem; }
.svc-row p { color: var(--muted); font-size: 16px; }
@media (max-width: 720px) { .svc-row { grid-template-columns: 1fr; gap: 8px; } }

/* ============================================================
   Testimonials — editorial pull-quotes
   ============================================================ */
/* Four quotes at one size read as a wall. A hairline over each one makes
   them countable, and the attribution gets its own rule and weight so the
   eye can tell quote from source without stopping to read. */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; }
@media (max-width: 720px) { .quotes { grid-template-columns: 1fr; gap: 32px; } }
.quote { border-top: 1px solid var(--hairline); padding-top: 22px; }
.quote blockquote { font-family: var(--serif); font-size: 1.45rem; line-height: 1.5; color: var(--ink); margin-bottom: 18px; }
.quote .attr {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: var(--muted-strong);
  text-transform: uppercase;
  display: flex;
  gap: 12px;
}
.quote .attr::before { content: ""; flex: none; width: 22px; height: 1px; background: var(--accent); margin-top: 10px; }

/* ============================================================
   Closing CTA
   ============================================================ */
.cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 20ch; margin-bottom: 18px; }
.cta p { color: var(--muted); font-size: 1.1rem; max-width: 52ch; margin-bottom: 26px; }
.cta-links { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--sans); font-weight: 600; font-size: 15px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--hairline); padding: 40px 0; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-copy { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--muted-strong); text-transform: uppercase; }

/* Dark variant of the shared footer, for the dark-themed demo pages. */
.site-footer.footer-dark { border-top-color: rgba(148, 163, 184, 0.15); }
.site-footer.footer-dark .foot-links a { color: #94A3B8; }
.site-footer.footer-dark .foot-links a:hover { color: #F8FAFC; }
.site-footer.footer-dark .foot-copy { color: #64748B; }

/* ============================================================
   Generic content pages (about, services, contact, dashboards)
   ============================================================ */
.page-hero { padding: 88px 0 32px; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 16px; max-width: 20ch; }
.page-hero .lead { color: var(--muted); font-size: 1.2rem; max-width: 56ch; }
@media (max-width: 720px) { .page-hero { padding: 44px 0 20px; } }

.prose p { color: var(--muted); margin-bottom: 18px; max-width: 68ch; }
.prose p strong { color: var(--ink); }
.prose h2 { font-size: 1.6rem; margin: 40px 0 16px; }

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 28px;
}

/* ============================================================
   Honeypot — a bait field kept off-screen from real users.
   Bots that fill every input trip it; the server drops those.
   ============================================================ */
.hp-wrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.hp-field { display: none !important; }