@font-face {
  font-family: Geist;
  src: url("/assets/geist.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --ink: #131313;
  --night: #0a0a0a;
  --paper: #f0f0f0;
  --gray: #777777;
  --green: #00b000;
  --green-dark: #008400;
  --lime: #88ef1b;
  --mint: #bfebbf;
  --gutter: clamp(1.125rem, 4.8vw, 5rem);
  font-family: Geist, Arial, sans-serif;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
section[id], article[id] { scroll-margin-top: 1.5rem; }
::selection { color: var(--ink); background: var(--lime); }

:focus-visible {
  outline: 3px solid #238d0e;
  outline-offset: 5px;
}

.site-header :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--lime); }

.shell {
  width: min(82rem, calc(100% - var(--gutter) - var(--gutter)));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  z-index: 5;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: var(--ink);
  background: var(--lime);
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

.site-header { background: var(--ink); }

.header-inner {
  min-height: 5.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #ffffff26;
}

.header-brand { flex: 0 0 auto; }
.header-brand img { width: clamp(6rem, 10vw, 8.5rem); height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3.4vw, 3.1rem);
  font-size: .91rem;
  font-weight: 560;
}

.nav a,
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  transition: color .2s ease;
}

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

.hero {
  background: radial-gradient(ellipse at 74% 100%, #0c2814, transparent 60%), var(--ink);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: clamp(1.7rem, 4vw, 4.6rem);
  padding-block: clamp(2.3rem, 4.5vw, 4.6rem) clamp(2.8rem, 5vw, 5.2rem);
}

.hero-copy {
  align-self: center;
  padding-block: 1.6rem;
}

.eyebrow {
  font-size: clamp(.65rem, 1.1vw, .76rem);
  font-weight: 670;
  line-height: 1.5;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.hero-label {
  display: flex;
  align-items: center;
  gap: .62rem;
  margin-bottom: clamp(1.1rem, 2.2vw, 2rem);
  color: var(--mint);
}

.hero-label::before {
  width: .52rem;
  height: .52rem;
  background: var(--lime);
  content: "";
}

.hero h1 {
  font-size: clamp(3.35rem, 6.6vw, 6.55rem);
  font-weight: 790;
  line-height: .945;
  letter-spacing: -.064em;
}

.hero h1 em {
  color: var(--lime);
  font-style: normal;
}

.hero-description {
  max-width: 31ch;
  margin-top: clamp(1.35rem, 2.4vw, 2.1rem);
  color: #d2d8d0;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.52;
  letter-spacing: -.022em;
}

.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.9rem;
  min-height: 3.3rem;
  margin-top: clamp(1.35rem, 2.4vw, 2.15rem);
  padding: .7rem 1.05rem .7rem 1.15rem;
  color: var(--night);
  background: var(--lime);
  border: 1px solid var(--lime);
  font-size: .97rem;
  font-weight: 740;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}

.primary-link:hover { background: var(--mint); border-color: var(--mint); }

.arrow {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.arrow::before {
  position: absolute;
  top: 50%;
  left: 12%;
  width: 72%;
  height: 1.5px;
  background: currentColor;
  content: "";
}

.arrow::after {
  position: absolute;
  top: 50%;
  right: 17%;
  width: .4rem;
  height: .4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-43%) rotate(45deg);
  content: "";
}

.arrow-down { transform: rotate(90deg); }
.arrow-up { transform: rotate(-90deg); }

.hero-photo {
  position: relative;
  min-height: clamp(27rem, 43vw, 39.5rem);
  overflow: hidden;
  isolation: isolate;
  background: #234234;
}

.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  filter: saturate(.7) contrast(1.04);
  animation: settle .9s cubic-bezier(.2,.7,.3,1) both;
}

.hero-photo::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #082b241c 30%, transparent 60%, #0a170dee 100%);
  content: "";
}

.photo-corner {
  position: absolute;
  z-index: 2;
  top: 1.1rem;
  right: 1.1rem;
  width: 1.9rem;
  height: 1.9rem;
  border-top: 2px solid var(--lime);
  border-right: 2px solid var(--lime);
}

.brand-star {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 2.1vw, 2rem);
  bottom: clamp(1rem, 2.1vw, 2rem);
  width: clamp(2.7rem, 5.7vw, 5.7rem);
  aspect-ratio: 1;
  background: var(--lime);
  clip-path: polygon(50% 0%, 58% 34%, 78% 7%, 72% 40%, 100% 27%, 79% 50%, 100% 63%, 73% 65%, 88% 94%, 61% 75%, 56% 100%, 46% 76%, 24% 96%, 29% 70%, 0% 79%, 21% 57%, 0% 47%, 28% 43%, 13% 16%, 40% 32%);
}

.hero-photo figcaption {
  position: absolute;
  z-index: 2;
  bottom: clamp(1rem, 2.1vw, 2rem);
  left: clamp(1rem, 2.1vw, 2rem);
  padding-left: .7rem;
  border-left: 2px solid var(--lime);
  color: white;
  font-size: .77rem;
  font-weight: 610;
  line-height: 1.5;
  letter-spacing: .025em;
}

@keyframes settle {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}

.services {
  padding-block: clamp(3.5rem, 7vw, 7rem);
  color: var(--ink);
  background: var(--paper);
}

.services-intro {
  display: grid;
  grid-template-columns: 1fr minmax(13rem, 27%);
  align-items: end;
  gap: 1.1rem 2rem;
  margin-bottom: clamp(1.65rem, 4vw, 3.1rem);
}

.section-title {
  font-size: clamp(2.7rem, 6vw, 6rem);
  font-weight: 780;
  line-height: .98;
  letter-spacing: -.081em;
}

.section-title span { color: #008000; }

.services-intro p,
.about-copy p {
  max-width: 33ch;
  font-size: clamp(1rem, 1.34vw, 1.2rem);
  line-height: 1.52;
  letter-spacing: -.024em;
}

.services-intro p { padding-bottom: .1rem; color: #4c514b; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(.85rem, 2vw, 1.6rem);
}

.service {
  min-width: 0;
  border: 1px solid #d6dad4;
  background: #fbfbfa;
}

.service-art {
  position: relative;
  height: clamp(8.5rem, 15vw, 13rem);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.service-art > :first-child { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.service:hover .service-art > :first-child { transform: translateY(-4px); }

.art-marketing {
  background: radial-gradient(ellipse at 53% 45%, #008400b0, transparent 60%), linear-gradient(111deg, #0a0a0a, #0a3b16 58%, #007714);
}

.art-marketing::before,
.art-systems::before,
.about-mark::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 1.45rem 1.45rem;
  content: "";
}

.art-marketing::before { color: #bfebbf27; }

.target {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(7.2rem, 12vw, 11rem);
  aspect-ratio: 1;
  color: var(--lime);
}

.target::before,
.target::after {
  position: absolute;
  z-index: -1;
  background: #bfebbf85;
  content: "";
}

.target::before { width: 128%; height: 1px; }
.target::after { width: 1px; height: 105%; }
.target i { position: absolute; width: 100%; aspect-ratio: 1; border: 1px solid; border-radius: 50%; }
.target i:nth-child(2) { width: 72%; }
.target i:nth-child(3) { width: 45%; border-width: 2px; }
.target i:nth-child(4) { width: 15%; background: currentColor; box-shadow: 0 0 1.2rem #88ef1b84; }

.art-media { background: linear-gradient(120deg, #101411, #19291e 53%, #111713); }

.media-frames {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .42rem;
  width: clamp(13.5rem, 31vw, 24rem);
  height: 64%;
  padding: .32rem;
  border: 1px solid #bfebbf4f;
}

.media-frames i {
  position: relative;
  background: radial-gradient(ellipse at 10% 108%, #549240, transparent 78%), #23382b;
  border: 1px solid #bfebbf32;
}

.media-frames i:nth-child(3) {
  background: repeating-linear-gradient(144deg, #3a624347 0 1px, transparent 1px 9px), #2d4738;
}

.media-frames .media-play {
  display: grid;
  place-items: center;
  color: #102809;
  background: linear-gradient(135deg, var(--mint), var(--lime));
}

.media-play::after {
  width: 0;
  height: 0;
  border-block: .78rem solid transparent;
  border-left: 1.15rem solid currentColor;
  content: "";
}

.media-track {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 65%;
  width: 1px;
  background: #a7f458;
}

.media-track::before {
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 6px;
  background: #a7f458;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
}

.art-web {
  background: repeating-linear-gradient(125deg, #fff3 0 1px, transparent 1px 14px),
    linear-gradient(118deg, #b1dc95, #d9efd7 56%, #c1e7b9);
}

.web-window {
  width: clamp(10.8rem, 22vw, 16.9rem);
  height: 75%;
  margin-right: 2.6rem;
  padding: .52rem;
  border: 1px solid #244b25;
  border-radius: .45rem;
  background: #f8faf5;
  box-shadow: .7rem .8rem 0 #1736191f;
}

.web-bar {
  position: relative;
  display: block;
  height: .75rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid #d5e0d2;
}

.web-bar::before {
  position: absolute;
  top: .12rem;
  left: .12rem;
  width: .19rem;
  height: .19rem;
  border-radius: 50%;
  background: #254b25;
  box-shadow: .33rem 0 #6c9668, .66rem 0 #a0c89d;
  content: "";
}

.web-content {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: 1.15fr .4fr .42fr;
  gap: .23rem .44rem;
  height: calc(100% - 1.15rem);
  padding: .3rem;
}

.web-content i:first-child {
  grid-row: 1 / 4;
  grid-column: 2;
  background: linear-gradient(135deg, #27572e, #5a9b32 68%, var(--lime));
}

.web-content i:nth-child(2) { margin-block: .18rem; background: #202f1f; }
.web-content i:nth-child(3) { width: 82%; background: #cadcc7; }
.web-content i:nth-child(4) { width: 60%; background: var(--lime); }

.web-phone {
  position: absolute;
  right: 23%;
  bottom: 10%;
  display: grid;
  grid-template-rows: 1fr .2fr;
  gap: .25rem;
  width: clamp(2.65rem, 4.7vw, 3.9rem);
  height: 56%;
  padding: .37rem .25rem;
  border: 2px solid #233a22;
  border-radius: .47rem;
  background: #f8faf5;
  box-shadow: .28rem .3rem 0 #17361922;
}

.web-phone i:first-child { background: linear-gradient(140deg, #27572e, #81bc39); }
.web-phone i:last-child { background: var(--lime); }

.art-systems { background: radial-gradient(ellipse at 50% 48%, #204227, transparent 70%), #131a15; }
.art-systems::before { color: #bfebbf1a; }

.systems-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  gap: .15rem 1.25rem;
  width: clamp(13rem, 27vw, 21rem);
  height: 74%;
}

.systems-flow::before,
.systems-flow::after {
  position: absolute;
  z-index: -1;
  background: #a8e39a;
  content: "";
}

.systems-flow::before { inset: 50% 17% auto 17%; height: 1px; }
.systems-flow::after { inset: 24% 17% 24% auto; width: 1px; }

.systems-flow i {
  display: grid;
  place-items: center;
  width: clamp(2.1rem, 4.5vw, 3.65rem);
  aspect-ratio: 1;
  border: 1px solid #a8e39a;
  border-radius: .38rem;
  color: var(--mint);
  background: #203927;
}

.systems-flow i::after {
  width: 40%;
  height: 40%;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.systems-flow i:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.systems-flow i:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
  color: #17321b;
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 1.1rem #88ef1b49;
}
.systems-flow i:nth-child(3) { grid-column: 3; grid-row: 1; }
.systems-flow i:nth-child(4) { grid-column: 3; grid-row: 2; }

.service-body { padding: clamp(1.1rem, 2.8vw, 2.15rem); padding-bottom: .55rem; }

.service h3 {
  margin-bottom: .58rem;
  font-size: clamp(1.42rem, 2.8vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -.062em;
  font-weight: 720;
}

.service-body > p {
  max-width: 45ch;
  min-height: 3.2em;
  margin-bottom: 1rem;
  color: #4c514b;
  font-size: clamp(.94rem, 1.15vw, 1.07rem);
  line-height: 1.55;
}

.service-details { border-top: 1px solid #dce0d9; }

.service-details summary {
  min-height: 2.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: #26532a;
  font-size: .86rem;
  font-weight: 680;
  list-style: none;
  cursor: pointer;
}

.service-details summary::-webkit-details-marker { display: none; }
.service-details summary:hover { color: #007400; }

.plus {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #bdcfb9;
  border-radius: 50%;
  transition: background .2s ease;
}

.plus::before,
.plus::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: .53rem;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  content: "";
}

.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.service-details[open] .plus::after { display: none; }
.service-details summary:hover .plus,
.service-details[open] .plus { background: var(--mint); }

.service-details ul {
  margin: 0;
  padding: .05rem 0 .65rem 1.15rem;
  color: #3c483b;
  font-size: .91rem;
  line-height: 1.52;
}

.service-details li + li { margin-top: .33rem; }
.service-details li::marker { color: #008000; }

.about {
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(107deg, var(--lime) 0%, #a9ed6e 53%, var(--mint) 100%);
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr .75fr;
  align-items: center;
  gap: 1.7rem clamp(2rem, 6vw, 6rem);
  padding-block: clamp(3.25rem, 7.5vw, 7rem);
}

.about-copy p {
  max-width: 43ch;
  margin-top: 1.1rem;
}

.about-mark {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(8rem, 17vw, 13.5rem);
  padding: clamp(1.4rem, 3.5vw, 3.4rem);
  border: 1px solid #28512045;
}

.about-mark::before { color: #214b181c; }
.about-mark img { width: min(100%, 21rem); height: auto; }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .2rem 1.2rem;
  min-height: 5.1rem;
  padding-block: .9rem;
  color: #d1d6cf;
  font-size: .85rem;
}

.footer-inner p span { margin-inline: .3em; color: var(--lime); }
.footer-inner a { gap: .35rem; font-weight: 560; }

@media (max-width: 900px) {
  .hero-inner { gap: 1.35rem; }
  .hero h1 { font-size: clamp(3.25rem, 6.75vw, 5rem); }
  .hero-photo { min-height: 25rem; }
}

@media (max-width: 760px) {
  .header-inner { min-height: 4.15rem; }
  .nav { font-size: .83rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 2.25rem; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(3.4rem, 10.3vw, 5.2rem); }
  .hero-photo {
    min-height: 0;
    aspect-ratio: 1.42;
  }
  .hero-photo img { object-position: center 56%; }
  .services-intro { grid-template-columns: 1fr; }
  .service-body > p { min-height: 0; }
  .about-inner { grid-template-columns: 1fr; }
  .about-mark { width: min(100%, 29rem); }
}

@media (max-width: 540px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-art { height: 8.65rem; }
  .service-body { padding-bottom: .45rem; }
}

@media (max-width: 355px) {
  .hero h1 { font-size: 2.9rem; }
  .nav { gap: .75rem; font-size: .77rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .service:hover .service-art > :first-child { transform: none; }
}