@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --ink: #111a22;
  --ink-soft: #19242e;
  --paper: #f3f0e8;
  --mist: #c1cbc7;
  --lime: #d2f57b;
  --line: rgba(255, 255, 255, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lime); outline-offset: 5px; }
::selection { background: var(--lime); color: var(--ink); }

.skip-link {
  position: absolute;
  z-index: 50;
  top: -5rem;
  left: 1rem;
  padding: .7rem 1rem;
  background: var(--lime);
  color: var(--ink);
}
.skip-link:focus { top: 1rem; }

.site-shell { min-height: 100vh; overflow: hidden; }
.site-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  min-height: 104px;
  margin: 0 4.2vw;
  border-bottom: 1px solid var(--line);
}
.brand {
  width: max-content;
  text-decoration: none;
  font: 800 2rem/1 'Manrope', 'Segoe UI', sans-serif;
  letter-spacing: -.14em;
}
.brand span { margin-left: .12em; }
.brand b { color: var(--lime); }
.header-note {
  color: var(--mist);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.header-link {
  justify-self: end;
  padding: .5rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--mist);
  font-size: .95rem;
  font-weight: 700;
  transition: color .25s, border-color .25s;
}
.header-link span { padding-left: 1.4rem; color: var(--lime); }
.header-link:hover { color: var(--lime); border-color: var(--lime); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  min-height: min(820px, calc(100svh - 104px));
  isolation: isolate;
}
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.hero::before {
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 68% 47%, rgba(59, 99, 95, .15), transparent 32%),
    linear-gradient(135deg, #111a22, #17222b 66%, #101821);
}
.hero::after {
  inset: 0;
  z-index: 2;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.hero-copy {
  z-index: 3;
  align-self: center;
  padding: clamp(5rem, 9vh, 8rem) 0 6rem 8.4vw;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.3rem;
  color: var(--lime);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow-line { display: block; width: 40px; height: 1px; background: var(--lime); }
h1, h2, p { margin-top: 0; }
h1 {
  margin: 0;
  font: 800 clamp(5.5rem, 10.4vw, 12.5rem)/.88 'Manrope', 'Segoe UI', sans-serif;
  letter-spacing: -.105em;
}
h1 > span { color: var(--lime); }
.period { color: var(--paper); }
.hero-statement {
  margin: 3.2rem 0 1.1rem;
  font-size: clamp(1.35rem, 2.05vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: -.04em;
  font-weight: 500;
}
.hero-statement em,
.contact-main h2 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}
.hero-statement em { color: var(--lime); }
.hero-description {
  max-width: 34rem;
  color: var(--mist);
  font-size: 1.04rem;
  line-height: 1.65;
}
.round-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  margin-top: 3.4rem;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.round-link-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.45rem;
  transition: transform .3s, background .3s, color .3s;
}
.round-link:hover .round-link-icon { transform: rotate(-45deg); background: var(--lime); color: var(--ink); }

.hero-art {
  position: relative;
  align-self: stretch;
  min-height: 700px;
  overflow: hidden;
}
.art-glow {
  position: absolute;
  inset: 9% -7% 0 -15%;
  background: radial-gradient(circle, rgba(202, 244, 149, .16) 0, rgba(75, 144, 134, .12) 27%, transparent 58%);
  filter: blur(10px);
}
.art-orbit,
.art-disc,
.art-core { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.art-orbit { border: 1px solid rgba(214, 239, 213, .16); }
.orbit-one { width: min(55vw, 780px); aspect-ratio: 1; }
.orbit-two { width: min(44vw, 610px); aspect-ratio: 1; border-style: dashed; opacity: .58; animation: orbit-spin 100s linear infinite; }
.orbit-three { width: min(34vw, 475px); aspect-ratio: 1; border-color: rgba(214, 239, 213, .22); }
.art-disc {
  width: min(29vw, 390px);
  aspect-ratio: 1;
  border: 1px solid rgba(226, 255, 198, .48);
  background:
    radial-gradient(circle at 32% 26%, rgba(230, 255, 191, .98), transparent 9%),
    radial-gradient(circle at 36% 30%, #bed7a8 1%, #5d927f 22%, #294f53 52%, #1d323f 72%);
  box-shadow: inset -26px -45px 60px rgba(4, 19, 28, .66), 0 0 90px rgba(122, 191, 144, .22), 0 0 0 15px rgba(201, 243, 185, .025);
  animation: float 8s ease-in-out infinite;
}
.art-disc::before {
  content: '';
  position: absolute;
  inset: -11%;
  border: 1px solid rgba(211, 247, 176, .24);
  border-radius: 50%;
  transform: rotate(-27deg) scaleY(.42);
  box-shadow: 0 -1px 4px rgba(230, 255, 185, .36);
}
.art-core {
  width: 15px;
  height: 15px;
  margin: -168px 0 0 183px;
  background: var(--lime);
  box-shadow: 0 0 0 7px rgba(210, 245, 123, .13), 0 0 30px var(--lime);
}
.art-crosshair {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: .56;
}
.art-crosshair::before,
.art-crosshair::after { content: ''; position: absolute; background: var(--mist); }
.art-crosshair::before { top: 6px; width: 14px; height: 1px; }
.art-crosshair::after { left: 6px; width: 1px; height: 14px; }
.crosshair-top { top: 19%; right: 17%; }
.crosshair-bottom { bottom: 18%; left: 12%; }
.art-caption {
  position: absolute;
  right: 10%;
  bottom: 9%;
  color: var(--mist);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
}
.hero-index {
  position: absolute;
  z-index: 3;
  bottom: 2rem;
  left: 4.2vw;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--mist);
  font-size: .72rem;
  letter-spacing: .1em;
}
.hero-index span:first-child { color: var(--lime); }
.hero-index i { display: block; width: 60px; height: 1px; background: var(--line); }

.contact-section {
  position: relative;
  padding: clamp(5rem, 11vw, 10rem) 8.4vw 2.4rem;
  background: var(--paper);
  color: var(--ink);
}
.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 8.4vw;
  width: 1px;
  height: 38%;
  background: rgba(17, 26, 34, .15);
}
.contact-kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: #40514d;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.small-square { width: 10px; height: 10px; background: #4b6b62; }
.contact-main { max-width: 1050px; margin: 4.5rem 0 9rem; }
.contact-main h2 {
  margin-bottom: 2rem;
  font: 800 clamp(3.5rem, 7.5vw, 8.5rem)/1.02 'Manrope', 'Segoe UI', sans-serif;
  letter-spacing: -.09em;
}
.contact-main h2 em { color: #547166; letter-spacing: -.075em; }
.contact-main p { color: #41514d; font-size: 1.14rem; line-height: 1.6; }
.contact-button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  min-width: 17.5rem;
  margin-top: 1.7rem;
  padding: 1.15rem 1.2rem 1.15rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 100px;
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s, background .25s, color .25s;
}
.contact-button:hover { transform: translateY(-3px); background: #345249; }
.button-arrow { font-size: 1.4rem; line-height: 1; }
.contact-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(17, 26, 34, .18);
  color: #475851;
  font-size: .86rem;
}
.contact-bottom a { text-decoration: none; }
.contact-bottom a:hover { text-decoration: underline; }

@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes float { 50% { transform: translate(-50%, -53%); } }
@media (max-width: 1000px) {
  .site-header { min-height: 86px; }
  .header-note { display: none; }
  .site-header { grid-template-columns: 1fr 1fr; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 7rem 7vw 2rem; }
  .hero-art { min-height: 490px; }
  .art-orbit.orbit-one { width: 650px; }
  .art-orbit.orbit-two { width: 510px; }
  .art-orbit.orbit-three { width: 390px; }
  .art-disc { width: 320px; }
  .art-core { margin: -137px 0 0 150px; }
  .hero-index { bottom: 1rem; }
}
@media (max-width: 600px) {
  .site-header { margin: 0 6vw; min-height: 72px; }
  .brand { font-size: 1.7rem; }
  .header-link { font-size: .85rem; }
  .hero-copy { padding: 6rem 7vw 1rem; }
  .eyebrow { margin-bottom: 1.8rem; font-size: .72rem; }
  h1 { font-size: clamp(4.35rem, 15.5vw, 6.5rem); }
  .hero-statement { margin-top: 2.6rem; font-size: 1.4rem; }
  .hero-description { font-size: .96rem; }
  .round-link { margin-top: 2.4rem; }
  .round-link-icon { width: 3.4rem; height: 3.4rem; }
  .hero-art { min-height: 350px; }
  .art-orbit.orbit-one { width: 470px; }
  .art-orbit.orbit-two { width: 385px; }
  .art-orbit.orbit-three { width: 300px; }
  .art-disc { width: 250px; }
  .art-core { margin: -106px 0 0 117px; }
  .art-caption { right: 7%; bottom: 14%; font-size: .58rem; }
  .hero-index { display: none; }
  .contact-section { padding: 5.5rem 7vw 2rem; }
  .contact-section::before { display: none; }
  .contact-main { margin: 3rem 0 6rem; }
  .contact-main h2 { font-size: clamp(3.3rem, 12vw, 5.4rem); }
  .contact-bottom { flex-wrap: wrap; }
  .contact-bottom span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}