/* ==========================================================================
   mvc.dev
   Charcoal ground, one amber accent, one unbroken spine. Nothing else.
   ========================================================================== */

:root {
  /* colour — every value contrast-checked against --ground */
  --ground:     #101012;  /* warm charcoal, not pure black                 */
  --ink:        #EDEAE4;  /* primary text                       15.0:1 AAA */
  --ink-dim:    #918D85;  /* secondary prose                     5.7:1 AA  */
  --ink-faint:  #85817A;  /* mono labels, small text             4.9:1 AA  */
  --rule:       #26262A;  /* hairline (decorative)                         */
  --amber:      #D9A441;  /* the single accent                   8.4:1 AAA */
  --spine-line: rgba(217, 164, 65, 0.28);
  --amber-soft: rgba(217, 164, 65, 0.40);

  /* geometry — content sits right of the spine, never on it */
  --pad-left:    8rem;
  --pad-right:   4rem;
  --spine-inset: 3.75rem;   /* content edge -> spine, leftward */

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ===== fonts — self-hosted, latin subset, nothing leaves the origin ===== */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;             /* variable: one file, whole axis */
  font-display: swap;
  src: url("fonts/IBMPlexSans-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
}

/* ===== reset ===== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
ul { list-style: none; }
a { color: inherit; }
::selection { background: var(--amber); color: var(--ground); }

body {
  max-width: 1280px;
  margin-inline: auto;
  padding: 2.6rem var(--pad-right) 0 var(--pad-left);
  position: relative;          /* the spine anchors to this box */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== masthead ===== */

.masthead {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.mark { font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; }
.mark span { color: var(--ink-faint); font-weight: 400; }

/* ===== the signature ===== */
/* One line, top of the page to the bottom. Nothing starts it, nothing ends it:
   the horizontal rules stay inside the content column and never touch it. */

.spine {
  position: absolute;
  left: calc(var(--pad-left) - var(--spine-inset));
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--spine-line);
}

/* ===== section rhythm ===== */

main > section + section { margin-top: 8.5rem; }

/* section label — doubles as the joint where the section meets the spine */
.eyebrow {
  position: relative;
  margin-bottom: 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--spine-inset));
  top: 0.35em;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  background: var(--amber);
}

.note  { max-width: 50ch; margin-bottom: 2.6rem; font-size: 1rem; color: var(--ink-dim); }
.after { margin-top: 1.15rem; font-size: 0.9rem; color: var(--ink-faint); }

/* ===== hero — one sentence, and room around it ===== */

.hero { padding-top: 7.5rem; }

h1 {
  max-width: 15ch;
  margin-bottom: 1.6rem;
  font-size: clamp(2.4rem, 6.5vw, 4.15rem);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.02;
}

.lede {
  max-width: 44ch;
  margin-bottom: 2.4rem;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.cta {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--amber-soft);
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--amber);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.cta:hover { border-bottom-color: var(--amber); }

.cta .arrow { display: inline-block; width: 0.68em; height: 0.68em; vertical-align: -0.06em; }

/* ===== two-column blocks: title + prose (services, integrations) ===== */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 4rem; }

.grid-2 > article { padding-top: 1.05rem; border-top: 1px solid var(--rule); }

.grid-2 h3 {
  margin-bottom: 0.4rem;
  font-size: 1.16rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.grid-2 p { max-width: 40ch; font-size: 0.93rem; line-height: 1.62; color: var(--ink-dim); }

.members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* ===== key -> values table (stack) ===== */

.table { border-top: 1px solid var(--rule); }

.table .row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
.table dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.table dd { display: flex; flex-wrap: wrap; gap: 0.3rem 2.4rem; font-size: 0.95rem; }
.table dd span { min-width: 6.5rem; }

/* ===== contact ===== */

.contact { padding-bottom: 5rem; }
.contact .note { margin-bottom: 0.7rem; }

.email {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(217, 164, 65, 0.45);
  font-family: var(--mono);
  font-size: clamp(1.35rem, 4vw, 2.15rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.email:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ===== footer ===== */

footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.1rem 0 2.6rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

/* ===== accessibility floor ===== */

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== responsive — the spine holds at every width ===== */

@media (max-width: 860px) {
  :root { --pad-left: 3.5rem; --pad-right: 1.75rem; --spine-inset: 1.9rem; }

  body { padding-top: 2rem; }
  .hero { padding-top: 4.5rem; }
  main > section + section { margin-top: 5.5rem; }

  .grid-2 { grid-template-columns: 1fr; gap: 2.2rem; }
  .table .row { grid-template-columns: 1fr; gap: 0.45rem; }
  .note { margin-bottom: 2rem; }
}

@media (max-width: 420px) {
  :root { --pad-left: 2.6rem; --pad-right: 1.1rem; --spine-inset: 1.4rem; }

  .table dd { gap: 0.25rem 1.5rem; }
  .table dd span { min-width: 5.5rem; }
}