@charset "UTF-8";
:root {
  color-scheme:dark;
  --ink:#111511;
  --paper:#f0f1e9;
  --muted:#a1a89e;
  --lime:#d2f98a;
  --line:rgba(234,240,225,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  font-family:Arial,Helvetica,sans-serif;
  font-synthesis:none
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:112px;
  background:var(--ink)
}

body {
  margin:0;
  min-width:320px;
  background:var(--ink);
  color:var(--paper);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased
}

body.menu-open {
  overflow:hidden
}

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

button,input {
  font:inherit
}

button {
  color:inherit;
  cursor:pointer
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  border:0
}

button:disabled {
  cursor:default
}

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

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

h1,h2,h3 {
  font-weight:500
}

button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #8aadef;
  outline-offset:6px
}

::selection {
  background:var(--lime);
  color:var(--ink)
}

[hidden] {
  display:none!important
}

.skip-link {
  position:fixed;
  left:20px;
  top:12px;
  z-index:100;
  background:var(--paper);
  color:var(--ink);
  padding:12px 20px;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.site-header {
  height:104px;
  padding:0 4.2%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  position:relative;
  z-index:30;
  border-bottom:1px solid var(--line);
  background:var(--ink)
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:16px;
  flex-shrink:0
}

.brand-mark {
  font-size:52px;
  letter-spacing:-8px;
  line-height:1;
  font-weight:700;
  position:relative;
  padding-right:9px
}

.brand-mark>span {
  color:var(--lime);
  letter-spacing:-5px
}

.brand-name {
  font-size:14px;
  font-weight:600;
  letter-spacing:-.3px
}

.brand-name small {
  display:block;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.05em;
  font-weight:400;
  margin-top:3px
}

.main-nav {
  display:flex;
  gap:30px;
  align-items:center;
  font-size:12px
}

.main-nav a {
  position:relative;
  padding:12px 0
}

.main-nav a::after {
  content:"";
  height:1px;
  position:absolute;
  left:0;
  right:0;
  bottom:7px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease)
}

.main-nav a:hover::after {
  transform:scaleX(1)
}

.main-nav sup {
  font-size:8px;
  vertical-align:super;
  color:var(--muted);
  margin-left:3px
}

.header-actions {
  display:flex;
  align-items:center;
  gap:16px
}

.contact-pill {
  display:flex;
  align-items:center;
  gap:25px;
  border:1px solid #70776b;
  border-radius:50px;
  padding:7px 7px 7px 22px;
  font-size:12px;
  transition:background .25s,color .25s
}

.contact-pill>span {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  font-size:20px;
  transition:transform .3s var(--ease)
}

.contact-pill:hover {
  background:var(--paper);
  color:var(--ink)
}

.contact-pill:hover>span {
  transform:rotate(45deg);
  background:var(--lime)
}

.menu-toggle,.mobile-contact {
  display:none
}

.hero {
  padding:0 4.2%;
  position:relative;
  overflow:hidden;
  isolation:isolate
}

.hero-topline {
  display:flex;
  justify-content:space-between;
  padding-top:26px;
  color:#bec4b9;
  font-size:10px;
  letter-spacing:.04em;
  gap:20px
}

.hero-topline>span:first-child {
  display:flex;
  gap:9px;
  align-items:center
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lime);
  flex-shrink:0;
  box-shadow:0 0 12px #d2f98a35
}

.hero-location>span {
  margin-left:12px
}

.hero-composition {
  position:relative;
  min-height:660px;
  max-width:1600px;
  margin:auto;
  display:flex;
  align-items:center
}

.hero-copy {
  position:relative;
  z-index:3;
  width:85%;
  padding:46px 0 35px;
  pointer-events:none
}

.eyebrow {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px;
  letter-spacing:.1em;
  line-height:1.6
}

.hero-eyebrow {
  color:#b1b8a9;
  font-size:9px;
  margin-bottom:32px
}

h1 {
  font-size:clamp(105px,11.9vw,184px);
  line-height:.86;
  letter-spacing:-.08em;
  font-weight:500
}

.hero-word {
  font-size:.94em;
  letter-spacing:-.075em
}

.hero-title-line {
  display:block;
  overflow:clip;
  padding:.07em .12em .11em 0;
  margin:-.07em -.12em -.11em 0
}

.hero-title-line>span {
  display:inline-block
}

.motion-ready body[data-motion="active"] .hero-title-line>span {
  animation:title-arrive 1.25s var(--ease) both
}

.motion-ready body[data-motion="active"] .hero-title-line:nth-child(2)>span {
  animation-delay:.16s
}

@keyframes title-arrive {
  from { transform:translateY(110%) rotate(3deg); opacity:.15 }
  to { transform:translateY(0) rotate(0); opacity:1 }
}

.title-dot {
  color:var(--lime)
}

.hero-description {
  color:#afb6a8;
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.2px;
  margin-top:31px;
  max-width:380px
}

.round-link {
  display:inline-flex;
  align-items:center;
  gap:30px;
  font-size:13px;
  font-weight:500
}

.hero-link {
  margin-top:28px;
  pointer-events:auto
}

.round-arrow {
  width:46px;
  height:46px;
  border:1px solid currentColor;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:22px;
  line-height:1;
  transition:background .3s,color .3s,transform .3s var(--ease)
}

.round-link:hover .round-arrow {
  transform:rotate(-45deg);
  background:var(--lime);
  color:var(--ink);
  border-color:var(--lime)
}

.scene-wrap {
  position:absolute;
  z-index:2;
  width:min(70vw,1060px);
  height:700px;
  right:-13%;
  top:-5px;
  pointer-events:auto;
  touch-action:pan-y;
  transition:opacity .5s;
  opacity:1
}

.scene-wrap canvas {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  outline:none;
  z-index:2
}

.scene-grid {
  position:absolute;
  inset:12% 14% 5%;
  background-image:linear-gradient(#d2f98a0d 1px,transparent 1px),linear-gradient(90deg,#d2f98a0d 1px,transparent 1px);
  background-size:55px 55px;
  transform:perspective(450px) rotateX(55deg) rotateZ(-23deg);
  opacity:.45;
  mask-image:radial-gradient(ellipse,#000,transparent 66%)
}

.scene-halo {
  position:absolute;
  inset:14% 7% 8% 8%;
  background:radial-gradient(ellipse at 56% 50%,#b2d97a13,transparent 65%);
  filter:blur(25px)
}

.scene-tag {
  display:flex;
  align-items:center;
  gap:12px;
  position:absolute;
  z-index:4;
  border:1px solid #9daa8836;
  background:#172015b3;
  backdrop-filter:blur(12px);
  border-radius:9px;
  padding:11px 16px;
  pointer-events:none;
  box-shadow:0 12px 40px #0002;
  transform:translateY(calc(var(--scene-scroll,0)*-15px));
  transition:transform .1s linear
}

.tag-one {
  right:13%;
  top:18%
}

.tag-two {
  right:16%;
  bottom:20%
}

.tag-icon {
  height:30px;
  width:30px;
  border:1px solid #9eae843b;
  display:grid;
  place-items:center;
  color:var(--lime);
  border-radius:6px;
  font-size:19px
}

.scene-tag>span:last-child {
  font:9px ui-monospace,monospace;
  letter-spacing:.1em
}

.scene-tag small {
  display:block;
  font:10px Arial,Helvetica,sans-serif;
  letter-spacing:0;
  color:#a8b39d;
  margin-top:4px
}

.scene-tag b {
  font:inherit;
  text-transform:uppercase;
  color:var(--lime)
}

.scene-wrap[data-ready="true"] .scene-tag {
  animation:tag-drift 6s ease-in-out infinite alternate
}

.scene-wrap[data-ready="true"] .tag-two {
  animation-delay:-3s
}

@keyframes tag-drift {
  from { transform:translateY(-5px) }
  to { transform:translateY(7px) }
}

.scene-phase-markers {
  display:flex;
  align-items:center;
  gap:4px
}

.scene-phase-markers i {
  display:block;
  width:13px;
  height:2px;
  background:#45523a;
  transition:background .4s,box-shadow .4s
}

.scene-phase-markers i[data-active="true"] {
  background:var(--lime);
  box-shadow:0 0 8px #d2f98a55
}

body[data-motion="paused"] .scene-wrap .scene-tag,
.scene-wrap[data-visible="false"] .scene-tag {
  animation-play-state:paused
}

.scene-index {
  position:absolute;
  display:flex;
  gap:16px;
  font:8px ui-monospace,monospace;
  letter-spacing:.1em;
  color:#717e67;
  bottom:4%;
  right:21%
}

.scene-fallback {
  position:absolute;
  width:260px;
  height:340px;
  left:43%;
  top:25%;
  transform:rotate(-22deg) skewY(7deg);
  transition:opacity .4s
}

.scene-wrap[data-ready="true"] .scene-fallback {
  opacity:0
}

.fallback-platform {
  width:220px;
  height:60px;
  background:linear-gradient(150deg,#8b9684,#34402d 45%,#161e12);
  border:1px solid #a4b78b;
  border-radius:20px;
  position:absolute;
  left:0;
  box-shadow:0 12px 0 #0c1109,0 14px 0 #687b52
}

.p-one {
  top:25px
}

.p-two {
  top:105px
}

.p-three {
  top:270px
}

.fallback-core {
  width:100px;
  height:90px;
  background:var(--lime);
  color:#243517;
  position:absolute;
  left:60px;
  top:180px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font:700 38px Arial;
  box-shadow:0 0 60px #d2f98a30
}

.hero-bottom {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:24px;
  max-width:1600px;
  margin:0 auto;
  padding:0 0 32px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:4
}

.hero-role {
  font-size:11px;
  line-height:1.8
}

.hero-role .status-dot {
  margin-right:6px;
  width:5px;
  height:5px
}

.hero-role>span {
  color:#84907a;
  font-size:10px
}

.hero-scene-controls {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px
}

.view-switch {
  display:flex;
  background:#1c2319;
  border:1px solid #9ba7892b;
  border-radius:50px;
  padding:4px;
  gap:2px
}

.view-switch>button {
  font-size:10px;
  border-radius:30px;
  padding:9px 15px;
  background:transparent;
  color:#9da992;
  min-height:36px;
  transition:background .25s,color .25s
}

.view-switch>button[aria-pressed="true"] {
  background:var(--lime);
  color:#243219
}

.view-switch>button>span {
  margin-left:9px
}

.motion-button {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:9px;
  color:#a0aa96;
  background:transparent;
  min-height:24px;
  padding:2px 8px
}

.motion-button>span:first-child {
  width:12px;
  font-size:10px
}

.scroll-cue {
  justify-self:end;
  font:8px ui-monospace,monospace;
  letter-spacing:.1em;
  display:flex;
  gap:20px;
  align-items:center;
  padding:10px 0
}

.scroll-cue>span {
  font-size:24px;
  color:var(--lime)
}

.discipline-strip {
  overflow:hidden;
  background:var(--ink);
  padding:26px 0 28px;
  border-bottom:1px solid var(--line)
}

.discipline-track {
  display:flex;
  gap:50px;
  width:max-content;
  align-items:center;
  animation:marquee 40s linear infinite;
  color:#99a18e;
  font-size:11px;
  letter-spacing:.14em
}

.discipline-track i {
  font-style:normal;
  color:var(--lime);
  font-size:27px
}

.discipline-track span {
  white-space:nowrap
}

@keyframes marquee {
  to {
    transform:translateX(-50%)
  }
}

body[data-motion="paused"] .discipline-track {
  animation-play-state:paused
}

.section-shell {
  width:calc(100% - 120px);
  max-width:1320px;
  margin:auto
}

.section-light {
  background:var(--paper);
  color:var(--ink);
  --line:#cfd2c5;
  --muted:#6c7465
}

.work-section {
  padding:118px 0 82px
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:30px;
  margin-bottom:65px
}

.section-heading>.eyebrow {
  padding-top:12px
}

.section-heading>div {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px
}

.section-heading h2 {
  font-size:clamp(45px,5vw,76px);
  line-height:1.03;
  letter-spacing:-.065em
}

.muted-heading {
  color:#7e8673
}

.section-heading>div>p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  padding-bottom:5px;
  max-width:290px
}

.project-grid {
  display:grid;
  grid-template-columns:1.16fr 1fr;
  gap:70px 40px
}

.project-card {
  min-width:0
}

.project-retail {
  padding-top:140px
}

.project-image {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:390px;
  background:#d9dece;
  border-radius:4px;
  position:relative;
  padding:24px 24px 20px;
  isolation:isolate
}

.project-resilience .project-image {
  background:#273225;
  color:#e2eacd
}

.project-retail .project-image {
  background:#dfe4d7;
  color:#39452f;
  min-height:360px
}

.project-image-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:8px ui-monospace,monospace;
  letter-spacing:.07em;
  position:relative;
  z-index:2
}

.project-open {
  border:1px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  font:18px Arial;
  transition:transform .3s
}

.project-image:hover .project-open {
  transform:rotate(45deg)
}

.screen-frame {
  overflow:hidden;
  position:relative;
  transform:perspective(1000px) rotateY(-6deg) rotateX(7deg);
  box-shadow:12px 20px 40px #0004;
  border:1px solid #d5e2c42b;
  border-radius:7px;
  background:#1a2019;
  margin:32px -5px 22px;
  transition:transform .7s var(--ease),box-shadow .7s
}

.project-image:hover .screen-frame {
  transform:perspective(1000px) rotateY(0) rotateX(0) translateY(-6px);
  box-shadow:10px 20px 45px #0005
}

@media(hover:hover) and (pointer:fine) {
  body[data-motion="active"] .project-image[data-tilt] .screen-frame {
    transform:perspective(1000px) rotateY(calc(-4deg + var(--tilt-x,0)*5deg)) rotateX(calc(5deg - var(--tilt-y,0)*5deg)) translateY(calc(var(--tilt-y,0)*-8px));
    transition:transform .35s var(--ease)
  }
}

.screen-chrome {
  height:22px;
  display:flex;
  align-items:center;
  padding:0 9px;
  gap:4px;
  background:#20291e;
  color:#a4b797;
  font:6px ui-monospace,monospace
}

.screen-chrome i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#63735c
}

.screen-chrome span {
  margin-left:12px
}

.screen-frame img {
  width:100%;
  height:auto
}

.image-note {
  font-size:9px;
  color:#acba9e;
  margin-top:auto;
  padding-top:8px
}

.project-retail .image-note {
  color:#5d6a51
}

.project-caption {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-top:22px
}

.project-caption h3 {
  font-size:26px;
  letter-spacing:-1px;
  line-height:1.2
}

.project-caption p {
  color:#77806c;
  font-size:11px;
  line-height:1.7;
  margin-top:6px;
  max-width:330px
}

.text-link {
  font-size:11px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  line-height:1.7
}

.text-link>span {
  font-size:18px;
  transition:transform .3s
}

.text-link:hover>span {
  transform:translate(3px,-3px)
}

.project-caption>.text-link {
  padding-top:3px
}

.project-tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px
}

.project-tags>span {
  font:8px ui-monospace,monospace;
  padding:5px 9px;
  border:1px solid #cbd0c0;
  border-radius:20px;
  color:#5e6854
}

.project-gitops {
  grid-column:1/-1
}

.project-gitops .project-image {
  background:#d7dfd5;
  min-height:400px;
  max-height:440px;
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:24px;
  align-items:center;
  padding:35px 40px 0
}

.project-gitops .project-image-top {
  position:absolute;
  top:24px;
  left:26px;
  right:26px
}

.gitops-copy {
  font-size:clamp(38px,4vw,60px);
  line-height:1.02;
  letter-spacing:-.055em;
  align-self:center
}

.gitops-copy>small {
  font:9px ui-monospace,monospace;
  letter-spacing:0;
  display:block;
  margin-top:24px;
  color:#6a7861
}

.gitops-copy em {
  font-family:Georgia,serif;
  font-weight:400
}

.project-gitops .screen-frame {
  margin:70px -40px -70px 0;
  transform:perspective(1000px) rotateY(-8deg) rotateX(5deg) rotateZ(-3deg);
  box-shadow:0 20px 40px #21321935
}

.project-gitops .project-image:hover .screen-frame {
  transform:perspective(1000px) rotateY(-3deg) rotateX(0) rotateZ(-1deg) translateY(-10px)
}

.work-footer {
  border-top:1px solid #cbd0c0;
  margin-top:50px;
  padding-top:32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.work-footer>p {
  font-size:12px;
  color:#717b65
}

.work-footer .round-link:hover .round-arrow {
  border-color:var(--ink);
  background:var(--ink);
  color:var(--paper)
}

.approach-section {
  padding:110px 0 94px;
  background:#171d15
}

.approach-section .section-heading h2 em {
  color:var(--lime);
  font-family:Georgia,serif;
  letter-spacing:-.06em;
  font-weight:400
}

.approach-section .section-heading>div>p {
  color:#8d9982
}

.delivery-story {
  border:1px solid #84967338;
  border-radius:5px;
  padding:32px 32px 0;
  background:#1d2619;
  position:relative
}

.delivery-story-line {
  position:absolute;
  left:50px;
  right:50px;
  top:85px;
  height:1px;
  display:flex;
  background:#849e612b;
  justify-content:space-between;
  z-index:0
}

.delivery-story-line i {
  height:4px;
  width:4px;
  border-radius:50%;
  background:#687e4b;
  position:relative;
  top:-2px
}

.pipeline-tabs {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  position:relative;
  z-index:1;
  gap:12px
}

.pipeline-tabs>button {
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:30px auto;
  padding:0 17px 20px;
  text-align:left;
  border-radius:4px;
  background:transparent;
  min-height:124px;
  border:1px solid transparent;
  transition:background .3s,border-color .3s
}

.pipeline-tabs small {
  font:9px ui-monospace,monospace;
  color:#728562;
  grid-column:1/-1
}

.pipeline-tabs span {
  font-size:18px;
  letter-spacing:-.5px;
  align-self:center
}

.pipeline-tabs i {
  font-size:25px;
  font-style:normal;
  align-self:center;
  color:#70875c
}

.pipeline-tabs>button[aria-selected="true"] {
  background:#2c3b22;
  border-color:#b7dc7559
}

.pipeline-tabs>button[aria-selected="true"] small,.pipeline-tabs>button[aria-selected="true"] i {
  color:var(--lime)
}

.delivery-detail {
  border-top:1px solid #84967338;
  padding:28px 6px 32px;
  display:grid;
  grid-template-columns:1fr 3fr auto;
  gap:30px;
  align-items:center
}

.detail-counter {
  font:10px ui-monospace,monospace;
  color:#8a9d76
}

.delivery-detail h3 {
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.8px
}

.delivery-detail p {
  color:#97a58a;
  font-size:12px;
  line-height:1.85;
  max-width:520px;
  margin-top:10px;
  min-height:45px
}

.delivery-detail>.text-link {
  color:#c3d2b2
}

.capability-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:60px;
  border-top:1px solid var(--line)
}

.capability-row>a {
  padding:30px 28px 25px 0;
  position:relative
}

.capability-row>a+a {
  padding-left:28px;
  border-left:1px solid var(--line)
}

.capability-row>a>span {
  font:8px ui-monospace,monospace;
  color:#9ead8e
}

.capability-row h3 {
  font-size:22px;
  letter-spacing:-.8px;
  margin-top:24px
}

.capability-row p {
  font-size:11px;
  line-height:1.8;
  color:#8c9a7f;
  max-width:250px;
  margin-top:12px
}

.capability-row i {
  font-style:normal;
  font-size:21px;
  position:absolute;
  right:20px;
  top:24px;
  color:var(--lime);
  transition:transform .3s
}

.capability-row>a:hover i {
  transform:translate(4px,-4px)
}

.about-section {
  padding:110px 0 80px
}

.about-layout {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:80px
}

.about-symbol {
  font-size:160px;
  font-weight:500;
  letter-spacing:-20px;
  line-height:1;
  margin-top:70px;
  display:flex;
  align-items:center;
  width:290px
}

.about-symbol>span {
  font-size:110px;
  font-family:Georgia,serif;
  letter-spacing:-20px;
  color:#9aad84;
  transform:translateY(-10px);
  margin:0 8px
}

.about-location {
  font:9px ui-monospace,monospace;
  line-height:1.7;
  color:#8a937f;
  display:block;
  margin-top:35px
}

.about-copy h2 {
  font-size:clamp(38px,4vw,59px);
  line-height:1.1;
  letter-spacing:-.055em;
  margin-bottom:28px
}

.about-copy h2 em {
  font-family:Georgia,serif;
  font-weight:400
}

.about-copy>p {
  font-size:14px;
  line-height:1.85;
  color:#707b64;
  max-width:550px
}

.about-copy>p+p {
  margin-top:20px
}

.about-links {
  display:flex;
  align-items:center;
  gap:35px;
  flex-wrap:wrap;
  margin-top:30px
}

.about-links .round-link {
  gap:18px
}

.about-links .round-arrow {
  width:38px;
  height:38px;
  font-size:18px
}

.notes-section {
  padding:40px 0 110px
}

.notes-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  border-top:1px solid #cbd0c0;
  padding-top:50px;
  margin-bottom:32px
}

.notes-heading h2 {
  font-size:48px;
  letter-spacing:-2px;
  line-height:1.1;
  margin-top:18px
}

.notes-list>a {
  display:grid;
  grid-template-columns:1fr 2.25fr auto;
  gap:35px;
  padding:30px 0;
  border-top:1px solid #cbd0c0;
  align-items:center
}

.notes-list>a:last-child {
  border-bottom:1px solid #cbd0c0
}

.note-topic {
  font:8px ui-monospace,monospace;
  letter-spacing:.04em;
  color:#7a846e
}

.notes-list h3 {
  font-size:22px;
  letter-spacing:-.8px;
  transition:transform .3s var(--ease)
}

.note-arrow {
  font-size:30px;
  transition:transform .3s
}

.notes-list>a:hover h3 {
  transform:translateX(9px)
}

.notes-list>a:hover .note-arrow {
  transform:translate(5px,-5px)
}

.contact-section {
  background:var(--lime);
  color:#213215;
  padding:52px 0 46px
}

.contact-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}

.contact-top>span {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:8px
}

.contact-top .status-dot {
  background:#395924;
  box-shadow:none
}

.contact-title-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:55px 0 42px
}

.contact-title-link h2 {
  font-size:clamp(80px,12.8vw,182px);
  line-height:.85;
  letter-spacing:-.075em
}

.contact-title-link h2 em {
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.085em
}

.contact-title-link>span {
  font-size:clamp(85px,14vw,190px);
  align-self:center;
  font-weight:300;
  transition:transform .5s var(--ease)
}

.contact-title-link:hover>span {
  transform:translate(15px,-15px)
}

.contact-bottom {
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-top:1px solid #21321540;
  padding-top:28px;
  gap:25px
}

.contact-bottom>p {
  font-size:12px;
  line-height:1.8;
  color:#4d6538
}

.email-link {
  font-size:15px;
  letter-spacing:-.3px;
  display:flex;
  gap:20px;
  align-items:center;
  padding:8px 0;
  word-break:break-word
}

.email-link>span {
  font-size:23px;
  flex-shrink:0
}

.site-footer {
  padding:32px 4.2%;
  display:flex;
  align-items:center;
  gap:32px;
  background:var(--ink)
}

.footer-brand .brand-mark {
  font-size:38px;
  letter-spacing:-6px
}

.site-footer>p {
  font-size:9px;
  color:#89957d
}

.site-footer>nav {
  display:flex;
  gap:26px;
  margin-left:auto;
  font-size:10px;
  color:#a6b09d
}

.site-footer>nav>a {
  padding:10px 0
}

.site-footer>nav>a:hover {
  color:var(--lime)
}

.reveal-enabled [data-reveal] {
  opacity:0;
  transform:translateY(34px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)
}

.reveal-enabled [data-reveal].is-visible {
  opacity:1;
  transform:none
}

.reveal-enabled .project-retail[data-reveal] {
  transition-delay:.12s
}

.scene-wrap[data-scene-state="exploded"] .p-one {
  transform:translateY(-50px)
}

.scene-wrap[data-scene-state="exploded"] .p-two {
  transform:translateY(-15px)
}

.scene-wrap[data-scene-state="exploded"] .p-three {
  transform:translateY(55px)
}

.fallback-platform {
  transition:transform .8s var(--ease)
}

@media(min-width:1600px) {
  .hero-composition {
    min-height:720px
  }
  .scene-wrap {
    right:-6%;
    height:760px;
    top:-10px
  }
  .hero-bottom {
    padding-bottom:38px
  }
}

@media(max-width:1150px) {
  .site-header {
    gap:24px;
    padding-inline:4%
  }
  .brand-name {
    display:none
  }
  .main-nav {
    gap:26px
  }
  .hero-composition {
    min-height:620px
  }
  .scene-wrap {
    width:78vw;
    right:-20%;
    height:650px;
    top:-5px
  }
  .hero-eyebrow {
    font-size:8px
  }
  .hero-description {
    font-size:14px
  }
  .tag-one {
    right:19%
  }
  .tag-two {
    right:23%;
    bottom:16%
  }
  .hero-bottom {
    grid-template-columns:1fr auto
  }
  .scroll-cue {
    display:none
  }
  .section-shell {
    width:calc(100% - 80px)
  }
  .section-heading {
    grid-template-columns:1fr 3fr;
    gap:20px
  }
  .section-heading>div {
    align-items:flex-start;
    flex-direction:column;
    gap:20px
  }
  .section-heading>div>p br {
    display:none
  }
  .project-grid {
    gap:60px 28px
  }
  .project-image {
    min-height:330px;
    padding:20px 18px
  }
  .project-retail .project-image {
    min-height:290px
  }
  .project-retail {
    padding-top:120px
  }
  .project-caption {
    flex-direction:column;
    gap:7px
  }
  .project-caption h3 {
    font-size:24px
  }
  .project-gitops .project-image {
    min-height:350px
  }
  .pipeline-tabs>button {
    padding-inline:12px
  }
  .delivery-detail {
    grid-template-columns:1fr 4fr
  }
  .delivery-detail>.text-link {
    grid-column:2
  }
  .about-layout {
    gap:50px
  }
  .about-links {
    gap:20px
  }
  .notes-list h3 {
    font-size:20px
  }
}

@media(max-width:760px) {
  html {
    scroll-padding-top:25px
  }
  .site-header {
    height:82px;
    padding-inline:24px
  }
  .brand-name {
    display:block;
    font-size:12px
  }
  .brand-name small {
    font-size:8px
  }
  .brand {
    gap:14px
  }
  .brand-mark {
    font-size:43px;
    letter-spacing:-7px
  }
  .contact-pill {
    display:none
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:5px;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:1px solid #7d89703b;
    border-radius:50%;
    position:relative;
    z-index:32
  }
  .menu-toggle>span {
    width:17px;
    height:1px;
    background:var(--paper);
    transition:transform .25s
  }
  .menu-toggle[aria-expanded="true"]>span:first-child {
    transform:translateY(3px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"]>span:last-child {
    transform:translateY(-3px) rotate(-45deg)
  }
  .main-nav {
    display:none;
    position:absolute;
    top:90px;
    left:16px;
    right:16px;
    gap:0;
    align-items:stretch;
    padding:20px 25px;
    background:var(--paper);
    color:var(--ink);
    border:1px solid #46543a5c;
    border-radius:5px;
    box-shadow:0 24px 60px #0005
  }
  .main-nav.is-open {
    display:flex;
    flex-direction:column
  }
  .main-nav a {
    padding:15px 0;
    font-size:19px;
    border-bottom:1px solid #bec5b4
  }
  .main-nav a:last-child {
    border-bottom:0
  }
  .main-nav a::after {
    display:none
  }
  .main-nav sup {
    color:#5e6d52
  }
  .main-nav .mobile-contact {
    display:block;
    color:#4c662f
  }
  .hero {
    padding-inline:24px
  }
  .hero-topline {
    padding-top:21px;
    font-size:8px;
    letter-spacing:0
  }
  .hero-location {
    display:none
  }
  .hero-composition {
    display:block;
    min-height:0;
    padding-top:42px
  }
  .hero-copy {
    width:100%;
    padding:0;
    z-index:3
  }
  .hero-eyebrow {
    font-size:7px;
    margin-bottom:25px;
    letter-spacing:.055em
  }
  h1 {
    font-size:clamp(73px,14.4vw,108px);
    line-height:.89;
    letter-spacing:-.075em
  }
  .hero-word {
    font-size:.85em;
    letter-spacing:-.07em
  }
  .hero-description {
    font-size:12px;
    line-height:1.7;
    margin-top:24px
  }
  .hero-link {
    margin-top:17px;
    font-size:11px;
    gap:20px
  }
  .hero-link .round-arrow {
    width:36px;
    height:36px;
    font-size:18px
  }
  .scene-wrap {
    position:relative;
    width:calc(100% + 90px);
    height:430px;
    left:-45px;
    right:auto;
    top:auto;
    margin:-18px 0 -10px;
    z-index:2
  }
  .scene-grid {
    inset:3% 0 0;
    background-size:44px 44px
  }
  .scene-halo {
    inset:3%
  }
  .tag-one {
    top:8%;
    right:7%
  }
  .tag-two {
    bottom:15%;
    right:4%
  }
  .scene-tag {
    padding:8px 10px;
    gap:9px;
    border-radius:7px
  }
  .scene-tag small {
    font-size:8px
  }
  .scene-tag>span:last-child {
    font-size:7px
  }
  .tag-icon {
    width:24px;
    height:24px;
    font-size:15px
  }
  .scene-index {
    bottom:6%;
    right:10%;
    font-size:6px
  }
  .scene-fallback {
    left:23%;
    top:16%;
    transform:scale(.8) rotate(-22deg) skewY(7deg)
  }
  .hero-bottom {
    display:flex;
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:27px;
    padding-bottom:25px
  }
  .hero-scene-controls {
    align-self:center;
    flex-direction:row;
    gap:11px
  }
  .view-switch>button {
    font-size:9px;
    padding:9px 12px
  }
  .motion-button {
    font-size:8px;
    min-height:36px
  }
  .hero-role {
    font-size:10px;
    line-height:1.9
  }
  .hero-role>span {
    font-size:9px
  }
  .discipline-strip {
    padding:18px 0
  }
  .discipline-track {
    font-size:9px;
    gap:28px
  }
  .discipline-track i {
    font-size:20px
  }
  .section-shell {
    width:calc(100% - 48px)
  }
  .work-section {
    padding:65px 0 50px
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:35px
  }
  .section-heading>.eyebrow {
    padding-top:0;
    font-size:8px
  }
  .section-heading h2 {
    font-size:44px;
    letter-spacing:-.06em
  }
  .section-heading>div {
    gap:17px
  }
  .section-heading>div>p {
    font-size:11px;
    max-width:300px
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .project-retail {
    padding-top:0
  }
  .project-image {
    min-height:290px;
    padding:20px 18px 17px
  }
  .project-retail .project-image {
    min-height:280px
  }
  .screen-frame {
    margin:28px -3px 18px
  }
  .project-image-top {
    font-size:7px
  }
  .project-open {
    width:28px;
    height:28px;
    font-size:16px
  }
  .image-note {
    font-size:8px
  }
  .project-caption {
    flex-direction:row;
    gap:12px;
    align-items:flex-start;
    margin-top:17px
  }
  .project-caption h3 {
    font-size:22px
  }
  .project-caption p {
    font-size:10px;
    max-width:220px;
    line-height:1.65
  }
  .project-caption>.text-link {
    font-size:9px;
    gap:6px
  }
  .project-caption>.text-link>span {
    font-size:16px
  }
  .project-tags {
    margin-top:13px;
    gap:5px
  }
  .project-tags>span {
    font-size:7px;
    padding:4px 8px
  }
  .project-gitops .project-image {
    min-height:380px;
    max-height:none;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:60px 24px 0;
    align-items:stretch
  }
  .project-gitops .project-image-top {
    top:20px;
    left:18px;
    right:18px
  }
  .gitops-copy {
    align-self:flex-start;
    font-size:40px
  }
  .gitops-copy>small {
    font-size:8px;
    margin-top:11px
  }
  .project-gitops .screen-frame {
    margin:30px -30px -20px 15px
  }
  .work-footer {
    margin-top:35px;
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
    padding-top:25px
  }
  .work-footer>p {
    font-size:10px
  }
  .work-footer .round-link {
    font-size:12px;
    gap:20px
  }
  .work-footer .round-arrow {
    width:38px;
    height:38px;
    font-size:18px
  }
  .approach-section {
    padding:65px 0 50px
  }
  .delivery-story {
    padding:16px 14px 0
  }
  .pipeline-tabs {
    gap:4px
  }
  .pipeline-tabs>button {
    padding:8px 4px 14px;
    min-height:91px;
    grid-template-columns:1fr;
    grid-template-rows:20px auto 26px;
    justify-items:center;
    text-align:center;
    gap:5px
  }
  .pipeline-tabs small {
    font-size:7px;
    grid-column:auto
  }
  .pipeline-tabs span {
    font-size:11px;
    letter-spacing:0
  }
  .pipeline-tabs i {
    font-size:21px;
    grid-row:3
  }
  .delivery-story-line {
    left:30px;
    right:30px;
    top:70px
  }
  .delivery-detail {
    grid-template-columns:1fr;
    gap:16px;
    padding:23px 5px
  }
  .delivery-detail h3 {
    font-size:22px;
    max-width:260px
  }
  .delivery-detail p {
    font-size:11px;
    line-height:1.85;
    min-height:82px;
    margin-top:12px
  }
  .delivery-detail>.text-link {
    grid-column:auto;
    font-size:10px;
    align-self:start;
    justify-self:start
  }
  .detail-counter {
    font-size:8px
  }
  .capability-row {
    grid-template-columns:1fr;
    margin-top:35px
  }
  .capability-row>a {
    padding:25px 0;
    border-bottom:1px solid var(--line)
  }
  .capability-row>a+a {
    padding-left:0;
    border-left:0
  }
  .capability-row h3 {
    font-size:22px;
    margin-top:16px
  }
  .capability-row p {
    font-size:11px;
    max-width:260px;
    margin-top:8px
  }
  .capability-row i {
    top:20px;
    right:2px
  }
  .about-section {
    padding:65px 0 45px
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .about-layout>div:first-child {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:end
  }
  .about-layout>div:first-child>.eyebrow {
    grid-column:1/-1;
    font-size:8px
  }
  .about-symbol {
    font-size:100px;
    width:180px;
    margin-top:30px;
    letter-spacing:-14px
  }
  .about-symbol>span {
    font-size:70px;
    margin:0 3px;
    letter-spacing:-10px;
    transform:translateY(-5px)
  }
  .about-location {
    font-size:7px;
    margin:0 0 5px;
    text-align:right;
    justify-self:end
  }
  .about-copy h2 {
    font-size:37px;
    margin-bottom:22px
  }
  .about-copy>p {
    font-size:12px
  }
  .about-copy>p+p {
    margin-top:15px
  }
  .about-links {
    gap:24px;
    margin-top:25px
  }
  .about-links .round-link {
    font-size:11px;
    gap:15px
  }
  .about-links .round-arrow {
    width:32px;
    height:32px;
    font-size:17px
  }
  .about-links .text-link {
    font-size:10px
  }
  .notes-section {
    padding:0 0 65px
  }
  .notes-heading {
    padding-top:35px;
    gap:15px;
    margin-bottom:25px
  }
  .notes-heading .eyebrow {
    font-size:8px
  }
  .notes-heading h2 {
    font-size:32px;
    letter-spacing:-1.6px;
    margin-top:14px
  }
  .notes-heading>.text-link {
    font-size:9px;
    gap:6px
  }
  .notes-list>a {
    grid-template-columns:1fr auto;
    gap:10px 15px;
    padding:23px 0
  }
  .note-topic {
    font-size:7px;
    grid-column:1/-1
  }
  .notes-list h3 {
    font-size:19px;
    line-height:1.3;
    letter-spacing:-.6px;
    max-width:260px
  }
  .note-arrow {
    font-size:25px
  }
  .contact-section {
    padding:30px 0
  }
  .contact-top {
    align-items:flex-start;
    flex-direction:column;
    gap:13px
  }
  .contact-top>.eyebrow {
    font-size:8px
  }
  .contact-top>span {
    font-size:8px
  }
  .contact-title-link {
    padding:35px 0 28px
  }
  .contact-title-link h2 {
    font-size:clamp(65px,14.2vw,105px);
    letter-spacing:-.065em;
    line-height:.91
  }
  .contact-title-link>span {
    font-size:70px;
    align-self:start;
    line-height:1;
    transform:translateY(5px)
  }
  .contact-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:17px;
    padding-top:20px
  }
  .contact-bottom>p {
    font-size:10px
  }
  .email-link {
    font-size:12px;
    gap:14px
  }
  .email-link>span {
    font-size:20px
  }
  .site-footer {
    padding:25px 24px;
    gap:20px;
    flex-wrap:wrap
  }
  .footer-brand .brand-mark {
    font-size:33px
  }
  .site-footer>p {
    font-size:8px;
    margin-left:auto
  }
  .site-footer>nav {
    margin:0;
    flex-basis:100%;
    justify-content:space-between;
    gap:15px;
    font-size:9px
  }
  .reveal-enabled [data-reveal] {
    transform:translateY(20px)
  }
}

@media(max-width:370px) {
  .hero {
    padding-inline:20px
  }
  .hero-word {
    font-size:.81em
  }
  .hero-scene-controls {
    gap:3px
  }
  .view-switch>button {
    font-size:8px;
    padding-inline:9px
  }
  .scene-wrap {
    height:390px
  }
  .section-shell {
    width:calc(100% - 40px)
  }
  .project-caption {
    flex-direction:column
  }
  .contact-title-link>span {
    font-size:58px
  }
  .hero-topline {
    font-size:7px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .reveal-enabled [data-reveal] {
    opacity:1;
    transform:none
  }
  .discipline-track {
    animation:none
  }
  .scene-tag {
    transform:none
  }
}

@media print {
  html,body {
    background:white;
    color:black
  }
  .site-header,.hero-topline,.scene-wrap,.hero-bottom,.discipline-strip,.site-footer,.contact-section,.pipeline-tabs,.project-open {
    display:none
  }
  .hero,.section-shell {
    width:100%;
    padding:0
  }
  .hero-composition {
    min-height:0
  }
  .hero-copy {
    width:100%;
    padding:20px 0
  }
  .hero-eyebrow,.hero-description {
    color:#444
  }
  h1 {
    font-size:64px
  }
  .section-light,.approach-section {
    background:white;
    color:black
  }
  .work-section,.approach-section,.about-section,.notes-section {
    padding:25px 0
  }
  .project-grid {
    display:block
  }
  .project-card {
    break-inside:avoid;
    margin-bottom:25px
  }
  .project-retail {
    padding:0
  }
  .project-image {
    min-height:0;
    max-height:240px
  }
  .project-image img {
    max-height:170px;
    width:auto;
    margin:auto
  }
  .project-gitops .project-image {
    max-height:240px;
    min-height:0
  }
  .section-heading {
    display:block;
    margin-bottom:25px
  }
  .section-heading h2,.about-copy h2 {
    font-size:36px
  }
  .reveal-enabled [data-reveal] {
    opacity:1;
    transform:none
  }
  .delivery-detail {
    display:block
  }
  .about-layout {
    gap:25px
  }
  .notes-list>a {
    padding:15px 0
  }
  .notes-list h3 {
    font-size:18px
  }
}

.gitops-map {
  align-self:center;
  min-width:0;
  margin:20px -12px 0 0
}

.gitops-diagram {
  display:block;
  width:100%;
  height:auto;
  transform:perspective(1100px) rotateY(-8deg) rotateX(5deg);
  filter:drop-shadow(15px 20px 20px #1b301620);
  background:#172113;
  border:1px solid #73885a45;
  border-radius:8px;
  transition:transform .7s var(--ease)
}

.gitops-diagram path {
  stroke-dasharray:5 13;
  animation:delivery-trace 5s linear infinite
}

@keyframes delivery-trace {
  to { stroke-dashoffset:-72 }
}

body[data-motion="paused"] .gitops-diagram path,
.gitops-map[data-motion-visible="false"] .gitops-diagram path,
.discipline-strip[data-motion-visible="false"] .discipline-track {
  animation-play-state:paused
}

body[data-motion="paused"] [data-reveal] {
  transition:none
}

.project-gitops .project-image:hover .gitops-diagram {
  transform:perspective(1100px) rotateY(0) rotateX(0)
}

@media(max-width:760px) {
  .tag-two {
    right:10%
  }
  .view-switch>button,.motion-button {
    min-height:44px
  }
  .gitops-map {
    margin:22px -10px 20px;
    width:calc(100% + 20px)
  }
  .project-gitops .project-image {
    min-height:370px;
    padding-top:68px
  }
  .gitops-diagram {
    transform:perspective(1100px) rotateY(-5deg) rotateX(3deg)
  }
}