:root{
  --bg:#000;
  --fg:#fff;
  --maxw: 90rem;
  --outer: 2rem;
  --gutter: 1.5rem;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"General Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:300;
}

a{ color:inherit; text-decoration:none; font-weight:300; }
a:hover{ text-decoration:underline; text-underline-offset:.25em; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--outer);
  min-height:100vh;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  padding:1.25rem 0 1rem;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.65), rgba(0,0,0,0));
}

.topbar .meta,
.topbar .links{
  font-size:.95rem;
  opacity:.8;
  letter-spacing:.01em;
  white-space:nowrap;
  font-weight:300;
}

.topbar .links{
  display:flex;
  gap:.75rem;
}

.layout{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap:var(--gutter);
  min-height: 100vh;
  padding-bottom: 3.5rem;
  align-items:stretch;
}

.right,
.services{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.right{
  grid-column: 5 / span 8;
  max-width: 46rem;
}

.tagline{
  font-size:1rem;
  font-weight:400;
  opacity:.85;
  margin:0 0 2rem;
  letter-spacing:.01em;
}

.logo{
  margin:0 0 2rem;
  font-weight:500;
  line-height:.92;
  letter-spacing:-0.04em;
  font-size: clamp(4.5rem, 12vw, 8.5rem);
}

.logo span{ display:block; }

.intro{
  opacity:.85;
  font-size:1rem;
  line-height:1.35;
}

.intro p{ margin:0 0 .65rem; }
.intro p:last-child{ margin-bottom:0; }
.intro .brand{ font-weight:500; }

.services{
  grid-column: 1 / span 3;
  font-size:1rem;
  line-height:1.35;
  opacity:.85;
  font-weight:300;
}

.services ol{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.services li{
  display:grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap:1rem;
  align-items:baseline;
}

.services .num{
  text-align:right;
  font-weight:300;
}

.services .svc{
  text-align:left;
}

@media (max-width: 64rem){
  :root{ --outer:1.5rem; }

  .layout{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .right{ grid-column: 4 / span 5; max-width:none; }
  .services{ grid-column: 1 / span 3; }
}

@media (max-width: 40rem){
  :root{ --outer:1.25rem; }

  .topbar{ padding:1rem 0 .75rem; }

  .layout{
    grid-template-columns: 1fr;
    row-gap: 2.25rem;
    padding-bottom: 3rem;
  }

  .right,
  .services{
    grid-column:auto;
    justify-content:flex-start;
  }

  .logo{
    font-size: clamp(3.25rem, 14vw, 4.75rem);
    margin-bottom: 1.25rem;
  }

  .tagline{
    margin-bottom: 1.25rem;
  }

  .services li{
    grid-template-columns: 3rem 1fr;
  }
}