:root {
  --night: #020706;
  --deep: #07110e;
  --surface: #0a1511;
  --paper: #eef5ed;
  --muted: #a9b5ad;
  --dim: #718078;
  --line: rgba(220, 242, 226, .15);
  --line-bright: rgba(220, 242, 226, .32);
  --acid: #aaff67;
  --blue: #75c9ff;
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --body: "Instrument Sans", sans-serif;
  --mono: "DM Mono", monospace;
  --page: min(1240px, calc(100vw - 72px));
  --depth: 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--night);
  color: var(--paper);
  font-family: var(--body);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 58%, rgba(28, 101, 94, .13), transparent 28rem),
    var(--night);
}

button,
input,
textarea { font: inherit; }

button,
a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: var(--night);
  background: var(--acid);
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

.page-grain {
  position: fixed;
  z-index: 90;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  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='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.capsule-nav {
  position: absolute;
  z-index: 20;
  top: 20px;
  left: 50%;
  display: grid;
  width: min(620px, calc(100vw - 42px));
  min-height: 54px;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  border: 1px solid rgba(239, 248, 239, .16);
  border-radius: 999px;
  background: rgba(3, 9, 7, .58);
  box-shadow: 0 16px 60px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(18px) saturate(1.25);
  transform: translateX(-50%);
}

.orbit-mark {
  display: grid;
  width: 40px;
  height: 40px;
  margin-left: 7px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  text-decoration: none;
}

.orbit-mark svg { width: 28px; height: 28px; overflow: visible; fill: none; stroke: var(--paper); stroke-width: 1.3; }
.orbit-mark .satellite { fill: var(--acid); stroke: none; }

.capsule-name {
  justify-self: center;
  text-align: center;
  text-decoration: none;
}

.capsule-name span {
  display: block;
  font: 600 14px/1 var(--display);
  letter-spacing: -.02em;
}

.capsule-name small {
  display: block;
  margin-top: 4px;
  color: var(--dim);
  font: 500 7px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.capsule-cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  margin-right: 7px;
  padding: 0 15px;
  border-radius: 999px;
  color: #0a1109;
  background: var(--paper);
  text-decoration: none;
  font: 600 11px/1 var(--body);
  transition: color .2s ease, background .2s ease;
}

.capsule-cta:hover { background: var(--acid); }

.orbit-hero {
  position: relative;
  display: grid;
  min-height: 900px;
  height: min(100svh, 980px);
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  background: #020504;
}

.hero-reel,
.hero-wash,
.hero-fade,
.hero-orbit {
  position: absolute;
  inset: 0;
}

.hero-reel {
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
}

.hero-wash {
  z-index: -3;
  background:
    radial-gradient(circle at 50% 45%, transparent 0 17%, rgba(1, 5, 4, .14) 46%, rgba(1, 4, 3, .68) 100%),
    linear-gradient(180deg, rgba(0, 3, 2, .7), rgba(0, 3, 2, .12) 28%, rgba(0, 3, 2, .25) 65%, rgba(1, 7, 5, .97) 100%),
    linear-gradient(90deg, rgba(0, 5, 3, .28), transparent 30% 70%, rgba(0, 5, 3, .28));
}

.hero-orbit { z-index: -2; pointer-events: none; }

.orbit-line {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(780px, 67vw);
  aspect-ratio: 2.7 / 1;
  border: 1px solid rgba(196, 243, 222, .12);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.orbit-line-b {
  width: min(1020px, 82vw);
  border-color: rgba(122, 207, 255, .08);
  transform: translate(-50%, -50%) rotate(17deg);
}

.orbit-pulse {
  position: absolute;
  top: calc(45% - 54px);
  left: calc(50% + min(33vw, 385px));
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 8px rgba(170,255,103,.09), 0 0 32px rgba(170,255,103,.55);
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(980px, calc(100vw - 92px));
  margin-top: -26px;
  text-align: center;
}

.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -110px -90px -90px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 5, 3, .68), rgba(0, 5, 3, .38) 46%, transparent 74%);
  filter: blur(10px);
}

.eyebrow {
  margin: 0;
  color: rgba(231, 242, 233, .68);
  font: 500 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 12px rgba(170,255,103,.72);
  vertical-align: 1px;
}

.hero-copy h1 {
  max-width: 900px;
  margin: 23px auto 0;
  font: 560 clamp(58px, 7vw, 108px)/.88 var(--display);
  letter-spacing: -.068em;
  text-wrap: balance;
  text-shadow: 0 3px 28px rgba(0, 0, 0, .78), 0 1px 2px rgba(0, 0, 0, .9);
}

.hero-copy h1 em {
  display: block;
  color: var(--acid);
  font-style: normal;
  font-variation-settings: "wdth" 88;
  text-shadow: 0 0 44px rgba(123, 255, 125, .12);
}

.hero-summary {
  margin: 24px auto 0;
  color: rgba(231, 239, 233, .75);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .92);
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 33px;
}

.primary-action {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 0 19px 0 22px;
  border: 1px solid var(--acid);
  border-radius: 2px;
  color: #071006;
  background: var(--acid);
  cursor: pointer;
  text-decoration: none;
  font: 600 11px/1 var(--body);
  transition: box-shadow .25s ease, transform .25s ease;
}

.primary-action:hover { box-shadow: 0 10px 36px rgba(133, 255, 105, .19); transform: translateY(-2px); }

.quiet-action {
  color: rgba(240, 246, 240, .8);
  font-size: 12px;
  text-decoration: none;
}

.quiet-action span { margin-left: 8px; color: var(--acid); }
.quiet-action:hover { color: var(--paper); }

.reel-tools {
  position: absolute;
  z-index: 5;
  right: 24px;
  bottom: 112px;
  display: flex;
  gap: 7px;
}

.utility-button {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(236, 246, 237, .18);
  border-radius: 2px;
  color: rgba(235, 245, 237, .7);
  background: rgba(2, 7, 5, .55);
  cursor: pointer;
  backdrop-filter: blur(12px);
  font: 400 8px/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.utility-button:hover { color: var(--paper); border-color: rgba(170,255,103,.55); }
.control-symbol { color: var(--acid); }

.proof-dock {
  position: absolute;
  z-index: 4;
  bottom: 23px;
  left: 50%;
  display: grid;
  width: var(--page);
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(229, 244, 233, .17);
  border-bottom: 1px solid rgba(229, 244, 233, .12);
  transform: translateX(-50%);
}

.proof-dock a {
  display: grid;
  min-height: 68px;
  grid-template-columns: 32px 1fr;
  gap: 11px;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid rgba(229, 244, 233, .12);
  text-decoration: none;
  transition: background .2s ease;
}

.proof-dock a:last-child { border-right: 0; }
.proof-dock a:hover { background: rgba(170, 255, 103, .045); }

.proof-number {
  color: var(--acid);
  font: 400 8px/1 var(--mono);
}

.proof-dock strong,
.proof-dock small { display: block; }
.proof-dock strong { font: 540 13px/1 var(--display); letter-spacing: -.01em; }
.proof-dock small { margin-top: 6px; color: rgba(224, 237, 226, .48); font: 400 7px/1 var(--mono); text-transform: uppercase; }

.hero-fade {
  z-index: 2;
  top: auto;
  height: 190px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--night));
}

.selected-work {
  position: relative;
  z-index: 3;
  width: var(--page);
  margin: 0 auto;
  padding: 170px 0 150px;
}

.depth-field {
  position: absolute;
  z-index: -1;
  top: -190px;
  left: 50%;
  width: 100vw;
  height: 610px;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}

.depth-mist {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 52% 25%, rgba(39, 150, 134, .19), transparent 37%),
    radial-gradient(ellipse at 28% 70%, rgba(62, 111, 167, .09), transparent 27%);
  filter: blur(14px);
  opacity: calc(.7 - var(--depth) * .22);
  transform: translate3d(0, calc(var(--depth) * -10px), 0);
}

.depth-ring {
  position: absolute;
  left: 50%;
  border: 1px solid rgba(155, 231, 203, .1);
  border-radius: 50%;
  transform-origin: center;
}

.depth-ring-back {
  top: 34px;
  width: 980px;
  height: 270px;
  transform: translate3d(-50%, calc(var(--depth) * -10px), 0) rotate(-10deg);
}

.depth-ring-front {
  top: 90px;
  width: 1240px;
  height: 330px;
  border-color: rgba(118, 202, 255, .075);
  transform: translate3d(-50%, calc(var(--depth) * -24px), 0) rotate(13deg);
}

.depth-star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 22px rgba(170,255,103,.8);
}

.depth-star-a { top: 121px; left: 24%; transform: translateY(calc(var(--depth) * -18px)); }
.depth-star-b { top: 245px; right: 17%; background: var(--blue); transform: translateY(calc(var(--depth) * -34px)); }

.work-intro {
  display: grid;
  grid-template-columns: .72fr 1.48fr .8fr;
  gap: 44px;
  align-items: end;
  margin-bottom: 82px;
}

.work-intro h2,
.contact h2 {
  margin: 0;
  font: 560 clamp(48px, 5.2vw, 78px)/.91 var(--display);
  letter-spacing: -.055em;
}

.work-intro > p:last-child {
  max-width: 28ch;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.project {
  position: relative;
  scroll-margin-top: 40px;
}

.project-alex {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(310px, .52fr);
  gap: 0 45px;
  padding: 30px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(14, 29, 24, .93), rgba(5, 11, 9, .86));
  box-shadow: 0 50px 120px rgba(0, 0, 0, .28);
  transform: translate3d(0, calc((1 - var(--depth)) * 18px), 0);
}

.project-heading { position: relative; }
.project-alex .project-heading { grid-column: 1 / -1; display: grid; grid-template-columns: 1.48fr .52fr; gap: 45px; align-items: end; margin-bottom: 24px; }

.project-status {
  margin: 0 0 12px;
  color: var(--blue);
  font: 500 8px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.project h3 {
  margin: 0;
  font: 560 clamp(31px, 3.5vw, 50px)/.97 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.project-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: #000;
}

.project-media img,
.project-media iframe,
.project-media video,
.project > iframe,
.project > video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  object-fit: contain;
  background: #000;
}

.project-media img { object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.project-media:hover img { transform: scale(1.018); filter: brightness(.78) saturate(.92); }

.media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,.55)); }

.play-chip {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.28);
  color: var(--paper);
  background: rgba(2,6,5,.74);
  backdrop-filter: blur(10px);
  font: 400 8px/1 var(--mono);
  text-transform: uppercase;
}

.play-chip b { color: var(--acid); font-size: 9px; }

.project-detail { align-self: start; }
.project-detail > p:not(.disclosure) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.project-detail dl { margin: 27px 0 0; border-top: 1px solid var(--line); }
.project-detail dl div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.project-detail dt { color: var(--dim); font: 400 7px/1.5 var(--mono); text-transform: uppercase; }
.project-detail dd { margin: 0; color: #c7d3ca; font-size: 11px; line-height: 1.5; }

.project-detail blockquote {
  margin: 30px 0 0;
  padding: 20px 0 0 20px;
  border-top: 1px solid var(--line);
  border-left: 2px solid var(--acid);
  color: #e8f0e9;
  font: 500 17px/1.45 var(--display);
  letter-spacing: -.015em;
}

.project-detail cite {
  display: block;
  margin-top: 13px;
  color: var(--dim);
  font: 400 7px/1 var(--mono);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px 24px;
  margin-top: 118px;
}

.project-pair .project-heading { min-height: 126px; padding-right: 30px; }
.project-pair .project-detail { display: grid; grid-template-columns: .84fr 1.16fr; gap: 28px; padding-top: 23px; }
.project-pair .project-detail dl { margin-top: 0; }

.disclosure {
  grid-column: 1 / -1;
  margin: -12px 0 0 !important;
  color: var(--dim) !important;
  font: 400 8px/1.5 var(--mono) !important;
  text-transform: uppercase;
}

.contact {
  position: relative;
  display: grid;
  width: var(--page);
  margin: 0 auto;
  grid-template-columns: .8fr 1.2fr;
  gap: 110px;
  padding: 135px 0 125px;
  border-top: 1px solid var(--line);
}

.contact-copy > p:not(.eyebrow) { max-width: 44ch; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.contact h2 { margin-top: 22px; }

.working-terms { margin: 42px 0 0; border-top: 1px solid var(--line); }
.working-terms div { display: grid; grid-template-columns: 95px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.working-terms dt { color: var(--dim); font: 400 8px/1.5 var(--mono); text-transform: uppercase; }
.working-terms dd { margin: 0; color: #c1cec4; font-size: 12px; }

.contact-form { display: grid; gap: 22px; padding-top: 5px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 8px; color: var(--dim); font: 400 8px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-bright);
  border-radius: 0;
  outline: 0;
  color: var(--paper);
  background: rgba(235, 246, 238, .025);
  text-transform: none;
  font: 400 14px/1.45 var(--body);
}
.contact-form input { height: 47px; padding: 0 11px; }
.contact-form textarea { padding: 11px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--acid); background: rgba(170,255,103,.035); }
.form-actions { display: flex; align-items: center; gap: 20px; }
.form-actions a { color: var(--muted); font-size: 11px; text-underline-offset: 4px; }
.form-state { margin: -9px 0 0; color: var(--dim); font: 400 7px/1 var(--mono); text-transform: uppercase; }

.human-signoff {
  display: grid;
  width: var(--page);
  margin: 0 auto 110px;
  grid-template-columns: 110px minmax(0, 480px);
  gap: 28px;
  align-items: center;
}

.human-signoff img { display: block; width: 110px; aspect-ratio: 1; object-fit: cover; filter: saturate(.75) contrast(1.04); }
.human-signoff p:not(.eyebrow) { margin: 14px 0 0; color: #c9d4cb; font: 500 18px/1.45 var(--display); letter-spacing: -.018em; }
.human-signoff small { display: block; margin-top: 13px; color: var(--dim); font: 400 8px/1 var(--mono); text-transform: uppercase; }

.site-footer {
  display: grid;
  width: var(--page);
  min-height: 96px;
  margin: 0 auto;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  border-top: 1px solid var(--line);
}

.footer-name { font: 600 18px/1 var(--display); text-decoration: none; }
.site-footer p { margin: 0; color: var(--dim); font: 400 8px/1 var(--mono); text-transform: uppercase; }
.site-footer nav { display: flex; justify-self: end; gap: 20px; }
.site-footer nav a { color: var(--muted); font-size: 11px; text-decoration: none; }
.site-footer nav a:hover { color: var(--acid); }

.reel-dialog {
  width: min(1180px, calc(100vw - 48px));
  padding: 0;
  border: 1px solid var(--line-bright);
  color: var(--paper);
  background: #020504;
  box-shadow: 0 60px 180px rgba(0,0,0,.72);
}

.reel-dialog::backdrop { background: rgba(0, 4, 2, .88); backdrop-filter: blur(15px); }
.dialog-bar { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--line); }
.dialog-bar p { margin: 0; color: var(--muted); font: 400 8px/1 var(--mono); text-transform: uppercase; }
.dialog-bar button { padding: 8px; border: 0; color: var(--paper); background: transparent; cursor: pointer; font: 400 9px/1 var(--mono); text-transform: uppercase; }
.reel-dialog video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }

@media (max-width: 920px) {
  :root { --page: calc(100vw - 36px); }
  .orbit-hero { min-height: 820px; }
  .hero-copy { width: calc(100vw - 40px); }
  .proof-dock { grid-template-columns: 1fr; bottom: 18px; }
  .proof-dock a { min-height: 42px; border-right: 0; border-bottom: 1px solid rgba(229,244,233,.1); }
  .proof-dock a:last-child { border-bottom: 0; }
  .reel-tools { bottom: 166px; }
  .work-intro { grid-template-columns: 1fr; gap: 18px; }
  .project-alex { grid-template-columns: 1fr; gap: 28px; }
  .project-alex .project-heading { grid-column: 1; display: block; }
  .project-pair { grid-template-columns: 1fr; }
  .project-pair .project-heading { min-height: 0; margin-bottom: 24px; }
  .contact { grid-template-columns: 1fr; gap: 60px; }
}

@media (max-width: 600px) {
  .capsule-nav { grid-template-columns: 48px 1fr auto; }
  .capsule-name small { display: none; }
  .capsule-cta { min-height: 36px; padding-inline: 12px; }
  .orbit-hero { min-height: 780px; }
  .hero-copy { margin-top: -80px; }
  .hero-copy h1 { font-size: clamp(48px, 14vw, 70px); }
  .hero-summary { max-width: 32ch; }
  .hero-actions { flex-direction: column; gap: 16px; }
  .reel-tools { right: 18px; left: 18px; justify-content: center; }
  .selected-work { padding-top: 130px; }
  .project-alex { padding: 18px; }
  .project-pair .project-detail { grid-template-columns: 1fr; }
  .disclosure { grid-column: 1; }
  .field-pair { grid-template-columns: 1fr; }
  .form-actions { align-items: flex-start; flex-direction: column; }
  .human-signoff { grid-template-columns: 72px 1fr; }
  .human-signoff img { width: 72px; }
  .site-footer { grid-template-columns: 1fr; gap: 13px; padding: 26px 0; }
  .site-footer nav { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .project-alex,
  .depth-mist,
  .depth-ring,
  .depth-star { transform: none !important; }
}

/* Astral Relic pass */
:root {
  --night: #030609;
  --deep: #07131b;
  --surface: #0a1518;
  --paper: #e9ece7;
  --muted: #a4afad;
  --dim: #748280;
  --line: rgba(219, 236, 232, .14);
  --line-bright: rgba(219, 236, 232, .3);
  --acid: #83d89b;
  --blue: #55c8d6;
  --display: "Instrument Sans", sans-serif;
}

body {
  background-color: var(--night);
  background-image:
    linear-gradient(180deg, rgba(3, 6, 9, .82), rgba(3, 6, 9, .38) 42%, rgba(3, 6, 9, .76)),
    url("assets/orbit-nebula-1600.webp");
  background-size: auto, cover;
  background-position: center, center top;
  background-attachment: fixed, fixed;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -4%;
  pointer-events: none;
  opacity: .16;
  background-image:
    radial-gradient(circle, rgba(233, 236, 231, .9) 0 .7px, transparent 1.2px),
    radial-gradient(circle, rgba(85, 200, 214, .78) 0 .8px, transparent 1.35px),
    radial-gradient(circle, rgba(196, 226, 220, .62) 0 .55px, transparent 1px);
  background-position: 17px 23px, 71px 97px, 149px 61px;
  background-size: 127px 127px, 211px 211px, 337px 337px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 84%, transparent);
  transform: scale(1.03);
}

body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(ellipse at 17% 65%, rgba(24, 145, 101, .42), transparent 31%),
    radial-gradient(ellipse at 82% 46%, rgba(34, 139, 190, .4), transparent 33%),
    radial-gradient(ellipse at 49% 82%, rgba(38, 152, 143, .2), transparent 38%);
  filter: blur(34px) saturate(1.08);
  transform: scale(1.04);
}

.page-grain {
  position: fixed;
  z-index: 90;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

.capsule-nav {
  position: absolute;
  z-index: 20;
  border-color: rgba(225, 238, 234, .19);
  background: rgba(3, 8, 10, .68);
}

.orbit-mark .satellite { fill: var(--blue); }

.capsule-cta {
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

.orbit-hero {
  height: auto;
  min-height: clamp(720px, 100dvh, 900px);
  background: transparent;
}

.hero-reel {
  object-fit: cover;
  object-position: center;
  transform: none;
  filter: saturate(.9) contrast(1.04) brightness(.78);
  opacity: .94;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 69%, rgba(0, 0, 0, .9) 78%, rgba(0, 0, 0, .32) 91%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 69%, rgba(0, 0, 0, .9) 78%, rgba(0, 0, 0, .32) 91%, transparent 100%);
}

.hero-wash {
  background:
    radial-gradient(circle at 50% 45%, transparent 0 15%, rgba(1, 5, 7, .12) 41%, rgba(1, 4, 6, .68) 91%),
    linear-gradient(180deg, rgba(1, 4, 6, .62), rgba(1, 4, 6, .06) 32%, rgba(1, 5, 7, .14) 61%, rgba(3, 6, 9, .08) 100%),
    linear-gradient(90deg, rgba(2, 7, 10, .52), transparent 28%, transparent 72%, rgba(2, 7, 10, .52));
}

.hero-relic {
  position: absolute;
  z-index: -2;
  inset: 8% 0 14%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hero-relic svg {
  width: min(690px, 58vw);
  overflow: visible;
  fill: none;
  filter: drop-shadow(0 0 26px rgba(85, 200, 214, .08));
}

.relic-orbits { stroke: rgba(85, 200, 214, .23); stroke-width: 1.2; stroke-dasharray: 190 32 52 20; }
.relic-frame { stroke: rgba(233, 236, 231, .19); stroke-width: 1; }
.relic-wings { stroke: rgba(233, 236, 231, .14); stroke-width: 1.15; }
.relic-core { stroke: rgba(131, 216, 155, .32); stroke-width: 1.35; }
.relic-core circle { fill: rgba(131, 216, 155, .12); }

.hero-copy {
  width: min(1180px, calc(100vw - 92px));
  margin-top: -64px;
}

.hero-copy::before {
  inset: -92px -70px -78px;
  background: radial-gradient(rgba(2, 7, 9, .71), rgba(2, 7, 9, .38) 48%, transparent 73%);
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: inherit;
  gap: 12px;
  color: rgba(233, 236, 231, .68);
  font: 500 10px/1 var(--body);
  letter-spacing: .08em;
}

.eyebrow .relic-notch {
  position: relative;
  display: inline-block;
  width: 23px;
  height: 9px;
  margin-right: 0;
  border-top: 1px solid rgba(85, 200, 214, .8);
  border-left: 1px solid rgba(233, 236, 231, .5);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: skewX(-28deg);
  vertical-align: 0;
}

.eyebrow .relic-notch::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -1px;
  width: 7px;
  border-bottom: 1px solid rgba(131, 216, 155, .72);
}

.hero-copy h1 {
  max-width: 1120px;
  margin-top: 25px;
  font: 600 clamp(54px, 5.3vw, 82px)/.94 var(--display);
  letter-spacing: -.061em;
}

.hero-copy h1 em {
  color: var(--paper);
  font-style: normal;
  font-variation-settings: normal;
  background: linear-gradient(100deg, #e9ece7 20%, #a8d9d7 62%, #83d89b);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.primary-action {
  border-color: rgba(233, 236, 231, .8);
  color: var(--night);
  background: var(--paper);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.primary-action:hover {
  border-color: var(--blue);
  background: #dff5f1;
  box-shadow: 0 12px 42px rgba(85, 200, 214, .15);
}

.primary-action:active,
.capsule-cta:active,
.utility-button:active { transform: translateY(1px); }

.quiet-action span,
.control-symbol { color: var(--blue); }
.reel-tools { bottom: 114px; }
.utility-button { border-color: rgba(233, 236, 231, .22); background: rgba(2, 6, 9, .68); }
.utility-button:hover { border-color: rgba(85, 200, 214, .65); }

.creator-orbit {
  position: absolute;
  z-index: 4;
  bottom: 22px;
  left: 50%;
  width: var(--page);
  overflow: hidden;
  padding: 10px 0;
  border-top: 1px solid rgba(219, 236, 232, .17);
  border-bottom: 1px solid rgba(219, 236, 232, .11);
  transform: translateX(-50%);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.creator-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: creator-drift 34s linear infinite;
}

.creator-orbit:hover .creator-track,
.creator-orbit:focus-within .creator-track { animation-play-state: paused; }

.creator-card {
  display: flex;
  min-width: 265px;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 7px 28px 7px 8px;
  border: 1px solid rgba(219, 236, 232, .14);
  color: var(--paper);
  background: linear-gradient(100deg, rgba(10, 21, 24, .82), rgba(4, 10, 13, .56));
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  text-decoration: none;
}

.creator-card:hover {
  border-color: rgba(85, 200, 214, .45);
  background: linear-gradient(100deg, rgba(13, 30, 33, .9), rgba(5, 13, 16, .68));
}

.creator-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid rgba(233, 236, 231, .22);
  border-radius: 50%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.05);
}

.creator-initial {
  color: var(--paper);
  background: linear-gradient(145deg, transparent 42%, rgba(131, 216, 155, .42)), #0a2026;
  font: 600 17px/1 var(--display);
}

.creator-emblem svg {
  width: 31px;
  fill: none;
  stroke: rgba(233, 236, 231, .8);
  stroke-width: 1.4;
}

.creator-card strong,
.creator-card small { display: block; }
.creator-card strong { font: 600 14px/1.1 var(--display); letter-spacing: -.015em; }
.creator-card small { margin-top: 5px; color: rgba(218, 228, 225, .58); font: 400 10px/1.2 var(--body); }
.creator-card small b { color: rgba(168, 217, 215, .9); font-weight: 500; }

@keyframes creator-drift {
  to { transform: translateX(calc(-50% - 7px)); }
}

.hero-fade {
  height: 320px;
  background: linear-gradient(180deg, transparent, rgba(3, 6, 9, .16) 36%, rgba(3, 6, 9, .55) 76%, transparent);
}

.selected-work { padding-top: 128px; }
.depth-field { top: -238px; height: 720px; }

.depth-mist {
  background:
    radial-gradient(at 46% 25%, rgba(26, 128, 141, .3), transparent 34%),
    radial-gradient(at 75% 57%, rgba(70, 137, 103, .23), transparent 29%),
    linear-gradient(180deg, rgba(7, 19, 27, .08), rgba(3, 6, 9, .36));
  filter: blur(14px);
  opacity: calc(.58 - var(--depth) * .12);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 68%, transparent);
}

.depth-ring { border-color: rgba(85, 200, 214, .1); }
.depth-ring-front { border-color: rgba(131, 216, 155, .075); }

.depth-relic {
  position: absolute;
  top: 112px;
  right: 7%;
  width: 330px;
  fill: none;
  stroke: rgba(233, 236, 231, .085);
  stroke-width: 1;
  transform: translate3d(0, -12px, 0) rotate(7deg);
}

.work-intro {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 30px;
  margin-bottom: 58px;
}

.section-crest {
  position: relative;
  width: 38px;
  height: 38px;
  align-self: center;
  border: 1px solid rgba(85, 200, 214, .42);
  transform: rotate(45deg);
}

.section-crest::before,
.section-crest::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(233, 236, 231, .22);
}

.section-crest::after {
  inset: 15px;
  border-color: rgba(131, 216, 155, .72);
  background: rgba(131, 216, 155, .1);
}

.work-intro h2,
.contact h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.052em;
}

.project-alex {
  grid-template-columns: minmax(0, 1.42fr) minmax(315px, .58fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "media heading"
    "media detail"
    "quote detail";
  gap: 18px 34px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(10, 25, 28, .94), rgba(4, 10, 13, .9));
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}

.project-alex .project-heading {
  grid-area: heading;
  display: block;
  margin: 2px 0 4px;
}

.project-alex .project-media,
.project-alex .project-player { grid-area: media; }

.project-alex .project-detail {
  grid-area: detail;
  display: grid;
  grid-template-rows: auto 1fr;
  align-self: stretch;
}

.project-alex .project-detail dl {
  width: 100%;
  align-self: end;
}

.project-quote {
  grid-area: quote;
  display: grid;
  align-content: center;
  min-height: 100px;
  margin: 0;
  padding: 19px 22px;
  border: 1px solid rgba(85, 200, 214, .18);
  color: #e8f0e9;
  background: linear-gradient(110deg, rgba(10, 27, 31, .78), rgba(4, 11, 14, .34));
  font: 500 16px/1.42 var(--display);
  letter-spacing: -.012em;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}

.project-quote cite {
  display: block;
  margin-top: 10px;
  color: var(--dim);
  font: 400 9px/1.3 var(--body);
  font-style: normal;
  letter-spacing: .02em;
}

.project-player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--night);
  cursor: default;
}

.project-player iframe,
.project-player video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--night);
}

.project-player video { object-fit: cover; }

.project-status {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
  color: rgba(179, 218, 218, .82);
  font: 500 11px/1.2 var(--body);
  letter-spacing: .015em;
  text-transform: none;
}

.project-status > span {
  position: relative;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), transparent);
}

.project-status > span::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(131, 216, 155, .8);
  transform: rotate(45deg);
}

.project h3 { font-family: var(--display); font-weight: 600; }
.project-pair .project-heading { min-height: 0; margin-bottom: 22px; }
.project-detail blockquote { border-left-color: var(--blue); font-family: var(--display); }
.contact { background: linear-gradient(105deg, rgba(4, 12, 15, .24), transparent 62%); }
.relic-divider {
  display: block;
  width: 74px;
  height: 15px;
  margin-bottom: 24px;
  border-top: 1px solid rgba(85, 200, 214, .72);
  border-left: 1px solid rgba(233, 236, 231, .34);
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 24px 100%);
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--blue); background: rgba(85, 200, 214, .035); }
.site-footer nav a:hover { color: var(--blue); }

@media (max-width: 920px) {
  .hero-reel { transform: scale(1); }
  .hero-relic svg { width: min(650px, 82vw); }
  .creator-card { min-width: 245px; }
  .work-intro { grid-template-columns: 42px 1fr; }
  .work-intro > p { grid-column: 2; }
  .project-alex {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "heading"
      "media"
      "detail"
      "quote";
  }
  .project-alex .project-heading,
  .project-alex .project-media,
  .project-alex .project-player,
  .project-alex .project-detail,
  .project-alex .project-quote { grid-column: 1; grid-row: auto; }
}

@media (max-width: 600px) {
  body { background-attachment: scroll; }
  .hero-copy h1 { font-size: clamp(45px, 13vw, 66px); }
  .creator-orbit { width: calc(100vw - 24px); }
  .creator-card { min-width: 228px; }
  .section-crest { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
  .creator-track { animation: none; }
  .creator-orbit { overflow-x: auto; mask-image: none; }
  .depth-relic { transform: rotate(7deg); }
}

@media (prefers-reduced-motion: no-preference) {
  body::before { animation: star-breath 7s ease-in-out infinite alternate; }
  body::after { animation: nebula-breath 14s cubic-bezier(.45, 0, .25, 1) infinite alternate; }
}

@keyframes star-breath {
  0% { opacity: .12; transform: scale(1.03); }
  52% { opacity: .22; }
  100% { opacity: .16; transform: scale(1.045); }
}

@keyframes nebula-breath {
  from { opacity: .4; transform: translate3d(-1%, 0, 0) scale(1.04); }
  to { opacity: .63; transform: translate3d(1%, -1%, 0) scale(1.08); }
}

/* Production finish */
body {
  background-image:
    linear-gradient(180deg, rgba(3, 6, 9, .78), rgba(3, 6, 9, .34) 42%, rgba(3, 6, 9, .82)),
    image-set(url("assets/orbit-nebula-1600.webp") 1x, url("assets/orbit-nebula-2560.webp") 2x);
  background-position: center, center;
  background-size: auto, cover;
}

.capsule-nav {
  width: min(590px, calc(100vw - 34px));
  min-height: 56px;
  grid-template-columns: 48px 1fr minmax(126px, auto);
  gap: 10px;
  padding: 5px;
}

.brand-crest {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  margin-left: 3px;
  border: 1px solid rgba(85, 200, 214, .42);
  clip-path: polygon(24% 0, 76% 0, 100% 24%, 82% 100%, 18% 100%, 0 76%);
  transform: rotate(-8deg);
}

.brand-crest::before,
.brand-crest::after,
.brand-crest i,
.brand-crest b {
  content: "";
  position: absolute;
  display: block;
}

.brand-crest::before { inset: 7px 9px; border-left: 1px solid var(--paper); border-right: 1px solid var(--paper); transform: skewX(-18deg); opacity: .75; }
.brand-crest::after { left: 7px; right: 7px; top: 16px; border-top: 1px solid var(--blue); }
.brand-crest i { width: 5px; height: 5px; left: 14px; top: 13px; border: 1px solid var(--acid); transform: rotate(45deg); }
.brand-crest b { width: 10px; left: 11px; bottom: 5px; border-bottom: 1px solid rgba(233, 236, 231, .46); }

.capsule-name {
  font: 600 20px/1 var(--display);
  letter-spacing: -.045em;
}

.capsule-cta {
  min-height: 40px;
  margin-right: 0;
  padding-inline: 16px;
  white-space: nowrap;
  border: 1px solid rgba(233, 236, 231, .64);
  background: rgba(233, 236, 231, .94);
}

.orbit-hero { min-height: clamp(720px, 100dvh, 900px); }

.hero-reel {
  inset: 0 0 -120px;
  height: calc(100% + 120px);
  filter: saturate(.94) contrast(1.04) brightness(.74);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 68%, rgba(0, 0, 0, .88) 77%, rgba(0, 0, 0, .42) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 68%, rgba(0, 0, 0, .88) 77%, rgba(0, 0, 0, .42) 88%, transparent 100%);
}

.hero-wash {
  bottom: -1px;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 16%, rgba(1, 5, 7, .12) 43%, rgba(1, 4, 6, .62) 94%),
    linear-gradient(180deg, rgba(1, 4, 6, .62), rgba(1, 4, 6, .05) 32%, rgba(1, 5, 7, .12) 62%, transparent 100%),
    linear-gradient(90deg, rgba(2, 7, 10, .48), transparent 28% 72%, rgba(2, 7, 10, .48));
  -webkit-mask-image: linear-gradient(#000 0 76%, transparent 100%);
  mask-image: linear-gradient(#000 0 76%, transparent 100%);
}

.hero-copy { margin-top: -46px; }
.hero-copy h1 { margin-top: 0; }
.reel-tools, .hero-fade, .reel-dialog { display: none !important; }

.creator-orbit { bottom: 18px; padding-block: 8px; }
.creator-track { gap: 12px; animation-duration: 52s; }
.creator-card { min-width: 238px; min-height: 56px; padding-right: 20px; }
.creator-card small { display: flex; justify-content: space-between; gap: 16px; }

.project-status { gap: 10px; }
.project-status::before {
  content: "";
  width: 25px;
  height: 8px;
  border-top: 1px solid var(--blue);
  border-left: 1px solid rgba(233, 236, 231, .5);
  transform: skewX(-30deg);
}
.project-status > span { display: none; }

.project-alex {
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "media heading"
    "media detail"
    "media quote";
  align-items: start;
}
.project-alex .project-media,
.project-alex .project-player { align-self: start; }
.project-alex .project-detail { align-self: start; display: block; }
.project-alex .project-detail dl { margin-top: 22px; }
.project-quote { min-height: 0; align-content: start; padding: 16px 18px; font-size: 15px; }

.form-success {
  display: none;
  align-self: start;
  padding: 24px;
  border: 1px solid rgba(85, 200, 214, .34);
  background: rgba(5, 17, 20, .78);
  color: var(--paper);
}
.contact.is-sent .form-success { display: block; }
.contact.is-sent .contact-form { display: none; }
.honeypot { position: absolute; left: -10000px; }

.human-signoff { grid-template-columns: 110px minmax(0, 560px); }
.about-name { position: relative; z-index: 0; margin: 0; font: 600 34px/1 var(--display); letter-spacing: -.045em; }
.about-crest {
  position: absolute;
  z-index: -1;
  left: -12px;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(85, 200, 214, .42);
  clip-path: polygon(50% 0, 100% 28%, 83% 100%, 17% 100%, 0 28%);
  transform: translateY(-50%) rotate(18deg);
}
.about-crest::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(131, 216, 155, .38); transform: rotate(28deg); }
.human-signoff p:not(.eyebrow) { margin-top: 16px; }
.site-footer { grid-template-columns: 1fr 1fr; }

@media (max-width: 920px) {
  .project-alex { grid-template-areas: "heading" "media" "detail" "quote"; }
}

@media (max-width: 600px) {
  body { background-image: linear-gradient(180deg, rgba(3, 6, 9, .72), rgba(3, 6, 9, .4) 45%, rgba(3, 6, 9, .85)), url("assets/orbit-nebula-1600.webp"); }
  .capsule-nav { grid-template-columns: 40px 1fr auto; gap: 5px; padding: 4px; }
  .brand-crest { width: 30px; height: 30px; }
  .capsule-name { font-size: 17px; }
  .capsule-cta { min-height: 36px; padding-inline: 11px; font-size: 10px; }
  .hero-copy { margin-top: -72px; }
  .creator-card { min-width: 218px; }
}

@media (prefers-reduced-motion: no-preference) {
  body::before { animation: star-breath 14s ease-in-out infinite alternate; }
  body::after { animation: nebula-breath 18s cubic-bezier(.45, 0, .25, 1) infinite alternate; }
}

/* Final framing and navigation polish */
.capsule-cta {
  min-height: 34px;
  padding-inline: 12px;
  border: 1px solid rgba(85, 200, 214, .42);
  border-radius: 0;
  color: var(--paper);
  background: rgba(3, 12, 15, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  font-size: 10px;
}
.capsule-cta:hover { color: #eafcff; background: rgba(21, 72, 78, .58); }
.hero-reel { object-fit: contain; object-position: center top; background: transparent; }