:root {
  --paper:#f4f1e9;
  --ink:#242620;
  --muted:#64665c;
  --line:#d4d5c9;
  --accent:#a64b32;
  --panel:#e8e9de;
  --white:#faf8f2;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit}
a,button {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px}
a:hover {
  color:var(--accent)}
[hidden] {
  display:none!important}
.wrap {
  max-width:1200px;
  margin-inline:auto;
  padding-inline:48px}
.header {
  display:flex;
  align-items:center;
  gap:48px;
  min-height:110px;
  border-bottom:1px solid var(--line)}
.wordmark {
  font-family:var(--serif);
  font-size:38px;
  font-weight:bold;
  letter-spacing:-2px;
  line-height:1}
.brand-dot {
  color:var(--accent)}
.header nav {
  display:flex;
  gap:30px;
  margin-left:auto;
  font-size:14px}
.locale {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px}
.locale button {
  border:0;
  padding:5px 3px;
  color:var(--muted);
  background:none;
  cursor:pointer}
.locale button[aria-pressed=true] {
  color:var(--ink);
  font-weight:700}
.locale span {
  color:var(--line)}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:var(--paper);
  padding:12px 20px;
  z-index:10}
.skip-link:focus {
  top:15px}
.eyebrow {
  font-size:11px;
  letter-spacing:1.6px;
  font-weight:600;
  line-height:1.5;
  margin:0 0 25px;
  text-transform:uppercase}
.hero {
  padding-top:70px;
  padding-bottom:0}
.hero .eyebrow {
  display:flex;
  align-items:center;
  gap:12px}
.small-mark {
  font-size:26px;
  color:var(--accent);
  line-height:1}
h1,h2,h3,p {
  margin-top:0}
h1,h2,.project-copy h3 {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.08}
h1 {
  font-size:clamp(46px,6.2vw,78px);
  max-width:990px;
  margin-bottom:38px}
.hero-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:62px}
.hero-copy {
  font-size:18px;
  color:var(--muted);
  max-width:560px;
  margin-bottom:0;
  line-height:1.7}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  padding:16px 22px;
  flex-shrink:0}
.button:hover {
  background:var(--accent);
  color:var(--paper)}
.hero-note {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-block:20px}
.hero-note a {
  display:flex;
  gap:24px;
  color:var(--ink)}
.section {
  padding-top:96px;
  padding-bottom:96px}
.section-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  margin-bottom:54px}
.section-heading .eyebrow {
  padding-top:8px}
.section-heading h2 {
  max-width:700px;
  font-size:clamp(34px,4vw,48px);
  margin:0}
.cap-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px}
.cap-grid article {
  border-top:1px solid var(--line);
  padding-top:27px}
.cap-symbol {
  display:block;
  font-family:monospace;
  font-size:25px;
  letter-spacing:-1px;
  color:var(--accent);
  height:60px}
.cap-grid h3,.steps h3 {
  font-size:18px;
  font-weight:500;
  line-height:1.4;
  margin-bottom:15px}
.cap-grid p,.steps p {
  color:var(--muted);
  font-size:15px;
  margin:0}
.work {
  background:var(--panel)}
.project {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center}
.project-copy .eyebrow {
  color:var(--accent)}
.project-copy h3 {
  font-size:36px;
  margin-bottom:25px}
.project-copy>p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px;
  margin-bottom:26px}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:10px;
  margin-bottom:32px}
.tags span {
  border:1px solid #c1c4b5;
  padding:4px 10px}
.project-links {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  font-size:14px}
.project-links a {
  border-bottom:1px solid #a9ad9b;
  padding-bottom:3px}
.project-links a span[aria-hidden] {
  margin-left:12px}
.tenant-diagram {
  background:var(--white);
  border:1px solid #c5c8b9;
  padding:23px 30px 25px}
.diagram-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
  font-family:monospace;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted)}
.diagram-dots {
  letter-spacing:2px;
  font-size:8px;
  color:#b2b6a4}
.platform-node {
  margin:32px auto 0;
  padding:18px;
  background:var(--panel);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:14px;
  max-width:290px}
.node-icon {
  font-size:30px;
  font-weight:300;
  line-height:1;
  color:var(--accent)}
.platform-node strong {
  display:block;
  font-size:15px;
  font-weight:500}
.platform-node div>span {
  display:block;
  font-size:11px;
  font-family:monospace;
  color:var(--muted)}
.node-status {
  margin-left:auto;
  width:6px;
  height:6px;
  background:#68805f;
  border-radius:50%}
.connector {
  height:36px;
  width:1px;
  background:#b5b9a7;
  margin:auto;
  position:relative}
.connector:after {
  content:'';
  position:absolute;
  bottom:0;
  left:-3px;
  width:7px;
  height:7px;
  border-right:1px solid #b5b9a7;
  border-bottom:1px solid #b5b9a7;
  transform:rotate(45deg)}
.tenant-node {
  padding:23px;
  border:1px solid #b9bea9;
  max-width:290px;
  margin:auto}
.tenant-label {
  display:block;
  font-family:monospace;
  font-size:9px;
  letter-spacing:1px;
  color:var(--accent);
  margin-bottom:7px}
.tenant-node strong {
  display:block;
  font-family:var(--serif);
  font-size:29px;
  font-weight:400;
  line-height:1.3}
.tenant-url {
  font-family:monospace;
  font-size:11px;
  color:var(--muted);
  overflow-wrap:anywhere}
.mini-page {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:13px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:8px}
.mini-page div {
  height:7px;
  background:#dfe2d6}
.mini-page div:nth-child(1) {
  grid-column:1/-1;
  width:65%;
  height:16px;
  background:#bcc6aa}
.diagram-foot {
  text-align:center;
  font-family:monospace;
  font-size:10px;
  color:var(--muted);
  margin:25px 0 0}
.steps {
  list-style:none;
  padding:0;
  margin:0 0 0 calc((100% - 60px)/3 + 60px)}
.steps li {
  display:flex;
  gap:28px;
  border-top:1px solid var(--line);
  padding:25px 0}
.steps li:last-child {
  border-bottom:1px solid var(--line)}
.step-number {
  font-size:11px;
  color:var(--accent);
  padding-top:4px}
.steps h3 {
  margin-bottom:8px}
.contact {
  border-top:1px solid var(--line);
  padding-top:68px}
.contact .eyebrow {
  color:var(--accent)}
.contact-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:90px;
  align-items:center}
.contact h2 {
  font-size:clamp(35px,4vw,50px);
  margin-bottom:0}
.contact-grid p {
  color:var(--muted);
  font-size:16px;
  max-width:380px;
  margin-bottom:27px}
.email-link {
  font-size:clamp(17px,2.1vw,24px);
  border-bottom:1px solid var(--ink);
  padding-bottom:6px;
  white-space:nowrap}
.email-link span {
  margin-left:18px}
.footer {
  display:flex;
  align-items:center;
  gap:30px;
  border-top:1px solid var(--line);
  padding-block:32px;
  color:var(--muted);
  font-size:11px}
.footer .wordmark {
  color:var(--ink);
  font-size:28px}
.footer p {
  margin:0}
.footer>span {
  margin-left:auto}

@media(min-width:1440px) {
  .hero {
  padding-top:88px}
.hero-bottom {
  margin-bottom:80px}
}

@media(max-width:850px) {
  .wrap {
  padding-inline:30px}
.header {
  gap:25px;
  min-height:90px}
.header nav {
  gap:20px}
.hero {
  padding-top:55px}
.hero-bottom {
  gap:25px;
  align-items:flex-start;
  flex-direction:column;
  margin-bottom:40px}
.hero-copy {
  max-width:560px}
.section {
  padding-block:65px}
.section-heading {
  grid-template-columns:1fr;
  gap:8px;
  margin-bottom:36px}
.section-heading .eyebrow {
  margin-bottom:12px}
.section-heading h2 {
  max-width:600px}
.cap-grid {
  gap:24px}
.project {
  gap:40px}
.project-copy h3 {
  font-size:31px}
.tenant-diagram {
  padding:20px}
.steps {
  margin-left:0}
.contact-grid {
  gap:35px}
}

@media(max-width:600px) {
  .wrap {
  padding-inline:22px}
.header {
  min-height:82px;
  gap:16px;
  flex-wrap:wrap;
  padding-block:19px}
.wordmark {
  font-size:32px}
.header nav {
  gap:17px;
  font-size:12px}
.header nav a:nth-child(2) {
  display:none}
.locale {
  gap:4px}
.hero {
  padding-top:40px}
h1 {
  font-size:45px;
  margin-bottom:25px}
.hero-copy {
  font-size:16px}
.hero .eyebrow {
  margin-bottom:23px}
.hero-note {
  font-size:11px;
  align-items:flex-start}
.hero-note>span {
  max-width:220px}
.hero-note a {
  gap:12px;
  white-space:nowrap}
.section {
  padding-block:54px}
.section-heading h2 {
  font-size:35px}
.cap-grid {
  grid-template-columns:1fr;
  gap:28px}
.cap-grid article {
  display:grid;
  grid-template-columns:60px 1fr;
  column-gap:12px;
  padding-top:22px}
.cap-symbol {
  grid-row:1/3;
  font-size:21px}
.cap-grid h3 {
  margin-bottom:9px}
.cap-grid p {
  font-size:14px}
.project {
  grid-template-columns:1fr;
  gap:35px}
.project-copy h3 {
  font-size:33px}
.tenant-diagram {
  padding:20px 25px}
.steps li {
  gap:21px}
.contact-grid {
  grid-template-columns:1fr;
  gap:26px}
.contact h2 {
  font-size:39px}
.contact-grid p {
  font-size:15px}
.email-link {
  font-size:21px}
.footer {
  flex-wrap:wrap;
  gap:18px;
  padding-block:26px}
.footer p {
  flex-basis:calc(100% - 110px);
  font-size:10px}
.footer>span {
  margin-left:0}
.eyebrow {
  font-size:10px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}


.footer nav { display: flex; gap: 20px; margin-left: auto; }
.footer > span { margin-left: 0; }
@media (max-width: 600px) { .footer nav { margin-left: 0; flex-basis: 100%; } }