@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fef07dbb0973bf53-s.12tyk43_3sh9u.woff2)format("woff2");
  unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/8a480f0b521d4e75-s.0jzbimsg8vl84.woff2)format("woff2");
  unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/53b9e256198e5412-s.0-wfv7uh4i7h9.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/7178b3e590c64307-s.0nx0ww8fni_q3.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
  font-family: Geist Fallback;
  src: local(Arial);
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0.0%;
  size-adjust: 104.76%
}

.geist_a71539c9-module__T19VSG__className {
  font-family: Geist,Geist Fallback;
  font-style: normal
}

.geist_a71539c9-module__T19VSG__variable {
  --font-geist-sans: "Geist", "Geist Fallback"
}


@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/5ce348bf30bf5439-s.0zgw-jeven.3w.woff2)format("woff2");
  unicode-range: U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/4fa387ec64143e14-s.0wkzw~je483f-.woff2)format("woff2");
  unicode-range: U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/6306c77e7c8268e4-s.0rhz0arwfsn~5.woff2)format("woff2");
  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/7d817b4c03b0c5f1-s.0l76wvqk9d84w.woff2)format("woff2");
  unicode-range: U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/bbc41e54d2fcbd21-s.0k4k9394f2q-k.woff2)format("woff2");
  unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
  font-family: Geist Mono;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/797e433ab948586e-s.p.08e28id.o-okb.woff2)format("woff2");
  unicode-range: U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
  font-family: Geist Mono Fallback;
  src: local(Arial);
  ascent-override: 74.67%;
  descent-override: 21.92%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%
}

.geist_mono_8d43a2aa-module__8Li5zG__className {
  font-family: Geist Mono,Geist Mono Fallback;
  font-style: normal
}

.geist_mono_8d43a2aa-module__8Li5zG__variable {
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback"
}


@layer theme {
  :root,:host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacing: .25rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono)
  }
}

@layer base {
  *,:after,:before,::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0
  }

  html,:host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings,normal);
    font-variation-settings: var(--default-font-variation-settings,normal);
    -webkit-tap-highlight-color: transparent
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
  }

  abbr: where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
  }

  h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    font-weight: inherit
  }

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

  b,strong {
    font-weight: bolder
  }

  code,kbd,samp,pre {
    font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings,normal);
    font-variation-settings: var(--default-mono-font-variation-settings,normal);
    font-size: 1em
  }

  small {
    font-size: 80%
  }

  sub,sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
  }

  sub {
    bottom: -.25em
  }

  sup {
    top: -.5em
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }

  :-moz-focusring {
    outline: auto
  }

  progress {
    vertical-align: baseline
  }

  summary {
    display: list-item
  }

  ol,ul,menu {
    list-style: none
  }

  img,svg,video,canvas,audio,iframe,embed,object {
    vertical-align: middle;
    display: block
  }

  img,video {
    max-width: 100%;
    height: auto
  }

  button,input,select,optgroup,textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
  }

  :where(select:is([multiple],[size])) optgroup {
    font-weight: bolder
  }

  :where(select:is([multiple],[size])) optgroup option {
    padding-inline-start: 20px
  }

  ::file-selector-button {
    margin-inline-end: 4px
  }

  ::placeholder {
    opacity: 1
  }

  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
    ::placeholder {
      color: currentColor
    }

    @supports (color:color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent)
      }
    }
  }

  textarea {
    resize: vertical
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit
  }

  ::-webkit-datetime-edit {
    display: inline-flex
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0
  }

  ::-webkit-datetime-edit {
    padding-block: 0
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1
  }

  :-moz-ui-invalid {
    box-shadow: none
  }

  button,input:where([type=button],[type=reset],[type=submit]) {
    appearance: button
  }

  ::file-selector-button {
    appearance: button
  }

  ::-webkit-inner-spin-button {
    height: auto
  }

  ::-webkit-outer-spin-button {
    height: auto
  }

  [hidden]:where(:not([hidden=until-found])) {
    display: none!important
  }
}

@layer components;
@layer utilities {
  .visible {
    visibility: visible
  }

  .relative {
    position: relative
  }

  .start {
    inset-inline-start: var(--spacing)
  }

  .hidden {
    display: none
  }

  .table {
    display: table
  }

  .resize {
    resize: both
  }
}

:root {
  --navy: #043247;
  --navy-2: #08445a;
  --ink: #082f41;
  --cream: #f4f2ed;
  --paper: #fbfaf7;
  --accent: #e8690b;
  --line: #d7d9d8;
  --muted: #61717a
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist-sans),Arial,sans-serif;
  margin: 0
}

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

.shell {
  width: min(1180px,100% - 48px);
  margin-inline: auto
}

.section {
  padding: 112px 0
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  font: 600 11px var(--font-geist-mono),monospace;
  color: #5b6670;
  align-items: center;
  gap: 12px;
  display: flex
}

.eyebrow>span {
  background: var(--accent);
  width: 28px;
  height: 2px
}

.eyebrow.light {
  color: #d0dbe0
}

.eyebrow.light>span {
  background: var(--accent)
}

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

h2 {
  letter-spacing: -.055em;
  margin: 24px 0;
  font-size: clamp(42px,5vw,68px);
  font-weight: 680;
  line-height: .98
}

h2 em,h1 em {
  color: var(--accent);
  font-family: inherit;
  font-style: normal;
  font-weight: 680
}

.button {
  text-transform: uppercase;
  letter-spacing: .08em;
  min-height: 54px;
  font: 700 11px var(--font-geist-mono),monospace;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 0 23px;
  transition: all .2s;
  display: inline-flex
}

.button b {
  font-size: 17px
}

.button-accent {
  background: var(--accent);
  color: #fff
}

.button-dark {
  background: var(--navy);
  color: #fff
}

.button:hover {
  filter: brightness(1.05);
  transform: translateY(-2px)
}

.text-link {
  text-transform: uppercase;
  letter-spacing: .09em;
  font: 700 11px var(--font-geist-mono),monospace;
  border-bottom: 1px solid;
  align-items: center;
  gap: 28px;
  padding-bottom: 9px;
  display: inline-flex
}

.light-link {
  color: #fff
}

.text-link span {
  font-size: 18px
}

.site-header {
  z-index: 20;
  width: 100%;
  height: 92px;
  color: var(--navy);
  background: #fff;
  border-bottom: 1px solid #d8dddf;
  position: absolute;
  top: 0;
  left: 0
}

.site-header--sticky {
  z-index: 50;
  animation: .42s cubic-bezier(.22,.78,.26,1) both header-reveal;
  position: fixed;
  box-shadow: 0 10px 35px #052f4018
}

.nav-wrap {
  justify-content: space-between;
  align-items: center;
  height: 100%;
  display: flex
}

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

.brand img {
  width: 252px;
  height: auto;
  display: block
}

.site-header nav {
  gap: 34px;
  font-size: 13px;
  display: flex
}

.site-header nav a {
  opacity: .76
}

.site-header nav a:hover {
  opacity: 1;
  color: var(--accent)
}

.nav-cta {
  font: 700 10px var(--font-geist-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent);
  color: var(--navy);
  gap: 16px;
  padding: 12px 0;
  display: flex
}

.mobile-nav {
  display: none
}

@keyframes header-reveal {
  0% {
    opacity: .6;
    transform: translateY(-105%)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media (prefers-reduced-motion:reduce) {
  .site-header--sticky {
    animation: none
  }
}

.hero {
  background: var(--navy) url(/assets/images/hero-construction.jpg) center 58%/cover no-repeat;
  color: #fff;
  align-items: center;
  min-height: 790px;
  padding-top: 92px;
  display: flex;
  position: relative;
  overflow: hidden
}

.hero:before {
  content: "";
  background: linear-gradient(90deg,#032332f5 0%,#043247e0 40%,#043247a3 72%,#0432476b 100%),linear-gradient(#0000 45%,#021d2aad);
  position: absolute;
  inset: 0
}

.hero-grid {
  opacity: .08;
  background-image: linear-gradient(#fff 1px,#0000 1px),linear-gradient(90deg,#fff 1px,#0000 1px);
  background-size: 72px 72px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg,#0000 4%,#000 80%);
  mask-image: linear-gradient(90deg,#0000 4%,#000 80%)
}

.hero:after,.page-hero:after {
  content: "";
  border: 1px solid #e8690b55;
  border-radius: 50%;
  width: 52vw;
  height: 52vw;
  position: absolute;
  bottom: -28vw;
  right: -13vw
}

.hero-orbit {
  border: 1px solid #ffffff1c;
  border-radius: 50%;
  width: 46vw;
  height: 46vw;
  position: absolute;
  top: 15%;
  right: -4vw
}

.orbit-two {
  border-color: #e8690b60;
  width: 27vw;
  height: 27vw;
  top: 30%;
  right: 5vw
}

.hero-inner {
  z-index: 1;
  padding-top: 40px;
  position: relative
}

.hero h1,.page-hero h1 {
  letter-spacing: -.065em;
  max-width: 970px;
  margin: 33px 0 34px;
  font-size: clamp(62px,7.6vw,112px);
  font-weight: 680;
  line-height: .84
}

.hero h1 em,.page-hero h1 em {
  letter-spacing: -.045em;
  font-size: .72em
}

.hero-copy {
  color: #e1eaed;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.65
}

.hero-actions {
  align-items: center;
  gap: 42px;
  margin-top: 38px;
  display: flex
}

.hero-foot {
  border-top: 1px solid #ffffff38;
  align-items: center;
  gap: 44px;
  margin-top: 76px;
  padding-top: 24px;
  display: flex
}

.hero-stat {
  align-items: center;
  gap: 10px;
  display: flex
}

.hero-stat strong {
  font: 600 32px var(--font-geist-sans),Arial,sans-serif;
  letter-spacing: -.04em;
  color: var(--accent)
}

.hero-stat span {
  font: 500 9px var(--font-geist-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #c6d4d9;
  line-height: 1.45
}

.hero-foot>p {
  font: 500 10px var(--font-geist-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b3c5cc;
  margin: 0 0 0 auto
}

.hero-foot i {
  color: var(--accent);
  padding: 0 6px;
  font-style: normal
}

.split-intro {
  grid-template-columns: 1.65fr .7fr;
  align-items: end;
  gap: 80px;
  display: grid
}

.split-intro>p {
  color: var(--muted);
  padding-bottom: 10px;
  font-size: 16px;
  line-height: 1.7
}

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

.audience-grid article {
  border-right: 1px solid var(--line);
  padding: 30px 36px 34px;
  position: relative
}

.audience-grid article:last-child {
  border: 0
}

.audience-grid b {
  font: 600 11px var(--font-geist-mono);
  color: var(--accent)
}

.audience-grid h3 {
  margin: 42px 0 14px;
  font-size: 23px
}

.audience-grid p {
  color: var(--muted);
  min-height: 70px;
  font-size: 14px;
  line-height: 1.65
}

.audience-grid span {
  font: 600 9px var(--font-geist-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8b9399
}

.services {
  background: var(--navy);
  color: #fff
}

.section-topline {
  justify-content: space-between;
  align-items: center;
  display: flex
}

.light-title {
  color: #fff
}

.service-grid {
  border: 1px solid #ffffff1d;
  grid-template-columns: repeat(3,1fr);
  margin-top: 65px;
  display: grid
}

.service-card {
  border-right: 1px solid #ffffff1d;
  flex-direction: column;
  min-height: 500px;
  padding: 0 0 30px;
  transition: all .25s;
  display: flex;
  overflow: hidden
}

.service-card:last-child {
  border: 0
}

.service-card:hover {
  background: #ffffff08;
  transform: translateY(-5px)
}

.service-card figure {
  background: #0a2635;
  height: 220px;
  margin: 0 0 30px;
  overflow: hidden
}

.service-card figure img {
  object-fit: cover;
  filter: saturate(.78)contrast(1.05);
  width: 100%;
  height: 100%;
  transition: transform .45s,filter .45s;
  display: block
}

.service-card:hover figure img {
  filter: saturate()contrast(1.05);
  transform: scale(1.035)
}

.service-card h3,.service-card p,.service-card>a {
  margin-left: 30px;
  margin-right: 30px
}

.service-card h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 26px;
  line-height: 1.1
}

.service-card p {
  color: #b8c4ca;
  font-size: 14px;
  line-height: 1.65
}

.service-card>a {
  font: 600 10px var(--font-geist-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-top: 1px solid #ffffff25;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  display: flex
}

.service-card>a span {
  color: var(--accent);
  font-size: 16px
}

.benefits {
  background: var(--cream)
}

.benefits-layout {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10%;
  display: grid
}

.benefit-visual {
  background: var(--navy-2);
  height: 650px;
  position: relative;
  overflow: hidden
}

.blueprint {
  background-image: linear-gradient(#ffffff16 1px,#0000 1px),linear-gradient(90deg,#ffffff16 1px,#0000 1px);
  background-size: 44px 44px;
  position: absolute;
  inset: 0
}

.bp-a,.bp-b {
  font: 500 9px var(--font-geist-mono);
  letter-spacing: .12em;
  color: #ffffff65;
  position: absolute
}

.bp-a {
  top: 25px;
  left: 25px
}

.bp-b {
  bottom: 25px;
  right: 25px
}

.bp-building {
  border: 2px solid #e8690bbb;
  border-top: 0;
  align-items: flex-end;
  height: 50%;
  display: flex;
  position: absolute;
  bottom: 16%;
  left: 16%;
  right: 16%
}

.bp-building:before,.bp-building:after {
  content: "";
  border: 1px solid #ffffff70;
  position: absolute
}

.bp-building:before {
  width: 62%;
  height: 125%;
  bottom: 0;
  left: 17%
}

.bp-building:after {
  width: 26%;
  height: 150%;
  bottom: 0;
  left: 48%
}

.bp-building i {
  border-top: 1px solid #ffffff38;
  border-right: 1px solid #ffffff38;
  flex: 1;
  height: 34%
}

.visual-tag {
  background: var(--accent);
  color: #fff;
  width: 210px;
  padding: 22px 30px;
  position: absolute;
  bottom: 0;
  right: 0
}

.visual-tag b,.visual-tag span {
  display: block
}

.visual-tag b {
  font-size: 14px
}

.visual-tag span {
  font: 500 9px var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 5px
}

.benefit-copy>p {
  color: var(--muted);
  max-width: 520px;
  font-size: 16px;
  line-height: 1.75
}

.benefit-list {
  border-top: 1px solid var(--line);
  margin-top: 40px
}

.benefit-list>div {
  border-bottom: 1px solid var(--line);
  gap: 26px;
  padding: 20px 0;
  display: flex
}

.benefit-list b {
  font: 600 10px var(--font-geist-mono);
  color: var(--accent);
  padding-top: 4px
}

.benefit-list span {
  color: var(--muted);
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  display: flex
}

.benefit-list strong {
  color: var(--ink);
  font-size: 15px
}

.projects {
  background: var(--paper)
}

.project-heading {
  margin-bottom: 60px
}

.project-grid {
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  display: grid
}

.project-card {
  background: #e4e0d6
}

.project-card:first-child {
  grid-row: span 2
}

.project-art {
  background: #c9c0ae;
  height: 320px;
  position: relative;
  overflow: hidden
}

.project-card:first-child .project-art {
  height: 610px
}

.project-art>span {
  z-index: 3;
  background: var(--accent);
  color: #fff;
  font: 700 9px var(--font-geist-mono);
  letter-spacing: .1em;
  padding: 7px 10px;
  position: absolute;
  top: 22px;
  left: 22px
}

.project-meta {
  background: #fff;
  grid-template-columns: 1fr auto;
  padding: 22px 24px;
  display: grid;
  position: relative
}

.project-meta span {
  font: 600 9px var(--font-geist-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8e959a
}

.project-meta h3 {
  margin: 7px 0 0;
  font-size: 21px
}

.project-meta b {
  color: var(--accent);
  font: 500 12px var(--font-geist-mono);
  grid-area: 1/2/3;
  align-self: center
}

.project-civil .project-art {
  background: linear-gradient(150deg,#0b4054,#66818c)
}

.beam {
  background: #c6c8c5;
  position: absolute;
  box-shadow: 0 10px 25px #0005
}

.beam-a {
  width: 60px;
  height: 120%;
  top: -10%;
  left: 20%;
  transform: rotate(20deg)
}

.beam-b {
  background: #e0e0da;
  width: 50px;
  height: 120%;
  top: -8%;
  left: 55%;
  transform: rotate(-16deg)
}

.beam-c {
  background: #284d59;
  width: 120%;
  height: 55px;
  top: 45%;
  left: -10%;
  transform: rotate(-10deg)
}

.project-home .project-art {
  background: linear-gradient(160deg,#d7d6d0 0 53%,#6090a1 53%)
}

.house-shape {
  background: #f1f0ea;
  width: 72%;
  height: 55%;
  position: absolute;
  bottom: 0;
  left: 16%;
  box-shadow: 0 20px 30px #0003
}

.house-shape:before {
  content: "";
  background: #123e4d;
  width: 62%;
  height: 95%;
  position: absolute;
  bottom: 0;
  right: 0
}

.house-shape i {
  background: var(--accent);
  width: 22%;
  height: 60%;
  position: absolute;
  bottom: 0;
  left: 10%
}

.house-shape i:last-child {
  background: #7da3ac;
  width: 37%;
  height: 48%;
  left: auto;
  right: 8%
}

.project-maintenance .project-art {
  background: linear-gradient(145deg,#607c86,#07384c)
}

.facade {
  background: #d7d3c8;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
  padding: 8px;
  display: grid;
  position: absolute;
  inset: 20% 12% 0
}

.facade i {
  background: linear-gradient(135deg,#0d4357,#7d9ba5);
  border: 5px solid #d9d8d1
}

.centered-button {
  width: max-content;
  margin: 48px auto 0;
  display: flex
}

.faq {
  background: var(--navy);
  color: #fff
}

.faq-layout {
  grid-template-columns: .8fr 1.2fr;
  gap: 11%;
  display: grid
}

.faq-layout>div:first-child>p {
  color: #aab6bf;
  margin: 28px 0;
  line-height: 1.6
}

.faq-list {
  border-top: 1px solid #ffffff25
}

.faq-list details {
  border-bottom: 1px solid #ffffff25
}

.faq-list summary {
  cursor: pointer;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  padding: 25px 0;
  font-size: 15px;
  list-style: none;
  display: grid
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary span {
  font: 500 9px var(--font-geist-mono);
  color: var(--accent)
}

.faq-list summary b {
  color: var(--accent);
  font-size: 22px;
  font-weight: 300;
  transition: all .2s
}

.faq-list details[open] summary b {
  transform: rotate(45deg)
}

.faq-list details p {
  color: #acb8c1;
  padding: 0 40px 24px;
  font-size: 14px;
  line-height: 1.65
}

.cta-feature {
  background: var(--paper);
  padding: 100px 0
}

.cta-feature-grid {
  grid-template-columns: .92fr 1.08fr;
  min-height: 490px;
  display: grid;
  box-shadow: 0 22px 70px #092f4018
}

.cta-feature figure {
  background: var(--navy);
  min-height: 490px;
  margin: 0;
  overflow: hidden
}

.cta-feature figure img {
  object-fit: cover;
  filter: saturate(.82)contrast(1.06);
  width: 100%;
  height: 100%;
  display: block
}

.cta-feature-copy {
  background: var(--accent);
  color: var(--navy);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 68px 72px;
  display: flex;
  position: relative;
  overflow: hidden
}

.cta-feature-copy:after {
  content: "";
  border: 1px solid #07364a30;
  border-radius: 50%;
  width: 340px;
  height: 340px;
  position: absolute;
  bottom: -170px;
  right: -170px
}

.cta-feature-copy .eyebrow {
  color: var(--navy)
}

.cta-feature-copy .eyebrow>span {
  background: var(--navy)
}

.cta-feature-copy h2 {
  max-width: 590px;
  margin: 24px 0 20px;
  font-size: clamp(44px,4.4vw,66px)
}

.cta-feature-copy p {
  max-width: 560px;
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.7
}

.cta-feature-copy .button {
  z-index: 1;
  position: relative
}

.cta-index {
  font: 700 9px var(--font-geist-mono);
  letter-spacing: .14em;
  color: #07364a88;
  position: absolute;
  top: 30px;
  right: 30px
}

footer {
  color: #fff;
  background: #022737;
  padding: 68px 0 25px
}

.brand-light {
  background: #fff;
  padding: 5px 10px 5px 5px
}

.brand-light img {
  width: 260px
}

.footer-main {
  grid-template-columns: 2fr .7fr 1fr 1.4fr;
  gap: 50px;
  display: grid
}

.footer-main>div {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  display: flex
}

.footer-main>div:first-child p {
  color: #96aab2;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6
}

.footer-main>div>b {
  font: 600 9px var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 12px
}

.footer-main>div>a,.footer-main>div>span {
  color: #b0c0c6;
  font-size: 12px
}

.footer-main>div>a:hover {
  color: #fff
}

.footer-bottom {
  font: 500 9px var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #718b95;
  border-top: 1px solid #ffffff15;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 22px;
  display: flex
}

.page-hero {
  background: var(--navy);
  color: #fff;
  min-height: 580px;
  padding: 200px 0 100px;
  position: relative;
  overflow: hidden
}

.page-hero .shell {
  z-index: 1;
  position: relative
}

.page-hero h1 {
  margin-bottom: 25px;
  font-size: clamp(58px,7vw,96px)
}

.page-hero p {
  color: #becfd5;
  max-width: 650px;
  font-size: 17px;
  line-height: 1.7
}

.inner-section {
  padding: 95px 0
}

.inner-grid {
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  display: grid
}

.detail-card {
  background: #fff;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 15px 50px #1122330d
}

.detail-card figure {
  background: var(--navy);
  height: 300px;
  margin: 0;
  overflow: hidden
}

.detail-card figure img {
  object-fit: cover;
  filter: saturate(.82)contrast(1.05);
  width: 100%;
  height: 100%;
  transition: transform .45s,filter .45s;
  display: block
}

.detail-card:hover figure img {
  filter: saturate()contrast(1.05);
  transform: scale(1.025)
}

.detail-card-body {
  border-top: 4px solid var(--accent);
  padding: 38px 42px 42px
}

.detail-card .number {
  font: 600 10px var(--font-geist-mono);
  letter-spacing: .1em;
  color: var(--accent)
}

.detail-card h2 {
  margin-top: 20px;
  font-size: 40px
}

.detail-card p {
  color: var(--muted);
  line-height: 1.7
}

.detail-card ul {
  margin: 28px 0 0;
  padding: 0;
  list-style: none
}

.detail-card li {
  border-top: 1px solid var(--line);
  padding: 14px 0;
  font-size: 13px
}

.detail-card li:before {
  content: "—";
  color: var(--accent);
  margin-right: 13px
}

.contact-layout {
  grid-template-columns: .75fr 1.25fr;
  align-items: start;
  gap: 8%;
  display: grid
}

.contact-info h2 {
  font-size: 48px
}

.contact-info p {
  color: var(--muted);
  line-height: 1.7
}

.contact-point {
  border-top: 1px solid var(--line);
  flex-direction: column;
  gap: 5px;
  padding: 20px 0;
  display: flex
}

.contact-point b {
  font: 600 9px var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent)
}

.contact-point span,.contact-point a {
  font-size: 14px
}

.contact-form {
  background: #fff;
  padding: 45px;
  scroll-margin-top: 120px
}

.form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  display: grid
}

.field {
  flex-direction: column;
  gap: 8px;
  display: flex
}

.field.full {
  grid-column: 1/-1
}

.field label {
  font: 600 9px var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: .1em
}

.field input,.field select,.field textarea {
  font: 14px var(--font-geist-sans);
  background: 0 0;
  border: 0;
  border-bottom: 1px solid #aeb3b5;
  outline: none;
  padding: 13px 2px
}

.field input:focus,.field select:focus,.field textarea:focus {
  border-color: var(--accent)
}

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

.contact-form .button {
  cursor: pointer;
  border: 0;
  margin-top: 30px
}

.project-catalog {
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  display: grid
}

.catalog-item {
  background: #fff
}

.catalog-visual {
  height: 300px;
  position: relative;
  overflow: hidden
}

.catalog-visual.civil {
  background: linear-gradient(135deg,#06374a 0 40%,#d2d5d2 40% 55%,#426c7b 55%)
}

.catalog-visual.home {
  background: linear-gradient(155deg,#6e9ba9 0 52%,#deddd7 52%)
}

.catalog-visual.maint {
  background: repeating-linear-gradient(90deg,#07364a 0 45px,#789aa5 45px 49px)
}

.catalog-item>div:last-child {
  padding: 22px
}

.catalog-item span {
  font: 600 9px var(--font-geist-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent)
}

.catalog-item h3 {
  margin: 8px 0;
  font-size: 21px
}

.catalog-item p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6
}

@media (max-width:850px) {
  .shell {
    width: min(100% - 30px,1180px)
  }

  .section {
    padding: 78px 0
  }

  .site-header nav,.nav-cta {
    display: none
  }

  .brand img {
    width: 220px
  }

  .mobile-nav {
    display: block;
    position: relative
  }

  .mobile-nav summary {
    border: 1px solid #0b405438;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 40px;
    height: 40px;
    list-style: none;
    display: flex
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none
  }

  .mobile-nav summary i {
    background: var(--navy);
    width: 18px;
    height: 1px
  }

  .mobile-nav>div {
    width: 220px;
    color: var(--ink);
    background: #fff;
    flex-direction: column;
    padding: 12px;
    display: flex;
    position: absolute;
    top: 48px;
    right: 0;
    box-shadow: 0 12px 30px #0003
  }

  .mobile-nav a {
    border-bottom: 1px solid var(--line);
    padding: 14px
  }

  .hero {
    min-height: 760px
  }

  .hero h1 {
    font-size: 58px
  }

  .hero-copy {
    font-size: 16px
  }

  .hero-foot>p {
    display: none
  }

  .split-intro,.benefits-layout,.faq-layout,.inner-grid,.contact-layout {
    grid-template-columns: 1fr;
    gap: 45px
  }

  .audience-grid,.service-grid,.project-catalog {
    grid-template-columns: 1fr
  }

  .audience-grid article,.service-card {
    border-right: 0;
    border-bottom: 1px solid var(--line)
  }

  .service-card {
    border-color: #ffffff1d;
    min-height: 330px
  }

  .benefit-visual {
    order: 2;
    height: 500px
  }

  .project-grid {
    grid-template-columns: 1fr
  }

  .project-card:first-child {
    grid-row: auto
  }

  .project-card:first-child .project-art,.project-art {
    height: 380px
  }

  .cta-feature {
    padding: 75px 0
  }

  .cta-feature-grid {
    grid-template-columns: 1fr
  }

  .cta-feature figure {
    height: 360px;
    min-height: 360px
  }

  .cta-feature-copy {
    padding: 58px 46px
  }

  .footer-main {
    grid-template-columns: 1fr 1fr
  }

  .footer-main>div:first-child {
    grid-column: 1/-1
  }

  .page-hero {
    padding-top: 165px
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .field.full {
    grid-column: auto
  }
}

@media (max-width:520px) {
  .hero {
    min-height: 720px
  }

  .hero h1 {
    font-size: 48px
  }

  .hero h1 em {
    font-size: .68em
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px
  }

  .hero-foot {
    gap: 24px;
    margin-top: 45px
  }

  .hero-stat:nth-child(2) {
    display: none
  }

  h2 {
    font-size: 42px
  }

  .section-topline {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px
  }

  .project-card:first-child .project-art,.project-art {
    height: 310px
  }

  .cta-feature {
    padding: 55px 0
  }

  .cta-feature figure {
    height: 270px;
    min-height: 270px
  }

  .cta-feature-copy {
    padding: 48px 28px
  }

  .cta-feature-copy h2 {
    font-size: 39px
  }

  .cta-index {
    top: 20px;
    right: 20px
  }

  .detail-card figure {
    height: 235px
  }

  .detail-card-body {
    padding: 30px 26px 34px
  }

  .footer-main {
    grid-template-columns: 1fr
  }

  .footer-main>div:first-child {
    grid-column: auto
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px
  }

  .contact-form {
    padding: 28px
  }

  .page-hero h1 {
    font-size: 48px
  }

  .page-hero {
    min-height: 520px
  }

  .audience-grid article {
    padding-inline: 20px
  }
}


.project-list-section {
  background: #f4f4f1;
  padding: 105px 0
}

.project-list {
  flex-direction: column;
  gap: 36px;
  display: flex
}

.project-row {
  background: #fff;
  grid-template-columns: 1.12fr .88fr;
  min-height: 530px;
  display: grid;
  box-shadow: 0 18px 55px #052b3b0d
}

.project-row:nth-child(2n) .project-cover {
  order: 2
}

.project-row:nth-child(2n) .project-info {
  order: 1
}

.project-cover {
  background: var(--navy);
  cursor: pointer;
  text-align: left;
  color: #fff;
  border: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  overflow: hidden
}

.project-cover:after {
  content: "";
  background: linear-gradient(#0000 40%,#042c3dbd);
  position: absolute;
  inset: 0
}

.project-cover img {
  object-fit: cover;
  filter: saturate(.82)contrast(1.04);
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.2,.7,.2,1),filter .4s;
  display: block
}

.project-cover:hover img,.project-cover:focus-visible img {
  filter: saturate()contrast(1.04);
  transform: scale(1.035)
}

.project-cover>span {
  z-index: 1;
  flex-direction: column;
  gap: 4px;
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 34px
}

.project-cover>span b {
  letter-spacing: .02em;
  font-size: 14px
}

.project-cover>span i {
  font: 500 9px var(--font-geist-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d7e2e6;
  font-style: normal
}

.project-cover>strong {
  z-index: 1;
  border: 1px solid #fff6;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 18px;
  font-weight: 400;
  transition: background .25s,border-color .25s;
  display: grid;
  position: absolute;
  bottom: 31px;
  right: 30px
}

.project-cover:hover>strong,.project-cover:focus-visible>strong {
  background: var(--accent);
  border-color: var(--accent)
}

.project-info {
  flex-direction: column;
  justify-content: center;
  padding: 58px 55px;
  display: flex
}

.project-number {
  font: 600 10px var(--font-geist-mono);
  letter-spacing: .12em;
  color: var(--accent)
}

.project-info h2 {
  margin: 25px 0 14px;
  font-size: clamp(38px,4vw,54px);
  line-height: 1.02
}

.project-subheading {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.6
}

.project-work {
  border-top: 1px solid var(--line);
  margin-top: 42px;
  padding-top: 25px
}

.project-work>b {
  font: 600 9px var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: .12em
}

.project-work ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none
}

.project-work li {
  border-bottom: 1px solid #e8e8e4;
  padding: 9px 0 9px 22px;
  font-size: 13px;
  line-height: 1.5;
  position: relative
}

.project-work li:before {
  content: "—";
  color: var(--accent);
  position: absolute;
  left: 0
}

.project-gallery-link {
  border: 0;
  border-bottom: 1px solid var(--navy);
  color: var(--navy);
  font: 600 11px var(--font-geist-sans);
  text-transform: uppercase;
  letter-spacing: .07em;
  cursor: pointer;
  background: 0 0;
  align-self: flex-start;
  margin-top: 30px;
  padding: 0 0 8px
}

.project-gallery-link span {
  color: var(--accent);
  margin-left: 12px
}

.lightbox {
  z-index: 100;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #031c27ef;
  place-items: center;
  padding: 55px 105px 36px;
  animation: .25s lightbox-in;
  display: grid;
  position: fixed;
  inset: 0
}

.lightbox-content {
  width: min(1080px,100%);
  min-width: 0
}

.lightbox-stage {
  background: #02151d;
  place-items: center;
  height: min(67vh,700px);
  display: grid
}

.lightbox-stage img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block
}

.lightbox-meta {
  color: #fff;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  padding: 20px 0 17px;
  display: flex
}

.lightbox-meta span {
  font: 500 9px var(--font-geist-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #9fb2ba
}

.lightbox-meta h3 {
  margin: 5px 0 0;
  font-size: 22px
}

.lightbox-meta>b {
  font: 500 10px var(--font-geist-mono);
  letter-spacing: .12em;
  color: #d7e2e6
}

.lightbox-thumbs {
  gap: 10px;
  display: flex
}

.lightbox-thumbs button {
  opacity: .48;
  cursor: pointer;
  background: #0a3444;
  border: 2px solid #0000;
  width: 72px;
  height: 52px;
  padding: 0;
  transition: opacity .2s,border-color .2s
}

.lightbox-thumbs button.is-active {
  border-color: var(--accent);
  opacity: 1
}

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

.lightbox-close,.lightbox-arrow {
  color: #fff;
  cursor: pointer;
  background: #052b3b;
  border: 1px solid #ffffff42;
  place-items: center;
  transition: background .2s,border-color .2s;
  display: grid;
  position: absolute
}

.lightbox-close:hover,.lightbox-arrow:hover {
  background: var(--accent);
  border-color: var(--accent)
}

.lightbox-close {
  width: 45px;
  height: 45px;
  font-size: 31px;
  font-weight: 200;
  line-height: 1;
  top: 24px;
  right: 28px
}

.lightbox-arrow {
  width: 50px;
  height: 50px;
  font-size: 20px;
  top: 50%;
  transform: translateY(-50%)
}

.lightbox-prev {
  left: 28px
}

.lightbox-next {
  right: 28px
}

@keyframes lightbox-in {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@media (max-width:850px) {
  .project-list-section {
    padding: 78px 0
  }

  .project-row {
    grid-template-columns: 1fr;
    min-height: 0
  }

  .project-row:nth-child(2n) .project-cover,.project-row:nth-child(2n) .project-info {
    order: initial
  }

  .project-cover {
    min-height: 420px
  }

  .project-info {
    padding: 48px 42px 52px
  }

  .lightbox {
    padding: 70px 65px 28px
  }

  .lightbox-close {
    top: 15px;
    right: 15px
  }

  .lightbox-prev {
    left: 8px
  }

  .lightbox-next {
    right: 8px
  }

  .lightbox-stage {
    height: 60vh
  }
}

@media (max-width:520px) {
  .project-list {
    gap: 22px
  }

  .project-cover {
    min-height: 310px
  }

  .project-cover>span {
    bottom: 22px;
    left: 23px
  }

  .project-cover>strong {
    bottom: 21px;
    right: 20px
  }

  .project-info {
    padding: 38px 26px 42px
  }

  .project-info h2 {
    font-size: 38px
  }

  .project-work {
    margin-top: 32px
  }

  .lightbox {
    align-items: start;
    padding: 74px 12px 20px
  }

  .lightbox-content {
    width: 100%
  }

  .lightbox-stage {
    height: 50vh
  }

  .lightbox-arrow {
    background: #052b3bcc;
    width: 42px;
    height: 42px;
    top: 42%
  }

  .lightbox-prev {
    left: 7px
  }

  .lightbox-next {
    right: 7px
  }

  .lightbox-meta {
    align-items: start;
    padding: 16px 2px 13px
  }

  .lightbox-meta h3 {
    font-size: 18px
  }

  .lightbox-meta span {
    display: none
  }

  .lightbox-thumbs button {
    width: 60px;
    height: 44px
  }
}

@media (prefers-reduced-motion:reduce) {
  .lightbox {
    animation: none
  }

  .project-cover img {
    transition: none
  }
}


.site-header nav a {
  transition: color .2s,opacity .2s;
  position: relative
}

.site-header nav a[aria-current=page] {
  color: var(--navy);
  opacity: 1;
  font-weight: 700
}

.site-header nav a[aria-current=page]:after {
  content: "";
  background: var(--accent);
  width: 5px;
  height: 5px;
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translate(-50%)rotate(45deg)
}

.mobile-nav a[aria-current=page] {
  color: var(--navy);
  border-left: 3px solid var(--accent);
  background: #f4f4f1;
  padding-left: 18px;
  font-weight: 700
}

@media (prefers-reduced-motion:reduce) {
  .site-header nav a {
    transition: none
  }
}