@font-face{font-family:'DM Sans';src:url('/fonts/DMSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Epilogue;src:url('/fonts/Epilogue-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{--background:#f4f2f9;--foreground:#080909;font-family:'DM Sans',Arial,sans-serif;font-weight:400;color:var(--foreground);background:var(--background);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh}
.footer{position:relative;min-height:100vh;padding-top:6.54vw;isolation:isolate;overflow:hidden}
.jobs{margin-left:8.65vw;width:25vw}
.tag{display:inline-flex;align-items:center;border-radius:100px;background:#fff;padding:.39vw .61vw;font-size:.88vw;line-height:1.2;height:1.9vw;white-space:nowrap}
.headline{font-family:Epilogue,Arial,sans-serif;font-weight:900;font-size:1.66vw;line-height:1.2;letter-spacing:0}
.job-title{display:block;margin-top:1.45vw}
.footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:.93vw;margin-top:1.3vw;font-size:1.075vw;line-height:1.35}
.logo{position:absolute;left:40.33vw;top:7.7vw;width:17vw}
.wordmark{display:block;font-family:Epilogue,Arial,sans-serif;font-weight:900;font-size:4.2vw;line-height:1;letter-spacing:-.02em;text-align:center}
.contact{position:absolute;left:74.3vw;top:6.54vw}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;margin-top:1.45vw;white-space:nowrap}
.note{margin:1.05vw 0 0;font-size:.733vw;line-height:1.4;white-space:nowrap}
.socials{display:flex;align-items:center;gap:1.43vw;margin-top:1.61vw}
.socials span,.socials img{display:block;width:1.71vw;height:1.71vw}

/* ---- the toys: a picture with two plain eyeballs; main.js adds the pupils and moves them ---- */
.stage{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.toy{position:relative;width:100%;aspect-ratio:var(--ar,9/16)}
.toy img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;filter:drop-shadow(0 1.2vw 1.4vw rgba(70,50,90,.18))}
.eye{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden}
.pupil{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;margin:-31% 0 0 -31%;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#3b3742 0,#0d0b10 42%,#000 100%);will-change:transform}
.eye::after{content:"";position:absolute;left:58%;top:14%;width:20%;height:13%;border-radius:50%;background:rgba(255,255,255,.95);transform:rotate(-28deg);filter:blur(.4px)}
.eye::before{content:"";position:absolute;left:66%;top:62%;width:7%;height:7%;border-radius:50%;background:rgba(255,255,255,.8);z-index:1}
.bear{position:absolute;left:50%;bottom:5vh;height:62vh;width:auto;transform:translateX(-50%)}
.bear img{filter:drop-shadow(0 1.4vw 1.6vw rgba(70,50,90,.2))}

/* ---- immersive layer ---- */
.hero__stage{position:relative;width:30vw;flex:none}
.tiltcard,.tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;will-change:transform}
.tiltcard{}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.85;transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.blob--a{width:11vw;height:11vw;left:-5vw;top:2vw;background:#fbe0b8}
.blob--b{width:8vw;height:8vw;right:-3vw;top:12vw;background:#f7c9d6}
.blob--c{width:6vw;height:6vw;left:3vw;bottom:-2vw;background:#cfe6f7}

.grid[data-n="2"]{max-width:62vw}
.reveal{opacity:0;transform:translateY(3vw) rotate(1.5deg)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.follower{position:fixed;left:0;top:0;z-index:50;width:2.6vw;height:2.6vw;margin:-1.3vw 0 0 -1.3vw;border-radius:50%;border:2px solid rgba(8,9,9,.55);pointer-events:none;opacity:0;
  transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s;display:flex;align-items:center;justify-content:center;font-size:.8vw;color:#080909;letter-spacing:.02em}
.follower.on{opacity:1}
.follower.big{width:5.4vw;height:5.4vw;margin:-2.7vw 0 0 -2.7vw;background:rgba(255,255,255,.78);border-color:transparent}
@media(hover:none){.follower{display:none}}

.card__pic{border-radius:1.1vw;aspect-ratio:1/1.12;overflow:hidden;position:relative}
.card__pic::after{content:"";position:absolute;left:16%;right:16%;bottom:2.5%;height:7%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(70,50,90,.22),rgba(70,50,90,0) 70%);pointer-events:none}
.card__pic .toy{position:absolute;left:50%;bottom:7%;height:86%;width:auto;transform:translateX(-50%)}
.card__pic .toy img{filter:none}
/* ---- top part of the shop ---- */
html{scroll-behavior:smooth}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:1.2vw 4.2vw;background:rgba(244,242,249,.86);backdrop-filter:blur(10px)}
.brand{font-family:Epilogue,Arial,sans-serif;font-weight:900;font-size:1.6vw;color:inherit;text-decoration:none;letter-spacing:-.02em}
.menu{display:flex;gap:2.4vw;font-size:1vw}
.menu a{color:inherit;text-decoration:none}
.cart{font-size:.95vw;background:#fff;border-radius:100px;padding:.5vw 1vw}
.hero{display:flex;align-items:center;justify-content:space-between;gap:4vw;padding:3vw 8.65vw 4vw;min-height:78vh}
.hero__text{width:44vw}
.hero__h{font-size:4.1vw;line-height:1.08;margin:1.6vw 0 0}
.hero__sub{font-size:1.15vw;line-height:1.5;max-width:30vw;margin:1.6vw 0 2vw}
.btn{display:inline-flex;align-items:center;background:#080909;color:#fff;border-radius:100px;padding:.95vw 1.8vw;font-size:1vw;text-decoration:none}
.shop{padding:4vw 8.65vw}
.section-h{font-size:3vw;margin:1.2vw 0 2.4vw}
.grid{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:1.6vw}
.card[hidden]{display:none}
.card{border-radius:1.6vw;padding:.4vw .4vw 1.3vw;position:relative}
.card h3{font-family:Epilogue,Arial,sans-serif;font-weight:900;font-size:1.25vw;margin:1vw .3vw .2vw}
.card p{margin:0 .3vw;font-size:.9vw;color:#555}
.card__row{display:flex;align-items:center;justify-content:space-between;margin:.9vw .3vw 0;font-size:1.05vw}
.add{background:#080909;color:#fff;border-radius:100px;padding:.4vw 1vw;font-size:.9vw}
.made{display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;padding:2vw 8.65vw 5vw}
.made div{display:flex;flex-direction:column;gap:.5vw;font-size:1vw;line-height:1.45}
.made b{font-family:Epilogue,Arial,sans-serif;font-weight:900;font-size:1.4vw}


@media(max-width:700px){
  :root{--background:#f4f2f9}
  .footer{display:flex;flex-direction:column;gap:36px;min-height:100svh;padding:40px 24px 0}
  .logo{position:static;order:0;align-self:flex-start;width:210px;max-width:75%;margin-bottom:4px}
  .wordmark{font-size:44px;text-align:left}
  .jobs{order:1;margin:0;width:100%}
  .tag{height:30px;padding:6px 11px;font-size:14px}
  .headline{font-size:clamp(22px,6.3vw,30px);line-height:1.25}
  .job-title,.contact-links{margin-top:19px}
  .footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:20px;font-size:17px;line-height:1.4}
  .footer-nav span{display:flex;align-items:center;min-height:44px}
  .contact{position:static;order:2;width:100%}
  .contact-links{gap:4px;white-space:normal}
  .note{max-width:34ch;margin:16px 0 0;font-size:14px;line-height:1.5;white-space:normal}
  .socials{gap:18px;margin-top:20px}
  .socials span{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
  .socials img{width:30px;height:30px}
  .socials span:first-child{margin-left:-7px}
  .stage{position:relative;inset:auto;order:3;z-index:auto;flex:none;align-self:center;width:calc(100% + 48px);height:112vw;margin-top:-16px}
  .bear{height:84%;bottom:4%}
  .blob{display:none}

  .top{padding:14px 20px}
  .brand{font-size:24px}
  .menu{display:none}
  .cart{font-size:14px;padding:7px 14px}
  .hero{flex-direction:column;align-items:flex-start;gap:28px;padding:24px 24px 36px;min-height:0}
  .hero__text{width:100%}
  .hero__h{font-size:clamp(34px,10vw,48px);margin-top:18px}
  .hero__sub{font-size:16px;max-width:none;margin:16px 0 24px}
  .btn{font-size:16px;padding:14px 26px}
  .hero__stage{width:78%;align-self:center}
  .tiltcard{border-radius:24px}
  .shop{padding:36px 24px}
  .section-h{font-size:clamp(28px,8vw,40px);margin:14px 0 22px}
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .card{border-radius:1.6vw;padding:.4vw .4vw 1.3vw;position:relative}
  .card__pic{border-radius:12px}
  .card h3{font-size:16px;margin:12px 4px 2px}
  .card p{font-size:13px;margin:0 4px}
  .card__row{font-size:15px;margin:10px 4px 0}
  .add{font-size:13px;padding:6px 12px}
  .made{grid-template-columns:1fr;gap:22px;padding:12px 24px 48px}
  .made div{font-size:15px}
  .made b{font-size:20px}
}