*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --bg:#070707;
  --panel:#0d0d0d;
  --line:#222;
  --muted:#8f8f8f;
  --text:#f4f4f4;
  --soft:#151515;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}

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

img{
  max-width:100%;
  display:block;
}

.container{
  width:min(1460px,92%);
  margin:auto;
}


/* =========================
   NAVIGATION
========================= */

.nav{
  height:92px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.brand img{
  display:block;
  width:165px;
  height:auto;
  max-width:100%;
}

.navlinks{
  display:flex;
  gap:42px;
  font-size:12px;
  letter-spacing:1.2px;
}

.navlinks a{
  padding:36px 0;
  position:relative;
}

.navlinks a.active:after,
.navlinks a:hover:after{
  content:"";
  height:1px;
  background:#fff;
  position:absolute;
  left:0;
  right:0;
  bottom:23px;
}


/* =========================
   GENERAL
========================= */

.page{
  min-height:calc(100vh - 92px);
}

.kicker{
  font-size:10px;
  letter-spacing:3px;
  color:var(--muted);
  margin-bottom:18px;
}

h1{
  font-size:clamp(56px,7vw,112px);
  line-height:.88;
  letter-spacing:-6px;
}

h1 .muted{
  color:#5b5b5b;
}

.lead{
  color:#aaa;
  max-width:620px;
  line-height:1.7;
  font-size:17px;
  margin-top:28px;
}

.btn{
  padding:17px 28px;
  border:1px solid #2b2b2b;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.btn.primary{
  background:#fff;
  color:#000;
  border-color:#fff;
}


/* =========================
   HOMEPAGE
========================= */

.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
  padding:70px 0 55px;
}

.actions{
  display:flex;
  gap:14px;
  margin-top:34px;
}

.logo-orbit{
  aspect-ratio:1;
  border:1px solid #555;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:radial-gradient(
    circle at center,
    #111 0%,
    #090909 60%,
    #070707 100%
  );
}

.logo-orbit::before,
.logo-orbit::after{
  display:none !important;
}

.logo-orbit .logo-mark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2;
}

.logo-orbit .logo-mark img{
  width:95%;
  max-width:none;
  height:auto;
  display:block;
}

.footerline{
  padding:28px 0 45px;
  color:#626262;
  font-size:10px;
  letter-spacing:3px;
}


/* =========================
   PAGE HEADER
========================= */

.pagehead{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:50px;
  padding:62px 0 48px;
  border-bottom:1px solid var(--line);
}

.pagehead h1{
  font-size:clamp(54px,6vw,92px);
}

.pagehead .side{
  align-self:end;
  color:#888;
  font-size:11px;
  line-height:1.8;
  letter-spacing:1.4px;
}


/* =========================
   SERVICES
========================= */

.service-list{
  border-bottom:1px solid var(--line);
}

.service-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px 70px;
  gap:30px;
  min-height:185px;
  border-bottom:1px solid var(--line);
  align-items:center;
}

.service-row:last-child{
  border-bottom:0;
}

.service-copy h2{
  font-size:28px;
  margin-bottom:10px;
}

.service-copy p{
  color:#999;
  line-height:1.6;
  max-width:650px;
}

.image-slot{
  height:138px;
  border:1px dashed #444;
  background:linear-gradient(135deg,#0d0d0d,#141414);
  display:grid;
  place-items:center;
  color:#666;
  font-size:10px;
  letter-spacing:2px;
  text-align:center;
  padding:15px;
}

.arrow{
  font-size:34px;
  text-align:right;
}

.capabilities{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:70px;
  padding:70px 0;
}

.capabilities h2{
  font-size:56px;
  line-height:.95;
  letter-spacing:-3px;
}

.tags{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.tag{
  background:var(--bg);
  padding:24px;
  font-size:13px;
}

.cta-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:44px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.cta-strip h2{
  font-size:46px;
  letter-spacing:-2px;
}


/* =========================
   WORK
========================= */

.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:38px 0 65px;
}

.project-card{
  border:1px solid var(--line);
  background:#0a0a0a;
}

.project-media{
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:35px;
  box-sizing:border-box;
  border-bottom:1px solid var(--line);
  background:#000 !important;
  color:#666;
  font-size:10px;
  letter-spacing:2px;
  text-align:center;
}

.project-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#000 !important;
}

.project-meta{
  padding:20px;
}

.project-meta small{
  color:#777;
  letter-spacing:2px;
}

.project-meta h3{
  font-size:25px;
  margin:12px 0 20px;
}

.project-meta a{
  font-size:10px;
  letter-spacing:1.5px;
}


/* =========================
   PROCESS
========================= */

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  padding:50px 0 24px;
  border-bottom:1px solid var(--line);
}

.step{
  padding:10px 34px 40px;
  border-right:1px solid var(--line);
  min-height:260px;
}

.step:last-child{
  border-right:0;
}

.step .n{
  font-size:46px;
  color:#707070;
}

.step .icon{
  font-size:30px;
  margin:35px 0;
}

.step h3{
  font-size:20px;
  margin-bottom:12px;
}

.step p{
  color:#929292;
  line-height:1.6;
  font-size:14px;
}

.process-image{
  height:330px;
  margin:30px 0;
  border:1px dashed #444;
  background:linear-gradient(135deg,#0d0d0d,#141414);
  display:grid;
  place-items:center;
  color:#666;
  font-size:11px;
  letter-spacing:2px;
  overflow:hidden;
}

.process-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.stat{
  padding:34px;
  border-right:1px solid var(--line);
}

.stat:last-child{
  border-right:0;
}

.stat strong{
  display:block;
  font-size:42px;
}

.stat span{
  font-size:10px;
  color:#777;
  letter-spacing:2px;
}


/* =========================
   CONTACT
========================= */

.contact-wrap{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  padding:55px 0 70px;
}

.contact-info h1{
  font-size:clamp(54px,5.5vw,86px);
}

.contact-info p{
  color:#999;
  line-height:1.7;
  margin:25px 0 38px;
  max-width:520px;
}

.contact-details{
  display:grid;
  gap:24px;
}

.contact-details div span{
  display:block;
  color:#666;
  font-size:10px;
  letter-spacing:2px;
  margin-bottom:6px;
}

.contact-visual{
  margin-top:40px;
  height:260px;
  border:1px dashed #444;
  background:radial-gradient(circle at center,#111,#080808 65%);
  display:grid;
  place-items:center;
  color:#666;
  letter-spacing:2px;
  font-size:10px;
}

.form-card{
  background:#101010;
  border:1px solid var(--line);
  padding:34px;
}

.field{
  margin-bottom:24px;
}

.field label{
  display:block;
  font-size:10px;
  letter-spacing:2px;
  margin-bottom:9px;
}

.field input,
.field textarea,
.field select{
  width:100%;
  background:#0a0a0a;
  border:1px solid #2a2a2a;
  color:#fff;
  padding:15px;
  font:inherit;
}

.field textarea{
  min-height:150px;
  resize:vertical;
}

.form-card button{
  width:100%;
  padding:17px;
  background:#fff;
  border:0;
  font-weight:700;
  letter-spacing:2px;
}


/* =========================
   FOOTER
========================= */

.site-footer{
  margin-top:80px;
  border-top:1px solid #222;
  padding:30px 0;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
}

.site-footer p{
  margin:0;
  font-size:11px;
  letter-spacing:1.5px;
  color:#777;
  text-transform:uppercase;
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

  .navlinks{
    gap:18px;
    font-size:10px;
  }

  .hero,
  .pagehead,
  .contact-wrap,
  .capabilities{
    grid-template-columns:1fr;
  }

  .logo-orbit{
    max-width:520px;
    width:100%;
    margin:auto;
  }

  .service-row{
    grid-template-columns:1fr 280px 50px;
    gap:20px;
    padding:28px 0;
  }

  .service-row .image-slot,
  .service-row .arrow{
    grid-column:auto;
  }

  .work-grid{
    grid-template-columns:1fr 1fr;
  }

  .process-grid,
  .stats{
    grid-template-columns:1fr 1fr;
  }

  .step:nth-child(2){
    border-right:0;
  }

  .tags{
    grid-template-columns:1fr 1fr;
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:620px){

  .nav{
    height:auto;
    padding:24px 0 20px;
    gap:22px;
    align-items:flex-start;
    flex-direction:column;
  }

  .brand{
    width:100%;
  }

  .brand img{
    width:135px;
  }

  .navlinks{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    align-items:center;
  }

  .navlinks a{
    text-align:center;
    padding:10px 2px;
    font-size:10px;
    letter-spacing:1px;
    white-space:nowrap;
  }

  .navlinks a:first-child{
    text-align:left;
  }

  .navlinks a:last-child{
    text-align:right;
  }

  h1{
    letter-spacing:-3px;
  }

  .actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .service-row{
    grid-template-columns:1fr;
    gap:20px;
    padding:28px 0;
  }

  .service-copy,
  .service-row .image-slot,
  .service-row .arrow{
    grid-column:1;
  }

  .service-row .arrow{
    text-align:left;
  }

  .work-grid,
  .process-grid,
  .stats,
  .tags{
    grid-template-columns:1fr;
  }

  .step,
  .stat{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .process-image{
    height:auto;
    min-height:0;
    padding:0;
    border:0;
    background:none;
  }

  .process-image img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
  }

  /* Hide the large circular homepage logo on mobile only */
  .logo-orbit{
    display:none;
  }

}

/* CONTACT FORM SUBMIT BUTTON FIX */

.form-card form button[type="submit"] {
  width: 100%;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #2a2a2a !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 0;
  opacity: 1 !important;
}

.form-card form button[type="submit"]:hover {
  background: #fff !important;
  color: #000 !important;
}

@media (max-width: 768px) {
  .form-card form button[type="submit"] {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #2a2a2a !important;
    -webkit-text-fill-color: #fff !important;
  }
}