:root {
  --ink:#09100e;
  --ink2:#111a17;
  --paper:#f4f5f0;
  --white:#fafbf8;
  --text:#17201d;
  --muted:#69736e;
  --green:#789b69;
  --green2:#9dbc8d;
  --green-dark:#36553b;
  --line:rgba(18,30,25,.14);
  --darkline:rgba(255,255,255,.14);
  --max:1240px;
}

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

html {
  scroll-behavior:smooth;
}

body {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper);
  color:var(--text);
  line-height:1.55;
}

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

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


/* HEADER */

.header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:10;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.nav-wrap {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo {
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-mark {
  font-size:2rem;
  font-weight:300;
  letter-spacing:.17em;
}

.logo-name {
  font-size:.57rem;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.15em;
  border-left:1px solid rgba(255,255,255,.35);
  padding-left:14px;
  max-width:160px;
}

.nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.nav a {
  color:rgba(255,255,255,.82);
}

.nav a:hover {
  color:var(--green2);
}

.nav-cta {
  border:1px solid rgba(157,188,141,.7);
  padding:10px 16px;
}

.nav-cta span,
.button span {
  margin-left:10px;
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  cursor:pointer;
}

.menu-toggle span {
  display:block;
  width:25px;
  height:2px;
  background:#fff;
  margin:5px;
}


/* HERO */

.hero {
  min-height:720px;
  background:var(--ink);
  position:relative;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:center;
}

.hero-image {
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(5,10,8,.98) 0%,
      rgba(5,10,8,.86) 35%,
      rgba(5,10,8,.38) 75%,
      rgba(5,10,8,.55)
    ),
    url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=2200&q=88")
    center/cover;
  filter:saturate(.58);
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 78% 48%,
      transparent 0 18%,
      rgba(0,0,0,.25) 58%,
      rgba(0,0,0,.48)
    );
}

.hero-grid {
  position:absolute;
  inset:82px 0 0;
  background-image:
    linear-gradient(
      rgba(255,255,255,.09) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.09) 1px,
      transparent 1px
    );
  background-size:74px 74px;
  opacity:.22;
  mask-image:linear-gradient(
    90deg,
    black,
    transparent 65%
  );
}

.hero-content {
  position:relative;
  z-index:2;
  padding-top:76px;
}

.eyebrow {
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--green2);
  margin-bottom:20px;
}

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

.hero h1 {
  font-size:clamp(3.7rem,7.2vw,7.2rem);
  line-height:.9;
  letter-spacing:-.065em;
  text-transform:uppercase;
  max-width:930px;
}

h1 em,
h2 em {
  font-style:normal;
  color:var(--green2);
}

.hero-lede {
  max-width:600px;
  margin:30px 0;
  color:rgba(255,255,255,.76);
  font-size:1rem;
}

.hero-actions {
  display:flex;
  gap:12px;
  align-items:center;
}

.button {
  display:inline-flex;
  align-items:center;
  padding:14px 19px;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.2s;
}

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

.button-green {
  background:var(--green);
  color:#071008;
}

.button-green:hover {
  background:var(--green2);
}

.button-quiet {
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
}

.hero-meta {
  position:absolute;
  right:28px;
  bottom:26px;
  display:flex;
  gap:24px;
  color:rgba(255,255,255,.5);
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}


/* PROOF */

.proof {
  background:#fff;
  padding:38px 0 34px;
  border-bottom:1px solid var(--line);
}

.proof-intro {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:28px;
}

.proof-intro p:last-child {
  font-size:.7rem;
  color:var(--muted);
  max-width:520px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

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

.proof-grid > div {
  text-align:center;
  padding:25px 15px 10px;
  border-right:1px solid var(--line);
}

.proof-grid > div:last-child {
  border-right:0;
}

.proof-grid strong {
  display:block;
  color:var(--green-dark);
  font-size:clamp(2.6rem,4vw,4.2rem);
  line-height:1;
  letter-spacing:-.06em;
}

.proof-grid strong span {
  font-size:.52em;
}

.proof-grid small {
  display:block;
  margin-top:9px;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* GENERAL SECTIONS */

.section {
  padding:108px 0;
}

.capabilities {
  background:var(--paper);
}

.section-intro {
  display:grid;
  grid-template-columns:1.05fr .65fr;
  gap:100px;
  align-items:end;
}

.section-intro h2,
.system h2,
.industries h2,
.about h2,
.feature h2 {
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.section-intro > p {
  color:var(--muted);
  font-size:.9rem;
  max-width:440px;
}


/* CAPABILITIES */

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

.capability-row article {
  padding:28px 34px 0;
  border-right:1px solid var(--line);
}

.capability-row article:first-child {
  padding-left:0;
}

.capability-row article:last-child {
  border-right:0;
}

.index {
  font-size:.6rem;
  color:var(--green-dark);
  font-weight:900;
  letter-spacing:.1em;
}

.capability-row h3 {
  font-size:2.3rem;
  line-height:1;
  letter-spacing:-.05em;
  text-transform:uppercase;
  margin:55px 0 18px;
}

.capability-row p {
  color:var(--muted);
  font-size:.83rem;
  max-width:330px;
  margin-bottom:25px;
}

.capability-row a {
  display:block;
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.capability-row a span {
  float:right;
  color:var(--green-dark);
}


/* APPROACH */

.section-dark {
  background:var(--ink);
  color:#fff;
}

.system {
  padding:105px 0;
}

.system-head {
  display:grid;
  grid-template-columns:1fr .5fr;
  gap:90px;
  align-items:end;
}

.system-head > p {
  color:rgba(255,255,255,.57);
  font-size:.87rem;
}

.system-line {
  display:grid;
  grid-template-columns:
    1fr 25px
    1fr 25px
    1fr 25px
    1fr 25px
    1fr;
  align-items:center;
  gap:8px;
  margin-top:60px;
}

.system-line > div {
  min-height:116px;
  border:1px solid rgba(157,188,141,.58);
  padding:15px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.system-line span {
  font-size:.55rem;
  color:var(--green2);
  font-weight:900;
}

.system-line b {
  font-size:.62rem;
  text-transform:uppercase;
  line-height:1.25;
}

.system-line i {
  font-style:normal;
  color:var(--green2);
  text-align:center;
}


/* INDUSTRIES */

.industries {
  background:#fff;
}

.compact {
  margin-bottom:60px;
}

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

.industry-list > div {
  display:grid;
  grid-template-columns:55px 1fr 30px;
  align-items:center;
  padding:25px 0;
  border-bottom:1px solid var(--line);
}

.industry-list span {
  font-size:.6rem;
  color:var(--green-dark);
  font-weight:900;
}

.industry-list strong {
  font-size:1.35rem;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

.industry-list b {
  color:var(--green-dark);
  font-size:1.1rem;
  text-align:right;
}


/* ABOUT */

.about {
  background:var(--paper);
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

.about-image {
  min-height:540px;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.45)
    ),
    url("https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1500&q=86")
    center/cover;
}

.about-copy h2 {
  margin-bottom:28px;
}

.about-copy > p {
  max-width:520px;
  color:var(--muted);
  font-size:.9rem;
  margin-top:18px;
}

.about-rule {
  width:45px;
  height:3px;
  background:var(--green);
  margin:32px 0 18px;
}

.about-copy .small-note {
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--green-dark);
}


/* FEATURE */

.feature {
  background:#fff;
}

.feature-grid {
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:110px;
  align-items:end;
}

.feature-grid > div:last-child {
  border-left:1px solid var(--line);
  padding-left:45px;
}

.feature-grid p {
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:22px;
}


/* CONTACT */

.contact {
  background:var(--green-dark);
  color:#fff;
  padding:105px 0;
}

.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  align-items:start;
}

.contact h2 {
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:.94;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.contact h2 em {
  font-style:normal;
  color:var(--green2);
}

.contact-copy > p:not(.eyebrow):not(.contact-note) {
  color:rgba(255,255,255,.72);
  font-size:.92rem;
  max-width:450px;
  margin-top:25px;
}

.contact-rule {
  width:45px;
  height:3px;
  background:var(--green2);
  margin:35px 0 18px;
}

.contact-note {
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,.58);
}

.form-wrap {
  background:#fff;
  padding:12px;
  min-height:510px;
}

.form-wrap iframe {
  display:block;
  width:100%;
  height:620px;
  border:0;
  max-width:100%;
}


/* FOOTER */

.footer {
  background:var(--ink);
  color:rgba(255,255,255,.5);
  padding:28px 0;
  font-size:.6rem;
}

.footer-inner {
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:30px;
  align-items:center;
}

.footer-inner > div {
  display:flex;
  gap:12px;
  align-items:baseline;
}

.footer strong {
  color:#fff;
  font-size:1rem;
  letter-spacing:.15em;
}


/* TABLET */

@media(max-width:900px) {

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

  .nav {
    gap:16px;
  }

  .section-intro,
  .system-head,
  .about-grid,
  .feature-grid,
  .contact-grid {
    grid-template-columns:1fr;
    gap:35px;
  }

  .capability-row {
    grid-template-columns:1fr;
  }

  .capability-row article,
  .capability-row article:first-child {
    padding:28px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .system-line {
    grid-template-columns:1fr;
    gap:8px;
  }

  .system-line i {
    transform:rotate(90deg);
  }

}


/* MOBILE */

@media(max-width:700px) {

  .menu-toggle {
    display:block;
  }

  .nav {
    display:none;
    position:absolute;
    top:70px;
    left:18px;
    right:18px;
    background:#0c1210;
    border:1px solid var(--darkline);
    padding:18px;
    flex-direction:column;
    align-items:stretch;
  }

  .nav.open {
    display:flex;
  }

  .nav a {
    padding:8px 0;
  }

  .nav-cta {
    text-align:center;
  }

  .logo-name {
    display:none;
  }

  .hero {
    min-height:720px;
  }

  .hero h1 {
    font-size:clamp(3.1rem,14vw,5.3rem);
  }

  .hero-meta {
    display:none;
  }

  .proof-intro {
    display:block;
  }

  .proof-intro p:last-child {
    margin-top:10px;
  }

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

  .proof-grid > div:nth-child(2) {
    border-right:0;
  }

  .proof-grid > div:nth-child(3),
  .proof-grid > div:nth-child(4) {
    border-top:1px solid var(--line);
  }

  .industry-list strong {
    font-size:1rem;
  }

  .about-image {
    min-height:360px;
  }

  .feature-grid > div:last-child {
    border-left:0;
    border-top:1px solid var(--line);
    padding:30px 0 0;
  }

  .form-wrap {
    padding:4px;
    min-height:620px;
  }

  .form-wrap iframe {
    height:700px;
  }

  .footer-inner {
    grid-template-columns:1fr;
    gap:12px;
  }

}


/* SMALL MOBILE */

@media(max-width:470px) {

  .container {
    width:calc(100% - 28px);
  }

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

  .button {
    justify-content:center;
  }

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

  .proof-grid > div {
    border-right:0 !important;
    border-top:0 !important;
    border-bottom:1px solid var(--line);
  }

  .proof-grid > div:last-child {
    border-bottom:0;
  }

}