:root {
  --paper:#eeeee5;
  --ink:#202c28;
  --muted:#56625b;
  --green:#c4ed9c;
  --line:#c6ccc0;
  --sans:Arial,Helvetica,sans-serif;
  --mono:Consolas,"Courier New",monospace;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 var(--sans);
}

a {
  color:inherit;
  text-decoration:none;
}

p,h1,h2,h3 {
  margin:0;
}

::selection {
  background:var(--green);
}

a:focus-visible {
  outline:3px solid #3c6f39;
  outline-offset:6px;
}

.page-shell {
  max-width:1600px;
  margin:auto;
  padding:0 5%;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  padding:12px;
  background:var(--ink);
  color:white;
  z-index:10;
}

.skip-link:focus {
  top:16px;
}

.site-header {
  height:105px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:24px;
}

.wordmark {
  font-weight:800;
  font-size:30px;
  letter-spacing:-2px;
}

.brand-dot {
  color:#54804a;
}

.header-note {
  font:12px var(--mono);
  color:var(--muted);
}

nav {
  display:flex;
  gap:32px;
  font-size:13px;
}

nav a:hover,footer>a:last-child:hover {
  text-decoration:underline;
}

.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:5%;
  padding:76px 0 70px;
  align-items:center;
}

.eyebrow {
  font:10px/1.6 var(--mono);
  text-transform:uppercase;
  letter-spacing:1.4px;
}

.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:#558246;
  border-radius:50%;
  margin-right:8px;
}

.hero h1 {
  font-size:clamp(64px,7.8vw,119px);
  line-height:.99;
  letter-spacing:-.075em;
  font-weight:500;
  margin:30px 0;
}

.hero h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.075em;
}

.hero-description {
  max-width:390px;
  font-size:17px;
  color:var(--muted);
  line-height:1.7;
}

.button {
  display:inline-flex;
  align-items:center;
  gap:45px;
  background:var(--ink);
  color:var(--paper);
  padding:15px 21px;
  font-size:13px;
  margin-top:28px;
  border-radius:3px;
}

.button:hover {
  background:#395140;
}

.button span {
  font-size:20px;
}

.hero-footnote {
  font:10px var(--mono);
  color:var(--muted);
  margin-top:18px;
}

.hero-art {
  height:480px;
  position:relative;
  overflow:hidden;
  border:1px solid #ced4c4;
  border-radius:5px;
  background-color:#e2e7d8;
  background-image:radial-gradient(#b6c0aa .8px,transparent .8px);
  background-size:18px 18px;
}

.art-topline,.art-bottomline {
  position:absolute;
  left:22px;
  right:22px;
  display:flex;
  justify-content:space-between;
  font:8px var(--mono);
  letter-spacing:1px;
  z-index:2;
}

.art-topline {
  top:22px;
}

.art-bottomline {
  bottom:22px;
}

.orbit {
  position:absolute;
  border:1px solid #bdc9b1;
  border-radius:50%;
  width:380px;
  height:380px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.orbit-two {
  width:280px;
  height:280px;
}

.tag {
  position:absolute;
  top:137px;
  left:11%;
  width:143px;
  height:195px;
  padding:18px;
  background:var(--green);
  border:1px solid #75925e;
  border-radius:16px;
  transform:rotate(-13deg);
  box-shadow:8px 14px 0 #27382812;
  z-index:2;
}

.tag-hole {
  display:block;
  border-radius:50%;
  width:10px;
  height:10px;
  background:#e2e7d8;
  border:1px solid #75925e;
  margin:0 auto 23px;
}

.nfc-symbol {
  position:absolute;
  right:15px;
  top:40px;
  font:18px var(--mono);
  letter-spacing:-4px;
}

.tag strong {
  font-size:32px;
  line-height:.95;
  letter-spacing:-2px;
  display:block;
}

.tag-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #92b774;
  margin-top:20px;
  padding-top:9px;
  font:8px var(--mono);
}

.phone {
  position:absolute;
  width:162px;
  height:290px;
  top:97px;
  right:10%;
  background:#29362e;
  border:3px solid #455146;
  border-radius:26px;
  padding:8px;
  transform:rotate(9deg);
  box-shadow:10px 16px 0 #27382812;
  z-index:2;
}

.phone-speaker {
  position:absolute;
  width:45px;
  height:12px;
  top:9px;
  left:55px;
  background:#29362e;
  border-radius:0 0 9px 9px;
}

.phone-screen {
  height:100%;
  background:#f8f9f0;
  border-radius:17px;
  padding:24px 12px 10px;
}

.phone-brand {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  font-weight:bold;
}

.object-icon {
  margin:19px 0 12px;
  background:#d6e7c3;
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:28px;
}

.phone-screen strong {
  display:block;
  font-size:18px;
  line-height:1.1;
  letter-spacing:-.6px;
}

.screen-line {
  height:4px;
  background:#d5dacf;
  margin-top:13px;
  border-radius:3px;
}

.screen-line.short {
  width:67%;
  margin-top:5px;
}

.screen-button {
  display:block;
  background:var(--ink);
  color:white;
  text-align:center;
  font-size:7px;
  padding:8px 0;
  margin-top:18px;
  border-radius:3px;
}

.screen-caption {
  display:block;
  text-align:center;
  font:6px var(--mono);
  margin-top:9px;
}

.connection {
  position:absolute;
  top:235px;
  left:39%;
  width:24%;
  display:flex;
  align-items:center;
  gap:7px;
}

.connection span {
  border-top:1px dashed #668057;
  flex:1;
}

.connection b {
  background:var(--paper);
  border:1px solid #b4c2a6;
  border-radius:50%;
  width:26px;
  height:26px;
  text-align:center;
  font-weight:400;
}

.object-label,.digital-label {
  position:absolute;
  font:8px var(--mono);
  color:#4e6245;
}

.object-label {
  left:8%;
  top:94px;
  transform:rotate(-13deg);
}

.digital-label {
  right:8%;
  bottom:55px;
  transform:rotate(9deg);
}

.section-divider {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding:23px 0;
}

.section-divider>span {
  font:10px var(--mono);
  color:var(--muted);
}

.featured {
  background:var(--ink);
  color:var(--paper);
  border-radius:5px;
  padding:33px 40px 0;
}

.feature-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--green);
}

.badge {
  font:9px var(--mono);
  border:1px solid #617657;
  border-radius:30px;
  padding:6px 12px;
}

.feature-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10%;
  padding:33px 0 40px;
}

.feature-grid h2 {
  font-size:clamp(44px,5vw,72px);
  font-weight:500;
  letter-spacing:-3px;
  line-height:1.15;
}

.feature-grid h2 span {
  font-size:40px;
  color:var(--green);
  margin-left:24px;
}

.feature-tagline {
  font-size:21px;
  line-height:1.35;
  margin-top:16px;
  color:#c4cdbf;
}

.feature-detail {
  padding-top:8px;
}

.feature-detail>p {
  font-size:15px;
  line-height:1.8;
  color:#c4cdbf;
  max-width:395px;
}

.text-link {
  display:inline-flex;
  gap:48px;
  border-bottom:1px solid #829779;
  padding-bottom:8px;
  margin-top:24px;
  font-size:13px;
  color:var(--green);
}

.text-link:hover {
  color:white;
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #526047;
}

.steps>div {
  padding:22px 20px 26px;
  border-right:1px solid #526047;
}

.steps>div:first-child {
  padding-left:0;
}

.steps>div:last-child {
  border:0;
}

.steps span {
  font:10px var(--mono);
  color:var(--green);
}

.steps p {
  font-size:14px;
  margin:8px 0 4px;
}

.steps small {
  font-size:11px;
  color:#b1beab;
}

.other-projects {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  padding:68px 0;
  gap:32px;
}

.other-intro h2 {
  font-size:30px;
  font-weight:400;
  letter-spacing:-1px;
  line-height:1.2;
  margin-top:22px;
}

.project {
  border-left:1px solid var(--line);
  padding-left:30px;
  display:flex;
  flex-direction:column;
}

.project-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.project-top>span:last-child {
  font-size:24px;
}

.project h3 {
  font-size:29px;
  letter-spacing:-1px;
  font-weight:500;
  margin:16px 0 12px;
}

.project>p {
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
}

.project-domain {
  font:10px var(--mono);
  margin-top:auto;
  padding-top:24px;
}

.project:hover h3 {
  text-decoration:underline;
  text-underline-offset:6px;
}

.about {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:32px;
  padding:60px 0 70px;
}

.about h2 {
  font-size:clamp(30px,3.5vw,48px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-1.8px;
}

.about p:not(.eyebrow) {
  max-width:600px;
  font-size:15px;
  color:var(--muted);
  margin-top:25px;
}

.about p.independence {
  font-size:12px;
  max-width:550px;
}

footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding:25px 0 32px;
  font:10px var(--mono);
}

footer p {
  color:var(--muted);
}

@media(min-width:1500px) {
  .hero-art {
    height:520px;
  }
  .tag {
    left:16%;
    top:155px;
  }
  .phone {
    right:15%;
    top:115px;
  }
  .connection {
    top:253px;
  }
}

@media(max-width:1000px) {
  .header-note {
    display:none;
  }
  .hero {
    gap:25px;
  }
  .hero-art {
    height:420px;
  }
  .tag {
    left:6%;
    width:125px;
    top:127px;
  }
  .phone {
    right:5%;
    width:140px;
    height:265px;
    top:86px;
  }
  .phone-screen {
    padding-left:9px;
    padding-right:9px;
  }
  .phone-speaker {
    left:44px;
  }
  .phone-screen strong {
    font-size:16px;
  }
  .object-label {
    left:5%;
    top:85px;
  }
  .digital-label {
    bottom:35px;
  }
  .feature-grid {
    gap:5%;
  }
  .other-projects {
    gap:22px;
  }
  .project {
    padding-left:22px;
  }
}

@media(max-width:700px) {
  .page-shell {
    padding:0 6%;
  }
  .site-header {
    height:80px;
  }
  nav {
    gap:22px;
    font-size:12px;
  }
  .hero {
    grid-template-columns:1fr;
    padding:42px 0;
    gap:38px;
  }
  .hero h1 {
    font-size:clamp(65px,14vw,96px);
    margin:25px 0;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1px;
  }
  .hero-description {
    font-size:16px;
  }
  .hero-art {
    height:400px;
    width:100%;
    max-width:500px;
    justify-self:center;
  }
  .tag {
    left:13%;
    top:123px;
  }
  .phone {
    right:12%;
    top:73px;
  }
  .object-label {
    left:10%;
    top:79px;
  }
  .digital-label {
    right:10%;
    bottom:39px;
  }
  .connection {
    top:215px;
  }
  .section-divider>span {
    font-size:8px;
  }
  .featured {
    padding:25px 23px 0;
  }
  .badge {
    font-size:8px;
    padding:5px 8px;
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:22px;
    padding:25px 0;
  }
  .feature-grid h2 {
    font-size:52px;
  }
  .feature-tagline {
    font-size:20px;
  }
  .steps {
    grid-template-columns:1fr;
  }
  .steps>div,.steps>div:first-child {
    padding:16px 0;
    border-right:0;
    border-bottom:1px solid #526047;
    display:grid;
    grid-template-columns:28px 1fr;
    align-items:baseline;
  }
  .steps p {
    margin:0;
  }
  .steps small {
    grid-column:2;
  }
  .other-projects {
    grid-template-columns:1fr;
    padding:42px 0;
    gap:30px;
  }
  .other-intro h2 {
    margin-top:13px;
  }
  .project {
    border-left:0;
    border-top:1px solid var(--line);
    padding:20px 0 0;
  }
  .project h3 {
    margin:10px 0;
  }
  .project-domain {
    padding-top:17px;
  }
  .about {
    grid-template-columns:1fr;
    gap:20px;
    padding:35px 0 45px;
  }
  footer {
    flex-wrap:wrap;
    gap:20px;
  }
  footer p {
    order:3;
    flex-basis:100%;
  }
  .art-topline,.art-bottomline {
    font-size:7px;
    left:15px;
    right:15px;
  }
}

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

@media(max-width:400px) {
  .tag {
    left:8%;
    width:110px;
    padding:14px;
  }
  .tag strong {
    font-size:29px;
  }
  .phone {
    right:7%;
    width:130px;
  }
  .phone-speaker {
    left:39px;
  }
  .object-label {
    left:6%;
  }
}

@media (max-width: 400px) {
  .feature-grid h2 {
    font-size: 40px;
    letter-spacing: -2px;
  }
  .feature-grid h2 span {
    font-size: 26px;
    margin-left: 12px;
  }
}