:root{color-scheme:dark}body{background:#13131c;color:#efedf6}header{border-color:#31303d;padding-top:23px;padding-bottom:23px}.brand{font-size:29px;letter-spacing:-1.5px}.brand span{letter-spacing:1px;color:#9f9aa9;font-size:8px}.contact{border-color:#595169;color:#e7dbf9}nav{color:#bbb5c8}.hero{padding-top:58px;min-height:780px;overflow:hidden;background:radial-gradient(ellipse at 80% 45%,#6b46862b,transparent 45%)}.hero>.eyebrow{color:#b8b0c8;position:relative;z-index:2}.dot{background:#a9e3cc;box-shadow:0 0 12px #a9e3cc55}h1{font-size:clamp(60px,6.3vw,100px);letter-spacing:-4.5px;line-height:1.06;margin-top:38px;position:relative;z-index:2;width:65%}h1 em{font-family:inherit;font-style:normal;color:#c5a7ef}.hero-bottom{position:relative;z-index:3;gap:35px;align-items:flex-start}.hero-bottom p{color:#a7a1b4;font-size:13px;line-height:1.9;max-width:450px}.round-link{background:#c3eedc;color:#202a27;border-radius:40px;padding:14px 19px;gap:17px;font-size:12px;margin-top:8px}.round-link span{width:22px;height:22px;border:0;font-size:18px}.hero-index{right:7%;bottom:30px;color:#9b8baa;z-index:3}.hero-character{position:absolute;right:1%;bottom:0;width:48%;height:650px;z-index:1;pointer-events:none}.hero-character img{width:100%;height:100%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 14px 45px #a37bc720);animation:sway 7s ease-in-out infinite}.speech{position:absolute;max-width:24ch;left:2%;top:3%;background:#c9eedf;color:#28362f;padding:16px 22px;transform:rotate(-5deg);border-radius:13px 13px 0 13px;font-size:17px;font-weight:600;z-index:2;line-height:1.3;box-shadow:0 10px 20px #0002}.work{border-color:#34303e}.section-top h2{font-size:39px}.filters button{color:#aaa3b7}.filters button.active{background:#bfa3df;color:#24202b}.project{margin-bottom:95px}.project-visual{border-radius:18px;border:1px solid #ffffff10}.project-info>.eyebrow{color:#b79ccf}.project-info h3{color:#efebf4}.project-info p{color:#aba3b7}.tags span{border-color:#45404f;color:#b4a9bf;border-radius:6px;background:#22202c}.project-actions{color:#c8e9d9}.project-actions a{border-color:#698c7e}.project-info>small{color:#847c90}.ink{background:radial-gradient(ellipse at 0 0,#4f3e67,#1d2534 80%)}.moss{background:#b8d0bd;color:#24382c}.paper{background:#ddd3c5;color:#3c3c32}.proof{background:#b9c7e0;color:#273549}.moss .tags span,.paper .tags span,.proof .tags span{color:inherit}.compact-project{border-color:#37313f}.compact-project p{color:#a99db7}.compact-project>a{color:#c3e3d5}.approach{background:#1c1b27;padding-top:60px}.about-lead{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:8%;max-width:1150px;margin:auto auto 50px}.about-lead>img{height:470px;width:100%;object-fit:contain;object-position:bottom;mask-image:linear-gradient(#000 85%,transparent);filter:drop-shadow(0 0 40px #bc8e5720)}.about-lead h2{font-size:55px;line-height:1.1;margin:25px 0}.about-lead p{color:#afa6bc;font-size:14px;line-height:1.9;max-width:410px}.about-lead .eyebrow{color:#a5c7b6}.about-lead .aside-joke{font-size:12px;color:#bf9ede;border-left:2px solid #9574b3;padding-left:15px}.steps>div{border-color:#4c405b}.steps span{color:#b3d6c5}.steps p{color:#9e93ad}footer{background:#13131c;border-top:1px solid #393141}footer h2{font-size:69px}footer em{color:#c1a0e8}.footer-bottom{border-color:#3e3448;color:#9688a3}footer>a{color:#c3e3d5;border-color:#6b8276}:focus-visible{outline-color:#c6a5ed}@keyframes sway{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-9px) rotate(.5deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-width:1100px){.hero-bottom{display:block}.hero-bottom p{max-width:400px}.round-link{display:inline-flex}.hero-character{right:-6%;width:55%;height:620px}.speech{left:18%;top:0;font-size:14px}h1{font-size:79px}.about-lead h2{font-size:46px}}@media(max-width:800px){.hero{padding-top:38px;min-height:960px}.hero>.eyebrow{font-size:8px;letter-spacing:.5px}h1{font-size:61px;width:100%;letter-spacing:-3px;margin-bottom:25px}.hero-bottom p{font-size:12px;max-width:100%}.hero-character{width:91%;height:440px;right:-3%;bottom:0}.speech{left:1%;top:16%;font-size:13px;padding:13px 17px}.hero-index{right:auto;left:6%;bottom:25px;font-size:7px;text-align:left;max-width:100px}.hero-character img{object-position:right bottom}.section-top h2{font-size:30px}.about-lead{grid-template-columns:1fr;gap:0;margin-bottom:45px}.about-lead>img{height:320px;order:2;object-position:center;mask-image:linear-gradient(#000 85%,transparent)}.about-lead>div{order:1}.about-lead h2{font-size:40px}.about-lead p{font-size:13px}.steps{gap:25px}.steps h3{font-size:17px}footer h2{font-size:45px}.project-visual{min-height:460px}.project-info h3{font-size:29px}}

.watch{display:grid;grid-template-columns:.8fr 1.4fr;align-items:center;gap:6%;padding:40px 0 70px}.watch h2{font-size:38px;line-height:1.2}.watch p{font-size:13px;line-height:1.9;color:#a99bb8}.watch a{display:inline-block;color:#b9dcca;font-size:12px;margin-top:12px;border-bottom:1px solid #698977;padding-bottom:7px}.watch video{width:100%;border:1px solid #4b3c5b;border-radius:15px;background:#13131c;box-shadow:0 15px 35px #0002}@media(max-width:800px){.watch{grid-template-columns:1fr;padding:15px 0 55px;gap:25px}.watch h2{font-size:31px}}
.work-heading{position:relative;isolation:isolate}.work-heading h2{position:relative;background:#13131c;margin:0;padding:.4em .35em .4em 0;z-index:1}.peek{position:absolute;right:-18px;top:-57px;width:135px;height:91px;overflow:hidden;transform:translateY(16px) rotate(8deg);transform-origin:bottom center;transition:transform .45s cubic-bezier(.2,.8,.3,1);pointer-events:none}.peek img{width:132px;height:auto;display:block}.work-heading:hover .peek{transform:translateY(0) rotate(3deg)}.concept-image{display:block;overflow:hidden;border:1px solid #383548;border-radius:18px;background:#191923}.concept-image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}.concept-image:hover img,.concept-image:focus-visible img{transform:scale(1.035)}.concept-card:nth-of-type(odd) .concept-image{order:2}.concept-card[hidden]{display:none!important}
@media(max-width:700px){.peek{right:4px;transform:translateY(8px) rotate(5deg);width:94px;height:75px;top:-54px}.peek img{width:96px}.concept-card:nth-of-type(odd) .concept-image{order:0}}
@media(prefers-reduced-motion:reduce){.peek,.concept-image img{transition:none}.work-heading:hover .peek,.concept-image:hover img{transform:none}}

.peek{width:91px;right:3px}.peek img{width:150px}@media(max-width:700px){.peek{width:65px}.peek img{width:106px}}
.work-heading {
  margin-top: 50px;
}
.work-heading h2 {
  background: #252432;
  border: 1px solid #494256;
  border-top-color: #77708a;
  border-radius: 9px;
  padding: .44em .55em;
  box-shadow: 0 9px 24px #0002;
}
.work-heading .peek,
.work-heading:hover .peek {
  width: 151px;
  height: auto;
  overflow: visible;
  top: auto;
  bottom: calc(100% - 13px);
  right: 12px;
  z-index: 2;
  transform: none;
}
.work-heading .peek img {
  display: block;
  width: 100%;
  height: auto;
}
.about-lead > .about-character {
  height: 410px;
  overflow: hidden;
  align-self: end;
  mask-image: linear-gradient(#000 89%,transparent);
}
.about-character img {
  width: 100%;
  height: 490px;
  display: block;
  object-fit: contain;
  object-position: top center;
  transform: translateY(33px);
}
@media (max-width: 700px) {
  .work-heading .peek,
  .work-heading:hover .peek {
    width: 116px;
    bottom: calc(100% - 10px);
  }
  .about-lead > .about-character { order: 2; height: 278px; }
  .about-character img { height: 340px; transform: translateY(27px); }
}

/* Keep copy, controls and characters in document flow on narrow screens. */
@media (max-width: 1050px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: clamp(28px, 6vw, 56px) 6% 0;
  }
  .hero > .eyebrow { grid-row: 1; font-size: 11px; letter-spacing: .08em; }
  .hero h1 {
    grid-row: 2;
    width: auto;
    font-size: clamp(39px, 8.4vw, 76px);
    letter-spacing: -.055em;
    line-height: 1.06;
    margin: 20px 0 14px;
    text-wrap: balance;
  }
  .hero-bottom { grid-row: 3; }
  .hero-bottom p { max-width: 52ch; font-size: 14px; line-height: 1.65; }
  .hero-bottom p br { display: none; }
  .hero-index { display: none; }
  .hero-character {
    position: relative;
    inset: auto;
    grid-row: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 480px);
    height: auto;
    margin: 22px 0 0 auto;
    align-items: end;
  }
  .hero-character img {
    width: 100%;
    height: auto;
    max-height: 335px;
    object-fit: contain;
    object-position: bottom right;
    animation: none;
  }
  .speech {
    position: relative;
    inset: auto;
    width: fit-content;
    max-width: min(100%, 25ch);
    margin: 0 0 4px;
    padding: 9px 13px;
    font-size: 13px;
    transform: rotate(-3deg);
  }
}
@media (max-width: 800px) {
  body > header { flex-wrap: wrap; gap: 8px 16px; padding: 12px 6%; }
  body > header nav { gap: 14px; flex-wrap: wrap; }
  body > header nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .work { padding: 32px 6% 44px; }
  .section-top { margin-bottom: 22px; }
  .work-heading { margin-top: 56px; max-width: 100%; }
  .work-heading h2 { font-size: clamp(22px, 6.2vw, 31px); line-height: 1.14; }
  .work-heading .peek, .work-heading:hover .peek {
    width: clamp(100px, 25vw, 135px);
    bottom: calc(100% - 10px);
  }
  .filters { flex-wrap: wrap; }
  .filters button { min-height: 44px; }
  .project, .project.reverse { grid-template-columns: minmax(0,1fr); gap: 16px; margin-bottom: 42px; }
  .concept-card:nth-of-type(odd) .concept-image { order: 0; }
  .project-visual { min-height: 0; padding: 18px; }
  .visual-footer { position: static; display: block; margin-top: 18px; }
  .mini-flow { gap: 6px; flex-wrap: wrap; margin: 18px 0; }
  .mini-chat, .monitor { width: 100%; padding: 16px; }
  .mini-buttons span { padding: 9px 5px; overflow-wrap: anywhere; }
  .mini-chat h3 { margin: 14px 0 10px; font-size: 20px; }
  .market-pair { margin: 18px auto; }
  .monitor-value { font-size: 24px; margin: 16px 0; }
  .project-info h3 { margin: 8px 0 10px; }
  .project-info p { line-height: 1.65; }
  .tags { margin: 14px 0; }
  .project-actions { gap: 8px 14px; margin: 14px 0; }
  .project-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .watch { min-width: 0; }
  .watch video { display: block; max-width: 100%; }
  .approach { padding: 36px 6%; }
  .about-lead h2, footer h2 { font-size: clamp(29px, 8vw, 46px); }
  .about-lead > .about-character { height: clamp(192px, 59vw, 278px); }
  .about-character img { height: calc(100% + 30px); transform: translateY(17px); }
  .steps { gap: 18px; }
  .steps h3 { margin-top: 12px; }
  .footer-bottom { flex-wrap: wrap; }
}

@media (min-width: 1051px) {
  .speech { top: -16px; }
}

.footer-about {
  max-width: 62ch;
  margin: 0 0 24px;
  color: #c4bbd0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
}
.footer-about p { margin: 0 0 12px; }
footer h2 { margin: 0 0 20px; }

.hero-manager { display: none; width: fit-content; color: #c3ebdc; font-size: .85rem; text-underline-offset: .25em; }
@media (max-width: 800px) { .hero-manager { display: block; margin-block-start: 12px; } }