:root {

  --paper: #f4f1ec;

  --ink: #171817;


  --brand: #ff5500;

  --line: rgba(23,24,23,.15);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

  scroll-padding-top: 90px;

}

body {

  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font-family: var(--sans);

  font-size: 16px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

}

a {

  color: inherit;

  text-decoration: none;

}

button,input,textarea {

  font: inherit;

}

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0,0,0,0);

  white-space: nowrap;

  border: 0;

}

.site-header {

  height: 88px;

  padding: 0 6.25%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid var(--line);

  position: absolute;

  z-index: 10;

  inset: 0 0 auto;

  backdrop-filter: blur(16px);

  background: rgba(9,13,33,.88);

  border-color: rgba(255,255,255,.12);

}

.brand img,.site-footer>a img {

  display: block;

  width: 154px;

  height: auto;

  mix-blend-mode: multiply;

}

.primary-nav {

  display: flex;

  align-items: center;

  gap: 38px;

  font-size: 13px;

  font-weight: 600;

  color: #f4f1ec;

}

.primary-nav>a:not(.nav-cta) {

  transition: opacity .2s;

}

.primary-nav>a:not(.nav-cta):hover {

  opacity: .55;

}

.nav-cta {

  background: var(--ink);

  color: white;

  padding: 12px 18px;

  border-radius: 3px;

}

.nav-cta span {

  color: var(--brand);

  padding-left: 14px;

}

.menu-toggle {

  display: none;

}

.hero {

  min-height: 740px;

  height: min(100vh,900px);

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  padding: 125px 10% 90px;

  isolation: isolate;

  background: radial-gradient(ellipse at 14% 78%,rgba(255,85,0,.16),transparent 30%),radial-gradient(ellipse at 53% 93%,rgba(108,49,29,.15),transparent 38%),#090d21;

  color: #f4f1ec;

}

.hero-copy {

  position: relative;

  z-index: 2;

  width: 55%;

  max-width: 680px;

}

.eyebrow,.section-kicker,.hero-foot,.service-number,.career-gear-stage>span,.location {

  font-family: var(--mono);

  font-size: 10px;

  letter-spacing: .09em;

}

.eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 0 0 30px;

}

.status-dot {

  height: 7px;

  width: 7px;

  border-radius: 50%;

  background: var(--brand);

  box-shadow: 0 0 0 4px rgba(255,85,0,.16);

}

h1,h2,h3,p {

  margin-top: 0;

}

h1,h2 {

  font-family: var(--display);

  font-weight: 600;

  letter-spacing: -.065em;

}

h1 {

  font-size: clamp(64px,8vw,116px);

  line-height: .99;

  margin-bottom: 28px;

}

h1 em,h2 em {

  font-style: normal;

  color: #ff5500;

}

.hero-lede {

  max-width: 470px;

  font-size: 17px;

  line-height: 1.7;

  margin-bottom: 31px;

  color: #c2c4cc;

}

.hero-actions {

  display: flex;

  align-items: center;

  gap: 28px;

}

.button {

  border: 0;

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap: 38px;

  padding: 15px 19px;

  font-weight: 600;

  font-size: 13px;

  cursor: pointer;

  border-radius: 2px;

  transition: transform .2s,background .2s;

}

.button:hover {

  transform: translateY(-2px);

}

.button-dark {

  background: var(--ink);

  color: white;

}

.button-dark span,.button-light span {

  color: var(--brand);

  font-size: 18px;

}

.text-link {

  font-size: 13px;

  font-weight: 600;

  border-bottom: 1px solid var(--line);

  padding-bottom: 5px;

}

.text-link span {

  padding-left: 12px;

}

.hero-foot {

  position: absolute;

  bottom: 30px;

  left: 10%;

  right: 10%;

  display: flex;

  justify-content: space-between;

  font-size: 9px;

  pointer-events: none;

  color: #a8aab4;

}

.hero-foot a {

  pointer-events: auto;

  color: #f4f1ec;

}

.section-pad {

  padding: 126px 10%;

}

.section-kicker {

  display: flex;

  gap: 18px;

  color: #76716d;

  margin-bottom: 50px;

}

.section-kicker span:first-child {

  color: #b6aaa1;

}

.intro {

  background: #efebe5;

}

.intro-content {

  display: grid;

  grid-template-columns: 1.2fr .8fr;

  gap: 8%;

  align-items: start;

}

.intro h2,.services h2,.careers h2,.contact h2 {

  font-size: clamp(42px,5.6vw,76px);

  line-height: 1.06;

  margin: 0;

}

.intro-copy {

  max-width: 450px;

  color: #605b57;

  padding-top: 10px;

}

.intro-copy p {

  margin-bottom: 20px;

}

.intro-copy .text-link {

  display: inline-block;

  margin-top: 8px;

  color: var(--ink);

}

.services {

  background: #1b1b1d;

  color: #f4f1ec;

}

.services .section-kicker {

  color: #aaa5a0;

}

.services-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  margin-bottom: 55px;

}

.services h2 em {

  color: #ff8a4d;

}

.services-heading>p {

  width: 300px;

  color: #aaa5a0;

  font-size: 14px;

  margin: 0 0 8px;

}

.service-grid {

  display: grid;

  grid-template-columns: repeat(3,1fr);

  border-top: 1px solid rgba(255,255,255,.2);

  border-left: 1px solid rgba(255,255,255,.2);

}

.service-card {

  min-height: 255px;

  padding: 27px 28px 25px;

  position: relative;

  border-right: 1px solid rgba(255,255,255,.2);

  border-bottom: 1px solid rgba(255,255,255,.2);

  transition: background .2s;

}

.service-card:hover {

  background: #252528;

}

.service-number {

  color: #8e8984;

  font-size: 9px;

}

.service-icon {

  display: block;

  color: var(--brand);

  font-size: 28px;

  margin: 24px 0 12px;

  font-family: var(--mono);

}

.service-card h3 {

  font: 600 21px var(--display);

  letter-spacing: -.04em;

  margin: 0 0 8px;

}

.service-card p {

  font-size: 13px;

  line-height: 1.6;

  color: #aaa5a0;

  max-width: 280px;

  margin-bottom: 0;

}

.service-card>a {

  position: absolute;

  right: 27px;

  bottom: 27px;

  color: var(--brand);

}

.careers {

  display: grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 10%;

  align-items: center;

  background: #efebe5;

}

.career-art {

  height: 520px;

  place-items: center;

  position: relative;

  background: transparent;

  isolation: isolate;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  overflow: visible;

}

.career-art img {

  object-fit: contain;

  width: 38%;

  height: 38%;

  z-index: 3;

  mix-blend-mode: normal;

  position: relative;

}

.career-gear-stage>span {

  line-height: 1.8;

  z-index: 4;

  position: absolute;

  left: 50%;

  top: 62%;

  bottom: auto;

  transform: translateX(-50%);

  margin: 0;

  text-align: center;

  white-space: nowrap;

  color: var(--brand);

  font-size: 13px;

  font-weight: 600;

}

.career-copy .section-kicker {

  margin-bottom: 30px;

}

.career-copy h2 {

  margin-bottom: 24px;

}

.career-copy>p {

  color: #625d59;

  max-width: 490px;

  font-size: 14px;

}

.career-copy>p a {

  color: #b93500;

  text-decoration: underline;

  text-underline-offset: 3px;

}

.role-list {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px 20px;

  margin: 25px 0 14px;

  font-size: 12px;

  font-weight: 600;

}

.role-list span:before {

  content: '↗';

  color: #ff5500;

  margin-right: 9px;

}

.career-copy small {

  color: #76716d;

  font-size: 11px;

  display: block;

  max-width: 460px;

  line-height: 1.7;

}

.contact {

  background: #10131f;

  color: #f4f1ec;

}

.contact .section-kicker {

  color: #aaa49e;

}

.contact-layout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12%;

}

.contact h2 {

  margin-bottom: 22px;

}

.contact h2 em {

  color: #ff8a4d;

}

.contact-heading>p {

  max-width: 370px;

  color: #b5b3b3;

  font-size: 14px;

}

.contact-email {

  display: inline-block;

  margin: 28px 0 48px;

  font-size: 20px;

  border-bottom: 1px solid rgba(255,255,255,.35);

  padding-bottom: 8px;

}

.contact-email span {

  color: var(--brand);

  padding-left: 20px;

}

.location {

  color: #a9a39d;

  font-size: 9px;

}

.contact-form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 9px 18px;

  align-content: start;

}

.contact-form label {

  font-size: 11px;

  color: #beb9b4;

  margin-top: 9px;

}

.contact-form input,.contact-form textarea {

  grid-column: 1/-1;

  background: transparent;

  border: 0;

  border-bottom: 1px solid rgba(255,255,255,.25);

  border-radius: 0;

  padding: 8px 0 12px;

  color: white;

  outline: 0;

  resize: vertical;

}

.contact-form input:focus,.contact-form textarea:focus {

  border-color: var(--brand);

}

.contact-form input::placeholder,.contact-form textarea::placeholder {

  color: #77747a;

}

.contact-form label:nth-of-type(1),.contact-form label:nth-of-type(2) {

  grid-column: span 1;

}

.contact-form input:nth-of-type(1),.contact-form input:nth-of-type(2) {

  grid-column: span 1;

}

.contact-form button {

  grid-column: 1/-1;

  justify-self: start;

  margin-top: 17px;

}

.contact-form .h-captcha {

  grid-column: 1/-1;

  margin-top: 10px;

}

.contact-toast {

  position: fixed;

  top: calc(18px + env(safe-area-inset-top));

  right: 24px;

  bottom: auto;

  z-index: 1000;

  max-width: min(420px, calc(100vw - 32px));

  padding: 16px 20px;

  border: 2px solid var(--brand);

  border-radius: 8px;

  background: #171817;

  color: #fff;

  box-shadow: 0 12px 36px rgba(0,0,0,.3);

  font-size: 14px;

  font-weight: 600;

}

.contact-toast.toast-success {

  border-left: 4px solid #ff5500;

}

.contact-toast.toast-error {

  border-left: 4px solid #ff6b6b;

}

.contact-toast[hidden] {

  display: none;

}

.button-light {

  background: var(--brand);

  color: var(--ink);

}

.button-light span {

  color: var(--ink);

}

.honeypot {

  position: absolute!important;

  left: -9999px!important;

  width: 1px!important;

  height: 1px!important;

}

.site-footer {

  min-height: 110px;

  padding: 26px 6.25%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  background: #111219;

  color: #a6a19d;

}

.site-footer>a img {

  width: 130px;

  opacity: .95;

}

.site-footer>span,.site-footer small {

  font: 9px var(--mono);

  letter-spacing: .06em;

}

.socials {

  display: flex;

  gap: 18px;

  font-size: 11px;

}

.socials a:hover {

  color: var(--brand);

}

@media(max-width:900px) {
  .site-header {
    height:76px;
    padding:0 6%
  }
.hero {
    min-height:760px;
    padding:130px 7% 100px
  }
.hero-copy {
    width:70%
  }
.hero-foot {
    left:7%;
    right:7%
  }
.section-pad {
    padding:95px 7%
  }
.careers {
    gap:6%
  }
.career-art {
    height:430px
  }
.service-card {
    padding:22px 19px;
    min-height:270px
  }
.site-footer {
    padding-inline:6%;
    flex-wrap:wrap
  }
.site-footer>span {
    display:none
  }
}

@media(max-width:640px) {
  html {
    scroll-padding-top:72px
  }
.site-header {
    height:72px
  }
.brand img {
    width:132px
  }
.menu-toggle {
    display:flex;
    flex-direction:column;
    gap:5px;
    background:none;
    border:0;
    padding:10px
  }
.menu-toggle>span:not(.sr-only) {
    width:22px;
    height:1px;
    background:var(--ink);
    display:block
  }
.primary-nav {
    display:none;
    position:absolute;
    top:71px;
    left:0;
    right:0;
    padding:20px 7% 26px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    align-items:stretch;
    gap:0
  }
.primary-nav.open {
    display:flex;
    flex-direction:column
  }
.primary-nav>a {
    padding:12px 0
  }
.primary-nav .nav-cta {
    margin-top:10px;
    padding:12px 15px
  }
.hero {
    height:auto;
    min-height:790px;
    align-items:flex-start;
    padding:160px 7% 100px
  }
.hero-copy {
    width:100%
  }
.eyebrow {
    font-size:8px;
    margin-bottom:24px
  }
h1 {
    font-size:clamp(61px,17vw,90px)
  }
.hero-lede {
    font-size:15px;
    max-width:390px
  }
.hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }
.hero-foot {
    font-size:7px;
    bottom:18px
  }
.section-pad {
    padding:76px 7%
  }
.section-kicker {
    margin-bottom:33px;
    font-size:9px
  }
.intro-content,.contact-layout {
    grid-template-columns:1fr;
    gap:28px
  }
.intro h2,.services h2,.careers h2,.contact h2 {
    font-size:clamp(43px,12vw,62px)
  }
.intro-copy {
    padding-top:0;
    font-size:14px
  }
.services-heading {
    display:block;
    margin-bottom:35px
  }
.services-heading>p {
    margin-top:20px;
    width:auto
  }
.service-grid {
    grid-template-columns:1fr 1fr
  }
.service-card {
    min-height:250px;
    padding:18px 15px
  }
.service-number {
    font-size:7px
  }
.service-icon {
    margin:22px 0 10px
  }
.service-card h3 {
    font-size:17px
  }
.service-card p {
    font-size:12px;
    padding-right:8px
  }
.service-card>a {
    right:15px;
    bottom:17px
  }
.careers {
    grid-template-columns:1fr;
    gap:42px
  }
.career-art {
    height:330px;
    order:2
  }
.career-copy {
    order:1
  }
.career-copy .section-kicker {
    margin-bottom:30px
  }
.role-list {
    font-size:11px;
    gap:10px
  }
.contact-layout {
    gap:28px
  }
.contact-email {
    margin:15px 0 23px
  }
.contact-form {
    gap:6px 14px
  }
.contact-form label {
    font-size:10px
  }
.site-footer {
    padding:25px 7%;
    justify-content:space-between
  }
.site-footer>a img {
    width:105px
  }
.socials {
    width:100%;
    order:3;
    flex-wrap:wrap;
    gap:12px 18px
  }
.site-footer small {
    font-size:8px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
*,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}

.particle-bg {

  position: absolute;

  z-index: 1;

  inset: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

  opacity: 1;

  mask-image: none;

}

.hero-copy,.hero-foot {

  z-index: 2;

}

@media(max-width:640px) {
  .particle-bg {
    opacity:.62;
    mask-image:linear-gradient(180deg,transparent 10%,rgba(0,0,0,.12) 37%,#000 76%)
  }
}

.brand img {

  mix-blend-mode: normal;

}

.site-header .nav-cta {

  background: var(--brand);

  color: #171817;

}

.site-header .nav-cta span {

  color: #171817;

}

.menu-toggle>span:not(.sr-only) {

  background: #f4f1ec;

}

.hero-actions .button-dark {

  background: var(--brand);

  color: #171817;

}

.hero-actions .button-dark span {

  color: #171817;

}

.hero-actions .text-link {

  color: #f4f1ec;

  border-color: rgba(255,255,255,.3);

}

@media(max-width:640px) {
  .primary-nav {
    background:#0d1228;
    border-color:rgba(255,255,255,.12)
  }
.primary-nav>a:not(.nav-cta) {
    color:#f4f1ec
  }
.particle-bg {
    opacity:.94;
    mask-image:none
  }
}

.career-gear {

  position: absolute;

  left: 50%;

  top: 50%;

  height: auto;

  fill: none;

  stroke: #686c72;

  stroke-linecap: round;

  stroke-linejoin: round;

  transform-box: border-box;

  transform-origin: center;

  animation: gear-turn linear infinite;

}

.career-gear path {

  stroke-width: 1.55;

}

.career-gear circle {

  stroke-width: 1.2;

}

.gear-large {

  z-index: 1;

  width: 118%;

  max-width: 560px;

  opacity: .1;

  animation-duration: 150s;

}

.gear-small {

  z-index: 2;

  width: 62%;

  max-width: 350px;

  stroke: #a8a9ac;

  opacity: .1;

  filter: drop-shadow(0 0 3px #efebe5);

  animation-duration: 210s;

  animation-direction: reverse;

}

.gear-small circle {

  display: none;

}

@keyframes gear-turn {
  from {
    transform:translate(-50%,-50%) rotate(0deg)
  }
to {
    transform:translate(-50%,-50%) rotate(360deg)
  }
}

.career-gear-stage {

  position: relative;

  display: grid;

  place-items: center;

  flex: none;

  width: 100%;

  height: 470px;

}

@media(max-width:900px) {
  .career-gear-stage {
    height:350px
  }
}

@media(max-width:640px) {
  .career-art {
    height:auto;
    min-height:390px
  }
.career-gear-stage {
    height:340px
  }
}
