/* =======================================================================
   nextdecentrum.com, shared design system. PHASE: FIRST DRAFT (2026-09-08).

   Extracted verbatim from the ratified first-screen index.html in this
   folder. NO TOKEN IS INVENTED HERE. Every :root value, every first-screen
   component rule and every media-query rule below the "ratified" marker is
   byte-identical to what was ratified and judged PASS. Everything after the
   "additions" marker is layout components only, built from those tokens.

   Spacing: 8px scale, 8/16/24/32/48/64 (the actual set used). Button
   padding (18px/16px/10px) is a declared optical exception, not on the scale.
   Type: not a clean ratio. Sizes used: 13/15/16/17/18, plus the h1
   clamp(34px, 3.9vw, 56px). Section headings reuse the h1 clamp at a
   smaller cap (see .sec__title). See NEXTDECENTRUM-REFERENCE.md.
   Grid: 12 col, 1280 max, 32 gutter, 48 margin.
   ===================================================================== */

/* ============================ RATIFIED ================================ */
:root{
  --ink:        #0E0F11;
  --ink-2:      #3A3D42;
  --ink-3:      #5F646A;
  --rule:       #DFE1E4;
  --paper:      #FBFAF8;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px;

  --max: 1280px;
  --margin: 48px;
  --gutter: 32px;

  --sans: "Helvetica Neue", Helvetica, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--margin);
}

/* ---- masthead ------------------------------------------------------ */
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
  padding-block:var(--s4);
  border-bottom:1px solid var(--rule);
}
.mark{
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
.nav{
  display:flex;
  align-items:center;
  gap:var(--s4);
  font-size:15px;
  color:var(--ink-2);
}
.nav--compact{ display:none; }
.nav a:hover{ color:var(--ink); }
.nav .cta{
  color:var(--ink);
  font-weight:500;
  border:1px solid var(--ink);
  border-radius:999px;
  padding:10px var(--s3);
  line-height:1;
}
.nav .cta:hover{ background:var(--ink); color:var(--paper); }

/* ---- hero ---------------------------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
  padding-block:var(--s6) var(--s5);
}
.hero__body{ grid-column:1 / span 8; }

.eyebrow{
  margin:0 0 var(--s4);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

h1{
  margin:0;
  font-size:clamp(34px, 3.9vw, 56px);
  line-height:1.05;
  letter-spacing:-0.022em;
  font-weight:600;
  max-width:20ch;
}

/* three facts, flat, no paragraph in the first screen */
.facts{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:var(--s3);
  margin:var(--s5) 0 0;
  padding:0;
  font-size:18px;
  color:var(--ink-2);
}
.facts li{ display:flex; align-items:baseline; gap:var(--s2); }
.facts li + li::before{
  content:"";
  width:1px; height:14px;
  background:var(--rule);
  display:block;
  transform:translateY(1px);
}

.audience{
  margin:var(--s5) 0 0;
  font-size:18px;
  color:var(--ink-2);
  max-width:46ch;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3);
  margin-top:var(--s3);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:500;
  line-height:1;
  padding:18px var(--s4);
  border-radius:999px;
  border:1px solid var(--ink);
  transition:background .15s ease, color .15s ease;
}
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:var(--ink-2); border-color:var(--ink-2); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---- immediate context: proof strip -------------------------------- */
.proof{
  border-top:1px solid var(--rule);
  padding-block:var(--s5) var(--s6);
}
.proof__label{
  margin:0 0 var(--s4);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.proof__list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s3);
  font-size:18px;
  font-weight:500;
  color:var(--ink-2);
  letter-spacing:-0.01em;
}

/* ============================ ADDITIONS ===============================
   Below-the-fold layout components. Tokens only, nothing new declared.
   ===================================================================== */

/* ---- generic section shell ----------------------------------------- */
.sec{
  border-top:1px solid var(--rule);
  padding-block:var(--s6);
}
.sec--tight{ padding-block:var(--s5); }

.sec__label{
  margin:0 0 var(--s4);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.sec__title{
  margin:0;
  font-size:clamp(28px, 2.6vw, 38px);
  line-height:1.1;
  letter-spacing:-0.018em;
  font-weight:600;
  max-width:24ch;
}
.sec__lede{
  margin:var(--s3) 0 0;
  font-size:18px;
  color:var(--ink-2);
  max-width:62ch;
}

/* ---- 12-col split used by the platform and story sections ---------- */
.split{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s4);
}
.split__aside{ grid-column:1 / span 4; }
.split__main { grid-column:5 / span 8; }

/* ---- featured platform module -------------------------------------- */
.feature__actions{ margin-top:var(--s5); }
.feature__name{
  margin:0;
  font-size:23px;
  line-height:1.2;
  letter-spacing:-0.015em;
  font-weight:600;
}

/* ---- utilities (two only, both spacing, both on the scale) --------- */
.u-mt-0{ margin-top:0; }
.u-mt-s4{ margin-top:var(--s4); }

/* ---- story prose ---------------------------------------------------- */
.prose{ max-width:62ch; }
.prose p{
  margin:0 0 var(--s3);
  color:var(--ink-2);
}
.prose p:last-child{ margin-bottom:0; }
.prose .lead{
  color:var(--ink);
  font-size:22px;
  line-height:1.4;
  letter-spacing:-0.01em;
}
.prose .close{
  color:var(--ink);
  font-weight:500;
}

/* ---- work grid ------------------------------------------------------ */
.work{
  list-style:none;
  margin:var(--s5) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s5);
}
.work__item{
  border-top:1px solid var(--rule);
  padding-top:var(--s2);
}
.work__num{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--ink-3);
}
.work__item h3{
  margin:var(--s2) 0 var(--s1);
  font-size:23px;
  line-height:1.2;
  letter-spacing:-0.015em;
  font-weight:600;
}
.work__item p{
  margin:0 0 var(--s3);
  font-size:17px;
  color:var(--ink-2);
}
.work__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--s2);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.work__meta .state{
  border:1px solid var(--rule);
  border-radius:999px;
  padding:var(--s1) var(--s2);
  line-height:1;
}
.work__meta a{
  color:var(--ink);
  font-weight:600;
  border-bottom:1px solid var(--ink);
}

/* ---- full client list ----------------------------------------------- */
.clients{
  list-style:none;
  margin:var(--s4) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s2);
  font-size:17px;
  font-weight:500;
  color:var(--ink-2);
  letter-spacing:-0.01em;
}

/* ---- people --------------------------------------------------------- */
.people{
  list-style:none;
  margin:var(--s5) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s4);
}
.people li{
  border-top:1px solid var(--rule);
  padding-top:var(--s2);
}
.people .name{
  font-size:23px;
  line-height:1.2;
  letter-spacing:-0.015em;
  font-weight:600;
}
.people .role{
  margin-top:var(--s1);
  font-size:15px;
  color:var(--ink-3);
}
.people .memoriam .name{ font-size:18px; font-weight:500; color:var(--ink-2); }

/* ---- contact form --------------------------------------------------- */
.form{
  margin:var(--s5) 0 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--gutter);
  row-gap:var(--s4);
  max-width:869px; /* 9-column span at 1440: 9x69.333 + 8x32 gutter */
}
.field{ display:flex; flex-direction:column; gap:var(--s1); }
.field--wide{ grid-column:1 / -1; }
.field label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.field input,
.field select,
.field textarea{
  font-family:inherit;
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
  background:#FFFFFF;
  border:1px solid var(--ink-3); /* 5.72:1 on paper, clears the 3:1 control-boundary floor; --rule (1.26:1) does not */
  border-radius:0;
  padding:var(--s2);
  width:100%;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-3); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:2px solid var(--ink);
  outline-offset:1px;
  border-color:var(--ink);
}
.form__submit{ grid-column:1 / -1; }
.form__note{
  grid-column:1 / -1;
  margin:0;
  font-size:15px;
  color:var(--ink-3);
  max-width:62ch;
}

/* ---- footer --------------------------------------------------------- */
.foot{
  border-top:1px solid var(--rule);
  padding-block:var(--s4);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s3);
  font-size:15px;
  color:var(--ink-3);
}

/* ---- 375 ----------------------------------------------------------- */
@media (max-width:767px){
  :root{ --margin:24px; }
  .masthead{ padding-block:var(--s3); }
  .nav{ display:none; }
  .nav--compact{ display:flex; gap:var(--s3); }
  .hero{ padding-block:var(--s5) var(--s4); grid-template-columns:1fr; column-gap:0; }
  .hero__body{ grid-column:1 / -1; }
  h1{ max-width:none; }
  .facts{
    margin-top:var(--s4);
    flex-direction:column;
    gap:var(--s1);
    font-size:17px;
  }
  .facts li + li::before{ display:none; }
  .audience{ font-size:17px; }
  .actions{ margin-top:var(--s4); gap:var(--s2); }
  .btn{ width:100%; padding:16px var(--s3); font-size:17px; }
  .proof{ padding-block:var(--s4) var(--s5); }
  .proof__list{
    grid-template-columns:repeat(2,1fr);
    row-gap:var(--s2);
    font-size:16px;
  }

  /* additions, collapsed */
  .sec{ padding-block:var(--s5); }
  .sec__title{ max-width:none; }
  .split{ grid-template-columns:1fr; column-gap:0; }
  .split__aside, .split__main{ grid-column:1 / -1; }
  .prose .lead{ font-size:20px; }
  .work,
  .people{ grid-template-columns:1fr; column-gap:0; margin-top:var(--s4); }
  .work{ row-gap:var(--s4); }
  .clients{ grid-template-columns:repeat(2,1fr); column-gap:var(--s3); }
  .form{ grid-template-columns:1fr; column-gap:0; margin-top:var(--s4); }
  .form .btn{ width:100%; }
  .foot{ flex-direction:column; align-items:flex-start; gap:var(--s1); }
}