:root{
  --ink:#22272B;
  --teal:#0F6E56;
  --paper:#F7F5F0;
  --paper-deep:#EFECE4;
  --hairline:#D9D6CC;
  --muted:#5C5F58;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1020px;margin:0 auto;padding:0 28px}
a{color:var(--teal)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* header */
header{padding:34px 0 30px;border-bottom:1px solid var(--hairline)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lockup a{display:block;text-decoration:none;color:inherit}
.lockup img,.lockup svg{height:30px;width:auto;display:block}
nav{display:flex;gap:28px}
nav a{
  color:var(--ink);text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--teal);color:var(--teal)}

/* hero */
.hero{padding:96px 0 84px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:26px;
}
h1{
  font-size:clamp(30px,4.6vw,46px);
  font-weight:600;line-height:1.18;letter-spacing:-0.012em;
  max-width:19ch;
}
.hero p{max-width:62ch;margin-top:28px;font-size:18.5px;color:var(--muted)}
.hero p strong{color:var(--ink);font-weight:500}
.cta{margin-top:40px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:500;font-size:15.5px;
  padding:13px 26px;border-radius:6px;
}
.btn:hover{background:var(--teal)}
.cta .plain{font-size:15px}

/* sections */
section{padding:78px 0;border-top:1px solid var(--hairline)}
h2{font-size:15px;font-family:"IBM Plex Mono",monospace;font-weight:500;
   letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:44px}
h3{font-size:20px;font-weight:600;margin-bottom:10px}

/* the registry diagram — the mark, enacted */
.registry{display:flex;flex-direction:column;gap:18px;max-width:760px}
.rrow{
  border:2.5px solid var(--ink);border-radius:10px;
  padding:20px 26px;background:transparent;
}
.rrow .rlabel{font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.rrow p{max-width:56ch}
.rlast{display:flex;gap:18px;align-items:stretch}
.rlast .rrow{flex:0 1 46%}
.rcell{
  flex:1 1 54%;background:var(--teal);color:var(--paper);
  border-radius:10px;padding:20px 26px;
}
.rcell .rlabel{color:#BFE3D6}
.rcell p{max-width:56ch}
@media (max-width:640px){
  .rlast{flex-direction:column}
  .rlast .rrow,.rcell{flex:1 1 auto}
}

/* work grid */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
@media (max-width:800px){.work{grid-template-columns:1fr}}
.work .item p{color:var(--muted);font-size:16px}
.tick{display:flex;align-items:center;gap:7px;margin-bottom:16px}
.tick .bar{width:34px;height:10px;border:2px solid var(--ink);border-radius:3px}
.tick .cell{width:15px;height:10px;background:var(--teal);border-radius:3px}

/* standards */
.standards{display:grid;grid-template-columns:1fr 1fr;gap:56px}
@media (max-width:800px){.standards{grid-template-columns:1fr}}
.standards p{color:var(--muted)}
.standards p+p{margin-top:16px}
.standards strong{color:var(--ink);font-weight:500}

/* about + contact */
.about p{max-width:66ch;color:var(--muted)}
.about p+p{margin-top:16px}
.about strong{color:var(--ink);font-weight:500}
.contact-box{
  background:var(--paper-deep);border-radius:12px;
  padding:44px 40px;display:flex;justify-content:space-between;
  align-items:center;gap:28px;flex-wrap:wrap;
}
.contact-box h3{font-size:24px;max-width:22ch}
.contact-box .sub{color:var(--muted);margin-top:8px;font-size:16px}

footer{border-top:1px solid var(--hairline);padding:40px 0 56px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-row img,.foot-row svg{height:34px;width:auto;display:block}
.legal{font-size:13.5px;color:var(--muted)}

/* inner pages */
.page-hero{padding:72px 0 56px}
.page-hero h1{max-width:28ch}
.page-hero > p{max-width:62ch;margin-top:28px;font-size:18.5px;color:var(--muted)}
.page-body{border-top:none;padding-top:0}
.stack{display:flex;flex-direction:column;gap:48px;max-width:66ch}
.stack .item p{color:var(--muted)}
.note{max-width:66ch;color:var(--muted);margin-top:8px}
.note + .cta{margin-top:32px}