@font-face{font-family:Manrope;src:url(assets/manrope-200.ttf) format('truetype');font-style:normal;font-weight:200;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/manrope-300.ttf) format('truetype');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Manrope;src:url(assets/manrope-400.ttf) format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#031326;--silver:#e7ebf1;--blue:#077aff;--muted:#8098b6;--gutter:clamp(24px,4.4vw,84px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--silver);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:2px solid #82c6ff;outline-offset:7px}
.skip-link{position:fixed;top:12px;left:12px;z-index:20;transform:translateY(-160%);background:#076ae3;padding:12px 20px;border-radius:8px}
.skip-link:focus{transform:none}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:760px;height:min(850px,calc(100svh - 76px));background:var(--ink)}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-scene img{position:absolute;right:0;bottom:0;display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;object-position:right bottom;mask-image:linear-gradient(90deg,transparent 0%,#000 9%,#000 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 100%);mask-composite:intersect;user-select:none}
.hero-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--ink) 0%,#03132600 12%),linear-gradient(0deg,var(--ink) 0%,#031326d9 3%,#03132600 17%)}
.growth-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.masthead{position:relative;z-index:6;display:flex;align-items:center;gap:clamp(22px,4vw,64px);padding:36px var(--gutter)}
.wordmark{display:inline-flex;gap:.24em;font-size:clamp(22px,2.25vw,36px);letter-spacing:-1px;white-space:nowrap;line-height:1.2}
.wordmark span:first-child{font-weight:400}.wordmark span:last-child{font-weight:200}
.navigation{display:flex;gap:32px;margin-left:auto;font-size:16px;font-weight:300}
.navigation a{transition:color .2s}.navigation a:hover{color:#8dc8ff}
.languages{display:flex;gap:14px;align-items:center;border-left:1px solid #1078d1;padding-left:32px;font-size:14px}
.languages button{background:none;border:0;padding:8px 0;cursor:pointer;font-weight:400}
.languages button[aria-pressed=false],.languages>span{color:#5e789c}.languages button:hover{color:#a8d4ff}
.hero-copy{position:relative;z-index:4;padding-left:var(--gutter);padding-top:clamp(96px,12vh,145px);width:43%;pointer-events:none}
.hero-copy h1{margin:0;font-size:clamp(43px,4.18vw,78px);font-weight:200;letter-spacing:-.045em;line-height:1.2;text-shadow:0 2px 22px #03132666}
.hero-copy h1 span{display:block;white-space:nowrap}
.hero-copy h1 [data-copy="headline2"]{word-spacing:.13em}
.hero-services{margin:25px 0 0;color:#b3c8de;font-weight:300;font-size:14px;line-height:1.7;max-width:440px;letter-spacing:.015em}
.hero-copy .project-link{margin-top:27px}
.hero-scene img{filter:saturate(.9)}
@media(max-width:760px){.hero-services{font-size:13px;margin-top:15px;max-width:310px}.hero-copy .project-link{margin-top:14px}.hero-scene{top:355px}.hero{height:calc(355px + 84.5vw);min-height:630px}.anton-name{top:calc(355px + 47vw)}.felix-name{top:calc(355px + 33vw)}}
.project-link{margin-top:55px;display:inline-flex;align-items:center;gap:22px;font-size:clamp(18px,1.65vw,26px);font-weight:300;padding:8px 0;pointer-events:auto}
.project-circle{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--blue);color:#fff;position:relative;transition:background .3s,box-shadow .3s,transform .3s}
.project-circle:before{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid #329dff;opacity:0;transform:scale(.82);transition:opacity .3s,transform .3s}
.project-circle svg{width:31px;height:31px;transition:transform .3s}
.project-link:hover .project-circle,.project-link:focus-visible .project-circle{background:#1186ff;box-shadow:0 0 22px #0786ff8c,0 0 50px #0087ff35;transform:translateY(-2px)}
.project-link:hover .project-circle:before,.project-link:focus-visible .project-circle:before{opacity:.8;transform:scale(1)}
.project-link:hover svg,.project-link:focus-visible svg{transform:translate(2px,-2px)}
.founder-name{position:absolute;z-index:3;font-size:16px;font-weight:300;color:#b2cce8;pointer-events:none}
.founder-name:after{content:'';display:block;margin-top:7px;height:1px;width:38px;background:#197fde}
.anton-name{left:32%;top:59%}.felix-name{right:4%;top:35%}
.hero-bottom{position:absolute;z-index:3;pointer-events:none;bottom:-1px;left:0;right:0;height:60px;background:linear-gradient(0deg,var(--ink),#03132600)}
.work-start{position:relative;display:flex;align-items:center;gap:32px;margin:0 var(--gutter);padding:0 0 28px;min-height:76px;scroll-margin-top:24px}
.work-start h2{margin:0;font-size:40px;font-weight:200;line-height:1.25;letter-spacing:-.04em}
.work-start>span{height:1px;flex:1;background:linear-gradient(90deg,#0b89ed,#0954a72e)}
@media(min-width:1700px){.hero-scene img{object-fit:contain;object-position:right bottom}.hero-copy{padding-top:120px}.hero-copy h1{font-size:4.05vw}.anton-name{left:43%;top:63%}.felix-name{top:40%}}
@media(max-width:1100px) and (min-width:761px){
  .hero{height:780px;min-height:780px}
  .masthead{padding-top:28px}
  .hero-copy{padding-top:72px;width:60%}
  .hero-copy h1{font-size:clamp(43px,4.8vw,54px)}
  .hero-scene{top:210px;height:570px}
  .hero-scene img{width:100%;height:100%;object-fit:cover;object-position:93% top}
  .hero-scene:after{background:linear-gradient(180deg,var(--ink) 0%,#03132600 16%),linear-gradient(0deg,var(--ink),#03132600 17%)}
  .project-link{margin-top:32px}
  .project-circle{width:52px;height:52px}
  .anton-name{left:12%;top:66%}.felix-name{right:4%;top:48%}
}
@media(max-width:760px){
  :root{--gutter:24px}
  .hero{height:calc(320px + 84.5vw);min-height:600px;background:var(--ink) url(assets/cobalt-atmosphere.png) 58% top/auto 670px no-repeat}
  .masthead{padding:25px var(--gutter);gap:12px}
  .wordmark{font-size:22px;letter-spacing:-.9px;gap:.24em}
  .navigation{display:none}
  .languages{margin-left:auto;padding-left:5px;gap:9px;border-left:0;font-size:12px}
  .hero-copy{width:100%;padding-top:38px}
  .hero-copy h1{font-size:clamp(32px,7.3vw,49px);line-height:1.24;letter-spacing:-.04em}
  .project-link{font-size:18px;gap:17px;margin-top:25px}
  .project-circle{width:49px;height:49px}.project-circle svg{width:25px;height:25px}
  .hero-scene{top:320px;height:84.5vw;bottom:auto}
  .hero-scene img{width:100%;height:100%;object-fit:cover;object-position:right top}
  .hero-scene:after{background:linear-gradient(180deg,var(--ink) 0%,#03132600 12%),linear-gradient(0deg,var(--ink),#03132600 16%)}
  .founder-name{font-size:13px}.founder-name:after{width:23px}
  .anton-name{left:5%;top:calc(320px + 47vw)}.felix-name{right:5%;top:calc(320px + 33vw)}
  .hero-bottom{height:40px}
  .work-start{min-height:65px;padding-bottom:20px;gap:22px}.work-start h2{font-size:31px}
}
@media(max-width:380px){
  :root{--gutter:18px}
  .wordmark{font-size:19px}
  .masthead{gap:8px}.languages{gap:7px}
  .hero-copy{padding-top:37px}.hero-copy h1{font-size:7.7vw}
  .project-link{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}.project-link:hover .project-circle,.project-link:focus-visible .project-circle,.project-link:hover svg,.project-link:focus-visible svg{transform:none}}
