:root {
  --ink: #210f16;
  --paper: #f7f0e4;
  --beige: #ddcdb8;
  --muted: #b9a99d;
  --burgundy: #641b32;
  --gold: #b78a50;
  --line: rgba(247, 240, 228, .18);
  --pad: clamp(22px, 4vw, 68px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
  cursor: default;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: var(--paper); background: var(--burgundy); }

.noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .035;
  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='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.cursor-dot {
  position: fixed; z-index: 120; width: 14px; height: 14px; border: 1px solid var(--paper);
  border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); opacity: 0;
  transition: width .25s, height .25s, background .25s, opacity .3s; mix-blend-mode: difference;
}
.cursor-dot.is-active { width: 48px; height: 48px; background: var(--paper); }

.topbar {
  position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 88px;
  padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
}
.brand { font-size: 19px; font-weight: 900; letter-spacing: -.06em; justify-self: start; }
.brand span { color: var(--gold); }
.topbar nav { display: flex; gap: 32px; }
.topbar nav a { position: relative; padding: 8px 0; }
.topbar nav a::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.topbar nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.availability { justify-self: end; display: flex; gap: 10px; align-items: center; }
.availability i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

.hero { min-height: 100svh; position: relative; overflow: hidden; display: flex; align-items: center; padding: 110px var(--pad) 48px; }
#hero-canvas, #contact-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 9vw 9vw; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 80%, transparent); }
.hero-copy { width: 100%; position: relative; z-index: 2; pointer-events: none; }
.eyebrow, .section-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.eyebrow { margin: 0 0 5vh; padding-left: 3px; }
h1 { margin: 0; font-size: clamp(58px, 11.2vw, 178px); line-height: .77; letter-spacing: -.075em; text-transform: uppercase; font-weight: 900; }
h1 span { display: block; }
h1 span:nth-child(2) { margin-left: 13vw; }
h1 span:nth-child(3) { text-align: right; }
h1 .outline { color: transparent; -webkit-text-stroke: 1.5px rgba(247,240,228,.78); }
h1 em, h2 i { color: var(--gold); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; text-transform: none; letter-spacing: -.05em; }
.hero-bottom { margin-top: 6vh; margin-left: 48%; display: flex; align-items: center; justify-content: space-between; pointer-events: auto; }
.hero-bottom > p { width: min(420px, 46vw); margin: 0; color: var(--muted); font-size: clamp(14px, 1.2vw, 18px); line-height: 1.45; }
.round-link { width: 110px; height: 110px; border: 1px solid var(--line); border-radius: 50%; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 23px; font-size: 10px; text-transform: uppercase; line-height: 1.3; transition: color .35s, background .35s; }
.round-link svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.round-link:hover { color: var(--paper); background: var(--burgundy); }
.hero-index { position: absolute; z-index: 3; left: var(--pad); bottom: 36px; font: 10px/1 monospace; letter-spacing: .1em; }
.hero-index span { color: var(--gold); margin: 0 4px; }
.scroll-cue { position: absolute; right: var(--pad); top: 49%; transform: rotate(90deg) translateX(50%); transform-origin: right center; font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.scroll-cue b { color: var(--gold); margin-left: 14px; }

.intro { padding: clamp(100px, 14vw, 210px) var(--pad); background: var(--paper); color: var(--ink); }
.section-label { display: flex; gap: 18px; margin: 0; align-items: center; }
.section-label span { color: #8b796b; }
.statement { margin: clamp(65px, 8vw, 120px) 0 0 8vw; font-size: clamp(38px, 6vw, 95px); line-height: .97; letter-spacing: -.06em; font-weight: 700; }
.statement p { margin: 0; }
.statement span { color: transparent; -webkit-text-stroke: 1.3px var(--ink); font-family: Georgia, serif; font-weight: 400; font-style: italic; }
.intro-meta { margin: 85px 0 0 48%; display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.intro-meta > p { max-width: 440px; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; color: #6e5c50; }
.disc { width: 128px; height: 128px; flex: 0 0 auto; border: 1px solid rgba(33,15,22,.2); border-radius: 50%; display: grid; place-items: center; position: relative; }
.disc span { position: absolute; font-size: 8px; letter-spacing: .2em; animation: spin 12s linear infinite; }
.disc b { font-size: 28px; }
@keyframes spin { to { transform: rotate(360deg); } }

.work { padding: clamp(100px, 11vw, 170px) var(--pad); }
.section-head { display: grid; grid-template-columns: 1fr 2fr auto; align-items: end; margin-bottom: 80px; }
.section-head h2, .contact h2 { margin: 0; font-size: clamp(58px, 9vw, 140px); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.section-count { margin: 0; font: 10px monospace; letter-spacing: .12em; color: var(--muted); }

.project { margin: 0 0 130px; position: relative; perspective: 1400px; }
.project:nth-of-type(even) { margin-left: 11vw; }
.project-number { position: absolute; top: 20px; left: -2.2vw; z-index: 4; color: var(--ink); background: var(--paper); width: 52px; height: 52px; display: grid; place-items: center; font: 11px monospace; border-radius: 50%; }
.project-art { height: min(68vw, 720px); min-height: 420px; position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .25s ease-out; }
.project-lime .project-art { background: var(--beige); color: var(--ink); }
.project-purple .project-art { background: var(--burgundy); color: var(--paper); }
.project-orange .project-art { background: var(--gold); color: var(--ink); }
.project-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(80px); font-size: clamp(85px, 19vw, 300px); line-height: .8; letter-spacing: -.1em; font-weight: 900; z-index: 2; }
.micro { position: absolute; z-index: 3; font: 9px monospace; letter-spacing: .13em; }
.micro-a { top: 24px; right: 28px; }.micro-b { bottom: 26px; right: 28px; }.micro-c { top: 26px; left: 28px; }
.orb { position: absolute; width: 44%; aspect-ratio: 1; left: 28%; top: 17%; border-radius: 45% 55% 67% 33% / 43% 39% 61% 57%; background: radial-gradient(circle at 33% 27%, #fff8ed 0, #e3cdb5 8%, #9b5a67 29%, #3d101f 55%, #180b10 76%); box-shadow: 30px 40px 70px rgba(33,15,22,.35); animation: morph 8s ease-in-out infinite; }
@keyframes morph { 50% { border-radius: 62% 38% 40% 60% / 33% 61% 39% 67%; transform: rotate(16deg) scale(1.06); } }
.orbit { position: absolute; width: 70%; height: 30%; border: 2px solid #4a1c2a; border-radius: 50%; left: 15%; top: 34%; transform: rotate(-12deg); box-shadow: 0 8px 0 rgba(255,255,255,.35); }
.portal { position: absolute; width: 58%; aspect-ratio: 1; left: 21%; top: 9%; transform: rotateX(62deg) rotateZ(-22deg); transform-style: preserve-3d; }
.portal i { position: absolute; border: 5px solid var(--gold); border-radius: 50%; box-shadow: 0 0 24px rgba(247,240,228,.22); }
.portal i:nth-child(1){inset:0}.portal i:nth-child(2){inset:7%}.portal i:nth-child(3){inset:14%}.portal i:nth-child(4){inset:21%}
.split { color: var(--paper); mix-blend-mode: difference; }
.sun { position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%; left: 28%; top: 14%; background: radial-gradient(circle at 36% 30%, #fff8e8 0 2%, #e0bd80 14%, #7a243f 48%, #260e18 72%); box-shadow: 0 0 75px rgba(100,27,50,.72); }
.terrain { position: absolute; inset: 48% -10% -25% -10%; transform: rotateX(61deg) rotateZ(-3deg); transform-style: preserve-3d; background: repeating-linear-gradient(90deg, transparent 0 44px, rgba(74,28,42,.5) 45px 47px), repeating-linear-gradient(0deg, transparent 0 44px, rgba(74,28,42,.5) 45px 47px); }
.vertical { writing-mode: vertical-rl; left: 13%; top: 45%; font-size: clamp(95px, 15vw, 240px); mix-blend-mode: overlay; }
.project-info { display: flex; align-items: end; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--line); }
.project-info h3 { margin: 0 0 5px; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: -.04em; }
.project-info p, .project-info > span { color: var(--muted); margin: 0; font-size: 11px; letter-spacing: .05em; }
.project-info > span { text-transform: uppercase; }

.capabilities { padding: 40px var(--pad) 150px; }
.section-head.compact { align-items: start; }
.service-list { margin-left: 33.33%; }
.service { display: grid; grid-template-columns: 72px 1fr minmax(250px, .7fr); gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); align-items: start; }
.service:last-child { border-bottom: 1px solid var(--line); }
.service > span { font: 10px monospace; color: var(--gold); }
.service h3 { margin: 0; font-size: clamp(22px, 2.6vw, 39px); font-weight: 500; letter-spacing: -.04em; }
.service p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

.marquee { display: flex; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; }
.marquee > div { white-space: nowrap; animation: marquee 20s linear infinite; display: flex; align-items: center; }
.marquee span { font-size: clamp(30px, 4.5vw, 72px); text-transform: uppercase; font-weight: 800; letter-spacing: -.04em; }
.marquee b { color: var(--gold); margin: 0 34px; }
@keyframes marquee { to { transform: translateX(-100%); } }

.contact { min-height: 92vh; position: relative; overflow: hidden; display: flex; align-items: center; padding: 100px var(--pad) 35px; background: var(--burgundy); color: var(--paper); }
.contact-inner { position: relative; z-index: 2; width: 100%; }
.contact h2 { margin: 70px 0 65px; max-width: 1200px; }
.contact h2 i { color: var(--gold); -webkit-text-stroke: 1px var(--gold); }
.contact-link { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--paper); border-bottom: 2px solid var(--paper); padding: 22px 0; font-size: clamp(22px, 3.2vw, 52px); letter-spacing: -.04em; }
.contact-link span { transition: transform .35s var(--ease); }
.contact-link:hover span { transform: rotate(45deg); }
.footer-row { margin-top: 90px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.footer-row div { display: flex; gap: 30px; }
.footer-row button { background: none; border: 0; padding: 8px 0; justify-self: end; cursor: pointer; text-transform: uppercase; font-size: inherit; letter-spacing: inherit; }

[data-reveal] { opacity: 0; transform: translateY(35px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 800px) {
  .topbar { grid-template-columns: 1fr auto; height: 72px; }.topbar nav { display: none; }.availability { font-size: 8px; }
  .hero { padding-top: 100px; align-items: center; }.eyebrow { margin-bottom: 8vh; max-width: 220px; line-height: 1.5; }
  h1 { font-size: clamp(56px, 18vw, 100px); line-height: .82; }.hero-copy h1 span:nth-child(2) { margin: 0; }.hero-copy h1 span:nth-child(3) { text-align: left; }
  .hero-bottom { margin: 8vh 0 0; }.hero-bottom > p { width: 62%; }.round-link { width: 88px; height: 88px; padding: 18px; }
  .scroll-cue { display: none; }.hero-index { bottom: 20px; }
  .statement { margin-left: 0; }.intro-meta { margin-left: 0; flex-direction: column; align-items: flex-start; }
  .section-head { display: block; }.section-head h2 { margin: 55px 0 25px; }.section-count { display: none; }
  .project, .project:nth-of-type(even) { margin-left: 0; margin-bottom: 80px; }.project-art { height: 120vw; min-height: 380px; }.project-number { left: 14px; top: 14px; }
  .project-info { gap: 20px; }.project-info > span { display: none; }
  .section-head.compact { margin-bottom: 45px; }.service-list { margin-left: 0; }.service { grid-template-columns: 40px 1fr; }.service p { grid-column: 2; }
  .footer-row { grid-template-columns: 1fr 1fr; gap: 30px; }.footer-row div { grid-column: 1 / -1; grid-row: 1; justify-content: space-between; }.footer-row button { grid-column: 2; }
  .contact { min-height: 90vh; }.contact h2 { margin: 65px 0; }
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor-dot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}