@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;450;500;550;600;650;700;750;800&display=swap');

:root{color-scheme:dark;--bg:#0b0b0b;--surface:#121212;--text:#f1f1f1;--muted:#a0a0a0;--subtle:#999999;--line:#2a2a2a;--green:#dfdfdf;--mono:'IBM Plex Mono',monospace;--sans:'Inter',system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}html{background:var(--bg)}
body{margin:0;background:transparent;color:var(--text);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:6px}::selection{background:var(--green);color:var(--bg)}.wrap{width:min(1240px,calc(100% - 112px));margin-inline:auto}.header{height:94px;width:min(1360px,calc(100% - 80px));margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font-size:30px;letter-spacing:-2px;font-weight:800}.wordmark span{color:var(--green)}nav{display:flex;align-items:center;gap:36px;font-size:14px;color:#bcbcbc}nav a:hover,nav a.active{color:var(--green)}.nav-contact{margin-left:22px;color:var(--text)}.nav-contact span{margin-left:15px;color:var(--green)}.menu-toggle{display:none}.skip-link{position:fixed;top:-80px;left:20px;padding:12px;background:var(--green);color:#0b0b0b;z-index:20}.skip-link:focus{top:12px}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:65px;align-items:center;padding-block:104px 89px}.eyebrow{font:500 12px/1.6 var(--mono);letter-spacing:1.7px;display:flex;align-items:center;gap:10px}.dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 12px #d9d9d944}.hero .eyebrow{color:var(--green);margin:0 0 27px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(42px,4.7vw,68px);line-height:1.08;letter-spacing:-3.4px;font-weight:550;margin-bottom:27px}h1>span{color:var(--green)}.hero-description{max-width:530px;font-size:17px;line-height:1.85;color:#aaaaaa}.hero-actions{display:flex;gap:25px;align-items:center;margin-top:33px}.button{display:inline-flex;align-items:center;gap:35px;background:var(--green);color:#1d1d1d;padding:13px 19px;font-size:14px;font-weight:600;border:1px solid var(--green);border-radius:4px;transition:background .2s,transform .2s}.button:hover{background:#f0f0f0;transform:translateY(-2px)}.text-link{font-size:14px;display:inline-flex;gap:16px;align-items:center}.text-link:hover{color:var(--green)}.hero-meta{display:flex;gap:24px;color:#8a8a8a;font:12px/1.6 var(--mono);margin-top:52px}.hero-meta span+span{padding-left:24px;border-left:1px solid #3d3d3d}.system-panel{border:1px solid #373737;border-radius:6px;background:radial-gradient(ellipse at center,#dfdfdf09,transparent 70%),#0f0f0f;overflow:hidden;min-width:0}.panel-top,.panel-bottom{display:flex;justify-content:space-between;align-items:center;font:10px/1.5 var(--mono);letter-spacing:.6px;padding:17px 19px;color:#9a9a9a}.panel-top{border-bottom:1px solid #282828}.panel-top>span:first-child{display:flex;align-items:center;gap:8px}.panel-bottom{border-top:1px solid #282828;font-size:11px;letter-spacing:0}.diagram{height:346px;position:relative;overflow:hidden;background-image:radial-gradient(#81818127 1px,transparent 1px);background-size:18px 18px}.diagram-orbit{position:absolute;left:50%;top:50%;border:1px solid #b6b6b624;border-radius:50%;transform:translate(-50%,-50%)}.orbit-one{width:225px;height:225px}.orbit-two{width:325px;height:325px;border-style:dashed}.diagram-axis{position:absolute;left:50%;top:40px;bottom:50px;border-left:1px solid #7d7d7d6b}.system-core{width:164px;height:128px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#1b1b1b;border:1px solid #808080;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 50px #dfdfdf09}.core-icon{font:25px var(--mono);color:var(--green);margin-bottom:12px}.system-core strong{font-size:15px;font-weight:500}.system-core>span:last-child{font:8px var(--mono);letter-spacing:1px;color:#a4a4a4;margin-top:8px}.system-node{position:absolute;background:#141414;border:1px solid #3c3c3c;padding:10px 12px;border-radius:4px;font:11px var(--mono);z-index:1;white-space:nowrap}.node-symbol{color:var(--green);margin-right:7px}.node-top{top:27px;left:50%;transform:translateX(-50%)}.node-left{bottom:44px;left:20px}.node-right{bottom:44px;right:20px}.orbit-point{position:absolute;width:5px;height:5px;background:var(--green);border-radius:50%;box-shadow:0 0 12px #dfdfdf80}.point-one{top:113px;left:calc(50% - 97px)}.point-two{top:153px;right:calc(50% - 161px)}.role-strip{border-block:1px solid var(--line);background:#101010}.role-strip>.wrap{display:flex;align-items:center;gap:30px;padding-block:23px}.role-strip .wrap>span{font:11px var(--mono);letter-spacing:1px;color:#8d8d8d}.role-strip strong{font-size:15px;font-weight:450}.role-strip strong span{color:#838383;margin-inline:7px}.role-strip .strip-end{margin-left:auto}.section{padding-block:88px;border-bottom:1px solid var(--line)}.section-label{color:#a8a8a8;margin-bottom:22px}h2{font-size:clamp(30px,3vw,40px);line-height:1.22;letter-spacing:-1.5px;font-weight:500;margin-bottom:22px}.about{display:grid;grid-template-columns:1fr 1.1fr;gap:90px}.about-copy p{color:#a5a5a5;line-height:1.9}.about-copy .lead{font-size:21px;color:#e7e7e7;line-height:1.6}.about-copy .text-link{margin-top:9px;color:#d5d5d5}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.section-heading h2{margin-bottom:0}.section-heading>p{font-size:14px;color:var(--subtle);margin-bottom:2px}.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.focus-card{padding:28px;background:linear-gradient(145deg,#181818,#101010);border:1px solid #2e2e2e;border-radius:5px;transition:border-color .2s,transform .2s}.focus-card:hover{border-color:#737373;transform:translateY(-3px)}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:46px;font:12px var(--mono);color:#7d7d7d}.card-icon{font:23px var(--mono);color:var(--green)}h3{font-size:20px;letter-spacing:-.5px;font-weight:500;margin-bottom:12px}.focus-card p{font-size:15px;line-height:1.85;color:#a7a7a7;min-height:139px}.focus-card ul{padding:20px 0 0;margin:23px 0 0;border-top:1px solid #303030;list-style:none;color:#cccccc;font-size:13px;line-height:1.8}.focus-card li{position:relative;padding-left:15px;margin-block:8px}.focus-card li:before{content:'·';color:var(--green);position:absolute;left:0}.approach{display:grid;grid-template-columns:1fr 1.1fr;gap:90px}.muted{color:#868686}.approach-intro{max-width:350px;color:var(--subtle);font-size:15px}.principles article{display:flex;gap:24px;padding-block:25px;border-bottom:1px solid var(--line)}.principles article:first-child{padding-top:0}.principles article:last-child{border-bottom:0;padding-bottom:0}.principles article>span{font:12px var(--mono);color:#aeaeae;margin-top:7px}.principles h3{font-size:18px}.principles p{font-size:15px;color:#a3a3a3;margin-bottom:0}.contact{padding-block:83px;display:flex;justify-content:space-between;align-items:center;gap:50px}.contact h2{font-size:42px}.contact p:last-child{font-size:15px;color:var(--subtle);max-width:450px}.contact-actions{min-width:300px}.email-link{font-size:21px;letter-spacing:-.5px;padding-bottom:16px;border-bottom:1px solid #575757;display:flex;gap:40px}.email-link span{color:var(--green)}.email-link:hover{color:var(--green)}.copy-button{background:none;border:0;color:#afafaf;font:12px var(--mono);padding:17px 0;cursor:pointer}.copy-button span{margin-left:12px}.copy-button:hover{color:var(--green)}.copy-status{display:block;font-size:12px;color:var(--green);min-height:21px}footer{padding-block:27px;display:flex;gap:25px;align-items:center;border-top:1px solid var(--line)}footer .wordmark{font-size:25px}footer p{font-size:12px;color:#8e8e8e;margin:0}footer>a:last-child{margin-left:auto;font:12px var(--mono);color:#b2b2b2}
.engineering-quote{margin:30px 0 0;padding:3px 0 3px 20px;border-left:2px solid var(--green);max-width:360px;color:var(--green);font-size:20px;line-height:1.65;letter-spacing:-.3px}
@media(min-width:1450px){.hero{padding-block:115px}.diagram{height:370px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:35px}.hero-actions{gap:18px;flex-wrap:wrap}.hero-meta{flex-direction:column;gap:6px}.hero-meta span+span{padding:0;border:0}.about,.approach{gap:45px}.focus-card{padding:23px}.focus-card p{min-height:167px}.system-node{font-size:10px;padding:9px}.node-left{left:8px}.node-right{right:8px}.strip-end{display:none}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:78px;width:calc(100% - 40px);position:relative}.wordmark{font-size:28px}.menu-toggle{display:flex;gap:18px;align-items:center;background:transparent;border:1px solid #3e3e3e;border-radius:4px;padding:8px 12px;color:var(--text);font-size:14px}nav{display:none;position:absolute;top:77px;left:0;right:0;padding:24px;background:#151515;border:1px solid var(--line);z-index:10;align-items:stretch;gap:20px;flex-direction:column}nav.open{display:flex}.nav-contact{margin-left:0}.hero{grid-template-columns:1fr;padding-block:60px;gap:40px}h1{font-size:clamp(43px,9vw,64px);letter-spacing:-2.5px}.hero-description{font-size:16px}.hero-meta{margin-top:32px;flex-direction:row;flex-wrap:wrap;gap:14px}.system-panel{max-width:480px;width:100%;margin-inline:auto}.diagram{height:330px}.node-left{left:20px}.node-right{right:20px}.hero .eyebrow{font-size:11px;letter-spacing:1px}.role-strip>.wrap{gap:15px;flex-wrap:wrap}.role-strip strong{font-size:14px}.section{padding-block:57px}.about,.approach{grid-template-columns:1fr;gap:20px}.section-heading{align-items:start;flex-direction:column;gap:5px}.section-heading>p{margin-top:10px}.focus-grid{grid-template-columns:1fr}.focus-card{padding:27px}.focus-card p{min-height:0}.card-top{margin-bottom:26px}.contact{padding-block:57px;align-items:stretch;flex-direction:column;gap:18px}.contact h2{font-size:34px}.contact-actions{min-width:0}.email-link{font-size:19px;justify-content:space-between}.principles{margin-top:12px}footer{flex-wrap:wrap;gap:16px}footer p{order:3;width:100%}.panel-top{font-size:9px}.panel-bottom{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

h1 > span { font-size: clamp(32px, 3.6vw, 50px); letter-spacing: -1.8px; }
.focus-card p { min-height: 0; }
.focus-card p:last-child { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { h1 > span { font-size: clamp(30px, 7vw, 50px); } }

/* A single place for the studio and company details. */
.role-strip .role-branding { justify-content: space-between; gap: 30px; padding-block: 27px; flex-wrap: wrap; }
.studio-brand { display: flex; align-items: center; gap: 28px; }
.embark-logo { display: block; width: 150px; height: auto; }
.studio-role { padding-left: 28px; border-left: 1px solid var(--line); }
.studio-role strong { display: block; }
.studio-role > span { display: block; margin-top: 5px; color: var(--subtle); font-size: 12px; }
.company-brand { display: flex; align-items: center; gap: 19px; }
.vaiiya-logo { display: block; width: 85px; height: auto; filter: invert(1); opacity: .8; }
.company-brand p { margin: 0; color: var(--subtle); font-size: 12px; line-height: 1.7; }
.company-brand p strong { display: block; color: var(--text); font-size: 14px; }
.company-brand p > span { display: block; }
@media (max-width: 760px) {
  .studio-brand { gap: 18px; flex-wrap: wrap; }
  .embark-logo { width: 120px; }
  .studio-role { padding-left: 18px; }
  .company-brand { padding-top: 20px; border-top: 1px solid var(--line); width: 100%; }
}
@media (max-width: 390px) { .studio-role { padding-left: 0; border-left: 0; width: 100%; } }

/* Monochrome editorial workflow. The sequence is illustrative, not telemetry. */
:root { --bg:#090909; --surface:#121212; --text:#f2f2f2; --subtle:#a0a0a0; --line:#292929; --green:#ededed; }
.hero { gap:50px; }
.hero h1 { margin-bottom:30px; }
.hero h1 > span { display:inline-block; margin-top:18px; font-size:clamp(30px,3.2vw,46px); line-height:1.2; }
.workflow-panel { border:1px solid #343434; border-radius:5px; background:#101010; min-width:0; overflow:hidden; }
.workflow-header, .workflow-footer { display:flex; align-items:center; justify-content:space-between; padding:15px 22px; font:11px/1.5 var(--mono); color:#a3a3a3; }
.workflow-header { border-bottom:1px solid #292929; letter-spacing:1px; }

.workflow-title { display:flex; align-items:center; gap:22px; padding:27px 26px 12px; }
.workflow-slash { font:64px/1 var(--mono); font-weight:400; color:#555; }
.workflow-title h2 { font-size:25px; letter-spacing:-.8px; margin:0 0 4px; }
.workflow-title p { font-size:13px; color:#999; margin:0; }
.workflow-steps { list-style:none; padding:0 26px; margin:8px 0 18px; }
.workflow-steps li { display:grid; grid-template-columns:25px minmax(0,1fr) 15px; gap:14px; padding:20px 0 17px; border-bottom:1px solid #262626; }
.workflow-steps li:last-child { border-bottom:0; }
.step-number { font:11px var(--mono); padding-top:4px; color:#858585; }
.workflow-steps h3 { font-size:17px; margin:0 0 4px; }
.workflow-steps p { font-size:13px; line-height:1.6; color:#a2a2a2; margin:0; }
.step-mark { color:#bdbdbd; font:18px var(--mono); }
.step-track { height:2px; background:#292929; overflow:hidden; margin-top:15px; }
.step-track span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#6c6c6c,#fff); transform:translateX(-101%); animation:trace 9s linear infinite; animation-delay:calc(var(--step) * 3s); }
.workflow-footer { border-top:1px solid #292929; }
.sequence-dots { display:flex; gap:6px; }
.sequence-dots i { width:4px; height:4px; border-radius:50%; background:#e0e0e0; animation:sequence 9s linear infinite; }
.sequence-dots i:nth-child(2) { animation-delay:3s; }
.sequence-dots i:nth-child(3) { animation-delay:6s; }

@keyframes trace { 0% { transform:translateX(-101%); opacity:1; } 27%,32% { transform:translateX(0); opacity:1; } 37%,100% { transform:translateX(0); opacity:.12; } }
@keyframes sequence { 0%,32% { opacity:1; } 34%,100% { opacity:.2; } }
.company-brand p { max-width:250px; }
@media(max-width:760px) { .workflow-panel { width:100%; max-width:480px; margin:auto; } .workflow-title { padding-inline:20px; } .workflow-steps { padding-inline:20px; } .hero h1 > span { font-size:clamp(28px,6.5vw,46px); } }
@media(prefers-reduced-motion:reduce) { .step-track span { animation:none; transform:none; opacity:.65; } .sequence-dots i { animation:none; opacity:.6; } }

/* Collection indicators share the exact timing and delay of their row's fill. */
.wardogs-logo { width:64px; height:64px; object-fit:contain; flex-shrink:0; border-radius:3px; }
.workflow-steps li { grid-template-columns:25px minmax(0,1fr) 57px; gap:12px; }
.step-destination { display:flex; align-items:center; justify-content:flex-end; gap:9px; align-self:center; }
.data-server { flex-shrink:0; color:#929292; }
.server-led { fill:#e47a7a; animation:collection-status 9s linear infinite; animation-delay:calc(var(--step) * 3s); }
.step-track span { background:#e47a7a; animation:collection-fill 9s linear infinite; animation-delay:calc(var(--step) * 3s); }
@keyframes collection-fill {
  0% { transform:translateX(-101%); background:#e47a7a; opacity:1; }
  26.9% { transform:translateX(0); background:#e47a7a; opacity:1; }
  27%,34% { transform:translateX(0); background:#8bd9a4; opacity:1; }
  35%,100% { transform:translateX(-101%); background:#e47a7a; opacity:1; }
}
@keyframes collection-status {
  0%,26.9% { fill:#e47a7a; }
  27%,34% { fill:#8bd9a4; }
  35%,100% { fill:#e47a7a; }
}
@media(max-width:400px) { .workflow-steps { padding-inline:14px; } .workflow-steps li { grid-template-columns:20px minmax(0,1fr) 48px; gap:8px; } .step-destination { gap:4px; } .workflow-title { gap:12px; } }
@media(prefers-reduced-motion:reduce) { .step-track span { animation:none; transform:none; background:#bdbdbd; } .server-led { animation:none; fill:#bdbdbd; } }

/* One shared cycle: receive, process, investigate, hold, then reset together. */
.workflow-header { justify-content:center; text-align:center; }

.workflow-steps li:nth-child(1) .step-track span { animation:batch-fill-1 12s linear infinite; }
.workflow-steps li:nth-child(1) .server-led { animation:batch-status-1 12s linear infinite; }
.sequence-dots i:nth-child(1) { animation:batch-dot-1 12s linear infinite; }
@keyframes batch-fill-1 {
  0%,0.001% { transform:translateX(-101%); background:#e47a7a; opacity:1; }
  24.99% { transform:translateX(0); background:#e47a7a; opacity:1; }
  25%,100% { transform:translateX(0); background:#8bd9a4; opacity:1; }
}
@keyframes batch-status-1 { 0%,24.99% { fill:#e47a7a; } 25%,100% { fill:#8bd9a4; } }
@keyframes batch-dot-1 { 0%,24.99% { opacity:.2; } 25%,100% { opacity:1; } }

.workflow-steps li:nth-child(2) .step-track span { animation:batch-fill-2 12s linear infinite; }
.workflow-steps li:nth-child(2) .server-led { animation:batch-status-2 12s linear infinite; }
.sequence-dots i:nth-child(2) { animation:batch-dot-2 12s linear infinite; }
@keyframes batch-fill-2 {
  0%,25% { transform:translateX(-101%); background:#e47a7a; opacity:1; }
  49.99% { transform:translateX(0); background:#e47a7a; opacity:1; }
  50%,100% { transform:translateX(0); background:#8bd9a4; opacity:1; }
}
@keyframes batch-status-2 { 0%,49.99% { fill:#e47a7a; } 50%,100% { fill:#8bd9a4; } }
@keyframes batch-dot-2 { 0%,49.99% { opacity:.2; } 50%,100% { opacity:1; } }

.workflow-steps li:nth-child(3) .step-track span { animation:batch-fill-3 12s linear infinite; }
.workflow-steps li:nth-child(3) .server-led { animation:batch-status-3 12s linear infinite; }
.sequence-dots i:nth-child(3) { animation:batch-dot-3 12s linear infinite; }
@keyframes batch-fill-3 {
  0%,50% { transform:translateX(-101%); background:#e47a7a; opacity:1; }
  74.99% { transform:translateX(0); background:#e47a7a; opacity:1; }
  75%,100% { transform:translateX(0); background:#8bd9a4; opacity:1; }
}
@keyframes batch-status-3 { 0%,74.99% { fill:#e47a7a; } 75%,100% { fill:#8bd9a4; } }
@keyframes batch-dot-3 { 0%,74.99% { opacity:.2; } 75%,100% { opacity:1; } }

@media(prefers-reduced-motion:reduce) { .workflow-steps li .step-track span { animation:none; transform:none; background:#bdbdbd; } .workflow-steps li .server-led { animation:none; fill:#bdbdbd; } .sequence-dots i:nth-child(n) { animation:none; opacity:.6; } }

/* Nexon owns Embark; it sits between the studio and the company I collaborate with. */
.parent-brand { display: flex; align-items: center; gap: 19px; }
.nexon-logo { display: block; width: 100px; height: auto; opacity: .85; }
.parent-brand p { margin: 0; color: var(--subtle); font-size: 12px; line-height: 1.7; max-width: 200px; }
.parent-brand p strong { display: block; color: var(--text); font-size: 14px; }
.parent-brand p > span { display: block; }
@media (max-width: 1100px) { .nexon-logo { width: 88px; } .parent-brand { gap: 14px; } }
@media (max-width: 760px) {
  .parent-brand { padding-top: 20px; border-top: 1px solid var(--line); width: 100%; }
  .parent-brand p { max-width: none; }
}

/* Below ~1090px the three-up row can no longer fit, so stack all three
   full width with dividers instead of letting one wrap off on its own. */
@media (max-width: 1090px) {
  .parent-brand, .company-brand { padding-top: 20px; border-top: 1px solid var(--line); width: 100%; }
  .parent-brand p, .company-brand p { max-width: none; }
}