/* Blackfell Group - self-contained, no external fonts/CDNs (system font stack).
   Dark ground on purpose: this is a software/AI company whose work runs in restricted
   and air-gapped environments, and the light lakehouse-startup styling undersold that.
   Class names are unchanged from the starter so assets/site.js keeps working. */
:root {
  --gun: #16181a;          /* page ground - gunmetal */
  --gun-2: #1d2124;        /* raised panel / alternating section */
  --coyote: #b08a4e;       /* the mark's colour; accents, kickers, rules */
  --coyote-lit: #c9a05e;   /* hover - only ever on dark, so free to go brighter */
  --bone: #e8e6e1;         /* body text on dark */
  --mute: #8b9198;         /* secondary text - 5.1:1 on --gun */
  --line: #2e3338;         /* borders */
  --radius: 4px;           /* nearly square: rounded corners read soft here */
  --wrap: 1100px;
  --cond: "Helvetica Neue Condensed", "Arial Narrow", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16.5px; line-height: 1.65;
  color: var(--bone); background: var(--gun);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--coyote); }
a:hover { color: var(--coyote-lit); }
h1, h2, h3 {
  font-family: var(--cond); font-stretch: condensed; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.06; margin: 0 0 0.4em;
}
h1 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1rem; letter-spacing: 0.07em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(22,24,26,0.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 66px; }
.brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.13em;
  font-weight: 700; font-size: 0.95rem; color: var(--bone); text-decoration: none;
}
.main-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.main-nav a {
  color: var(--mute); text-decoration: none; font-size: 0.75rem;
  letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--bone); }
.nav-toggle { display: none; }

/* Buttons - square, thin-ruled. A filled pill would pull this back toward SaaS. */
.btn {
  display: inline-block; padding: 11px 22px; border-radius: var(--radius);
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  text-decoration: none; border: 1px solid transparent;
}
.btn-primary { background: var(--coyote); color: var(--gun) !important; }
.btn-primary:hover { background: var(--coyote-lit); }
.btn-outline { border-color: var(--coyote); color: var(--coyote); }
.btn-ghost-light { border-color: rgba(232,230,225,0.5); color: var(--bone) !important; }
.btn-lg { padding: 14px 30px; }

/* Hero - flat, not a gradient. The gradient was the single most SaaS thing on the page. */
.hero {
  padding: 118px 0 96px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(176,138,78,0.08), transparent 62%),
    var(--gun);
}
.hero h1 { color: var(--bone); }
.hero .lead { color: var(--mute); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.kicker {
  display: inline-block; margin-bottom: 18px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coyote);
}
.hero .kicker { color: var(--coyote); }
.lead { font-size: 1.08rem; color: var(--mute); max-width: 56ch; }

/* Sections / cards - hairline grid, no drop shadows, no rounded softness */
.section { padding: 80px 0; border-bottom: 1px solid var(--line); }
.section-alt { background: var(--gun-2); }
.section-head { max-width: 46em; margin-bottom: 38px; }
.grid { display: grid; gap: 1px; background: var(--line); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--gun); padding: 30px 26px; }
.section-alt .card { background: var(--gun-2); }
.card h3 { color: var(--bone); margin-bottom: 12px; }
.card p { color: var(--mute); font-size: 0.92rem; margin-bottom: 0; }
.card p + p { margin-top: 12px; }
.card a { letter-spacing: 0.08em; font-size: 0.8rem; text-transform: uppercase; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line); padding: 34px 0;
  color: var(--mute); font-size: 0.8rem; letter-spacing: 0.04em;
}

/* Scroll reveal (site.js adds .in; visible by default without JS or with
   prefers-reduced-motion) */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* Mobile */
@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 0; padding: 8px; cursor: pointer;
  }
  .nav-toggle span {
    display: block; width: 22px; height: 2px; margin: 5px 0; background: var(--bone);
  }
  .main-nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--gun); border-bottom: 1px solid var(--line); padding: 12px 24px 20px;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 11px 0; }
}