:root {
  --vg-green-deep: #013D2E;
  --vg-green-dark: #065B42;
  --vg-green-mid: #0E7A57;
  --vg-green-light: #1E8F67;
  --vg-earth: #C6A968;
  --vg-beige: #F3E2C0;
  --vg-offwhite: #FBFBF7;
  --text: #013D2E;
  --text-soft: #35564d;
  --line: rgba(1, 61, 46, 0.15);
  --max-width: 1320px;
  --header-height: 88px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-family: "Montserrat", system-ui, sans-serif;
  background: var(--vg-offwhite);
  color: var(--text);
}

body {
  margin: 0;
  background: var(--vg-offwhite);
  color: var(--text);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.container {
  width: min(calc(100% - 48px), var(--max-width));
  margin-inline: auto;
}

.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 {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-height);
  background: rgba(251, 251, 247, 0.97);
  border-bottom: 1px solid rgba(1, 61, 46, 0.10);
  backdrop-filter: blur(12px);
  transition: height .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.site-header.is-scrolled {
  height: 76px;
  background: rgba(251, 251, 247, 0.99);
  box-shadow: 0 10px 32px rgba(1, 61, 46, 0.08);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 255px;
}

.brand-mark {
  width: 54px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--vg-green-deep);
}

.brand-wordmark strong {
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .085em;
  white-space: nowrap;
}

.brand-wordmark > span {
  margin-top: 6px;
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .27em;
  color: var(--vg-earth);
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--vg-green-deep);
}

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

.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 4px;
  height: 1px;
  background: var(--vg-earth);
  transition: right .22s ease;
}

.main-nav a:hover::after,
.main-nav a.is-active::after { right: 0; }

.nav-cta {
  border: 1px solid rgba(1, 61, 46, 0.3);
  padding: 11px 16px !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.nav-cta:hover {
  background: var(--vg-green-deep);
  color: var(--vg-offwhite);
  border-color: var(--vg-green-deep);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 11px;
  border: 1px solid rgba(1, 61, 46, 0.22);
  background: transparent;
  color: var(--vg-green-deep);
  cursor: pointer;
}

.menu-toggle span:not(.sr-only) {
  display: block;
  height: 1px;
  background: currentColor;
  margin: 5px 0;
}

.scroll-section {
  --section-opacity: 1;
  --section-y: 0px;
  --section-scale: 1;
}

[data-scroll-content] {
  opacity: var(--section-opacity);
  transform: translate3d(0, var(--section-y), 0) scale(var(--section-scale));
  transform-origin: center center;
  will-change: opacity, transform;
}

.hero {
  position: relative;
  min-height: 100svh;
  padding-top: var(--header-height);
  overflow: hidden;
  color: var(--vg-offwhite);
  display: flex;
  flex-direction: column;
  background: var(--vg-green-deep);
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: var(--header-height) 0 0;
  z-index: -3;
  margin: 0;
  overflow: hidden;
  background: #0b261f;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(var(--hero-scale, 1.04));
  filter: saturate(.78) contrast(1.04) brightness(.84);
  will-change: transform;
  animation: heroImageIn 1.35s cubic-bezier(.22, .61, .36, 1) both;
}

.hero-shade {
  position: absolute;
  inset: var(--header-height) 0 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(1, 40, 31, .92) 0%, rgba(1, 48, 36, .78) 43%, rgba(1, 61, 46, .34) 72%, rgba(1, 61, 46, .18) 100%),
    linear-gradient(0deg, rgba(1, 35, 27, .68) 0%, transparent 36%);
  opacity: var(--hero-shade-opacity, 1);
  will-change: opacity;
}

.hero-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(120px, 16vh, 190px);
  padding-bottom: 86px;
}

.hero-copy { max-width: 920px; }

.eyebrow {
  margin: 0 0 24px;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vg-earth);
}

.eyebrow-dark { color: var(--vg-green-mid); }

h1, h2, p { text-wrap: pretty; }

h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(3.8rem, 7.2vw, 7.7rem);
  line-height: .93;
  letter-spacing: -.055em;
  font-weight: 800;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .16);
}

.hero-lead {
  max-width: 690px;
  margin: 30px 0 0;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.75;
  color: rgba(251, 251, 247, .82);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 50px;
  padding: 0 20px;
  font-size: .88rem;
  font-weight: 600;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

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

.button-primary {
  background: var(--vg-earth);
  color: var(--vg-green-deep);
  border: 1px solid var(--vg-earth);
}

.button-primary:hover {
  background: var(--vg-beige);
  border-color: var(--vg-beige);
}

.button-ghost {
  border: 1px solid rgba(251, 251, 247, .5);
  color: var(--vg-offwhite);
  background: rgba(1, 61, 46, .12);
  backdrop-filter: blur(6px);
}

.button-ghost:hover {
  border-color: var(--vg-offwhite);
  background: rgba(251, 251, 247, .1);
}

.hero-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(251, 251, 247, .52);
}

.company-intro {
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding: 132px 0 126px;
  background: var(--vg-offwhite);
}

.intro-grid {
  display: grid;
  grid-template-columns: 120px minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 56px;
  align-items: start;
}

.section-marker {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vg-green-mid);
}

.section-marker > span:last-child {
  grid-column: 1 / -1;
  margin-top: 8px;
  color: var(--text-soft);
}

.marker-line { height: 1px; background: var(--line); }

.intro-heading h2 {
  margin: 0;
  font-size: clamp(2.5rem, 4.7vw, 5.3rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 700;
  color: var(--vg-green-deep);
}

.intro-body { padding-top: 42px; }

.intro-body p {
  margin: 0 0 20px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-soft);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--vg-green-deep);
  font-size: .88rem;
  font-weight: 600;
}

.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

.projects-section {
  position: relative;
  min-height: 118svh;
  padding: 128px 0 116px;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid rgba(1, 61, 46, .08);
}

.projects-content { width: 100%; }

.projects-heading {
  text-align: center;
  margin-bottom: 62px;
}

.projects-heading .eyebrow { margin-bottom: 18px; }

.projects-heading h2 {
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(3rem, 6.2vw, 6.5rem);
  line-height: .96;
  letter-spacing: -.05em;
  font-weight: 800;
  color: #161914;
}

.projects-heading > p:last-child {
  max-width: 700px;
  margin: 24px auto 0;
  font-size: 1rem;
  line-height: 1.7;
  color: #58635e;
}

.projects-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 36px 0 48px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.projects-carousel.is-dragging { cursor: grabbing; }

.projects-carousel::before,
.projects-carousel::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: min(10vw, 150px);
  pointer-events: none;
}

.projects-carousel::before {
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,0) 100%);
}

.projects-carousel::after {
  right: 0;
  background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,0) 100%);
}

.projects-track {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: max-content;
  padding-inline: 10px;
  transform: translate3d(var(--carousel-x, 0px), 0, 0);
  will-change: transform;
}

.project-card {
  --lift: 0px;
  --tilt: 0deg;
  position: relative;
  width: clamp(250px, 24vw, 350px);
  height: clamp(330px, 34vw, 470px);
  flex: 0 0 auto;
  overflow: hidden;
  background: #d7d7d1;
  transform: translateY(var(--lift)) rotate(var(--tilt));
  transform-origin: 50% 100%;
  outline: none;
}

.project-card:nth-child(6n + 1) { --lift: 0px; --tilt: 2.4deg; }
.project-card:nth-child(6n + 2) { --lift: 20px; --tilt: 1.2deg; }
.project-card:nth-child(6n + 3) { --lift: 32px; --tilt: .35deg; }
.project-card:nth-child(6n + 4) { --lift: 32px; --tilt: -.35deg; }
.project-card:nth-child(6n + 5) { --lift: 20px; --tilt: -1.2deg; }
.project-card:nth-child(6n + 6) { --lift: 0px; --tilt: -2.4deg; }

.project-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: filter .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}

.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 30, 23, .12), rgba(1, 43, 33, .76));
  opacity: 0;
  transition: opacity .4s ease;
}

.project-overlay {
  position: absolute;
  z-index: 2;
  inset: auto 24px 24px;
  color: #fff;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .38s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}

.project-kicker {
  margin: 0 0 10px;
  color: var(--vg-beige);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.project-overlay h3 {
  margin: 0;
  max-width: 280px;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 700;
}

.project-overlay dl {
  margin: 22px 0 0;
  display: grid;
  gap: 10px;
}

.project-overlay dl div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: baseline;
}

.project-overlay dt {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.64);
}

.project-overlay dd {
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
  font-weight: 500;
}

.project-card:hover > img,
.project-card:focus > img,
.project-card:focus-visible > img {
  filter: blur(5px) brightness(.68) saturate(.72);
  transform: scale(1.075);
}

.project-card:hover::after,
.project-card:focus::after,
.project-card:focus-visible::after { opacity: 1; }

.project-card:hover .project-overlay,
.project-card:focus .project-overlay,
.project-card:focus-visible .project-overlay {
  opacity: 1;
  transform: translateY(0);
}

.projects-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 42px;
}

.projects-footer > p {
  max-width: 670px;
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: #58635e;
}

.projects-footer .text-link { margin-top: 24px; }

.next-stage {
  background: var(--vg-beige);
  border-top: 1px solid rgba(1, 61, 46, .08);
}

.next-stage-inner { padding: 28px 0; }

.next-stage p {
  margin: 0;
  font-size: .76rem;
  line-height: 1.6;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(1, 61, 46, .62);
}

:focus-visible {
  outline: 2px solid var(--vg-earth);
  outline-offset: 4px;
}

@keyframes heroImageIn {
  from { opacity: .25; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 1040px) {
  .intro-grid { grid-template-columns: 90px 1fr; }
  .intro-body {
    grid-column: 2;
    padding-top: 0;
    max-width: 680px;
  }

  .projects-section { min-height: 105svh; }
}

@media (max-width: 860px) {
  :root { --header-height: 76px; }

  .container { width: min(calc(100% - 36px), var(--max-width)); }

  .brand { min-width: 0; }
  .brand-mark { width: 48px; height: 42px; }
  .brand-wordmark strong { font-size: .79rem; }
  .brand-wordmark > span { font-size: .47rem; }

  .menu-toggle { display: block; }

  .main-nav {
    position: fixed;
    inset: var(--header-height) 0 auto;
    display: grid;
    gap: 0;
    padding: 18px;
    background: var(--vg-offwhite);
    border-top: 1px solid rgba(1, 61, 46, .08);
    box-shadow: 0 18px 36px rgba(1, 61, 46, .08);
    transform: translateY(-130%);
    opacity: 0;
    visibility: hidden;
    transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .main-nav a {
    padding: 16px 4px;
    border-bottom: 1px solid rgba(1, 61, 46, .08);
  }

  .main-nav a::after { display: none; }

  .nav-cta {
    margin-top: 12px;
    text-align: center;
  }

  .hero-inner {
    padding-top: 110px;
    padding-bottom: 62px;
  }

  .hero-footer { display: none; }

  .hero-shade {
    background:
      linear-gradient(90deg, rgba(1, 40, 31, .92) 0%, rgba(1, 48, 36, .72) 70%, rgba(1, 61, 46, .32) 100%),
      linear-gradient(0deg, rgba(1, 35, 27, .62) 0%, transparent 36%);
  }

  .company-intro {
    min-height: auto;
    padding: 96px 0 92px;
  }

  .projects-section {
    min-height: auto;
    padding: 104px 0 92px;
  }

  .projects-heading { margin-bottom: 46px; }
  .projects-carousel { padding-top: 20px; }

  .project-card {
    width: 290px;
    height: 390px;
  }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 28px), var(--max-width)); }

  .brand-mark { width: 42px; height: 38px; }
  .brand-wordmark strong { font-size: .7rem; }
  .brand-wordmark > span { font-size: .42rem; letter-spacing: .22em; }

  .hero { min-height: 88svh; }

  .hero-inner {
    align-items: flex-end;
    padding-top: 118px;
    padding-bottom: 70px;
  }

  .hero-media img { object-position: 58% center; }

  h1 {
    font-size: clamp(3rem, 14vw, 4.8rem);
    line-height: .96;
  }

  .hero-lead { line-height: 1.65; }

  .hero-actions {
    display: grid;
    width: 100%;
  }

  .button { width: 100%; }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .section-marker,
  .intro-body { grid-column: auto; }

  .intro-body { padding-top: 0; }

  .company-intro { padding: 78px 0 74px; }

  .projects-section { padding: 82px 0 76px; }

  .projects-heading h2 {
    font-size: clamp(2.8rem, 14vw, 4.5rem);
  }

  .projects-heading > p:last-child { font-size: .94rem; }

  .projects-carousel::before,
  .projects-carousel::after { width: 36px; }

  .projects-track { gap: 10px; }

  .project-card {
    width: 250px;
    height: 330px;
  }

  .project-card:nth-child(6n + 1) { --lift: 0px; --tilt: 1.8deg; }
  .project-card:nth-child(6n + 2) { --lift: 12px; --tilt: .9deg; }
  .project-card:nth-child(6n + 3) { --lift: 18px; --tilt: .2deg; }
  .project-card:nth-child(6n + 4) { --lift: 18px; --tilt: -.2deg; }
  .project-card:nth-child(6n + 5) { --lift: 12px; --tilt: -.9deg; }
  .project-card:nth-child(6n + 6) { --lift: 0px; --tilt: -1.8deg; }

  .project-overlay { inset: auto 18px 18px; }
  .projects-footer { margin-top: 30px; }
}

@media (hover: none) {
  .project-card:focus > img {
    filter: blur(4px) brightness(.66) saturate(.72);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  [data-scroll-content] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-media img { transform: none !important; }
}