/* Inform Media design system.
   Reference: senior advisory letterhead. Editorial, spare, high contrast.
   Deliberately shares NO visual signature with RecordRefinery: no serif
   display, no paper ground, no ledger rules. Different business, different
   face, same craft standard. */

:root {
  --bg:      #ffffff;
  --bg-2:    #f5f6f8;
  --bg-3:    #eceef2;
  --ink:     #101114;
  --ink-2:   #4d5158;
  --ink-3:   #868b94;
  --rule:    #e2e5ea;
  --rule-2:  #cdd2da;
  --accent:  #3730a3;
  --accent-2:#5b52e0;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 64ch;
  --page: 940px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0b0c0f;
    --bg-2:    #14161b;
    --bg-3:    #1b1e25;
    --ink:     #f0f1f3;
    --ink-2:   #a3a8b2;
    --ink-3:   #71767f;
    --rule:    #23262d;
    --rule-2:  #333843;
    --accent:  #a5a0ff;
    --accent-2:#c3bfff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* letterhead rule */
body::before {
  content: ""; display: block; height: 4px;
  background: var(--accent);
}

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

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 30px 0 26px;
}
.mark { text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: 9px; }
.mark .nm { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.mark .sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.masthead nav { display: flex; gap: 22px; font-size: 14.5px; }
.masthead nav a { color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--accent); }

/* ---------- type ---------- */

h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
  margin: 26px 0 22px; max-width: 16ch;
}
h2 {
  font-size: clamp(23px, 3vw, 29px);
  line-height: 1.18; letter-spacing: -.025em; font-weight: 700;
  margin: 0 0 16px; max-width: 22ch;
}
h3 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; margin: 0 0 8px; }

.lede {
  font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5;
  color: var(--ink-2); max-width: 54ch; margin: 0 0 22px;
}
p { margin: 0 0 17px; max-width: var(--measure); }
a { color: var(--accent); text-underline-offset: 2px; }
ul { max-width: var(--measure); margin: 0 0 17px; padding-left: 20px; }
li { margin-bottom: 9px; }
strong { font-weight: 650; }
.small { font-size: 15px; color: var(--ink-2); }

/* ---------- sections, two-column editorial ---------- */

section { padding: 54px 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

.cols { display: grid; grid-template-columns: 1fr; gap: 8px 48px; }
@media (min-width: 800px) { .cols { grid-template-columns: 190px 1fr; } }

.label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  padding-top: 6px;
}
.label .no { color: var(--accent); }

/* ---------- capability blocks ---------- */

.cap { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.cap:last-child { border-bottom: 0; padding-bottom: 0; }
.cap p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 12px; }
.cap ul { margin: 0; padding-left: 18px; font-size: 15.5px; color: var(--ink-2); }
.cap li { margin-bottom: 6px; }

/* ---------- engagement cards ---------- */

.eng { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .eng { grid-template-columns: repeat(3, 1fr); } }
.card {
  border: 1px solid var(--rule-2); border-radius: 4px;
  padding: 22px 20px; background: var(--bg-2);
  display: flex; flex-direction: column;
}
.card .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.card h3 { font-size: 17px; margin-bottom: 9px; }
.card p { font-size: 14.8px; color: var(--ink-2); margin: 0 0 12px; }
.card .shape {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}

/* ---------- pull quote / position ---------- */

.position {
  font-size: clamp(21px, 2.8vw, 27px); line-height: 1.32;
  letter-spacing: -.022em; font-weight: 650;
  max-width: 26ch; margin: 0 0 18px;
}

/* ---------- disqualifier list ---------- */

.no-fit { max-width: var(--measure); }
.no-fit li { color: var(--ink-2); }
.no-fit li strong { color: var(--ink); }

/* ---------- cta ---------- */

.cta {
  display: inline-block; background: var(--ink); color: var(--bg);
  text-decoration: none; padding: 15px 30px; border-radius: 3px;
  font-weight: 650; font-size: 16px; letter-spacing: -.01em; margin-top: 8px;
}
.cta:hover { background: var(--accent); }
.contact-line { font-family: var(--mono); font-size: 14px; margin-top: 18px; color: var(--ink-2); }
.contact-line a { color: var(--accent); }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 20px;
  font-size: 13.5px; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
footer a { color: var(--ink-2); }