/* Dark and technical. Deliberately nothing like ChatBill: that site is a product for
   tradesmen and this one is a person selling engineering, and a visitor who follows a link
   from one to the other should be in no doubt they are two different things.

   One accent colour, monospace for anything that is a label or a fact, and a faint grid
   behind it all. Written by hand: five sections and a form, and a CSS framework on a page
   this size would be a poor advertisement for someone selling judgement about software. */
:root {
  --bg: #0b0f0e;
  --bg-raised: #121917;
  --bg-sunken: #080b0a;
  --ink: #e8efec;
  --ink-soft: #8fa39b;
  --ink-faint: #5d6f68;
  --accent: #5eead4;
  --accent-dim: #2dd4bf;
  --line: rgba(232, 239, 236, 0.1);
  --line-bright: rgba(94, 234, 212, 0.35);
  --radius: 4px;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Headlines only. Space Grotesk is a shade more technical than Inter without tipping into
     sci-fi lettering, which on a site selling judgement about software would read as styling
     standing in for substance. Body copy stays Inter because it is the better thing to read
     a paragraph of, and the mono stays JetBrains because the logo's wordmark is cut from it. */
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

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

/* Deliberately not smooth. The contact form redirects to #contact after sending, and a
   smooth root makes the browser land at the top of the document and animate the whole page
   down to the form, which reads as the page throwing the visitor away and dragging them
   back. An instant jump paints straight at the section, the same as any anchor link. */
html { scroll-behavior: auto; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  /* A blueprint grid rather than a texture: visible enough to read as technical, faint
     enough that nobody notices it as decoration. */
  background-image:
    linear-gradient(rgba(232, 239, 236, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 239, 236, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Space Grotesk sets a touch wider than Inter at the same size, so the tracking is eased
   off slightly from -0.03em: the tighter figure was compensating for Inter's narrower
   fit and pinches this face at hero sizes. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }

a { color: var(--accent); text-underline-offset: 3px; }

.wrap { width: min(1100px, 100% - 48px); margin-inline: auto; }
.wrap-narrow { width: min(680px, 100% - 48px); }

/* Anything that is a label, a number or a fact is set in mono. It is the whole visual
   argument of the site: this person works with systems. */
.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 15, 14, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark { color: var(--accent); display: flex; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.head-cta {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.05em;
  text-decoration: none; color: var(--accent);
  padding: 8px 14px; border: 1px solid var(--line-bright); border-radius: var(--radius);
}
.head-cta:hover { background: rgba(94, 234, 212, 0.08); }

/* ---------- hero ---------- */
.hero { padding: 96px 0 80px; }
.eyebrow { margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--accent); flex: none;
}
.hero h1 { font-size: clamp(40px, 7vw, 76px); margin-bottom: 24px; }
.hero h1 .accent { color: var(--accent); }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 56px; }

/* The spec block. Reads as terminal output, and says the three things a buyer is actually
   weighing up before they have to ask. */
.specs { border-top: 1px solid var(--line); display: grid; gap: 0; max-width: 620px; }
.specs div {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 13px;
}
.specs dt, .specs .k { color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.specs .v { color: var(--ink); }
.specs .v em { color: var(--accent); font-style: normal; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  padding: 13px 22px; border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--bg-sunken); font-weight: 600; }
.btn-primary:hover { background: var(--accent-dim); }
.btn-quiet { color: var(--ink); border-color: var(--line); background: transparent; }
.btn-quiet:hover { border-color: var(--line-bright); color: var(--accent); }

/* ---------- sections ---------- */
/* scroll-margin-top keeps a jumped-to section clear of the sticky header, which would
   otherwise sit over the top of its heading. */
.band { padding: 84px 0; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.band-sunken { background: var(--bg-sunken); }
.band-head { margin-bottom: 40px; }
.band h2 { font-size: clamp(26px, 3.6vw, 34px); margin-top: 10px; }

/* Services as a numbered index, not as cards floating in space. The numbers do the work
   that borders would otherwise have to. */
.index { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; }
.index-item {
  padding: 26px 26px 26px 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; align-items: start;
}
.index-num { font-family: var(--mono); font-size: 12.5px; color: var(--accent); padding-top: 4px; }
.index-item h3 { font-size: 18px; }
.index-item p { grid-column: 2; color: var(--ink-soft); font-size: 15px; }

/* ---------- case study ---------- */
.case { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start; }
.case h3 { font-size: 28px; margin-bottom: 6px; }
.case-sub { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 22px; }
/* This line is accent-coloured already, so an ordinary link inside it would be the same
   colour as the words either side of it and read as text. The underline is what says it can
   be clicked, and the arrow that it leaves the site. Inverting to ink on hover rather than
   changing the underline gives a state a reader actually notices. */
.case-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-bright);
}
.case-link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
.case-body p { color: var(--ink-soft); margin-bottom: 16px; }
.case-note {
  color: var(--ink) !important;
  border-left: 2px solid var(--accent); padding-left: 16px;
}
.case-stack { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.case-stack .mono { padding: 12px 16px; border-bottom: 1px solid var(--line); display: block; background: var(--bg-raised); }
.case-stack ul { list-style: none; }
.case-stack li {
  font-family: var(--mono); font-size: 13px; color: var(--ink-soft);
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.case-stack li:last-child { border-bottom: 0; }
.case-stack li::before { content: "\2022 "; color: var(--accent); }

/* ---------- track record ----------
   A definition list because that is what it is: a label and the thing it stands for. The
   mono left column reads as a spec sheet rather than as a CV, which is the difference
   between "here is my history" and "here is what I have already solved". */
.track { display: grid; gap: 0; }
.track > div {
  display: grid; grid-template-columns: 150px 1fr; gap: 24px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.track dt { color: var(--accent); padding-top: 3px; }
.track h3 { font-size: 18px; margin-bottom: 6px; }
.track p { color: var(--ink-soft); }

/* ---------- steps ---------- */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.steps li { counter-increment: step; padding: 24px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 80px 1fr; gap: 20px; }
.steps li::before {
  content: "0" counter(step);
  font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 3px;
}
.steps h3 { font-size: 18px; margin-bottom: 6px; }
.steps p { color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact-lead { color: var(--ink-soft); margin-bottom: 32px; }
.enquiry { display: grid; gap: 20px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field textarea {
  font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}
.field textarea { resize: vertical; }
.field-error { color: #fca5a5; font-family: var(--mono); font-size: 12.5px; }
.form-note { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); line-height: 1.7; }

/* Not display:none, because the bots worth stopping read the DOM, not the pixels. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sent {
  display: grid; gap: 6px;
  border: 1px solid var(--line-bright); border-left: 2px solid var(--accent);
  background: rgba(94, 234, 212, 0.05);
  border-radius: var(--radius); padding: 24px;
}
.sent strong { font-size: 17px; }
.sent span { color: var(--ink-soft); }

.contact-direct { margin-top: 32px; font-family: var(--mono); font-size: 13px; color: var(--ink-faint); display: grid; gap: 6px; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 32px 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* ---------- phones ----------
   Read on a phone as often as not, and two columns of anything below 640px is unreadable. */
@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  body { background-size: 40px 40px; }
  .hero { padding: 60px 0 56px; }
  .band { padding: 56px 0; }
  .row-2 { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 100%; text-align: center; }
  .head-cta { display: none; }
  .specs div { grid-template-columns: 100px 1fr; gap: 10px; font-size: 12px; }
  .steps li { grid-template-columns: 46px 1fr; gap: 12px; }
  /* The mono label goes above rather than beside: 150px of label next to 150px of text is
     not a column, it is a squeeze. */
  .track > div { grid-template-columns: 1fr; gap: 8px; }
  .index-item { grid-template-columns: 34px 1fr; gap: 4px 10px; }
}